/* ============================================================
   NOVA — True Liquid Glass Theme
   Based on liquidGL spec — glass is transparent, background bleeds through
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
    --blue:        #5B9CF6;
    --blue-light:  #7EB3FF;
    --blue-glow:   rgba(91,156,246,0.30);
    --blue-tint:   rgba(91,156,246,0.12);
    --amber:       #F5A623;
    --amber-light: #FFB340;
    --amber-glow:  rgba(245,166,35,0.30);
    --amber-tint:  rgba(245,166,35,0.12);
    --green:       #30C88A;
    --red:         #FF5252;

    /* Glass text — white on dark vivid background */
    --ink:   rgba(255,255,255,0.92);
    --ink-2: rgba(255,255,255,0.60);
    --ink-3: rgba(255,255,255,0.38);
    --ink-4: rgba(255,255,255,0.18);

    --font: -apple-system,'SF Pro Display','Inter',BlinkMacSystemFont,'Segoe UI',sans-serif;

    --radius:    28px;
    --radius-md: 20px;
    --radius-sm: 14px;
    --radius-xs:  8px;

    --ease-out:    cubic-bezier(0.16,1,0.3,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);

    /* Glass surface values */
    --glass-fill:        rgba(255,255,255,0.07);
    --glass-fill-heavy:  rgba(255,255,255,0.11);
    --glass-fill-input:  rgba(255,255,255,0.06);
    --glass-border-top:  rgba(255,255,255,0.70);
    --glass-border-left: rgba(255,255,255,0.45);
    --glass-border-right:rgba(255,255,255,0.18);
    --glass-border-bot:  rgba(255,255,255,0.10);
    --glass-hi:          rgba(255,255,255,0.82);
    --glass-lo:          rgba(255,255,255,0.06);
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; -webkit-font-smoothing:antialiased; }
body {
    font-family: var(--font);
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { text-decoration:none; color:inherit; }
input,button,select,textarea { font-family:inherit; }
button { cursor:pointer; border:none; background:none; }

/* ── VIVID BACKGROUND ───────────────────────────────────── */
/* This is what makes glass look like glass — rich colour underneath */
body::before {
    content:''; position:fixed; inset:0; z-index:-2;
    background:
        radial-gradient(ellipse 80% 70% at 15% 20%,  #5B8FFF 0%, transparent 50%),
        radial-gradient(ellipse 70% 80% at 88% 80%,  #FF6B9D 0%, transparent 50%),
        radial-gradient(ellipse 60% 55% at 50% 50%,  #A855F7 0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at 90% 10%,  #22D3EE 0%, transparent 48%),
        radial-gradient(ellipse 40% 40% at 5%  90%,  #F59E0B 0%, transparent 45%),
        #0a0015;
}

/* Animated colour blobs */
.blob { position:fixed; border-radius:50%; filter:blur(75px); pointer-events:none; z-index:-1; }
.blob-1 { width:650px; height:650px; top:-160px; left:-160px; background:rgba(91,143,255,0.60); animation:blobDrift 22s ease-in-out infinite; }
.blob-2 { width:700px; height:700px; bottom:-180px; right:-180px; background:rgba(255,107,157,0.55); animation:blobDrift 28s ease-in-out infinite; animation-delay:-10s; }
.blob-3 { width:500px; height:500px; top:30%; left:40%; background:rgba(168,85,247,0.50); animation:blobDrift 20s ease-in-out infinite; animation-delay:-7s; }
.blob-4 { width:320px; height:320px; top:8%;  right:8%;  background:rgba(30,180,120,0.35); animation:blobDrift 25s ease-in-out infinite; animation-delay:-14s; }

/* ── KEYFRAMES ──────────────────────────────────────────── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(20px) scale(.98)} to{opacity:1;transform:none} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes dotPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.35);opacity:.7} }
@keyframes slideIn  { from{opacity:0;transform:translateY(28px) scale(.96)} to{opacity:1;transform:none} }
@keyframes slideOut { to{opacity:0;transform:translateY(-14px) scale(.97)} }
@keyframes shake    { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
@keyframes scanline { from{transform:translateX(-100%)} to{transform:translateX(300%)} }
@keyframes blobDrift { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(42px,-32px) scale(1.05)} 66%{transform:translate(-22px,38px) scale(0.95)} }
@keyframes specular {
    0%   { opacity:0; transform:translateX(-60%) rotate(-20deg); }
    12%  { opacity:1; }
    80%  { opacity:0.5; }
    100% { opacity:0; transform:translateX(260%) rotate(-20deg); }
}

/* ── TRUE LIQUID GLASS ──────────────────────────────────── */
/*
   KEY: almost no white fill. The blur + saturate does ALL the work.
   Background colour bleeds through. Only the border and top specular
   line tell you it's glass.
*/
.lg {
    position: relative;
    border-radius: var(--radius);
    border-top:    1px solid rgba(255,255,255,0.70);
    border-left:   1px solid rgba(255,255,255,0.45);
    border-right:  1px solid rgba(255,255,255,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    overflow: hidden;
    box-shadow:
        inset 0  1px 0 rgba(255,255,255,0.82),
        inset 0 -1px 0 rgba(255,255,255,0.05),
        0 32px 64px rgba(0,0,0,0.35),
        0 12px 24px rgba(0,0,0,0.20),
        0  3px  6px rgba(0,0,0,0.12);
    isolation: isolate;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    --mx: 50%; --my: 50%;
}

/* Blur layer — almost no white, just frosted glass effect */
.lg::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    background: radial-gradient(
        ellipse 140% 140% at var(--mx) var(--my),
        rgba(255,255,255,0.14) 0%,
        rgba(255,255,255,0.07) 40%,
        rgba(255,255,255,0.03) 100%
    );
    backdrop-filter: blur(32px) saturate(200%) brightness(1.08);
    -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.08);
    will-change: opacity;
}

/* Top edge specular highlight — the key liquid glass detail */
.lg-spec {
    position: absolute;
    top: 0; left: 8%; right: 8%; height: 1px; z-index: 2;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.85) 25%,
        rgba(255,255,255,0.95) 50%,
        rgba(255,255,255,0.85) 75%,
        transparent 100%
    );
    pointer-events: none;
}

/* Sweep specular on hover */


/* Heavy variant — slightly more visible but still transparent */
.lg-heavy::before {
    background: radial-gradient(
        ellipse 140% 140% at var(--mx) var(--my),
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.10) 40%,
        rgba(255,255,255,0.05) 100%
    );
    backdrop-filter: blur(40px) saturate(220%) brightness(1.10);
    -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.10);
}
.lg-heavy {
    border-top:    1px solid rgba(255,255,255,0.78);
    border-left:   1px solid rgba(255,255,255,0.50);
    border-right:  1px solid rgba(255,255,255,0.20);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,0.90),
        inset 0 -1px  0 rgba(255,255,255,0.05),
        0 48px 96px rgba(0,0,0,0.40),
        0 20px 40px rgba(0,0,0,0.24),
        0  5px 10px rgba(0,0,0,0.14);
}
.lg-sm { border-radius:var(--radius-sm); }
.lg-md { border-radius:var(--radius-md); }

