/* ============================================================
   NGT APIs DB Control — assets/app-base.css
   Load order: 1 of 3 (see index.php <link> tags)
   Root color/spacing variables, dark mode overrides, header widgets (fire cache button, portal load pill/panel), skeleton loading, and general motion/depth/color polish.
   ============================================================ */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--w:#f4f5f9;--w2:#eceef5;--w3:#e4e7f0;--w4:#d8dce9;--w5:#ccd2e3;
--t1:#0a0d1a;--t2:#2d3556;--t3:#6b7494;--t4:#a8b0cc;
--a1:#2563eb;--a2:#7c3aed;--a3:#0ea5e9;--a4:#10b981;--a5:#f59e0b;--a6:#ef4444;
--g1:linear-gradient(135deg,#2563eb,#7c3aed);
--g2:linear-gradient(135deg,#0ea5e9,#2563eb);
--g3:linear-gradient(135deg,#10b981,#0ea5e9);
--glow1:rgba(37,99,235,.14);--glow2:rgba(124,58,237,.11);
--danger:#ef4444;--dbg:rgba(239,68,68,.07);--dborder:rgba(239,68,68,.2);
--success:#10b981;--sbg:rgba(16,185,129,.07);--sborder:rgba(16,185,129,.2);
--warn:#f59e0b;--wbg:rgba(245,158,11,.07);
--border:#e2e7f2;--border2:#cdd4e8;
--sh1:0 1px 3px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.05);
--sh2:0 4px 24px rgba(0,0,0,.09),0 1px 3px rgba(0,0,0,.05);
--sh3:0 20px 60px rgba(0,0,0,.13),0 4px 16px rgba(0,0,0,.07);
--r:14px;--rs:9px;--rss:6px;
--font:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;
--sb-w:252px;
/* skeleton */
--sk-base:#e8eaf0;--sk-shine:#f5f6fa;
}

/* ── BASE ── */
html{font-size:15px;scroll-behavior:smooth}
body{background:var(--w2);color:var(--t1);font-family:var(--font);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}

/* ── DARK MODE VARS ── */
[data-theme="dark"]{
--w:#0f1117;--w2:#080b12;--w3:#13171f;--w4:#1a1f2e;--w5:#1f2535;
--t1:#f0f2ff;--t2:#c8cfe8;--t3:#7880a0;--t4:#454d6a;
--border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.05);
--sh1:0 1px 3px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
--sh2:0 4px 24px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3);
--sh3:0 20px 60px rgba(0,0,0,.6),0 4px 16px rgba(0,0,0,.4);
--glow1:rgba(37,99,235,.2);--glow2:rgba(124,58,237,.18);
--dbg:rgba(239,68,68,.1);--dborder:rgba(239,68,68,.25);
--sbg:rgba(16,185,129,.1);--sborder:rgba(16,185,129,.25);
--wbg:rgba(245,158,11,.1);
--sk-base:#1a1f2e;--sk-shine:#222840;
}
[data-theme="dark"] body{background:var(--w2)}
[data-theme="dark"] .topbar{background:rgba(8,11,18,.95);backdrop-filter:blur(20px)}
[data-theme="dark"] .card,[data-theme="dark"] .mc,[data-theme="dark"] .dsc,[data-theme="dark"] .db-card,[data-theme="dark"] .user-card{background:var(--w);border-color:var(--border)}
[data-theme="dark"] .tbl-outer,[data-theme="dark"] table.dt{background:var(--w)}
[data-theme="dark"] table.dt thead{background:var(--w3)}
[data-theme="dark"] table.dt tbody tr:hover{background:var(--w3)}
[data-theme="dark"] .mo{background:rgba(0,0,0,.7)}
[data-theme="dark"] .df-bar,[data-theme="dark"] .cf-bar{background:var(--w3)}
[data-theme="dark"] .fi,[data-theme="dark"] .tbl-sel,[data-theme="dark"] .df-col-sel,[data-theme="dark"] .df-date-in,.si{background:var(--w3);color:var(--t1);border-color:var(--border)}
[data-theme="dark"] .search-hero{background:var(--w)}
[data-theme="dark"] .r-group{background:var(--w);border-color:var(--border)}
[data-theme="dark"] .sum-bar{background:var(--w3)}
[data-theme="dark"] .pager{background:var(--w3)}
[data-theme="dark"] .tbl-toolbar{background:var(--w)}
[data-theme="dark"] .exp-dd{background:var(--w3)}
[data-theme="dark"] .log-head{background:var(--w3)}
[data-theme="dark"] .log-row:hover{background:var(--w3)}

