/* Attendance Platform, simplified animated login */
*,*::before,*::after{box-sizing:border-box}
:root{
    --bg:#f3f7fb;
    --surface:#fff;
    --ink:#0a203c;
    --muted:#657a90;
    --line:#d8e3ed;
    --blue:#126fe8;
    --cyan:#08a8be;
    --green:#16ad83;
    --navy:#071d36;
    --focus:rgba(18,111,232,.14);
}
html,body{min-height:100%;margin:0}
body{
    min-height:100dvh;
    overflow-x:hidden;
    color:var(--ink);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    background:
        radial-gradient(circle at 16% 25%,rgba(18,111,232,.09),transparent 31%),
        radial-gradient(circle at 82% 72%,rgba(8,168,190,.08),transparent 30%),
        linear-gradient(135deg,#f8fbfe 0%,#eef4f9 100%);
}
body::before{
    content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;
    background-image:linear-gradient(rgba(10,32,60,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(10,32,60,.025) 1px,transparent 1px);
    background-size:40px 40px;
    mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
.login-page{position:relative;z-index:1;min-height:100dvh;display:grid;place-items:center;padding:28px}
.login-shell{width:min(1180px,100%);min-height:620px;display:grid;grid-template-columns:minmax(0,1.16fr) minmax(390px,.84fr);overflow:hidden;border:1px solid rgba(210,223,235,.9);border-radius:30px;background:rgba(255,255,255,.72);box-shadow:0 32px 90px rgba(21,50,80,.13);backdrop-filter:blur(18px)}
.visual-side{position:relative;min-width:0;display:flex;flex-direction:column;padding:34px 42px 30px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(242,248,253,.74))}
.visual-side::after{content:"";position:absolute;width:420px;height:420px;left:50%;top:43%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(18,111,232,.11),rgba(8,168,190,.04) 48%,transparent 72%);pointer-events:none}
.brand{position:relative;z-index:3;display:flex;align-items:center;gap:12px}
.brand-icon{position:relative;display:grid;place-items:center;width:43px;height:43px;flex:0 0 43px;border-radius:13px;color:#fff;background:linear-gradient(145deg,var(--blue),var(--cyan));box-shadow:0 10px 26px rgba(18,111,232,.22)}
.brand-icon svg{width:23px;height:23px}
.brand strong{font-size:14px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.visual-content{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:22px 0 14px}
.visual-content h1{margin:18px 0 0;color:var(--ink);font-size:clamp(32px,3.5vw,44px);line-height:1.04;letter-spacing:-.04em;font-weight:850}
.visual-content h1::after{content:"";display:block;width:62px;height:3px;margin:18px auto 0;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.developer-credit{position:relative;z-index:3;color:#7a8da0;font-size:.75rem;letter-spacing:.01em;font-weight:650}
.developer-credit strong{color:#425b74;font-weight:800}
.terminal-scene{position:relative;width:min(430px,90%);height:330px;display:grid;place-items:center;perspective:1100px}
.device-halo{position:absolute;border:1px solid rgba(18,111,232,.13);border-radius:50%;animation:haloPulse 3.4s ease-in-out infinite}
.halo-one{width:310px;height:310px}
.halo-two{width:380px;height:380px;animation-delay:-1.7s}
.device-shadow{position:absolute;left:50%;bottom:20px;width:250px;height:28px;transform:translateX(-50%);border-radius:50%;background:rgba(7,29,54,.17);filter:blur(18px);animation:shadowBreathe 4s ease-in-out infinite}
.attendance-device{position:relative;width:240px;height:298px;padding:16px 17px 18px;border:1px solid rgba(8,41,74,.28);border-radius:29px;background:linear-gradient(160deg,#102d4d 0%,#0a2039 55%,#07192d 100%);box-shadow:0 30px 58px rgba(6,27,48,.28),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.25);animation:deviceFloat 4s ease-in-out infinite;transform-style:preserve-3d}
.attendance-device::before{content:"";position:absolute;inset:7px;border-radius:23px;border:1px solid rgba(255,255,255,.045);pointer-events:none}
.device-top{height:17px;display:flex;align-items:center;justify-content:space-between;padding:0 3px}
.device-sensor{width:38px;height:5px;border-radius:999px;background:#061321;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.device-status{width:7px;height:7px;border-radius:50%;background:#23d7a2;box-shadow:0 0 0 4px rgba(35,215,162,.08),0 0 13px rgba(35,215,162,.75);animation:statusBlink 2.2s ease-in-out infinite}
.device-screen{position:relative;height:140px;margin-top:8px;overflow:hidden;border:1px solid rgba(120,194,255,.2);border-radius:17px;background:linear-gradient(160deg,#0c456d 0%,#0b5d78 55%,#087f8a 100%);box-shadow:inset 0 0 24px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.18)}
.screen-grid{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px);background-size:18px 18px}
.face-frame{position:absolute;left:50%;top:50%;width:92px;height:96px;transform:translate(-50%,-50%);color:rgba(224,251,255,.9)}
.face-frame>svg{position:absolute;inset:13px;width:66px;height:70px;opacity:.78}
.corner{position:absolute;width:20px;height:20px;border-color:#8ff4f4;border-style:solid;filter:drop-shadow(0 0 5px rgba(97,238,243,.45))}
.c1{left:0;top:0;border-width:2px 0 0 2px;border-radius:7px 0 0 0}.c2{right:0;top:0;border-width:2px 2px 0 0;border-radius:0 7px 0 0}.c3{left:0;bottom:0;border-width:0 0 2px 2px;border-radius:0 0 0 7px}.c4{right:0;bottom:0;border-width:0 2px 2px 0;border-radius:0 0 7px 0}
.face-scan{position:absolute;left:4px;right:4px;top:7px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,#85f4ee,transparent);box-shadow:0 0 11px rgba(111,244,238,.95);animation:faceScan 2.5s ease-in-out infinite}
.screen-check{position:absolute;right:12px;bottom:10px;display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(255,255,255,.42);border-radius:50%;background:rgba(19,218,164,.2);color:#d5fff5;box-shadow:0 0 18px rgba(26,221,167,.22);animation:checkPop 2.5s ease-in-out infinite}
.screen-check svg{width:15px;height:15px}
.finger-zone{position:relative;width:92px;height:92px;margin:17px auto 0;display:grid;place-items:center;border:1px solid rgba(90,173,230,.18);border-radius:24px;background:linear-gradient(160deg,#081729,#0b263d);color:#37b7e5;box-shadow:inset 0 0 20px rgba(0,0,0,.34),0 9px 18px rgba(0,0,0,.2)}
.finger-zone svg{position:relative;z-index:2;width:68px;height:68px;filter:drop-shadow(0 0 6px rgba(55,183,229,.24))}
.finger-glow{position:absolute;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle,rgba(0,209,180,.20),transparent 70%);animation:fingerPulse 1.9s ease-in-out infinite}
.finger-scan{position:absolute;z-index:3;left:12px;right:12px;top:18px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,#32e0c1,transparent);box-shadow:0 0 10px rgba(50,224,193,.8);animation:fingerScan 2.2s ease-in-out infinite}
.device-base-line{position:absolute;left:50%;bottom:7px;width:38px;height:3px;transform:translateX(-50%);overflow:hidden;border-radius:999px;background:rgba(255,255,255,.08)}
.device-base-line span{display:block;width:12px;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--cyan));animation:baseLight 2s ease-in-out infinite}
.signal{position:absolute;top:47%;display:flex;gap:7px;align-items:center;opacity:.74}
.signal-left{left:7px}.signal-right{right:7px;transform:scaleX(-1)}
.signal i{display:block;border:2px solid rgba(18,111,232,.28);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(45deg)}
.signal i:nth-child(1){width:12px;height:12px;animation:signalWave 2.4s ease-in-out infinite}.signal i:nth-child(2){width:21px;height:21px;animation:signalWave 2.4s .18s ease-in-out infinite}.signal i:nth-child(3){width:30px;height:30px;animation:signalWave 2.4s .36s ease-in-out infinite}
.form-side{display:grid;place-items:center;padding:40px;background:rgba(255,255,255,.76);border-left:1px solid rgba(216,227,237,.85)}
.login-card{width:min(380px,100%)}
.login-card h2{margin:0 0 28px;color:var(--ink);font-size:31px;line-height:1.1;letter-spacing:-.03em;font-weight:850}
.auth-message{margin:0 0 18px;border:1px solid;border-radius:13px;padding:11px 13px;font-size:12px;line-height:1.45;font-weight:650}
.auth-message-status{border-color:#bfe1d6;background:#f0faf7;color:#17664e}.auth-message-error{border-color:#f0c5c5;background:#fff6f6;color:#a33232}
.field-group{margin-bottom:18px}.field-group>label{display:block;margin:0 0 8px;color:#415a73;font-size:.75rem;line-height:1.1;font-weight:800}
.input-shell{position:relative}.input-icon{position:absolute;left:14px;top:50%;display:grid;place-items:center;transform:translateY(-50%);color:#8aa0b5;pointer-events:none}.input-icon svg{width:18px;height:18px}
.input-shell input[type="email"],.input-shell input[type="password"],.input-shell input[type="text"]{display:block;width:100%;height:50px;border:1px solid #cfdce8;border-radius:14px;padding:0 46px 0 43px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600;outline:none;appearance:none;transition:border-color .16s ease,box-shadow .16s ease}
.input-shell input::placeholder{color:#9aaabc;font-weight:500}.input-shell input:hover{border-color:#b8c9d9}.input-shell input:focus{border-color:rgba(18,111,232,.66);box-shadow:0 0 0 4px var(--focus)}
.password-toggle{position:absolute;right:8px;top:50%;display:grid;place-items:center;width:34px;height:34px;transform:translateY(-50%);border:0;border-radius:9px;background:transparent;color:#748ca3;cursor:pointer}.password-toggle:hover,.password-toggle:focus-visible{outline:none;background:#f0f5fa;color:var(--blue)}.password-toggle svg{width:18px;height:18px}
.form-options{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:2px;font-size:.75rem}.remember-option{display:inline-flex;align-items:center;gap:8px;color:#5e748a;font-weight:650;cursor:pointer}.remember-option input{width:15px;height:15px;margin:0;accent-color:var(--blue)}.form-options a{color:var(--blue);font-weight:800;text-decoration:none}.form-options a:hover{text-decoration:underline}
.signin-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:51px;margin-top:24px;border:0;border-radius:14px;background:var(--navy);color:#fff;font:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 14px 28px rgba(7,29,54,.18);transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.signin-button:hover{transform:translateY(-1px);background:#0b315d;box-shadow:0 17px 32px rgba(7,29,54,.22)}.signin-button:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(18,111,232,.18),0 17px 32px rgba(7,29,54,.18)}.signin-button:disabled{cursor:wait;opacity:.76;transform:none}.button-arrow{width:18px;height:18px;transition:transform .16s ease}.signin-button:hover .button-arrow{transform:translateX(3px)}.button-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.is-hidden{display:none}
@keyframes deviceFloat{0%,100%{transform:translateY(0) rotateX(0deg)}50%{transform:translateY(-9px) rotateX(1deg)}}
@keyframes shadowBreathe{0%,100%{transform:translateX(-50%) scale(1);opacity:.17}50%{transform:translateX(-50%) scale(.86);opacity:.11}}
@keyframes haloPulse{0%,100%{transform:scale(.95);opacity:.25}50%{transform:scale(1.04);opacity:.62}}
@keyframes statusBlink{0%,100%{opacity:1}50%{opacity:.46}}
@keyframes faceScan{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(77px);opacity:1}}
@keyframes fingerScan{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(54px);opacity:1}}
@keyframes fingerPulse{0%,100%{transform:scale(.82);opacity:.34}50%{transform:scale(1.15);opacity:.9}}
@keyframes checkPop{0%,42%,100%{transform:scale(.88);opacity:.55}50%,82%{transform:scale(1);opacity:1}}
@keyframes baseLight{0%,100%{transform:translateX(-2px)}50%{transform:translateX(28px)}}
@keyframes signalWave{0%,100%{opacity:.15;transform:rotate(45deg) scale(.82)}50%{opacity:.85;transform:rotate(45deg) scale(1.05)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.login-page{padding:18px}.login-shell{min-width:0;min-height:0;grid-template-columns:minmax(0,1fr);border-radius:24px}.visual-side{padding:25px 26px 22px}.visual-content{padding:20px 0}.terminal-scene{height:280px}.attendance-device{transform:scale(.9);animation:deviceFloatMobile 4s ease-in-out infinite}.visual-content h1{font-size:clamp(31px,7vw,45px);margin-top:10px}.developer-credit{text-align:center;margin-top:8px}.form-side{border-left:0;border-top:1px solid var(--line);padding:34px 26px 38px}.login-card{width:min(440px,100%)}@keyframes deviceFloatMobile{0%,100%{transform:scale(.9) translateY(0)}50%{transform:scale(.9) translateY(-7px)}}}
@media(max-width:560px){.login-page{padding:10px}.login-shell{border-radius:20px}.visual-side{min-width:0;width:100%;padding:20px 18px}.brand strong{font-size:13px}.terminal-scene{width:100%;height:245px}.attendance-device{transform:scale(.76);animation:none}.halo-one{width:245px;height:245px}.halo-two{width:295px;height:295px}.signal{display:none}.visual-content h1{font-size:30px;line-height:1.08;margin-top:2px}.form-side{min-width:0;width:100%;padding:30px 20px 34px}.login-card{min-width:0;width:100%;max-width:440px}.login-card h2{font-size:27px;margin-bottom:24px}.form-options{align-items:flex-start;flex-direction:column;gap:12px}}
/* Height-constrained desktop/tablet landscape refinement */
@media (min-width:901px) and (max-height:820px){
  .login-page{padding:12px 24px}
  .login-shell{min-height:0;height:calc(100dvh - 24px);max-height:720px}
  .visual-side{padding:24px 38px 20px}
  .visual-content{justify-content:center;padding:6px 0 4px;gap:10px}
  .terminal-scene{height:238px;width:min(390px,86%);flex:0 0 238px}
  .attendance-device{position:absolute;left:50%;top:50%;translate:-50% -50%;scale:.72}
  .halo-one{width:245px;height:245px}
  .halo-two{width:300px;height:300px}
  .device-shadow{bottom:12px;width:205px}
  .visual-content h1{margin-top:0;font-size:clamp(31px,3.1vw,40px);line-height:1.03}
  .visual-content h1::after{margin-top:12px}
  .developer-credit{margin-top:2px;font-size:.75rem}
  .form-side{padding:34px 42px}
  .login-card h2{font-size:29px;margin-bottom:24px}
  .field-group{margin-bottom:16px}
  .signin-button{margin-top:20px}
}

/* COLOR_MOTION_REFINEMENT_START */
/* Subtle enterprise color and motion refinement */
body{
  background:
    radial-gradient(circle at 12% 20%,rgba(73,126,255,.15),transparent 30%),
    radial-gradient(circle at 88% 76%,rgba(0,194,180,.12),transparent 30%),
    radial-gradient(circle at 58% 8%,rgba(125,92,255,.07),transparent 24%),
    linear-gradient(135deg,#f8fbff 0%,#eef6fb 48%,#f7fbff 100%);
  background-size:120% 120%;
  animation:pageGradientDrift 16s ease-in-out infinite alternate;
}
.login-shell{position:relative;box-shadow:0 32px 90px rgba(21,50,80,.13),0 0 0 1px rgba(69,127,211,.04)}
.visual-side::before{
  content:"";position:absolute;inset:-25%;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 34% 34%,rgba(38,121,244,.13),transparent 25%),
    radial-gradient(circle at 67% 62%,rgba(0,197,181,.10),transparent 23%),
    radial-gradient(circle at 48% 74%,rgba(123,91,255,.07),transparent 20%);
  filter:blur(8px);animation:visualAura 11s ease-in-out infinite alternate;
}
.brand-icon{
  background:linear-gradient(135deg,#2a7ff0 0%,#635bff 48%,#08b8b1 100%);
  background-size:180% 180%;animation:brandGradient 7s ease-in-out infinite;
}
.visual-content h1{
  background:linear-gradient(105deg,#0a203c 0%,#126fe8 42%,#635bff 66%,#0ba7b6 100%);
  background-size:180% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:titleGradient 8s ease-in-out infinite alternate;
}
.visual-content h1::after{
  background:linear-gradient(90deg,#126fe8,#635bff,#08b8b1);background-size:180% 100%;
  animation:accentSlide 4.8s ease-in-out infinite;
}
.device-halo{border-color:rgba(60,126,241,.16);box-shadow:0 0 28px rgba(41,128,237,.06)}
.halo-one{animation:haloPulse 3.4s ease-in-out infinite,haloHue 9s linear infinite}
.halo-two{animation:haloPulse 3.4s -1.7s ease-in-out infinite,haloHue 11s -2s linear infinite reverse}
.attendance-device{
  box-shadow:0 30px 58px rgba(6,27,48,.28),0 0 36px rgba(30,124,232,.08),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.25);
}
.device-screen{
  background:linear-gradient(155deg,#104b78 0%,#146f89 48%,#058c90 100%);
  background-size:160% 160%;animation:screenGradient 7s ease-in-out infinite alternate;
}
.device-status{animation:statusBlink 2.2s ease-in-out infinite,statusColor 6s ease-in-out infinite}
.face-scan{background:linear-gradient(90deg,transparent,#8ef7ff,#7d8cff,#52f2c8,transparent);background-size:180% 100%;animation:faceScan 2.5s ease-in-out infinite,scanColor 5s linear infinite}
.finger-zone{box-shadow:inset 0 0 20px rgba(0,0,0,.34),0 9px 18px rgba(0,0,0,.2),0 0 24px rgba(40,152,238,.08)}
.finger-scan{background:linear-gradient(90deg,transparent,#31d8ff,#705cff,#32e0c1,transparent);background-size:180% 100%;animation:fingerScan 2.2s ease-in-out infinite,scanColor 5.5s linear infinite reverse}
.signal i{border-color:rgba(68,126,235,.34);border-left-color:transparent;border-bottom-color:transparent}
.form-side{position:relative;overflow:hidden;background:rgba(255,255,255,.80)}
.form-side::before{
  content:"";position:absolute;width:360px;height:360px;right:-190px;top:-190px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(87,100,255,.08),rgba(10,184,184,.04) 48%,transparent 72%);
  animation:formGlow 9s ease-in-out infinite alternate;
}
.login-card{position:relative;z-index:1}
.input-shell input:focus{border-color:rgba(77,104,244,.68);box-shadow:0 0 0 4px rgba(77,104,244,.10),0 9px 22px rgba(35,118,227,.06)}
.signin-button{
  position:relative;overflow:hidden;
  background:linear-gradient(110deg,#071d36 0%,#113a73 55%,#0b6f84 100%);
  background-size:160% 100%;animation:buttonBreath 7s ease-in-out infinite;
}
.signin-button::before{
  content:"";position:absolute;inset:0;transform:translateX(-130%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  animation:buttonShine 4.6s ease-in-out infinite;
}
.signin-button>*{position:relative;z-index:1}
.developer-credit strong{background:linear-gradient(90deg,#425b74,#126fe8,#0ba7b6);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes pageGradientDrift{0%{background-position:0% 0%}100%{background-position:100% 80%}}
@keyframes visualAura{0%{transform:translate3d(-2%,1%,0) scale(.96);opacity:.72}100%{transform:translate3d(5%,-3%,0) scale(1.06);opacity:1}}
@keyframes brandGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes titleGradient{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes accentSlide{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes haloHue{0%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(24deg)}100%{filter:hue-rotate(0deg)}}
@keyframes screenGradient{0%{background-position:0% 20%}100%{background-position:100% 80%}}
@keyframes statusColor{0%,100%{background:#23d7a2;box-shadow:0 0 0 4px rgba(35,215,162,.08),0 0 13px rgba(35,215,162,.75)}50%{background:#4b91ff;box-shadow:0 0 0 4px rgba(75,145,255,.08),0 0 13px rgba(75,145,255,.72)}}
@keyframes scanColor{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes formGlow{0%{transform:translate3d(0,0,0) scale(.92);opacity:.55}100%{transform:translate3d(-34px,28px,0) scale(1.08);opacity:1}}
@keyframes buttonBreath{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes buttonShine{0%,62%{transform:translateX(-130%);opacity:0}72%{opacity:1}88%,100%{transform:translateX(130%);opacity:0}}
/* COLOR_MOTION_REFINEMENT_END */

/* STABLE_MOTION_V3_START */
/* Keep movement meaningful and local. Nothing here moves the page, card, or device body. */
body{animation:none;background-size:auto}
.login-shell,.visual-side,.form-side{contain:paint}
.visual-side::before{animation:none;transform:none;opacity:.78}
.form-side::before{animation:none;transform:none;opacity:.72}
.brand-icon{animation:none}
.attendance-device{animation:none}
.device-screen{animation:none;background-position:50% 50%}
.device-shadow{animation:none;opacity:.12}

/* Color motion only, no geometry/layout motion. */
.visual-content h1{animation:titleGradientStable 11s ease-in-out infinite alternate}
.visual-content h1::after{animation:accentColorStable 6s ease-in-out infinite alternate}
.halo-one{animation:haloPulseStable 4.8s ease-in-out infinite}
.halo-two{animation:haloPulseStable 5.6s -2.4s ease-in-out infinite}
.device-status{animation:statusBlinkStable 2.8s ease-in-out infinite,statusColor 8s ease-in-out infinite}
.face-scan{animation:faceScan 2.8s ease-in-out infinite,scanColor 7s linear infinite}
.finger-scan{animation:fingerScan 2.5s ease-in-out infinite,scanColor 7.5s linear infinite reverse}
.finger-glow{animation:fingerPulseStable 2.6s ease-in-out infinite}
.screen-check{animation:checkPopStable 3.4s ease-in-out infinite}
.signal i:nth-child(1){animation:signalWaveStable 3s ease-in-out infinite}
.signal i:nth-child(2){animation:signalWaveStable 3s .25s ease-in-out infinite}
.signal i:nth-child(3){animation:signalWaveStable 3s .5s ease-in-out infinite}

/* Sign-in stays still. Shine appears only when the user interacts. */
.signin-button{animation:none;background-position:50% 50%}
.signin-button::before{animation:none;opacity:0;transform:translateX(-130%)}
.signin-button:hover::before,.signin-button:focus-visible::before{animation:buttonShineOnce .8s ease-out 1}

@keyframes titleGradientStable{from{background-position:15% 50%}to{background-position:85% 50%}}
@keyframes accentColorStable{from{background-position:10% 50%}to{background-position:90% 50%}}
@keyframes haloPulseStable{0%,100%{opacity:.20}50%{opacity:.52}}
@keyframes statusBlinkStable{0%,100%{opacity:1}50%{opacity:.62}}
@keyframes fingerPulseStable{0%,100%{opacity:.32}50%{opacity:.82}}
@keyframes checkPopStable{0%,42%,100%{opacity:.58}55%,82%{opacity:1}}
@keyframes signalWaveStable{0%,100%{opacity:.18}50%{opacity:.62}}
@keyframes buttonShineOnce{0%{transform:translateX(-130%);opacity:0}18%{opacity:1}100%{transform:translateX(130%);opacity:0}}
/* STABLE_MOTION_V3_END */


/* SOFTWARE_OWNERSHIP_AHMAD_AL_SAMSAM */
.developer-credit span{display:inline-block;margin-top:2px;font-size:.95em}.auth-ownership-credit{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:10;width:min(96vw,900px);text-align:center;color:#7a8da0;font-size:.75rem;font-weight:650;letter-spacing:.01em;pointer-events:none}.auth-ownership-credit strong{color:#425b74;font-weight:850}@media(max-width:560px){.auth-ownership-credit{position:static;transform:none;width:auto;margin:8px 16px 10px}}

.brand-copy{display:grid;gap:2px;min-width:0}.brand-copy strong{overflow:hidden;text-overflow:ellipsis}.brand-copy small{color:rgba(255,255,255,.70);font-size:.75rem;line-height:1.2;font-weight:650}

/* Automated Visual QA legibility hardening, 2026-08-29 */
.developer-credit,.developer-credit span{font-size:max(.75rem,12px)}


/* Configurable login background, single source from global Settings */
body.has-custom-login-background{background:#eaf2f8;animation:none}
body.has-custom-login-background .login-background-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--login-background-image);
  background-size:var(--login-background-fit,cover);
  background-position:var(--login-background-x,50%) var(--login-background-y,50%);
  background-repeat:no-repeat;
  transform:scale(var(--login-background-zoom,1));
  transform-origin:center center;
}
body.has-custom-login-background::before{
  content:"";position:fixed;inset:0;z-index:1;opacity:1;pointer-events:none;
  background:rgba(4,18,34,var(--login-background-overlay,.18));
  background-image:none;mask-image:none;-webkit-mask-image:none;
}
body.has-custom-login-background .login-page{position:relative;z-index:2}

/* Dynamic platform branding on login */
.brand-logo{
  display:grid;
  place-items:center;
  width:124px;
  height:54px;
  flex:0 0 124px;
  padding:2px 4px;
  border-radius:10px;
  background:rgba(255,255,255,.86);
  box-shadow:0 6px 18px rgba(7,29,54,.08);
  overflow:hidden;
}
.brand-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.brand-copy small{
  color:#40566e;
  font-size:12px;
  font-weight:800;
  text-shadow:none;
}
@media(max-width:560px){
  .brand-logo{width:104px;height:46px;flex-basis:104px}
  .brand-copy small{font-size:.75rem}
}


/* Responsive login balance and accessibility, 2026-09-20 */
.password-toggle{width:40px;height:40px;right:5px}
.remember-option{min-height:40px}
@media(max-width:560px){
  .login-page{padding:8px}
  .visual-side{padding:16px}
  .visual-content{padding:10px 0 8px}
  .terminal-scene{height:190px}
  .attendance-device{transform:none;scale:.62}
  .visual-content h1{font-size:24px;line-height:1.12}
  .form-side{padding:26px 18px 30px}
  .password-toggle,.remember-option,.form-options a{min-height:44px}
  .form-options a{display:inline-flex;align-items:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms;animation-iteration-count:1;scroll-behavior:auto}
}


/* MOBILE_LOGIN_PREMIUM_FIX_20261015 */
@media(max-width:700px){
  .login-page{
    align-items:start;
    padding:8px;
  }
  .login-shell{
    width:100%;
    min-height:0;
    border-radius:22px;
  }
  .visual-side{
    min-width:0;
    width:100%;
    padding:14px 14px 12px;
  }
  .brand{
    gap:10px;
    align-items:center;
  }
  .brand-logo{
    width:92px;
    height:42px;
    flex:0 0 92px;
    border-radius:9px;
    padding:2px 3px;
  }
  .brand-copy strong{
    font-size:13px;
    line-height:1.18;
  }
  .brand-copy small{
    margin-top:1px;
    font-size:11px;
    line-height:1.18;
  }

  .visual-content{
    flex:0 0 auto;
    display:grid;
    justify-items:center;
    align-content:start;
    padding:8px 0 2px;
  }
  .terminal-scene{
    position:relative;
    width:100%;
    height:152px;
    min-height:152px;
    max-height:152px;
    overflow:visible;
  }
  .attendance-device{
    position:absolute;
    left:50%;
    top:50%;
    margin:0;
    transform:translate(-50%,-50%) scale(.48)!important;
    transform-origin:center center;
    scale:1!important;
    animation:none!important;
  }
  .halo-one{
    width:170px;
    height:170px;
  }
  .halo-two{
    width:214px;
    height:214px;
  }
  .device-shadow{
    bottom:5px;
    width:145px;
    height:18px;
    filter:blur(12px);
  }
  .signal{display:none!important}

  .visual-content h1{
    position:relative;
    z-index:3;
    margin:8px 0 0;
    max-width:320px;
    font-size:21px;
    line-height:1.08;
    letter-spacing:-.03em;
  }
  .visual-content h1::after{
    width:48px;
    height:3px;
    margin:10px auto 0;
  }
  .developer-credit{
    margin-top:10px;
    text-align:center;
    font-size:11px!important;
    line-height:1.3;
  }
  .developer-credit span{
    font-size:11px!important;
  }

  .form-side{
    min-width:0;
    width:100%;
    padding:22px 16px 24px;
  }
  .login-card{
    width:100%;
    max-width:none;
  }
  .login-card h2{
    margin-bottom:20px;
    font-size:26px;
  }
  .field-group{
    margin-bottom:15px;
  }
  .field-group>label{
    margin-bottom:7px;
  }
  .input-shell input[type="email"],
  .input-shell input[type="password"],
  .input-shell input[type="text"]{
    height:50px;
    border-radius:14px;
    font-size:14px;
  }
  .form-options{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:0;
  }
  .remember-option,
  .form-options a{
    min-height:40px;
  }
  .form-options a{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
  }
  .signin-button{
    height:50px;
    margin-top:18px;
  }
}

@media(max-width:390px){
  .brand-logo{
    width:84px;
    height:39px;
    flex-basis:84px;
  }
  .brand-copy strong{font-size:12.5px}
  .brand-copy small{font-size:10.5px}
  .terminal-scene{
    height:142px;
    min-height:142px;
    max-height:142px;
  }
  .attendance-device{
    transform:translate(-50%,-50%) scale(.45)!important;
  }
  .visual-content h1{
    max-width:285px;
    font-size:19px;
  }
  .developer-credit,
  .developer-credit span{
    font-size:10.5px!important;
  }
  .form-side{
    padding:20px 14px 22px;
  }
  .form-options{
    font-size:11px;
  }
}