/* ── NOISE TEXTURE ──────────────────────────────────────────
   Faint grain overlay makes glass feel physical.
   SVG turbulence noise at 3% opacity — just enough to feel real.
*/
.lg::after {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    border-radius: inherit;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    mix-blend-mode: overlay;
}

/* Override — move specular sweep to a named child instead of ::after
   since ::after is now the noise layer */
.lg-sweep {
    position: absolute; top:-50%; left:-60%;
    width:40%; height:200%; z-index: 3; pointer-events: none; opacity: 0;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255,255,255,0.10) 42%,
        rgba(255,255,255,0.25) 50%,
        rgba(255,255,255,0.10) 58%,
        transparent 100%
    );
    transform: rotate(-20deg) translateX(0%);
    will-change: transform, opacity;
}
.lg:hover .lg-sweep { animation: specular 2s cubic-bezier(0.16,1,0.3,1) forwards; }

/* ── SVG REFRACTION ─────────────────────────────────────────
   Applies the feTurbulence displacement filter to a thin overlay
   sitting on top of the glass. Creates wobbly light distortion
   — the defining liquid glass characteristic.
   Only visible at glass edges where light bends.
*/
.lg-refract-layer {
    position: absolute; inset: -2px; z-index: 2; pointer-events: none;
    border-radius: inherit;
    filter: url(#lg-refract);
    opacity: 0.18;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.55) 0%,
        rgba(255,255,255,0.0) 35%,
        rgba(255,255,255,0.0) 65%,
        rgba(255,255,255,0.22) 100%
    );
    mix-blend-mode: screen;
}