/* theme toggle button */
.theme-toggle{width:40px;height:22px;background:var(--w3);border:1.5px solid var(--border);border-radius:20px;cursor:pointer;position:relative;transition:all .3s;flex-shrink:0;outline:none}
.theme-toggle::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:var(--a1);top:1px;left:1px;transition:transform .3s cubic-bezier(.4,0,.2,1),background .3s;box-shadow:0 2px 4px rgba(0,0,0,.2)}
[data-theme="dark"] .theme-toggle{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.4)}
[data-theme="dark"] .theme-toggle::after{transform:translateX(18px);background:linear-gradient(135deg,#7c3aed,#2563eb)}
.theme-toggle-wrap{display:flex;align-items:center;gap:7px;font-size:.67rem;font-weight:700;color:var(--t4)}

/* ── FIRE CACHE BUTTON — live animated flame, header top ── */
.fire-btn{display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:20px;border:1.5px solid rgba(239,68,68,.35);
  background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(239,68,68,.14));cursor:pointer;color:#f59e0b;font-weight:800;
  font-size:.72rem;transition:all .2s;flex-shrink:0;position:relative;overflow:visible}
.fire-btn:hover{border-color:rgba(239,68,68,.6);background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(239,68,68,.22));
  box-shadow:0 0 14px rgba(245,158,11,.35);transform:translateY(-1px)}
.fire-btn:active{transform:translateY(0)}
.fire-flame{display:inline-block;font-size:.95rem;animation:fireFlicker 1.4s ease-in-out infinite;transform-origin:bottom center;filter:drop-shadow(0 0 4px rgba(245,158,11,.6))}
.fire-label{white-space:nowrap}
@keyframes fireFlicker{
  0%,100%{transform:scale(1) rotate(-2deg);filter:drop-shadow(0 0 4px rgba(245,158,11,.6)) brightness(1)}
  20%{transform:scale(1.08,0.95) rotate(2deg);filter:drop-shadow(0 0 6px rgba(239,68,68,.7)) brightness(1.15)}
  40%{transform:scale(0.95,1.08) rotate(-3deg);filter:drop-shadow(0 0 5px rgba(245,158,11,.65)) brightness(0.95)}
  60%{transform:scale(1.05,0.97) rotate(1deg);filter:drop-shadow(0 0 7px rgba(239,68,68,.75)) brightness(1.1)}
  80%{transform:scale(0.97,1.04) rotate(-1deg);filter:drop-shadow(0 0 4px rgba(245,158,11,.55)) brightness(1)}
}
.fire-btn.firing{animation:fireBurst .9s ease}
.fire-btn.firing .fire-flame{animation:fireFlicker .25s ease-in-out infinite}
@keyframes fireBurst{
  0%{box-shadow:0 0 0 rgba(245,158,11,0)}
  30%{box-shadow:0 0 22px rgba(239,68,68,.8),0 0 40px rgba(245,158,11,.4)}
  100%{box-shadow:0 0 0 rgba(245,158,11,0)}
}
@media(max-width:900px){.fire-btn .fire-label{display:none}.fire-btn{padding:6px 9px}}

/* ── PORTAL LOAD PILL — manual check, no polling ── */
.load-pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;border:1.5px solid var(--border);
  background:var(--w3);cursor:pointer;color:var(--t3);font-weight:700;font-size:.7rem;transition:all .2s;flex-shrink:0}
.load-pill:hover{border-color:var(--a1);color:var(--a1)}
.load-pill.checking{opacity:.6;pointer-events:none}
.load-dot{width:8px;height:8px;border-radius:50%;background:var(--t4);flex-shrink:0;transition:background .3s}
.load-dot.ld-good{background:#10b981;box-shadow:0 0 6px rgba(16,185,129,.6)}
.load-dot.ld-warn{background:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,.6)}
.load-dot.ld-bad{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.6);animation:fireFlicker 1s ease-in-out infinite}
@media(max-width:1000px){.load-pill span:not(.load-dot){display:none}.load-pill{padding:6px 8px}}

/* ── LOAD DETAIL PANEL — clear labeled breakdown on click ── */
.load-wrap{position:relative;display:inline-flex}
.load-panel{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:88vw;background:var(--w);
  border:1.5px solid var(--border);border-radius:14px;box-shadow:var(--sh3);z-index:300;padding:14px;animation:popIn .15s ease}
