/* ==========================================================================
   Login page — liquid-glass card over a pastel desk with physics-driven
   stationery. Loaded only by index.html. Every selector is scoped under
   body.login-page and every class is lg-* so nothing leaks into (or is
   affected by) the global styles.css button/input/label rules.
   Behaviour lives in login-scene.js (desk) and index.html (auth flow).
   ========================================================================== */
body.login-page{
  --lg-ink:#141a2e; --lg-ink-2:#262d47; --lg-ink-3:#3d4562; --lg-line:#e6dfcf; --lg-danger:#c2334d;
  --lg-ease:cubic-bezier(.2,.9,.2,1); --lg-spring:cubic-bezier(.34,1.56,.64,1);
  --lg-glass-fill:linear-gradient(135deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.11) 42%, rgba(255,255,255,.25) 100%);
  --lg-glass-blur:blur(22px) saturate(2) brightness(1.06);
  margin:0; height:auto; min-height:100vh; min-height:100dvh; overflow-x:hidden; overflow-y:auto; color:var(--lg-ink); background:#f3f1fa;
}
body.login-page.lock{overflow:hidden}
body.login-page::before{content:none}
/* =====================================================================
   DESK — a soft pastel mesh (lavender · sky · mint · peach · pink · butter)
   with a faint etched grid, so glass has colour to refract.
   One fixed layer sized from the viewport (no tiling, no fixed heights).
   --u = 1% of an "effective width": the whole scene scales together.
   ===================================================================== */
body.login-page .lg-desk{
  --u:calc(min(100vw, 135vh) / 100);
  --bx:0; --by:0;
  position:fixed; inset:0; overflow:hidden; isolation:isolate;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.62) 0 1.5px, transparent 1.5px calc(var(--u)*12.5)),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.62) 0 1.5px, transparent 1.5px calc(var(--u)*12.5)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 1px, transparent 1px calc(var(--u)*2.5)),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.26) 0 1px, transparent 1px calc(var(--u)*2.5)),
    radial-gradient(ellipse 55% 50% at 50% 0%,   #fff4d2 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 50% 100%, #ffe6cf 0%, transparent 70%),
    radial-gradient(ellipse 60% 55% at 4% 6%,    #e2d8ff 0%, transparent 72%),
    radial-gradient(ellipse 60% 55% at 96% 8%,   #cde6ff 0%, transparent 72%),
    radial-gradient(ellipse 60% 55% at 3% 96%,   #d0f5e3 0%, transparent 72%),
    radial-gradient(ellipse 60% 55% at 97% 95%,  #ffd6e4 0%, transparent 72%),
    #f6f4fb;
}
/* drifting colour pools: they give the glass something living to refract */
body.login-page .lg-blob{
  position:absolute; width:55vmax; height:55vmax; margin:-27.5vmax 0 0 -27.5vmax; left:var(--bl); top:var(--bt); pointer-events:none; z-index:1;
  border-radius:50%; background:radial-gradient(circle, var(--bc) 0%, transparent 62%); opacity:.7; will-change:transform;
  translate:calc(var(--bx) * var(--bk,1) * 1px) calc(var(--by) * var(--bk,1) * 1px);
  animation:lg-blob var(--bd,30s) ease-in-out var(--bdl,0s) infinite alternate;
}
@keyframes lg-blob{from{transform:translate3d(-5%,-4%,0) scale(.92)}to{transform:translate3d(6%,5%,0) scale(1.1)}}
body.login-page .lg-lamp{ /* soft cursor-following light pool */
  position:absolute; left:0; top:0; width:80vmax; height:80vmax; margin:-40vmax 0 0 -40vmax; z-index:41; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.75) 0%, rgba(255,255,255,.28) 28%, rgba(255,255,255,0) 58%);
  mix-blend-mode:soft-light; will-change:transform; transform:translate3d(25vw,18vh,0);
}
body.login-page .lg-desk::after{ /* window lg-blinds drifting slowly */
  content:""; position:absolute; inset:-20%; z-index:42; pointer-events:none;
  background:repeating-linear-gradient(112deg, transparent 0 9vmax, rgba(255,255,255,.22) 9vmax 14vmax, transparent 14vmax 22vmax);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 25% 20%, #000 10%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 25% 20%, #000 10%, transparent 75%);
  mix-blend-mode:soft-light; opacity:.8; animation:lg-blinds 46s ease-in-out infinite alternate;
}
@keyframes lg-blinds{from{transform:translate3d(-2%,-1%,0)}to{transform:translate3d(3%,2%,0)}}

/* ---------- item plumbing ----------
   .lg-item  : positioned + moved by the JS physics (parallax, push, drag)
   .lg-float : idle drift + world-space shadow (shadow grows when lifted)
   .lg-art   : the drawn object, rotated.  direction:ltr so parts never flip in RTL. */
body.login-page .lg-item{
  position:absolute; left:var(--x); top:var(--y); z-index:var(--z,10); width:0; height:0; will-change:transform;
  animation:lg-land .95s var(--lg-ease) both; animation-delay:calc(var(--i,0) * .08s + .15s);
}
@keyframes lg-land{from{opacity:0; scale:1.4}60%{opacity:1}to{opacity:1; scale:1}}
body.login-page .lg-float{
  position:absolute; left:0; top:0; transform-origin:0 0;
  --s1:calc(var(--u)*.16) calc(var(--u)*.22) calc(var(--u)*.14) rgba(55,65,120,.36);
  --s2:calc(var(--u)*1.1) calc(var(--u)*1.6) calc(var(--u)*1.2) rgba(55,65,120,.2);
  filter:drop-shadow(var(--s1)) drop-shadow(var(--s2));
  animation:var(--anim,lg-drift-a) var(--dur,14s) ease-in-out var(--delay,0s) infinite alternate;
  transition:scale .25s var(--lg-ease);
}
body.login-page .lg-item.lift .lg-float{
  scale:1.07;
  filter:drop-shadow(calc(var(--u)*.3) calc(var(--u)*.4) calc(var(--u)*.2) rgba(55,65,120,.28)) drop-shadow(calc(var(--u)*2.2) calc(var(--u)*3.2) calc(var(--u)*2) rgba(55,65,120,.24));
}
body.login-page .lg-art{position:absolute; left:0; top:0; direction:ltr; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none;
  transform-origin:50% 50%; transform:translate(-50%,-50%) rotate(calc(var(--r,0deg) + var(--or,0deg)))}
body.login-page .lg-item.lift .lg-art{cursor:grabbing}
@keyframes lg-drift-a{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(calc(var(--u)*.35),calc(var(--u)*-.5),0) rotate(.7deg)}}
@keyframes lg-drift-b{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(calc(var(--u)*-.45),calc(var(--u)*.3),0) rotate(-.9deg)}}
@keyframes lg-drift-c{from{transform:translate3d(0,0,0) rotate(-.4deg)}to{transform:translate3d(calc(var(--u)*.2),calc(var(--u)*.55),0) rotate(.6deg)}}