/* Stronger refraction on heavy cards */
.lg-heavy .lg-refract-layer { opacity: 0.24; }

/* ── ENHANCED SPECULAR LINE ─────────────────────────────────
   Brighter, wider — this is what the GitHub has that we were missing
*/
.lg-spec {
    position: absolute;
    top: 0; left: 4%; right: 4%; height: 1.5px; z-index: 4;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.60) 15%,
        rgba(255,255,255,0.98) 35%,
        rgba(255,255,255,1.00) 50%,
        rgba(255,255,255,0.98) 65%,
        rgba(255,255,255,0.60) 85%,
        transparent 100%
    );
    pointer-events: none;
    border-radius: 1px;
}

/* Bottom faint line — secondary specular */
.lg-spec-bot {
    position: absolute;
    bottom: 0; left: 20%; right: 20%; height: 0.5px; z-index: 4;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.20) 30%,
        rgba(255,255,255,0.30) 50%,
        rgba(255,255,255,0.20) 70%,
        transparent 100%
    );
    pointer-events: none;
}


/* Cursor-reactive glass — JS sets --mx --my */
.lg::before { transition: background 0.05s linear; }

/* ── BRAND DOTS ─────────────────────────────────────────── */
.brand-mark { display:flex; gap:5px; align-items:center; margin-bottom:14px; justify-content:center; }
.brand-mark.small { gap:4px; margin-bottom:0; }
.brand-dot { width:7px; height:7px; border-radius:50%; background:#FF5252; animation:dotPulse 2.6s ease-in-out infinite; }
.brand-dot:nth-child(2) { animation-delay:.3s; background:var(--amber); }
.brand-dot:nth-child(3) { animation-delay:.6s; background:#30C88A; }
.brand-mark.small .brand-dot { width:5px; height:5px; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-container { position:relative; z-index:1; width:100%; max-width:480px; padding:24px; }
.login-card { padding:52px 52px; animation:slideIn .7s var(--ease-out) both; }
.login-card.exit  { animation:slideOut .32s var(--ease-out) forwards; }
.login-card.shake { animation:shake .4s ease; }

.login-brand { text-align:center; margin-bottom:22px; }
.brand-title { font-size:3.1rem; font-weight:700; letter-spacing:.12em; color:var(--ink); margin-bottom:3px; -webkit-font-smoothing:antialiased; }
.brand-sub { font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); font-weight:500; }
.login-divider { height:1px; background:rgba(255,255,255,0.12); margin:22px 0; }

.field-group { margin-bottom:16px; }
.field-label { display:block; font-size:.75rem; font-weight:600; letter-spacing:.10em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }

.field-wrap {
    position:relative; display:flex; align-items:center;
    border-top:   1px solid rgba(255,255,255,0.45);
    border-left:  1px solid rgba(255,255,255,0.28);
    border-right: 1px solid rgba(255,255,255,0.12);
    border-bottom:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 2px 8px rgba(0,0,0,0.15);
    transition:border-color .2s, box-shadow .2s; overflow:hidden;
}
.field-wrap::before {
    content:''; position:absolute; inset:0; z-index:0;
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
    border-radius:inherit; pointer-events:none;
}
.field-wrap:focus-within {
    border-top-color: rgba(91,156,246,0.80);
    border-left-color: rgba(91,156,246,0.50);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 0 0 3px rgba(91,156,246,0.25);
}
.field-icon { position:relative; z-index:1; width:15px; height:15px; margin-left:13px; color:var(--ink-3); flex-shrink:0; transition:color .2s; }
.field-wrap:focus-within .field-icon { color:var(--blue); }
.field-input {
    position:relative; z-index:1; flex:1; padding:14px 10px 14px 12px;
    background:none; border:none; outline:none; color:var(--ink); font-size:1rem;
}
.field-input::placeholder { color:var(--ink-4); }
.field-input:-webkit-autofill { -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 1000px rgba(0,0,0,0) inset; }

.eye-btn {
    position:relative; z-index:1;
    padding:0 10px; margin-right:2px;
    color:var(--ink-3); transition:color .2s;
    display:flex; align-items:center; flex-shrink:0;
    height:100%;
}
.eye-btn svg { width:14px; height:14px; display:block; flex-shrink:0; }
.eye-btn:hover { color:var(--blue); }

.login-btn {
    width:100%; margin-top:22px; padding:16px; border-radius:50px;
    background:rgba(255,255,255,0.15);
    border-top:   1px solid rgba(255,255,255,0.55);
    border-left:  1px solid rgba(255,255,255,0.35);
    border-right: 1px solid rgba(255,255,255,0.12);
    border-bottom:1px solid rgba(255,255,255,0.08);
    color:#fff; font-size:1rem; font-weight:600;
    display:flex; align-items:center; justify-content:center; gap:8px;
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), 0 8px 24px rgba(0,0,0,0.25);
    transition:opacity .2s, transform .15s; font-family:var(--font); position:relative; overflow:hidden;
}
.login-btn::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,0.12) 0%,transparent 55%);
    border-radius:inherit; pointer-events:none;
}
.login-btn:hover:not(:disabled) { opacity:.88; transform:scale(.99); }
.login-btn:active:not(:disabled) { transform:scale(.97); }
.login-btn:disabled { opacity:.35; cursor:not-allowed; }
.btn-spinner svg { width:15px; height:15px; animation:spin 1s linear infinite; }