.lp-sec{margin-bottom:12px}
.lp-sec:last-of-type{margin-bottom:8px}
.lp-sec-title{font-size:.72rem;font-weight:800;color:var(--t2);margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.lp-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:3px 0;font-size:.74rem;color:var(--t3)}
.lp-row b{color:var(--t1);font-weight:800;white-space:nowrap}
.lp-row b.lp-good{color:#10b981}
.lp-row b.lp-warn{color:#f59e0b}
.lp-row b.lp-bad{color:#ef4444}
.lp-note{font-size:.68rem;color:var(--t4);line-height:1.5;margin-top:6px;padding:8px 10px;background:var(--w3);border-radius:8px;border-left:3px solid var(--warn)}
.lp-foot{font-size:.63rem;color:var(--t4);text-align:center;padding-top:8px;border-top:1px solid var(--border)}
@media(max-width:640px){.load-panel{position:fixed;top:auto;bottom:16px;left:16px;right:16px;width:auto}}
.theme-icon{font-size:.85rem;transition:transform .3s,opacity .3s}

/* ── SKELETON LOADING ── */
@keyframes skeletonPulse{0%{background-position:-200% 0}100%{background-position:200% 0}}
.sk-row{display:flex;gap:12px;padding:10px 13px;border-bottom:1px solid var(--border);animation:fadeUp .3s ease both}
.sk-cell{height:14px;border-radius:4px;background:linear-gradient(90deg,var(--sk-base) 25%,var(--sk-shine) 50%,var(--sk-base) 75%);background-size:400% 100%;animation:skeletonPulse 1.4s ease infinite}
.sk-cell.w20{width:20%}.sk-cell.w15{width:15%}.sk-cell.w25{width:25%}.sk-cell.w10{width:10%}.sk-cell.w30{width:30%}.sk-cell.w12{width:12%}.sk-cell.w8{width:8%}
.sk-head{height:36px;border-bottom:2px solid var(--border);display:flex;gap:12px;padding:10px 13px;background:var(--w3)}
.sk-head-cell{height:12px;border-radius:3px;background:var(--sk-base)}

/* ── MICRO-INTERACTIONS ── */
/* btn lift + glow */
.btn{transition:all .18s cubic-bezier(.4,0,.2,1) !important}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,.35) !important}
.btn-primary:active{transform:translateY(0) !important}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.08)}
.btn-danger:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(239,68,68,.3)}
.btn-success:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(16,185,129,.3)}
/* ripple */
.btn{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);transform:scale(0);animation:rippleAnim .5s linear;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}
/* card hover depth */
.dsc{transition:all .22s cubic-bezier(.4,0,.2,1) !important}
.dsc:hover{transform:translateY(-5px) !important;box-shadow:0 12px 40px rgba(37,99,235,.12),0 4px 16px rgba(0,0,0,.08) !important}
[data-theme="dark"] .dsc:hover{box-shadow:0 12px 40px rgba(37,99,235,.2),0 4px 16px rgba(0,0,0,.4) !important}
.db-card{transition:all .2s cubic-bezier(.4,0,.2,1)}
.db-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(37,99,235,.1)}
/* sbi hover */
/* tab slide indicator */
.tabs{position:relative}
.tab-indicator{position:absolute;bottom:0;height:2.5px;background:var(--g1);border-radius:2px;transition:left .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);pointer-events:none}
/* row hover */
table.dt tbody tr{transition:background .12s}
/* input focus ring upgrade */
.fi:focus,.tbl-sel:focus,.df-col-sel:focus{outline:none;border-color:var(--a1);box-shadow:0 0 0 3px rgba(37,99,235,.15);transition:all .2s}
/* icon spin on hover */
.icon-spin:hover{animation:spin .5s ease}

