/*
 * ALGIZ Learning Platform · Login Reference Exact V7
 * Visual contract: assets/img/algiz-login-reference.png (1672×941).
 * The approved composition remains untouched; only accessible, functional
 * authentication controls are layered above the exact reference.
 */
:root{
  color-scheme:light;
  --design-width:1672;
  --design-height:941;
  --scale:1;
  --offset-x:0px;
  --offset-y:0px;
  --algiz-blue:#0c63ff;
  --algiz-cyan:#09c7ee;
  --algiz-ink:#0a1020;
}

*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#f8fbff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif}
button,input,a{font:inherit}
body.algiz-login-exact{min-width:320px;min-height:100svh;color:var(--algiz-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.login-skip-link:focus{position:fixed!important;z-index:100!important;top:12px!important;left:12px!important;width:auto!important;height:auto!important;margin:0!important;padding:10px 14px!important;clip:auto!important;overflow:visible!important;border:1px solid #98c7ed!important;border-radius:10px!important;background:#fff!important;color:#075bd8!important;font-size:13px!important;font-weight:800!important;text-decoration:none!important;box-shadow:0 12px 30px rgba(5,44,86,.16)!important}

.viewport{position:fixed;inset:0;overflow:hidden;background:#f8fbff}
.stage{position:absolute;left:var(--offset-x);top:var(--offset-y);width:1672px;height:941px;transform:scale(var(--scale));transform-origin:0 0;isolation:isolate;overflow:hidden;background:#f8fbff}
.reference{position:absolute;z-index:0;inset:0;display:block;width:1672px;height:941px;object-fit:fill;user-select:none;-webkit-user-drag:none;pointer-events:none}

/* No decorative overlay is applied to the approved artwork. The eyes, glow, grid and lighting remain exactly as authored in the reference image. */

.login-overlay{position:absolute;z-index:3;inset:0;margin:0;padding:0;border:0;pointer-events:none}
.field{position:absolute;z-index:4;display:block;margin:0;border:1px solid transparent;border-radius:12px;outline:none;background:transparent;color:transparent;caret-color:transparent;padding:0 44px 0 42px;font-size:14px;line-height:1;pointer-events:auto;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease,transform .14s ease}
.field::placeholder{color:transparent}
.field:hover{box-shadow:inset 0 0 0 1px rgba(13,99,255,.08)}
.field:focus,.field.has-value{color:#526b99;caret-color:var(--algiz-blue);background:#fff;border-color:#cbd6e8;box-shadow:0 0 0 3px rgba(13,99,255,.08),0 7px 18px rgba(12,76,152,.035)}
.field:focus{transform:translateY(-1px)}
.field:focus::placeholder{color:#7185aa}
.field[aria-invalid="true"]{border-color:#c64d64;box-shadow:0 0 0 3px rgba(198,77,100,.1)}
.username{left:1124px;top:371px;width:322px;height:46px}
.password{left:1124px;top:479px;width:322px;height:47px}

.click-target{position:absolute;z-index:5;display:block;margin:0;padding:0;border:0;outline:none;border-radius:10px;background:transparent;color:transparent;pointer-events:auto;cursor:pointer;text-decoration:none}
.click-target:focus-visible{box-shadow:0 0 0 3px rgba(12,99,255,.34)}
.forgot{left:1124px;top:548px;width:118px;height:42px}
.forgot::after{content:"";position:absolute;left:0;right:5px;bottom:5px;height:1px;background:linear-gradient(90deg,#0c63ff,#09c7ee);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.forgot:hover::after,.forgot:focus-visible::after{transform:scaleX(1)}
.password-toggle{left:1403px;top:485px;width:38px;height:34px;border-radius:50%}
.toggle-eye{position:absolute;left:12px;top:11px;width:14px;height:9px;border:1.5px solid rgba(33,84,156,.42);border-radius:70% 30%;opacity:0;transition:opacity .18s ease,filter .18s ease}
.password-toggle:hover .toggle-eye,.password-toggle:focus-visible .toggle-eye{opacity:.9;filter:drop-shadow(0 0 4px rgba(0,155,255,.45))}

.submit{left:1124px;top:614px;width:322px;height:46px;border-radius:13px;overflow:hidden}
.submit::before{content:"";position:absolute;inset:0;border-radius:13px;background:rgba(255,255,255,0);box-shadow:0 0 0 0 rgba(0,193,255,0);transition:background .18s ease,box-shadow .18s ease}
.submit:hover::before,.submit:focus-visible::before{background:rgba(255,255,255,.045);box-shadow:0 10px 24px rgba(5,96,255,.18),0 0 0 1px rgba(122,235,255,.38) inset}
.submit:active{transform:translateY(1px)}
.submit[disabled]{cursor:wait;background:linear-gradient(90deg,rgba(8,91,255,.12),rgba(0,196,255,.12))}
.button-sheen{position:absolute;top:-25%;bottom:-25%;left:-38%;width:25%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);opacity:0}
.submit:hover .button-sheen{opacity:1;animation:button-sheen .68s ease forwards}
.busy-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800;letter-spacing:.11em;opacity:0;text-shadow:0 1px 8px rgba(0,57,145,.5)}
.submit[disabled] .busy-label{opacity:1;animation:busy-pulse 1.2s ease-in-out infinite}

.toast{position:fixed;left:50%;bottom:24px;z-index:20;min-width:min(420px,calc(100vw - 32px));max-width:min(620px,calc(100vw - 32px));transform:translate(-50%,18px);opacity:0;pointer-events:none;border:1px solid rgba(42,111,255,.24);border-radius:14px;background:rgba(8,20,43,.94);color:#fff;padding:13px 16px;font-size:13px;line-height:1.45;box-shadow:0 18px 50px rgba(6,20,48,.24);backdrop-filter:blur(14px);transition:opacity .18s ease,transform .18s ease}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.toast.error{border-color:rgba(255,98,98,.46)}
.toast.info{border-color:rgba(42,160,255,.34)}

.field:-webkit-autofill,.field:-webkit-autofill:hover,.field:-webkit-autofill:focus{-webkit-text-fill-color:#526b99;-webkit-box-shadow:0 0 0 1000px #fff inset,0 0 0 3px rgba(13,99,255,.08);box-shadow:0 0 0 1000px #fff inset,0 0 0 3px rgba(13,99,255,.08);border-color:#cbd6e8;transition:background-color 9999s ease-out 0s}

@keyframes button-sheen{0%{left:-38%}100%{left:115%}}
@keyframes busy-pulse{0%,100%{opacity:.72}50%{opacity:1}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
@media(forced-colors:active){.field:focus,.field.has-value{color:CanvasText;background:Canvas;border:2px solid Highlight}.submit:focus-visible,.forgot:focus-visible,.password-toggle:focus-visible{outline:3px solid Highlight}}