.login-error {
    font-size:.78rem; color:#ff8a80;
    background:rgba(255,82,82,0.10); border:1px solid rgba(255,82,82,0.25);
    border-radius:var(--radius-xs); padding:9px 13px; margin-top:10px; line-height:1.5;
}
.login-footer { text-align:center; font-size:.64rem; color:var(--ink-3); margin-top:24px; }

/* ============================================================
   SHARED HEADER
   ============================================================ */
.dashboard-body { display:flex; flex-direction:column; min-height:100vh; }
.dash-header {
    position:fixed; top:0; left:0; right:0; z-index:10;
    display:flex; align-items:center; gap:16px; padding:0 28px; height:54px;
    background:rgba(0,0,0,0.20);
    backdrop-filter:blur(40px) saturate(200%); -webkit-backdrop-filter:blur(40px) saturate(200%);
    border-bottom:.5px solid rgba(255,255,255,0.14);
    box-shadow:inset 0 -1px 0 rgba(255,255,255,0.08), 0 1px 0 rgba(0,0,0,0.15);
}
.dash-logo { display:flex; align-items:center; gap:9px; font-size:1.2rem; font-weight:700; letter-spacing:.08em; color:var(--ink); }
.dash-user { margin-left:auto; font-size:.72rem; color:var(--ink-3); }
.dash-logout, .dash-back {
    display:flex; align-items:center; gap:6px; font-size:.8rem; color:rgba(255,255,255,0.80);
    padding:6px 14px; border-radius:50px;
    background:rgba(255,255,255,0.10);
    border-top:  1px solid rgba(255,255,255,0.30);
    border-left: 1px solid rgba(255,255,255,0.18);
    border-right:1px solid rgba(255,255,255,0.08);
    border-bottom:1px solid rgba(255,255,255,0.05);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    transition:background .2s; font-weight:500;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.30);
}
.dash-logout svg, .dash-back svg { width:13px; height:13px; }
.dash-logout:hover, .dash-back:hover { background:rgba(255,255,255,0.18); }
.dash-back { margin-left:auto; }

/* ============================================================
   DASHBOARD CARDS
   ============================================================ */
.dash-main { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:86px 24px 52px; min-height:100vh; }
.dash-hero { text-align:center; margin-bottom:46px; opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.dash-hero.visible { opacity:1; transform:none; }
.dash-eyebrow { font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--blue-light); margin-bottom:11px; font-weight:600; }
.dash-title { font-size:clamp(2.4rem,5vw,3.8rem); font-weight:700; line-height:1.1; color:var(--ink); margin-bottom:11px; letter-spacing:-.02em; }
.dash-title em { font-style:normal; color:rgba(255,255,255,0.55); }
.dash-subtitle { font-size:.9rem; color:var(--ink-2); }