/* ── DEPTH EFFECTS ── */
/* colored glow shadows on accent elements */
.role-badge.rb-super{box-shadow:0 2px 12px rgba(245,158,11,.25)}
.card{box-shadow:var(--sh1);transition:box-shadow .2s}
.card:hover{box-shadow:var(--sh2)}
/* subtle noise texture on sidebar */
/* topbar glass in dark */
[data-theme="dark"] .topbar::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,99,235,.04),transparent);pointer-events:none}
/* modal depth */
.mc{box-shadow:0 32px 80px rgba(0,0,0,.15),0 8px 24px rgba(0,0,0,.08)}
[data-theme="dark"] .mc{box-shadow:0 32px 80px rgba(0,0,0,.7),0 8px 24px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.07)}
/* stagger card entrance */
@keyframes cardStagger{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.dsc{animation:cardStagger .35s cubic-bezier(.22,1,.36,1) both}
.dsc:nth-child(1){animation-delay:.04s}.dsc:nth-child(2){animation-delay:.08s}.dsc:nth-child(3){animation-delay:.12s}
.dsc:nth-child(4){animation-delay:.16s}.dsc:nth-child(5){animation-delay:.20s}.dsc:nth-child(6){animation-delay:.24s}
.dsc:nth-child(7){animation-delay:.28s}.dsc:nth-child(8){animation-delay:.32s}

/* ── VIBRANT COLOR SYSTEM ── */
/* gradient text on view titles */
.view-title{background:linear-gradient(135deg,var(--t1) 60%,var(--a1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block}
[data-theme="dark"] .view-title{background:linear-gradient(135deg,#fff 50%,rgba(96,165,250,.8));-webkit-background-clip:text;background-clip:text}
/* vibrant active tab — handled by pill-nav styles below */
/* animated gradient on dsc-rgb-bar — always on */
.dsc-rgb-bar{opacity:1 !important;height:3.5px}
/* search btn vibrant */
#sbtn{background:linear-gradient(135deg,var(--a1),var(--a2));box-shadow:0 4px 16px rgba(37,99,235,.3)}
/* vibrant badges */
.badge.b-db{background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.08));border-color:rgba(37,99,235,.25);color:var(--a1)}
.badge.b-tbl{background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(16,185,129,.08));border-color:rgba(14,165,233,.2);color:var(--a3)}

/* ── MOTION POLISH ── */
/* smooth tab content switch */
.view{animation:fadeUp .2s ease both}
/* toast spring */
.toast{animation:toastSpring .35s cubic-bezier(.22,1,.36,1) both}
@keyframes toastSpring{from{opacity:0;transform:translateX(60px) scale(.9)}to{opacity:1;transform:none}}
/* stagger sb items */
/* smooth sidebar collapse */
/* result group stagger */
.r-group{animation:fadeUp .25s ease both}
.r-group:nth-child(2){animation-delay:.06s}.r-group:nth-child(3){animation-delay:.12s}
/* number count shimmer on home metrics */
.dsc-m-val{transition:all .3s ease;display:inline-block}
/* smooth modal open */
.mc{animation:popIn .22s cubic-bezier(.22,1,.36,1)}
/* page-level transition */
#app{animation:fadeUp .3s ease}

@keyframes rgbBorder{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes rgbGlow{0%,100%{box-shadow:0 0 12px rgba(37,99,235,.4)}33%{box-shadow:0 0 18px rgba(124,58,237,.5)}66%{box-shadow:0 0 18px rgba(14,165,233,.5)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes dotPing{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.9);opacity:.4}}
@keyframes cardRise{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
@keyframes iconPulse{0%,100%{box-shadow:0 8px 32px var(--glow1)}50%{box-shadow:0 8px 52px rgba(37,99,235,.3)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes sbIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes tick{from{opacity:.7}to{opacity:1}}
@keyframes orbA{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,40px)}}
@keyframes orbB{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-50px)}}
@keyframes rgbPulse{0%{border-color:rgba(37,99,235,.5)}33%{border-color:rgba(124,58,237,.5)}66%{border-color:rgba(14,165,233,.5)}100%{border-color:rgba(37,99,235,.5)}}

/* ══════════════════════════════════════════
   LOGIN PAGE — NGT DataCore  
   Dark cinematic glassmorphism
══════════════════════════════════════════ */
@keyframes auroraA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-80px,60px) scale(1.15)}66%{transform:translate(60px,-40px) scale(.9)}}
@keyframes auroraB{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(70px,80px) scale(1.2)}70%{transform:translate(-50px,20px) scale(.85)}}
@keyframes auroraC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,-70px) scale(1.1)}}
@keyframes gridFade{from{opacity:0}to{opacity:.35}}
@keyframes cardEntrance{0%{opacity:0;transform:translateY(40px) scale(.94)}60%{transform:translateY(-6px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes borderSpin{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes logoGlow{0%,100%{box-shadow:0 0 30px rgba(37,99,235,.5),0 0 60px rgba(37,99,235,.2)}33%{box-shadow:0 0 40px rgba(124,58,237,.6),0 0 80px rgba(124,58,237,.25)}66%{box-shadow:0 0 35px rgba(14,165,233,.5),0 0 70px rgba(14,165,233,.22)}}
@keyframes titleReveal{from{opacity:0;letter-spacing:6px}to{opacity:1;letter-spacing:-.5px}}
@keyframes subtitleSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes inputFocusLine{from{width:0}to{width:100%}}
@keyframes btnShimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes scanline{0%{transform:translateY(-100%)}100%{transform:translateY(100vh)}}
@keyframes particleDrift{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) translateX(30px);opacity:0}}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.2}}
/* ════════════════════════════════════════
   LOGIN PAGE — CIRCUIT IGNITION (dark portal)
════════════════════════════════════════ */
@keyframes lerrShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes l-drift1{to{transform:translate(60px,40px) scale(1.08)}}
@keyframes l-drift2{to{transform:translate(-70px,-50px) scale(1.12)}}
@keyframes l-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes l-flick{0%{opacity:0}8%{opacity:.9}16%{opacity:.04}28%{opacity:1}40%{opacity:.1}54%{opacity:1}68%{opacity:.4}82%,100%{opacity:1}}
@keyframes l-jolt{0%,100%{transform:none}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}}
@keyframes l-pulse{0%,100%{box-shadow:0 0 28px rgba(99,102,241,.35),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 18px rgba(99,102,241,.12)}50%{box-shadow:0 0 60px rgba(99,102,241,.75),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 28px rgba(99,102,241,.28)}}
@keyframes l-jpop{45%{transform:scale(2.1)}100%{transform:scale(1)}}
@keyframes l-fly{to{transform:translate(var(--dx),var(--dy)) scale(.1);opacity:0}}
@keyframes l-flashout{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@keyframes l-boom{0%{transform:translate(-50%,-50%) scale(0);opacity:.95}100%{transform:translate(-50%,-50%) scale(22);opacity:0}}
@keyframes l-sweep{0%{left:-80%;opacity:0}15%{opacity:.85}60%{opacity:.85}100%{left:135%;opacity:0}}
@keyframes l-scroll{to{transform:translateX(-50%)}}
@keyframes l-blink{50%{opacity:.3}}
@keyframes l-orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes l-orbGlow{0%,100%{filter:drop-shadow(0 0 12px rgba(99,102,241,.6)) drop-shadow(0 0 4px rgba(139,92,246,.4))}50%{filter:drop-shadow(0 0 28px rgba(99,102,241,1)) drop-shadow(0 0 12px rgba(139,92,246,.8))}}

/* page root */
.login-page{
  min-height:100vh;min-height:100svh;
  background:#020817;
  position:relative;overflow:hidden;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}

/* flood */
.l-flood{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(1100px 800px at 50% 6%,rgba(99,102,241,.32),rgba(6,9,20,.95) 55%,#020817 80%);transition:opacity .5s ease}
.l-lit .l-flood{opacity:1;transition:opacity 1.1s ease .15s}

/* grid */
.l-grid-tex{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;background-image:linear-gradient(rgba(99,102,241,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.06) 1px,transparent 1px);background-size:52px 52px;transition:opacity .5s ease}
.l-lit .l-grid-tex{opacity:1;transition:opacity 1.2s ease .4s}

/* ambient blobs — bigger and more vivid */
.l-blob{position:fixed;z-index:1;border-radius:50%;pointer-events:none;filter:blur(80px);opacity:0;transition:opacity 1.3s ease}
.l-lit .l-blob{opacity:1}
.lb1{width:min(700px,110vw);height:min(700px,110vw);left:-200px;top:-80px;background:radial-gradient(circle,rgba(99,102,241,.55),transparent 68%);animation:l-drift1 19s ease-in-out infinite alternate}
.lb2{width:min(600px,100vw);height:min(600px,100vw);right:-180px;bottom:-100px;background:radial-gradient(circle,rgba(139,92,246,.5),transparent 68%);animation:l-drift2 24s ease-in-out infinite alternate}
.lb3{width:min(400px,70vw);height:min(400px,70vw);right:8%;top:5%;background:radial-gradient(circle,rgba(14,165,233,.3),transparent 68%);animation:l-drift1 28s ease-in-out infinite alternate-reverse}