/* ---------- PENCIL (hexagonal; facets = banded gradient lit from the top; tip points RIGHT) ---------- */
body.login-page .lg-pencil{width:calc(var(--u)*34); height:calc(var(--u)*3.2); display:flex; align-items:stretch}
body.login-page .lg-pencil i{display:block; flex:none}
body.login-page .lg-pencil .e{width:calc(var(--u)*2.5); border-radius:calc(var(--u)*.9) 0 0 calc(var(--u)*.9);
  background:linear-gradient(180deg,#d98a96 0%,#f4b7c0 30%,#f8ccd2 50%,#e59aa6 75%,#b96573 100%)}
body.login-page .lg-pencil .f{width:calc(var(--u)*2.2);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0 1px, rgba(255,255,255,.35) 1px 2px, transparent 2px calc(var(--u)*.55)),
    linear-gradient(180deg,#6f7886 0%,#c9d0da 22%,#f4f7fb 42%,#b6bdc8 62%,#7e8796 82%,#4f5664 100%)}
body.login-page .lg-pencil .b{flex:1; position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 18%,rgba(255,255,255,0) 40%,rgba(0,0,0,.14) 100%),
    linear-gradient(180deg,var(--p1) 0%,var(--p2) 16%,var(--p3) 17%,var(--p4) 33%,var(--p5) 34%,var(--p6) 50%,var(--p7) 51%,var(--p8) 66%,var(--p9) 67%,var(--p10) 83%,var(--p11) 84%,var(--p12) 100%)}
body.login-page .lg-pencil .b::after{content:attr(data-text); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:700 calc(var(--u)*1)/1 system-ui,sans-serif; letter-spacing:calc(var(--u)*.22); color:rgba(255,255,255,.75); text-shadow:0 -1px 0 rgba(0,0,0,.25)}
body.login-page .lg-pencil .w{width:calc(var(--u)*4.4); clip-path:polygon(0 0,100% 36%,100% 64%,0 100%);   /* cone narrows toward the right */
  background:
    repeating-linear-gradient(90deg, rgba(120,70,30,0) 0 calc(var(--u)*.5), rgba(120,70,30,.18) calc(var(--u)*.5) calc(var(--u)*.56)),
    linear-gradient(180deg,#d9b07a 0%,#f0d3a2 35%,#e6c08a 60%,#b98a52 100%)}
body.login-page .lg-pencil .l{width:calc(var(--u)*1.5); margin-left:calc(var(--u)*-.05); clip-path:polygon(0 36%,100% 47%,100% 53%,0 64%);
  background:linear-gradient(180deg,#5b6068,#2b2f36 55%,#15171b)}
body.login-page .lg-pencil.y{--p1:#b37a06;--p2:#c88b0a;--p3:#e6ac1c;--p4:#f3c23f;--p5:#fbdc77;--p6:#fde9a0;--p7:#f7d25a;--p8:#eeb92e;--p9:#d79a12;--p10:#c58608;--p11:#a06a05;--p12:#7f5204}
body.login-page .lg-pencil.v{--p1:#2a8a70;--p2:#34a284;--p3:#4bbd9c;--p4:#6dd3b4;--p5:#92e4cc;--p6:#b4efdc;--p7:#84ddc2;--p8:#5ac8a7;--p9:#3daf8c;--p10:#2e9978;--p11:#237e62;--p12:#1a654f}
body.login-page .lg-pencil.v .l{background:linear-gradient(180deg,#92e4cc,#4bbd9c 55%,#2a8a70)}
body.login-page .lg-pencil.k{--p1:#9c2f63;--p2:#b83c77;--p3:#d6518f;--p4:#ec6fa6;--p5:#f896c2;--p6:#fcb4d3;--p7:#f582b4;--p8:#e0609a;--p9:#c64683;--p10:#ae3670;--p11:#8f2a5b;--p12:#6c1f44}
body.login-page .lg-pencil.k .l{background:linear-gradient(180deg,#f896c2,#d6518f 55%,#9c2f63)}

/* ---------- HIGHLIGHTER (cap · barrel · neck · chisel tip; tip points RIGHT) ---------- */
body.login-page .lg-hl{width:calc(var(--u)*25); height:calc(var(--u)*4.4); display:flex; align-items:stretch}
body.login-page .lg-hl i{display:block; flex:none; position:relative}
body.login-page .lg-hl .cap{width:calc(var(--u)*8.6); border-radius:calc(var(--u)*1.7) calc(var(--u)*.4) calc(var(--u)*.4) calc(var(--u)*1.7);
  background:linear-gradient(180deg,rgba(150,215,20,.96),rgba(200,255,70,.92) 28%,rgba(215,255,110,.88) 45%,rgba(170,235,30,.94) 72%,rgba(110,170,10,.98))}
body.login-page .lg-hl .cap::after{content:""; position:absolute; left:calc(var(--u)*1.2); right:calc(var(--u)*1.2); top:calc(var(--u)*.6); height:calc(var(--u)*.7); border-radius:99px; background:rgba(255,255,255,.55); filter:blur(1px)}
body.login-page .lg-hl .br{flex:1; background:
    linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0) 35%,rgba(0,0,0,.10) 100%),
    linear-gradient(180deg,#f2f3f8 0%,#dfe2ee 50%,#c3c8dc 100%)}
body.login-page .lg-hl .br::before{content:"MARKER"; position:absolute; inset:calc(var(--u)*1.4) 0; display:flex; align-items:center; justify-content:center; font:800 calc(var(--u)*.95)/1 system-ui,sans-serif; letter-spacing:calc(var(--u)*.3); color:#5a6b9a; border-block:calc(var(--u)*.22) solid rgba(190,255,60,.9)}
body.login-page .lg-hl .nk{width:calc(var(--u)*2.4); clip-path:polygon(0 0,100% 18%,100% 82%,0 100%); background:linear-gradient(180deg,#a7acc2,#e5e8f2 40%,#8d92a8)}
body.login-page .lg-hl .tp{width:calc(var(--u)*3); clip-path:polygon(0 18%,100% 34%,100% 66%,0 82%); margin-left:calc(var(--u)*-.05); background:linear-gradient(180deg,#d6ff6b,#b7f01f 50%,#8cc80b)}

/* ---------- STICKY NOTES ---------- */
body.login-page .lg-sticky{width:calc(var(--u)*9.4); height:calc(var(--u)*9.4); clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(var(--u)*1.25), rgba(60,50,20,.08) calc(var(--u)*1.25) calc(var(--u)*1.3)) 0 calc(var(--u)*2.7)/100% 100% no-repeat,
    linear-gradient(178deg,var(--n1) 0%,var(--n2) 100%)}
body.login-page .lg-sticky::before{content:""; position:absolute; left:10%; right:26%; top:calc(var(--u)*1.4); height:calc(var(--u)*.55); border-radius:99px; background:rgba(40,40,80,.26); box-shadow:0 calc(var(--u)*1.25) 0 -0.0px rgba(40,40,80,.18), calc(var(--u)*1.4) calc(var(--u)*2.5) 0 rgba(40,40,80,.14), 0 calc(var(--u)*3.8) 0 rgba(40,40,80,.16)}
body.login-page .lg-sticky::after{content:""; position:absolute; right:0; bottom:0; width:30%; height:30%; clip-path:polygon(0 0,100% 0,0 100%);
  background:linear-gradient(135deg,var(--n2) 0%,rgba(255,255,255,.8) 55%,var(--n1) 100%); box-shadow:calc(var(--u)*-.3) calc(var(--u)*-.3) calc(var(--u)*.5) rgba(0,0,0,.2)}
body.login-page .lg-sticky.a{--n1:#fff0a3;--n2:#ffdd55}
body.login-page .lg-sticky.b{--n1:#dcf8e9;--n2:#aeeccb}

/* ---------- BINDER CLIP ---------- */
body.login-page .lg-bclip{width:calc(var(--u)*7); height:calc(var(--u)*4.6)}
body.login-page .lg-bclip::before{content:""; position:absolute; inset:0; clip-path:polygon(0 100%,7% 0,93% 0,100% 100%);
  background:linear-gradient(90deg,rgba(255,255,255,.16),transparent 26%,rgba(0,0,0,.32) 100%), linear-gradient(180deg,#3d414c,#1a1c22 70%,#0e0f13)}
body.login-page .lg-bclip::after{content:""; position:absolute; left:calc(var(--u)*.9); right:calc(var(--u)*.9); top:calc(var(--u)*-2.5); height:calc(var(--u)*3); border:calc(var(--u)*.3) solid; border-bottom:0; border-radius:99px 99px 0 0; border-color:#eef1f6 #aab2c0 transparent #cdd3dd;
  transform:perspective(200px) rotateX(18deg)}

/* ---------- PAPER CLIPS (wire: three nested loops; also used on the sheet) ---------- */
body.login-page .lg-wire{position:relative; --t:calc(var(--u)*.22); width:calc(var(--u)*1.75); height:calc(var(--u)*4.7)}
body.login-page .lg-wire i{position:absolute; border:var(--t) solid; border-radius:99px; border-color:#eef1f6 #aab2c0 #7b8494 #cdd3dd}
body.login-page .lg-wire i:nth-child(1){left:0; top:0; width:100%; height:100%; border-top-color:#f7f9fc}
body.login-page .lg-wire i:nth-child(2){left:calc(var(--t)*1.3); top:calc(var(--t)*3.2); width:calc(100% - var(--t)*2.6); height:calc(100% - var(--t)*6.4); border-bottom-color:transparent}
body.login-page .lg-wire i:nth-child(3){left:calc(var(--t)*2.6); top:calc(var(--t)*5.9); width:calc(100% - var(--t)*5.2); height:calc(100% - var(--t)*10.3); border-top-color:transparent}

/* ---------- SHARPENER ---------- */
body.login-page .lg-sharp{width:calc(var(--u)*5.2); height:calc(var(--u)*3.1); border-radius:calc(var(--u)*.7);
  background:linear-gradient(145deg,#ffcb98 0%,#ffa363 50%,#e9813c 100%);
  box-shadow:inset 0 calc(var(--u)*.14) 0 rgba(255,255,255,.55), inset 0 calc(var(--u)*-.3) calc(var(--u)*.4) rgba(120,50,10,.35), 0 calc(var(--u)*.35) 0 #b95f26}
body.login-page .lg-sharp::before{content:""; position:absolute; left:calc(var(--u)*.6); top:50%; width:calc(var(--u)*1.7); height:calc(var(--u)*1.7); margin-top:calc(var(--u)*-.85); border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#3a3a48,#0c0c12 70%); box-shadow:inset 0 calc(var(--u)*.12) calc(var(--u)*.3) #000, 0 calc(var(--u)*.08) 0 rgba(255,255,255,.4)}
body.login-page .lg-sharp::after{content:""; position:absolute; right:calc(var(--u)*.7); top:calc(var(--u)*.5); width:calc(var(--u)*1.9); height:calc(var(--u)*2.1); border-radius:calc(var(--u)*.3);
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.25) 0 1px,transparent 1px calc(var(--u)*.35)), linear-gradient(90deg,#dfe3ec,#8f97a8); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}

/* ---------- NOTEBOOK ---------- */
body.login-page .lg-notebook{width:calc(var(--u)*23); height:calc(var(--u)*31); border-radius:calc(var(--u)*.7) calc(var(--u)*1.5) calc(var(--u)*1.5) calc(var(--u)*.7);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    linear-gradient(115deg,#4a78bf 0%,#6898dd 45%,#7fb0ee 100%);
  box-shadow:
    inset calc(var(--u)*1.1) 0 calc(var(--u)*.9) rgba(0,0,0,.28), inset calc(var(--u)*1.35) 0 0 rgba(255,255,255,.07),
    inset 0 calc(var(--u)*.15) 0 rgba(255,255,255,.22), inset 0 calc(var(--u)*-.2) calc(var(--u)*.5) rgba(0,0,0,.25),
    calc(var(--u)*.35) calc(var(--u)*.35) 0 calc(var(--u)*-.05) #f1ead9, calc(var(--u)*.7) calc(var(--u)*.7) 0 calc(var(--u)*-.1) #e3dbc6,
    calc(var(--u)*1.0) calc(var(--u)*1.0) 0 calc(var(--u)*-.15) #f1ead9, calc(var(--u)*1.3) calc(var(--u)*1.3) 0 calc(var(--u)*-.2) #d9d0b9}
body.login-page .lg-notebook::before{content:""; position:absolute; top:0; bottom:0; right:calc(var(--u)*3.4); width:calc(var(--u)*1.1);
  background:linear-gradient(90deg,#27457c,#37609f 40%,#27457c); box-shadow:calc(var(--u)*.12) 0 calc(var(--u)*.3) rgba(0,0,0,.4), inset 0 0 calc(var(--u)*.3) rgba(255,255,255,.12)}
body.login-page .lg-notebook .label{direction:rtl; position:absolute; left:calc(var(--u)*3.4); top:calc(var(--u)*3.8); width:calc(var(--u)*11); padding:calc(var(--u)*.9) calc(var(--u)*.6); text-align:center;
  background:linear-gradient(180deg,#fbf6e8,#efe7d2); border-radius:calc(var(--u)*.4); color:#2f5a9b; font-weight:800; font-size:calc(var(--u)*1.35); line-height:1.3;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 calc(var(--u)*.12) calc(var(--u)*.3) rgba(0,0,0,.35)}
body.login-page .lg-notebook .label small{display:block; direction:ltr; font-weight:500; font-size:.62em; color:#6f86b3; letter-spacing:.04em; margin-top:.2em}

/* ---------- RULER ---------- */
body.login-page .lg-ruler{width:calc(var(--u)*44); height:calc(var(--u)*5.4); border-radius:calc(var(--u)*.45);
  background:
    repeating-linear-gradient(90deg, rgba(30,36,72,.75) 0 1px, transparent 1px calc(var(--u)*5)) bottom/100% 55% no-repeat,
    repeating-linear-gradient(90deg, rgba(30,36,72,.65) 0 1px, transparent 1px calc(var(--u)*2.5)) bottom/100% 38% no-repeat,
    repeating-linear-gradient(90deg, rgba(30,36,72,.55) 0 1px, transparent 1px calc(var(--u)*.5)) bottom/100% 22% no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(225,232,255,.5) 40%,rgba(200,212,250,.42) 100%);
  border:1px solid rgba(255,255,255,.75); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 4px rgba(90,100,170,.22)}
body.login-page .lg-ruler::after{content:""; position:absolute; left:4%; top:12%; width:38%; height:10%; border-radius:99px; background:linear-gradient(90deg,rgba(255,255,255,.8),transparent)}

/* ---------- ERASER ---------- */
body.login-page .lg-eraser{width:calc(var(--u)*8.2); height:calc(var(--u)*3.6); border-radius:calc(var(--u)*.7);
  background:linear-gradient(180deg,#ffffff 0%,#f1f1f4 55%,#d9dae2 100%);
  box-shadow:inset 0 calc(var(--u)*.12) 0 #fff, inset 0 calc(var(--u)*-.25) calc(var(--u)*.35) rgba(120,124,150,.35), 0 calc(var(--u)*.4) 0 #cfd0da}
body.login-page .lg-eraser::before{content:""; position:absolute; left:26%; right:26%; top:-1px; bottom:-1px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 4px,transparent 4px 8px), linear-gradient(180deg,#ff9f8a,#f3705f 60%,#d65649);
  box-shadow:inset 0 calc(var(--u)*.12) 0 rgba(255,255,255,.35), inset 0 calc(var(--u)*-.2) calc(var(--u)*.3) rgba(0,0,0,.3)}
body.login-page .lg-eraser::after{content:"FARANDI"; position:absolute; left:26%; right:26%; top:0; bottom:0; display:flex; align-items:center; justify-content:center;
  font:800 calc(var(--u)*.95)/1 system-ui,sans-serif; letter-spacing:calc(var(--u)*.18); color:rgba(255,255,255,.88)}

/* ---------- placements (landscape) ---------- */
body.login-page .lg-i-notebook{--x:9%;  --y:72%; --z:6; --d:1.5;  --anim:lg-drift-b; --dur:19s; --delay:-4s;  --i:1;  --r:-9deg}
body.login-page .lg-i-ruler{--x:72%; --y:94%; --z:5; --d:.6;   --anim:lg-drift-c; --dur:23s; --delay:-9s;  --i:0;  --r:-3deg}
body.login-page .lg-i-pen-y{--x:85%; --y:22%; --z:7; --d:1.2;  --anim:lg-drift-a; --dur:16s; --delay:-2s;  --i:2;  --r:152deg}
body.login-page .lg-i-pen-v{--x:81%; --y:31%; --z:8; --d:1.35; --anim:lg-drift-c; --dur:21s; --delay:-11s; --i:3;  --r:146deg}
body.login-page .lg-i-pen-k{--x:91%; --y:38%; --z:6; --d:1.1;  --anim:lg-drift-b; --dur:18s; --delay:-6s;  --i:4;  --r:160deg}
body.login-page .lg-i-hl{--x:16%; --y:17%; --z:7; --d:1.25; --anim:lg-drift-a; --dur:20s; --delay:-8s;  --i:5;  --r:24deg}
body.login-page .lg-i-sticky-a{--x:11%; --y:41%; --z:9; --d:1.6;  --anim:lg-drift-c; --dur:15s; --delay:-3s;  --i:6;  --r:-7deg}
body.login-page .lg-i-sticky-b{--x:90%; --y:60%; --z:9; --d:1.5;  --anim:lg-drift-b; --dur:17s; --delay:-10s; --i:7;  --r:9deg}
body.login-page .lg-i-eraser{--x:75%; --y:76%; --z:8; --d:1.0;  --anim:lg-drift-a; --dur:17s; --delay:-7s;  --i:8;  --r:17deg}
body.login-page .lg-i-bclip{--x:33%; --y:89%; --z:8; --d:1.3;  --anim:lg-drift-c; --dur:22s; --delay:-5s;  --i:9;  --r:-14deg}
body.login-page .lg-i-sharp{--x:26%; --y:12%; --z:8; --d:1.15; --anim:lg-drift-b; --dur:19s; --delay:-12s; --i:10; --r:12deg}
body.login-page .lg-i-wire-a{--x:66%; --y:10%; --z:9; --d:1.4;  --anim:lg-drift-a; --dur:14s; --delay:-1s;  --i:11; --r:35deg}
body.login-page .lg-i-wire-b{--x:40%; --y:8%;  --z:9; --d:1.5;  --anim:lg-drift-c; --dur:16s; --delay:-9s;  --i:12; --r:-55deg}

/* =====================================================================
   LIQUID GLASS — one recipe used everywhere:
   translucent tinted fill · deep blur + saturation · bright specular rim
   (top-left hot, bottom-right soft) · inner glow · coloured edge refraction.
   ===================================================================== */
body.login-page .lg-stage{position:relative; z-index:20; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); pointer-events:none}
body.login-page .lg-tilt{pointer-events:none; width:min(100%,27.5rem); padding-top:4rem; transition:transform .3s ease-out; will-change:transform}
body.login-page .lg-sheet{
  --gx:30%; --gy:10%;
  position:relative; width:100%; padding:2.4rem 1.9rem 1.7rem; border-radius:2.1rem; pointer-events:auto;
  background:radial-gradient(circle 15rem at var(--gx) var(--gy), rgba(255,255,255,.5), transparent 70%), var(--lg-glass-fill);
  -webkit-backdrop-filter:var(--lg-glass-blur); backdrop-filter:var(--lg-glass-blur);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.95), inset 0 -2px 3px rgba(255,255,255,.45),
    inset 2px 0 2px -1px rgba(255,255,255,.65), inset -2px 0 2px -1px rgba(255,255,255,.4),
    inset 0 0 34px rgba(255,255,255,.28),
    0 1.8rem 3.2rem -1.1rem rgba(60,70,130,.34), 0 .5rem 1.3rem -.4rem rgba(60,70,130,.18);
  animation:lg-sheet-sway 11s ease-in-out infinite alternate;
}
@keyframes lg-sheet-sway{from{transform:rotate(-.3deg) translate3d(0,0,0)}to{transform:rotate(.15deg) translate3d(0,-.3rem,0)}}
body.login-page .lg-sheet::before{ /* bright gradient rim */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.98), rgba(255,255,255,.06) 34%, rgba(255,255,255,.06) 64%, rgba(255,255,255,.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
body.login-page .lg-sheet::after{ /* coloured refraction along the inner edge */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 7px 7px 20px -6px rgba(255,170,210,.30), inset -7px -7px 20px -6px rgba(150,235,205,.32), inset -7px 7px 20px -8px rgba(150,190,255,.28), inset 7px -7px 20px -8px rgba(255,220,150,.26);
}

/* brand: colourful logo floating above the glass, then the wordmark */
body.login-page .lg-logo{position:relative; z-index:1; display:block; width:9.6rem; height:9.6rem; margin:-6.6rem auto -2.5rem; pointer-events:none; -webkit-user-select:none; user-select:none;
  filter:drop-shadow(0 .9rem 1.2rem rgba(120,90,200,.25)); animation:lg-logo-float 7s ease-in-out infinite alternate}
@keyframes lg-logo-float{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-.4rem) rotate(1.5deg)}}
body.login-page .lg-brand{text-align:center; margin:.1rem 0 1.6rem}
body.login-page .lg-brand h1{margin:0; font-size:1.6rem; font-weight:800; letter-spacing:-.01em; line-height:1.3; color:var(--lg-ink)}
body.login-page .lg-brand p{margin:.35rem 0 0; font-size:.88rem; font-weight:600; color:var(--lg-ink-3)}

/* form */
body.login-page form{display:block}
body.login-page .lg-field{margin-bottom:1.05rem}
body.login-page label{display:block; margin:0 0 .45rem; font-size:.85rem; font-weight:700; color:var(--lg-ink-2)}
body.login-page .lg-input{
  display:block; width:100%; height:3.1rem; margin:0; padding:0 1.05rem; border-radius:1.15rem; color:var(--lg-ink); font-size:1rem; font-weight:500; outline:0;
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.56)); border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 2px 6px rgba(70,80,150,.14), inset 0 -1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(255,255,255,.55);
  transition:border-color .2s, box-shadow .25s, background .2s, transform .35s var(--lg-spring);
}
body.login-page .lg-input::placeholder{color:rgba(38,45,71,.58)}
body.login-page .lg-input[dir=ltr]{text-align:center; letter-spacing:.06em; font-variant-numeric:tabular-nums}
body.login-page .lg-input:hover:not(:disabled):not(:focus){background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.66))}
body.login-page .lg-input:focus{border-color:rgba(130,165,255,.95); background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.82));
  box-shadow:inset 0 2px 6px rgba(70,80,150,.08), 0 0 0 .26rem rgba(130,170,255,.28), 0 0 1.6rem rgba(180,150,255,.30); transform:scale(1.012)}
body.login-page .lg-input:disabled,
body.login-page .lg-input[readonly]{background:rgba(255,255,255,.22); color:var(--lg-ink-3); cursor:not-allowed}
body.login-page .lg-field.bad .lg-input{border-color:rgba(236,104,128,.95); box-shadow:inset 0 2px 6px rgba(200,60,90,.10), 0 0 0 .24rem rgba(236,104,128,.22)}
body.login-page .lg-err{min-height:1.3rem; margin:.5rem 0 0; font-size:.82rem; font-weight:700; color:#b5203f; display:flex; gap:.4rem; align-items:center}
body.login-page .lg-err:empty{visibility:hidden}

body.login-page .lg-btn{
  position:relative; width:100%; height:3.15rem; border-radius:1.25rem; cursor:pointer; color:#fff; font-size:1rem; font-weight:800; letter-spacing:.01em; overflow:hidden; margin-top:.25rem;
  border:1px solid rgba(255,255,255,.6); text-shadow:0 1px 2px rgba(60,60,150,.38);
  background:linear-gradient(135deg, rgba(112,170,255,.93) 0%, rgba(152,142,250,.93) 48%, rgba(250,150,205,.91) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.8), inset 0 -12px 18px -8px rgba(255,255,255,.32), inset 0 0 0 1px rgba(255,255,255,.12),
    0 .95rem 1.7rem -.8rem rgba(120,115,235,.6), 0 .15rem .45rem rgba(60,70,140,.2);
  transition:transform .4s var(--lg-spring), box-shadow .25s, filter .2s;
}
body.login-page .lg-btn::after{content:""; position:absolute; top:0; left:-60%; width:38%; height:100%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent); animation:lg-btn-sheen 6s ease-in-out 1.5s infinite}
@keyframes lg-btn-sheen{0%,70%{left:-60%}100%{left:130%}}
body.login-page .lg-btn:hover:not(:disabled){filter:brightness(1.05) saturate(1.06); transform:translateY(-2px) scale(1.012)}
body.login-page .lg-btn:active:not(:disabled){transform:translateY(1px) scale(.965); transition-duration:.12s}
body.login-page .lg-btn:focus-visible,
body.login-page .otp-resend-btn:focus-visible,
body.login-page .otp-box:focus-visible,
body.login-page .lg-back:focus-visible{outline:.2rem solid var(--lg-ink); outline-offset:.2rem}
body.login-page .lg-btn:disabled{cursor:not-allowed; filter:grayscale(.4); opacity:.6}
body.login-page .lg-btn.is-guarded{opacity:.85; filter:none}
body.login-page .lg-btn:disabled::after{display:none}
body.login-page .lg-spin{display:none; width:1.15rem; height:1.15rem; border-radius:50%; border:.17rem solid rgba(255,255,255,.4); border-top-color:#fff; animation:lg-spin .7s linear infinite; vertical-align:-.22rem; margin-inline-end:.5rem}
body.login-page .loading .lg-spin{display:inline-block}
@keyframes lg-spin{to{transform:rotate(360deg)}}
body.login-page .lg-foot{margin:1.05rem 0 0; text-align:center; font-size:.82rem; font-weight:600; color:var(--lg-ink-3); line-height:1.8}

/* round glass controls */
body.login-page .lg-back{
  width:2.4rem; height:2.4rem; margin:-.4rem 0 .9rem; border-radius:50%; cursor:pointer; color:var(--lg-ink-2); display:grid; place-items:center; font-size:1.05rem; padding:0;
  background:linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.28)); border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.95), inset 0 -4px 8px -3px rgba(150,170,255,.25), 0 .5rem 1rem -.5rem rgba(60,70,130,.4);
  transition:transform .35s var(--lg-spring);
}
body.login-page .lg-back:hover{transform:scale(1.1)}
body.login-page .lg-back:active{transform:scale(.93)}
body.login-page .lg-steps{position:relative}
/* the real script toggles .form-visible / .form-hidden on the forms */
body.login-page .lg-steps .form-hidden{display:none}
body.login-page .lg-steps .form-visible,
body.login-page .lg-steps .lg-result{animation:lg-step-in .4s var(--lg-ease) both}
@keyframes lg-step-in{from{opacity:0; transform:translate3d(.9rem,0,0) scale(.985)}to{opacity:1; transform:none}}
body.login-page .lg-shake{animation:lg-shake .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes lg-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

/* OTP overlay */
body.login-page .lg-overlay{position:fixed; inset:0; z-index:60; display:none; overflow-y:auto; overscroll-behavior:contain; padding:16px; background:rgba(120,130,200,.16); -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3)}
body.login-page .lg-overlay.open{display:flex; animation:lg-fade .25s ease both}
@keyframes lg-fade{from{opacity:0}to{opacity:1}}
body.login-page .lg-overlay .lg-sheet{animation:lg-sheet-up .55s var(--lg-spring) both; width:min(100%,24.5rem); margin:auto; text-align:center}
@keyframes lg-sheet-up{from{opacity:0; transform:translate3d(0,1.8rem,0) scale(.94)}to{opacity:1; transform:none}}

body.login-page .otp-icon-wrap{color:#fff; width:3.3rem; height:3.3rem; margin:.4rem auto .9rem; border-radius:1.15rem; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(112,170,255,.9), rgba(152,142,250,.9) 50%, rgba(250,150,205,.88)); border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.85), inset 0 -8px 12px -6px rgba(255,255,255,.3), 0 .8rem 1.3rem -.6rem rgba(120,115,235,.55)}
body.login-page .otp-title{text-align:center; margin:0 0 .3rem; font-size:1.2rem; font-weight:800}
body.login-page .otp-info{text-align:center; margin:0 0 1.25rem; font-size:.85rem; color:var(--lg-ink-3); line-height:1.8}
body.login-page .otp-boxes{display:flex; gap:.6rem; justify-content:center; direction:ltr; margin-bottom:.4rem}
body.login-page .otp-box{width:3.05rem; height:3.5rem; margin:0; padding:0; text-align:center; font-size:1.45rem; font-weight:800; border-radius:1.1rem; color:var(--lg-ink); outline:0; caret-color:#7a8cf0;
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.56)); border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 2px 6px rgba(70,80,150,.14), inset 0 -1px 0 rgba(255,255,255,.9); transition:border-color .15s, box-shadow .2s, transform .35s var(--lg-spring), background .2s}
body.login-page .otp-box:focus{border-color:rgba(130,165,255,.95); box-shadow:0 0 0 .26rem rgba(130,170,255,.28), 0 0 1.4rem rgba(180,150,255,.28); transform:translateY(-3px) scale(1.04); background:rgba(255,255,255,.8)}
body.login-page .otp-box.filled{background:rgba(255,255,255,.78); border-color:rgba(170,185,255,.9)}
body.login-page .otp-box.error{border-color:rgba(236,104,128,.95); box-shadow:0 0 0 .22rem rgba(236,104,128,.22)}
body.login-page .otp-error{justify-content:center; text-align:center}
body.login-page .otp-resend-row{ display:flex; align-items:center; justify-content:center; gap:.3rem; margin-top:.85rem; font-size:.85rem; color:var(--lg-ink-3)}
body.login-page .otp-resend-btn{width:auto; box-shadow:none; transform:none; background:none; border:0; display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .3rem; border-radius:.5rem; color:#3450b8; font-weight:700; cursor:pointer}
body.login-page .otp-resend-btn:disabled{color:rgba(38,45,71,.5); cursor:not-allowed}

body.login-page .otp-countdown{font-variant-numeric:tabular-nums; color:var(--lg-ink-3); font-weight:700}
/* result screens */
body.login-page .lg-result{text-align:center; padding:.3rem 0 .2rem}
body.login-page .lg-badge{position:relative; width:4rem; height:4rem; margin:0 auto 1rem; border-radius:1.4rem; display:grid; place-items:center; border:1px solid rgba(255,255,255,.65);
  background:linear-gradient(135deg, rgba(112,170,255,.92), rgba(152,142,250,.92) 50%, rgba(250,150,205,.9)); box-shadow:inset 0 2px 1px rgba(255,255,255,.85), inset 0 -8px 12px -6px rgba(255,255,255,.3), 0 .9rem 1.4rem -.6rem rgba(120,115,235,.55)}
  body.login-page background:linear-gradient(135deg,
body.login-page rgba(104,
body.login-page 214,
body.login-page 170,
body.login-page .92),
body.login-page rgba(110,
body.login-page 190,
body.login-page 240,
body.login-page .9)); box-shadow:inset 0 2px 1px rgba(255,
body.login-page 255,
body.login-page 255,
body.login-page .85),
body.login-page inset 0 -8px 12px -6px rgba(255,
body.login-page 255,
body.login-page 255,
body.login-page .3),
body.login-page 0 .9rem 1.4rem -.6rem rgba(70,
body.login-page 170,
body.login-page 170,
body.login-page .55)}
.lg-tick{width:1.35rem; height:.75rem; border-left:.25rem solid #fff; border-bottom:.25rem solid #fff; transform:translateY(-.15rem) rotate(-45deg) scale(0); animation:lg-pop .55s .15s var(--lg-spring) forwards; border-radius:.05rem; filter:drop-shadow(0 1px 1px rgba(40,60,120,.3))}
@keyframes lg-pop{to{transform:translateY(-.15rem) rotate(-45deg) scale(1)}}
body.login-page .lg-result h2{margin:0 0 .4rem; font-size:1.2rem; font-weight:800}
body.login-page .lg-result p{margin:0 0 1.35rem; font-size:.88rem; color:var(--lg-ink-3); line-height:1.9}

/* ---------- responsive ---------- */
@media (max-aspect-ratio:1/1){
  body.login-page .lg-desk{--u:calc(min(100vw / 40, 100vh / 60))}
  body.login-page .lg-i-notebook{--x:22%; --y:91%}
  body.login-page .lg-i-ruler{--x:88%; --y:97%}
  body.login-page .lg-i-pen-y{--x:76%; --y:8%}
  body.login-page .lg-i-pen-v{--x:68%; --y:13%}
  body.login-page .lg-i-pen-k{--x:84%; --y:19%}
  body.login-page .lg-i-hl{--x:26%; --y:6%}
  body.login-page .lg-i-sticky-a{--x:13%; --y:16%}
  body.login-page .lg-i-sticky-b{--x:88%; --y:80%}
  body.login-page .lg-i-eraser{--x:52%; --y:89%}
  body.login-page .lg-i-bclip{--x:66%; --y:84%}
  body.login-page .lg-i-sharp{--x:44%; --y:15%}
  body.login-page .lg-i-wire-a{--x:55%; --y:5%}
  body.login-page .lg-i-wire-b{--x:8%; --y:66%}
}
@media (max-width:480px){
  body.login-page .lg-sheet{padding:2rem 1.3rem 1.4rem}
  body.login-page .otp-box{width:2.7rem; height:3.2rem}
  body.login-page .otp-boxes{gap:.45rem}
}
@media (prefers-reduced-motion:reduce){
  body.login-page *,
body.login-page *::before,
body.login-page *::after{animation:none!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  body.login-page .lg-tick{transform:translateY(-.15rem) rotate(-45deg) scale(1)}
}
body.login-page .otp-submit-btn{margin-top:.4rem}
body.login-page .otp-submit-spinner svg{display:block; animation:lg-spin .8s linear infinite}
body.login-page .otp-submit-label,
body.login-page .otp-submit-spinner{display:inline-flex; align-items:center; justify-content:center}