.dash-cards { display:grid; grid-template-columns:1fr 1fr; gap:18px; width:100%; max-width:800px; }
.dash-card {
    border-radius:var(--radius); display:block;
    opacity:0; transform:translateY(22px);
    transition:opacity .55s var(--ease-out), transform .55s var(--ease-out), scale .25s var(--ease-spring);
    cursor:pointer;
}
.dash-card.visible { opacity:1; transform:none; }
.dash-card:hover { scale:1.018; }

.card-inner { position:relative; z-index:2; padding:26px 24px; display:flex; flex-direction:column; gap:12px; }
.card-icon-wrap { width:46px; height:46px; display:flex; align-items:center; justify-content:center; position:relative; }
.card-icon-bg {
    position:absolute; inset:0; border-radius:11px;
    background:rgba(91,156,246,0.15); border:1px solid rgba(91,156,246,0.30);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.card-icon-bg.gold { background:rgba(245,166,35,0.15); border-color:rgba(245,166,35,0.30); }
.card-icon { width:21px; height:21px; position:relative; color:var(--blue-light); }
.card-icon.gold { color:var(--amber-light); }
.card-tag { font-size:.59rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-light); font-weight:600; }
.card-tag.gold { color:var(--amber-light); }
.card-title { font-size:1.6rem; font-weight:700; color:var(--ink); line-height:1.1; letter-spacing:-.02em; }
.card-desc { font-size:.82rem; color:var(--ink-2); line-height:1.7; }
.card-features { display:flex; gap:6px; flex-wrap:wrap; }
.feat-pill {
    font-size:.61rem; letter-spacing:.04em; padding:3px 10px; border-radius:50px;
    background:rgba(91,156,246,0.12); border:1px solid rgba(91,156,246,0.25);
    color:var(--blue-light); font-weight:500;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.feat-pill.gold { background:rgba(245,166,35,0.12); border-color:rgba(245,166,35,0.25); color:var(--amber-light); }
.card-arrow {
    align-self:flex-end; margin-top:auto; width:32px; height:32px; border-radius:50%;
    background:rgba(91,156,246,0.12); border:1px solid rgba(91,156,246,0.25);
    display:flex; align-items:center; justify-content:center; color:var(--blue-light);
    transition:transform .25s var(--ease-spring), background .2s;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.card-arrow.gold { background:rgba(245,166,35,0.12); border-color:rgba(245,166,35,0.25); color:var(--amber-light); }
.card-arrow svg { width:13px; height:13px; }
.dash-card:hover .card-arrow { transform:translate(3px,-3px); background:rgba(91,156,246,0.22); }

/* ============================================================
   FORM PAGES
   ============================================================ */
.page-wrap { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:74px 24px 52px; }
.page-hero { text-align:center; margin-bottom:22px; animation:fadeUp .6s var(--ease-out) both; }
.form-card { width:100%; max-width:560px; padding:32px 36px; animation:fadeUp .6s var(--ease-out) .1s both; }

/* Labels */
.s-label { display:block; font-size:.61rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-light); margin-bottom:7px; margin-top:17px; }
.s-label:first-child { margin-top:0; }
.s-label.gold { color:var(--amber-light); }

/* Dropdown */
.s-drop { position:relative; }
.s-drop-trigger {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:11px 14px; cursor:pointer;
    background:rgba(255,255,255,0.06);
    border-top:   1px solid rgba(255,255,255,0.40);
    border-left:  1px solid rgba(255,255,255,0.25);
    border-right: 1px solid rgba(255,255,255,0.10);
    border-bottom:1px solid rgba(255,255,255,0.07);
    border-radius:var(--radius-sm);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.35);
    transition:background .2s, box-shadow .2s;
}
.s-drop-trigger:hover { background:rgba(255,255,255,0.10); }
.s-drop-text { font-size:.86rem; color:var(--ink-3); font-weight:400; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-drop-text.filled { color:var(--ink); }
.s-drop-arrow { width:13px; height:13px; color:var(--ink-3); flex-shrink:0; transition:transform .2s; }
.s-drop-trigger.open .s-drop-arrow { transform:rotate(180deg); }

.s-panel {
    display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:50;
    background:rgba(15,20,50,0.92);
    border-top:   1px solid rgba(255,255,255,0.30);
    border-left:  1px solid rgba(255,255,255,0.15);
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom:1px solid rgba(255,255,255,0.06);
    border-radius:var(--radius-md); padding:8px;
    backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%);
    box-shadow:0 24px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
    max-height:230px; overflow-y:auto;
}
.s-panel.show { display:block; animation:fadeUp .18s var(--ease-out); }
.s-panel label {
    display:flex; align-items:center; gap:8px; padding:7px 8px; cursor:pointer;
    font-size:.84rem; color:var(--ink-2); border-radius:var(--radius-xs);
    transition:background .15s, color .15s;
}
.s-panel label:hover { background:rgba(255,255,255,0.10); color:var(--ink); }
.s-panel label input[type=checkbox] { accent-color:var(--blue); width:13px; height:13px; flex-shrink:0; }
.s-panel label strong { color:var(--ink); }
.s-divider { height:.5px; background:rgba(255,255,255,0.10); margin:5px 0; }
.s-group-label { display:block; font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:8px 8px 4px; pointer-events:none; }
.s-group-divider { height:.5px; background:rgba(255,255,255,0.10); margin:6px 4px; }
.s-panel::-webkit-scrollbar { width:3px; }
.s-panel::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.18); border-radius:2px; }

.date-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.s-mode {
    display:flex; gap:3px; background:rgba(0,0,0,0.20); border-radius:var(--radius-sm);
    padding:3px; border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.s-mode label { flex:1; text-align:center; padding:8px 10px; border-radius:8px; font-size:.78rem; color:var(--ink-2); cursor:pointer; transition:background .2s, color .2s; user-select:none; }
.s-mode input[type=radio] { display:none; }
.s-mode label.active { background:rgba(255,255,255,0.14); color:var(--ink); font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 3px rgba(0,0,0,0.15); }

/* Glass inputs */
.s-input {
    width:100%; padding:11px 14px;
    background:rgba(255,255,255,0.07);
    border-top:   1px solid rgba(255,255,255,0.42);
    border-left:  1px solid rgba(255,255,255,0.25);
    border-right: 1px solid rgba(255,255,255,0.10);
    border-bottom:1px solid rgba(255,255,255,0.07);
    border-radius:var(--radius-sm);
    color:var(--ink); font-size:.86rem; font-family:var(--font); outline:none;
    backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.38), 0 2px 6px rgba(0,0,0,0.12);
    transition:border-color .2s, box-shadow .2s; -webkit-appearance:none; appearance:none;
}
.s-input:focus {
    border-top-color: rgba(91,156,246,0.80);
    border-left-color: rgba(91,156,246,0.50);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.38), 0 0 0 3px rgba(91,156,246,0.25);
    outline:none;
}
.s-input::placeholder { color:var(--ink-4); }
input[type=date].s-input::-webkit-calendar-picker-indicator { filter:invert(1) opacity(.35); }

.s-select {
    width:100%; padding:11px 14px;
    background:rgba(255,255,255,0.07);
    border-top:   1px solid rgba(255,255,255,0.42);
    border-left:  1px solid rgba(255,255,255,0.25);
    border-right: 1px solid rgba(255,255,255,0.10);
    border-bottom:1px solid rgba(255,255,255,0.07);
    border-radius:var(--radius-sm);
    color:var(--ink); font-size:.86rem; font-family:var(--font); outline:none; cursor:pointer;
    -webkit-appearance:none; appearance:none;
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.38);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
    transition:border-color .2s;
}
.s-select:focus { border-top-color:rgba(91,156,246,0.80); }
.s-select option { background:#1a1a2e; color:var(--ink); }

.s-hint { font-size:.72rem; color:var(--ink-3); margin-top:5px; line-height:1.5; }

.s-check {
    display:flex; align-items:center; gap:9px; padding:11px 14px;
    background:rgba(255,255,255,0.07);
    border-top:   1px solid rgba(255,255,255,0.42);
    border-left:  1px solid rgba(255,255,255,0.25);
    border-right: 1px solid rgba(255,255,255,0.10);
    border-bottom:1px solid rgba(255,255,255,0.07);
    border-radius:var(--radius-sm);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.38);
    cursor:pointer; transition:background .2s, box-shadow .2s;
}
.s-check:hover { background:rgba(255,255,255,0.12); box-shadow:inset 0 1px 0 rgba(255,255,255,0.38), 0 0 0 3px rgba(91,156,246,0.20); }
.s-check input { accent-color:var(--blue); width:14px; height:14px; flex-shrink:0; }
.s-check span { font-size:.83rem; color:var(--ink-2); }

/* Glass submit button */
.s-submit {
    width:100%; margin-top:22px; padding:14px; border-radius:50px;
    background:rgba(91,156,246,0.25);
    border-top:   1px solid rgba(91,156,246,0.70);
    border-left:  1px solid rgba(91,156,246,0.45);
    border-right: 1px solid rgba(91,156,246,0.20);
    border-bottom:1px solid rgba(91,156,246,0.12);
    color:#fff; font-size:.88rem; font-weight:600; letter-spacing:.02em;
    display:flex; align-items:center; justify-content:center; gap:8px;
    cursor:pointer; font-family:var(--font);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.40), 0 8px 24px rgba(91,156,246,0.30);
    transition:opacity .2s, transform .15s;
    position:relative; overflow:hidden;
    -webkit-font-smoothing:antialiased;
}
.s-submit::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,0.15) 0%,transparent 55%);
    border-radius:inherit; pointer-events:none;
}
.s-submit:hover:not(:disabled) { opacity:.88; transform:scale(.99); }
.s-submit:active:not(:disabled) { transform:scale(.97); }
.s-submit:disabled { opacity:.28; cursor:not-allowed; }
.s-submit.gold {
    background:rgba(245,166,35,0.25);
    border-top-color:rgba(245,166,35,0.70);
    border-left-color:rgba(245,166,35,0.45);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.40), 0 8px 24px rgba(245,166,35,0.30);
}
.s-spin { width:15px; height:15px; display:none; animation:spin 1s linear infinite; }

.s-back { display:block; text-align:center; margin-top:13px; font-size:.74rem; color:var(--ink-3); transition:color .2s; }
.s-back:hover { color:var(--ink); }

/* ============================================================
   PROGRESS MODAL
   ============================================================ */
.s-modal { display:none; position:fixed; inset:0; z-index:100; background:rgba(0,0,0,0.40); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); align-items:center; justify-content:center; }
.s-modal.on { display:flex; animation:fadeUp .28s var(--ease-out); }
.s-modal-card { padding:44px 38px; width:100%; max-width:340px; text-align:center; position:relative; overflow:hidden; }
.s-pulse { position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--blue-light),rgba(91,156,246,0.4),transparent); background-size:50% 100%; animation:scanline 1.8s linear infinite; }
.s-modal-title { font-size:1.7rem; font-weight:700; margin-bottom:22px; color:var(--ink); letter-spacing:-.02em; }
.s-track { height:7px; border-radius:4px; background:rgba(255,255,255,0.18); overflow:hidden; margin-bottom:16px; box-shadow:inset 0 1px 3px rgba(0,0,0,0.4); }
.s-fill { height:100%; width:0%; border-radius:4px; background:linear-gradient(90deg,var(--blue),var(--blue-light)); transition:width .4s ease; box-shadow:0 0 12px var(--blue-glow), 0 0 4px rgba(91,156,246,0.8); }
.s-status { font-size:.82rem; color:var(--ink-2); min-height:1.5em; }

/* ── 3D TILT ────────────────────────────────────────────── */
.lg-tilt    { transition:transform 0.08s ease, box-shadow 0.08s ease !important; }
.lg-no-tilt { transition:transform 0.35s ease, box-shadow 0.35s ease !important; }

/* ── BLOB 4 ─────────────────────────────────────────────── */
.blob-4 { animation:blobDrift 25s ease-in-out infinite; }

/* ============================================================
   SCROLLBAR + RESPONSIVE
   ============================================================ */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.18); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.30); }

@media(max-width:680px) {
    .dash-cards { grid-template-columns:1fr; }
    .dash-header { padding:0 18px; }
    .login-card { padding:32px 22px; }
    .card-inner { padding:20px; }
    .form-card { padding:22px 18px; }
    .date-row { grid-template-columns:1fr; }
}

input[type="password"]::-ms-reveal { display:none; }
input[type="password"]::-ms-clear  { display:none; }
input[type="password"] { -webkit-appearance:none; appearance:none; }

/* Only dash-cards get GPU layer — prevents lag on all other .lg elements */
.dash-card.lg {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0px);
    will-change: transform;
}

/* ── TILT PERFORMANCE FIX ───────────────────────────────────
   backdrop-filter: blur() is extremely expensive when combined
   with 3D transforms. During tilt (--tilt-active set by JS),
   drop blur to minimum so GPU can keep up at 60fps.
   This is the real cause of the 100ms frame spikes.
*/
.dash-card.lg[style*="--tilt-active"] .lg::before,
.dash-card.lg[style*="--tilt-active"]::before {
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
}

/* Cleaner: target the card itself during tilt */
.dash-card.lg.tilting::before {
    backdrop-filter: blur(6px) saturate(130%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(6px) saturate(130%) brightness(1.05) !important;
    transition: backdrop-filter 0.1s ease !important;
}
.dash-card.lg::before {
    transition: backdrop-filter 0.3s ease;
}

/* ── FIX: White scrollbar track — extend background to full page ────────────
   The scrollbar gutter was showing white because html had no background.
   body::before is fixed/positioned so it doesn't extend to scrollbar area.
*/
html {
    background: #0a0015;
    /* Fallback — matches the darkest corner of the gradient */
    scrollbar-color: rgba(255,255,255,0.20) transparent;
    scrollbar-width: thin;
}

/* ── FIX: Date inputs liquid glass ──────────────────────────────────────────
   Override the default browser date picker styling.
   The calendar icon is inverted to show white on dark background.
*/
input[type=date].s-input,
input[type=date] {
    color-scheme: dark;
    /* color-scheme:dark tells the browser to render the picker in dark mode */
}
input[type=date].s-input::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.55);
    cursor: pointer;
}
input[type=date].s-input::-webkit-datetime-edit {
    color: var(--ink);
}
input[type=date].s-input::-webkit-datetime-edit-fields-wrapper {
    color: var(--ink);
}
input[type=date].s-input::-webkit-datetime-edit-text {
    color: var(--ink-3);
    padding: 0 2px;
}
input[type=date].s-input::-webkit-datetime-edit-month-field,
input[type=date].s-input::-webkit-datetime-edit-day-field,
input[type=date].s-input::-webkit-datetime-edit-year-field {
    color: var(--ink);
    background: transparent;
}
input[type=date].s-input::-webkit-datetime-edit-month-field:focus,
input[type=date].s-input::-webkit-datetime-edit-day-field:focus,
input[type=date].s-input::-webkit-datetime-edit-year-field:focus {
    background: rgba(91,156,246,0.25);
    color: #fff;
    border-radius: 3px;
    outline: none;
}

/* ── FIX: Date filter label colour for dark theme ───────────────────────── */
.date-filter-label { color: var(--ink-3) !important; }
.date-filter-clear { color: var(--blue-light) !important; }
.date-filter-clear:hover { background: rgba(91,156,246,0.15) !important; }

/* ── INNER EDGE GLOW ────────────────────────────────────────
   Left and right edge light — makes glass feel 3D and physical.
   Light wraps around the glass edges.
*/
.lg-glow-l {
    position: absolute; top: 8%; left: 0; width: 1px; height: 84%; z-index: 3; pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255,255,255,0.40) 35%,
        rgba(255,255,255,0.55) 50%,
        rgba(255,255,255,0.40) 65%,
        transparent 100%
    );
}
.lg-glow-r {
    position: absolute; top: 8%; right: 0; width: 1px; height: 84%; z-index: 3; pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255,255,255,0.18) 35%,
        rgba(255,255,255,0.25) 50%,
        rgba(255,255,255,0.18) 65%,
        transparent 100%
    );
}