/* ═══════════════════════════════════════════════════════════════
   GarageOS LIQUID GLASS — Override layer
   Prefix: html[data-glass] for specificity over all existing CSS.
   All existing styles preserved. This only overrides visuals.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ── New tokens ──────────────────────────────────────────────── */
html[data-glass]{
  --bg:#070b1a;
  --panel:rgba(255,255,255,0.07);--panel2:rgba(255,255,255,0.05);--panel3:rgba(255,255,255,0.10);
  --text:#eef2ff;--muted:#7b85a3;
  --line:rgba(255,255,255,0.09);--line2:rgba(255,255,255,0.14);
  --brand:#818cf8;--brand2:#34d399;--brand3:#38bdf8;
  --accent:#fbbf24;--danger:#fb7185;
  --glass-blur:blur(14px) saturate(155%);
  --glass-bg:rgba(255,255,255,0.07);
  --glass-bg-h:rgba(255,255,255,0.12);
  --glass-border:rgba(255,255,255,0.12);
  --glass-border-h:rgba(255,255,255,0.22);
  --specular:linear-gradient(90deg,transparent 4%,rgba(255,255,255,0.18)28%,rgba(255,255,255,0.42)50%,rgba(255,255,255,0.18)72%,transparent 96%);
  --prism:linear-gradient(90deg,transparent 2%,rgba(129,140,248,0.28)16%,rgba(56,189,248,0.38)33%,rgba(255,255,255,0.45)50%,rgba(34,211,238,0.38)67%,rgba(52,211,153,0.28)84%,transparent 98%);
  --sh:0 8px 32px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.10);
  --sh-lg:0 20px 60px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.12);
  --ease:cubic-bezier(.16,1,.3,1);
  --font:'Outfit',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color-scheme:dark;
}
/* Force dark */
html[data-glass],html[data-glass][data-theme="light"]{
  --bg:#070b1a;--panel:rgba(255,255,255,0.07);--panel2:rgba(255,255,255,0.05);
  --text:#eef2ff;--muted:#7b85a3;--line:rgba(255,255,255,0.09);
}

/* ── BODY: vivid automotive nebula ───────────────────────────── */
html[data-glass] body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em;
}
html[data-glass] body::before{
  content:'';position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(ellipse 800px 600px at 6% 4%,rgba(129,140,248,.22),transparent 55%),
    radial-gradient(ellipse 600px 450px at 93% 5%,rgba(232,121,249,.14),transparent 50%),
    radial-gradient(ellipse 500px 800px at 8% 55%,rgba(34,211,238,.10),transparent 55%),
    radial-gradient(ellipse 900px 450px at 50% 96%,rgba(251,191,36,.09),transparent 50%),
    radial-gradient(ellipse 400px 350px at 88% 78%,rgba(52,211,153,.08),transparent 45%),
    radial-gradient(ellipse 1100px 700px at 50% 35%,rgba(56,189,248,.06),transparent 60%);
}
html[data-glass] body::after{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle 260px at 20% 28%,rgba(129,140,248,.10),transparent 50%),
    radial-gradient(circle 200px at 78% 55%,rgba(232,121,249,.06),transparent 50%),
    radial-gradient(circle 280px at 52% 16%,rgba(56,189,248,.05),transparent 50%);
  animation:_orbs 22s ease-in-out infinite alternate;
}
@keyframes _orbs{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(24px,-16px) scale(1.04)}
  66%{transform:translate(-16px,20px) scale(.97)}
  100%{transform:translate(-8px,-18px) scale(1.02)}
}

/* ── TOPBAR ──────────────────────────────────────────────────── */
html[data-glass] .topbar{
  background:rgba(7,11,26,.58);
  backdrop-filter:blur(18px) saturate(165%);-webkit-backdrop-filter:blur(18px) saturate(165%);
  border-bottom:1px solid rgba(255,255,255,.06);height:70px;
  transition:all .32s var(--ease);
}
html[data-glass] .topbar::before{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:var(--prism);pointer-events:none;z-index:5;
}
html[data-glass] .topbar::after{
  content:'';position:absolute;bottom:-24px;left:10%;right:10%;height:24px;
  background:radial-gradient(ellipse at center,rgba(56,189,248,.04),transparent 70%);pointer-events:none;
}

/* ── LOGO ────────────────────────────────────────────────────── */
html[data-glass] .logo{
  background:linear-gradient(135deg,rgba(129,140,248,.25),rgba(56,189,248,.18),rgba(52,211,153,.12));
  border:1px solid rgba(129,140,248,.3);
  box-shadow:0 4px 20px rgba(129,140,248,.18),inset 0 1px 0 rgba(255,255,255,.15);
  border-radius:14px;overflow:hidden;
}
html[data-glass] .logo::before{
  content:'';position:absolute;inset:-60%;
  background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.12) 8%,transparent 16%,transparent 50%,rgba(56,189,248,.08) 58%,transparent 66%);
  animation:_shimmer 4.5s linear infinite;
}
@keyframes _shimmer{to{transform:rotate(360deg)}}
html[data-glass] .logo svg{color:#38bdf8;filter:drop-shadow(0 0 8px rgba(56,189,248,.4))}
html[data-glass] .brandtext .title{
  font-weight:800;font-size:18px;letter-spacing:-.03em;
  background:linear-gradient(135deg,#fff 30%,#38bdf8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
html[data-glass] .brandtext .subtitle{
  font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}

/* ── VEHICLE PILL ────────────────────────────────────────────── */
html[data-glass] .topbar-vehicle-pill{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);border-radius:999px;
  transition:all .32s var(--ease);
}
html[data-glass] .topbar-vehicle-pill:hover{
  background:var(--glass-bg-h);border-color:var(--glass-border-h);
  transform:translateY(-1px);box-shadow:var(--sh),0 0 18px rgba(56,189,248,.05);
}

/* ── FILEPILL ────────────────────────────────────────────────── */
html[data-glass] .filepill{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);border-radius:999px;
}
html[data-glass] .dot{
  background:#34d399;box-shadow:0 0 10px rgba(52,211,153,.5);
}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
html[data-glass] .sidebar{
  background:rgba(7,11,26,.5);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border-right:1px solid rgba(255,255,255,.05);
}
/* Prismatic right-edge glow */
html[data-glass] .sidebar::after{
  content:'';position:absolute;top:0;right:-1px;width:1px;height:100%;pointer-events:none;
  background:linear-gradient(180deg,rgba(129,140,248,.25),rgba(56,189,248,.18) 30%,rgba(34,211,238,.12) 50%,rgba(52,211,153,.08) 70%,transparent);
}

/* ── NAV ITEMS ───────────────────────────────────────────────── */
html[data-glass] .navitem{
  font-family:var(--font);font-weight:500;font-size:13px;
  border:1px solid transparent;border-radius:14px;
  transition:all .22s var(--ease);color:var(--muted);
}
html[data-glass] .navitem:hover{
  color:var(--text);background:var(--glass-bg);
  border-color:rgba(255,255,255,.05);
}
html[data-glass] .navitem:hover .nav-icon{transform:scale(1.15)}
html[data-glass] .navitem.active{
  color:#fff;font-weight:600;
  background:linear-gradient(135deg,rgba(129,140,248,.16),rgba(56,189,248,.08));
  border:1px solid rgba(129,140,248,.22);
  box-shadow:0 4px 18px rgba(129,140,248,.10),inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-glass] .navitem.active::before{
  content:'';position:absolute;left:0;top:18%;bottom:18%;width:3px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,#818cf8,#38bdf8,#34d399);
  box-shadow:0 0 10px rgba(129,140,248,.35);
}
html[data-glass] .navitem.active::after{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);pointer-events:none;
}
html[data-glass] .nav-zone-label{
  font-family:var(--font);font-size:9px;font-weight:700;
  letter-spacing:.14em;opacity:.38;
}
html[data-glass] .navsep{border-color:rgba(255,255,255,.04)}

/* ── BUTTONS ─────────────────────────────────────────────────── */
html[data-glass] .btn{
  font-family:var(--font);font-weight:600;font-size:13px;
  border:1px solid rgba(129,140,248,.28);border-radius:14px;
  background:linear-gradient(135deg,rgba(129,140,248,.18),rgba(56,189,248,.10));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;transition:all .32s var(--ease);
  box-shadow:0 4px 16px rgba(129,140,248,.12),inset 0 1px 0 rgba(255,255,255,.10);
  position:relative;overflow:hidden;
}
html[data-glass] .btn::before{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent);
  border-radius:inherit;pointer-events:none;
}
html[data-glass] .btn:hover{
  background:linear-gradient(135deg,rgba(129,140,248,.30),rgba(56,189,248,.18));
  border-color:rgba(129,140,248,.45);
  box-shadow:0 8px 30px rgba(129,140,248,.22),inset 0 1px 0 rgba(255,255,255,.12);
  transform:translateY(-2px);
}
html[data-glass] .btn.ghost{
  background:var(--glass-bg);border-color:var(--glass-border);
  box-shadow:var(--sh);
}
html[data-glass] .btn.ghost:hover{background:var(--glass-bg-h);border-color:var(--glass-border-h)}
html[data-glass] .iconbtn{
  border:1px solid var(--glass-border);background:var(--glass-bg);
  backdrop-filter:blur(10px);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:all .32s var(--ease);
}
html[data-glass] .iconbtn:hover{
  background:var(--glass-bg-h);border-color:var(--glass-border-h);transform:translateY(-1px);
}

/* ── MENU ────────────────────────────────────────────────────── */
html[data-glass] .menu{
  border-radius:20px;border:1px solid var(--glass-border-h);
  background:rgba(7,11,26,.80);backdrop-filter:blur(24px) saturate(165%);
  box-shadow:var(--sh-lg);
  transition:all .28s cubic-bezier(.34,1.56,.64,1);
}
html[data-glass] .menuit{font-family:var(--font);border-radius:10px}
html[data-glass] .menuit:hover{background:var(--glass-bg-h)}

/* ── HERO ────────────────────────────────────────────────────── */
html[data-glass] .hero{
  background:linear-gradient(135deg,rgba(129,140,248,.14),rgba(56,189,248,.09),rgba(52,211,153,.05));
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:28px;
  box-shadow:var(--sh-lg),0 0 50px rgba(129,140,248,.06),0 0 100px rgba(56,189,248,.03);
  position:relative;overflow:hidden;
}
/* Specular */
html[data-glass] .hero::before{
  content:'';position:absolute;top:0;left:6%;right:6%;height:1px;
  background:var(--specular);pointer-events:none;z-index:5;
}
/* Refraction orb */
html[data-glass] .hero::after{
  content:'';position:absolute;top:-30%;right:-10%;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.10),rgba(232,121,249,.05) 40%,transparent 60%);
  animation:_heroOrb 10s ease-in-out infinite alternate;pointer-events:none;
}
@keyframes _heroOrb{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-24px,16px) scale(1.12)}}

html[data-glass] .h-title{font-family:var(--font);font-weight:800;letter-spacing:-.035em}
html[data-glass] .hero-card{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;overflow:hidden;
}
html[data-glass] .hero-card::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:var(--specular);pointer-events:none;z-index:5;
}
html[data-glass] .big{
  font-family:var(--font);font-weight:800;letter-spacing:-.035em;
  background:linear-gradient(135deg,#fff 20%,#38bdf8 60%,#34d399);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── CARDS — the main glass panels ───────────────────────────── */
html[data-glass] .card{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:22px;
  box-shadow:var(--sh);transition:all .32s var(--ease);
  position:relative;overflow:hidden;
}
/* Specular highlight */
html[data-glass] .card::before{
  content:'';position:absolute;top:0;left:6%;right:6%;height:1px;
  background:var(--specular);pointer-events:none;z-index:5;
}
/* Inner top refraction */
html[data-glass] .card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  border-radius:inherit;pointer-events:none;z-index:1;
}
html[data-glass] .card:hover{
  border-color:var(--glass-border-h);
  box-shadow:var(--sh-lg),0 0 40px rgba(129,140,248,.04);
  transform:translateY(-3px);
}
html[data-glass] .card.inner{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:18px;backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-glass] .card.inner::before{
  background:linear-gradient(90deg,transparent 12%,rgba(255,255,255,.07)40%,rgba(255,255,255,.12)50%,rgba(255,255,255,.07)60%,transparent 88%);
}
html[data-glass] .card.inner:hover{background:var(--glass-bg);transform:translateY(-2px)}
html[data-glass] .cardhead h2{font-family:var(--font);font-weight:700;letter-spacing:-.02em}
html[data-glass] h2{font-family:var(--font)}
html[data-glass] h3,html[data-glass] .h3{font-family:var(--font)}

/* ── PILLS ───────────────────────────────────────────────────── */
html[data-glass] .pill{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(8px);border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  font-family:var(--font);font-weight:600;
  transition:all .18s var(--ease);
}
html[data-glass] .pill:hover{background:var(--glass-bg-h);color:var(--text)}
html[data-glass] .pill[style*="cursor"]:hover,
html[data-glass] .pill[data-trip-quick]:hover{
  border-color:rgba(56,189,248,.3);
  box-shadow:0 2px 14px rgba(56,189,248,.12),inset 0 1px 0 rgba(255,255,255,.10);
  transform:translateY(-1px);color:#fff;
}

/* ── INPUTS ──────────────────────────────────────────────────── */
html[data-glass] .input,
html[data-glass] .textarea,
html[data-glass] .select{
  font-family:var(--font);border:1px solid var(--glass-border);
  background:rgba(255,255,255,.04);backdrop-filter:blur(4px);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);transition:all .32s var(--ease);
}
html[data-glass] .input:focus,
html[data-glass] .textarea:focus,
html[data-glass] .select:focus{
  border-color:rgba(129,140,248,.45);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(129,140,248,.12),0 4px 18px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-glass] .fxLabel{font-family:var(--font);font-weight:700;letter-spacing:.1em;opacity:.5}

/* ── TABS ────────────────────────────────────────────────────── */
html[data-glass] .tabs{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);border-radius:22px;
  position:relative;overflow:hidden;
}
html[data-glass] .tabs::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:var(--specular);pointer-events:none;z-index:5;
}
html[data-glass] .tab{
  font-family:var(--font);font-weight:600;border-radius:14px;
  transition:all .22s var(--ease);
}
html[data-glass] .tab.active{
  background:linear-gradient(135deg,rgba(129,140,248,.16),rgba(56,189,248,.08));
  border-color:rgba(129,140,248,.22);color:#fff;
  box-shadow:0 2px 12px rgba(129,140,248,.10),inset 0 1px 0 rgba(255,255,255,.08);
}

/* ── SIGNAL RAIL ─────────────────────────────────────────────── */
html[data-glass] .signal-item{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);border-radius:18px;
  box-shadow:var(--sh);position:relative;overflow:hidden;
}
html[data-glass] .signal-item::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:var(--specular);pointer-events:none;z-index:5;
}
html[data-glass] .signal-item.urgent{border-color:rgba(251,113,133,.18)}
html[data-glass] .signal-item.warning{border-color:rgba(251,191,36,.18)}
html[data-glass] .signal-action{
  border:1px solid var(--glass-border);background:var(--glass-bg);
  border-radius:999px;backdrop-filter:blur(8px);
}
html[data-glass] .signal-dismiss{background:var(--glass-bg);border-radius:999px}

/* ── KPIs ────────────────────────────────────────────────────── */
html[data-glass] .kpis>div{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;overflow:hidden;transition:all .32s var(--ease);
}
html[data-glass] .kpis>div::before{
  content:'';position:absolute;top:0;left:15%;right:15%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);pointer-events:none;
}
html[data-glass] .kpis>div:hover{
  background:var(--glass-bg-h);transform:translateY(-3px);box-shadow:var(--sh);
}

/* ── TABLES ──────────────────────────────────────────────────── */
html[data-glass] thead th{font-family:var(--font);font-weight:700;letter-spacing:.1em}
html[data-glass] tbody tr:hover{background:var(--glass-bg)}

/* ── SPECIAL NUMBERS ─────────────────────────────────────────── */
html[data-glass] #healthScore{
  font-family:var(--font);font-size:50px;font-weight:900;letter-spacing:-.04em;
  background:linear-gradient(135deg,#fff 10%,#38bdf8,#34d399,#22d3ee);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 22px rgba(52,211,153,.22));
}
html[data-glass] #kpiTotal12{
  font-family:var(--font);
  background:linear-gradient(135deg,#fff 20%,#38bdf8,#818cf8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── MODALS ──────────────────────────────────────────────────── */
html[data-glass] .modalbox,
html[data-glass] .overlay-card{
  background:rgba(7,11,26,.88);border:1px solid var(--glass-border-h);
  backdrop-filter:blur(40px) saturate(200%);border-radius:28px;
  box-shadow:var(--sh-lg);
}
html[data-glass] .modalback{background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}

/* ── TOASTS ──────────────────────────────────────────────────── */
html[data-glass] .toast,html[data-glass] [class*="toast"]{
  border-radius:22px;border:1px solid var(--glass-border-h);
  background:rgba(7,11,26,.84);backdrop-filter:blur(20px) saturate(165%);
  box-shadow:var(--sh-lg);
}

/* ── AI OUTPUTS ──────────────────────────────────────────────── */
html[data-glass] .aiout{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(8px);border-radius:18px;
}
html[data-glass] .code,html[data-glass] pre.code{
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.05);border-radius:14px;
}

/* ── PROGRESS BARS ───────────────────────────────────────────── */
html[data-glass] progress::-webkit-progress-bar{background:rgba(255,255,255,.06);border-radius:999px}
html[data-glass] progress::-webkit-progress-value{background:linear-gradient(90deg,#818cf8,#38bdf8);border-radius:999px}

/* ── SCROLLBAR ───────────────────────────────────────────────── */
html[data-glass] ::-webkit-scrollbar{width:5px;height:5px}
html[data-glass] ::-webkit-scrollbar-track{background:transparent}
html[data-glass] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:999px}
html[data-glass] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)}
html[data-glass] ::selection{background:rgba(129,140,248,.30);color:#fff}
html[data-glass] :focus-visible{outline:2px solid rgba(129,140,248,.45);outline-offset:2px}

/* ── FOOTER ──────────────────────────────────────────────────── */
html[data-glass] .footer{border-top:1px solid rgba(255,255,255,.05);background:transparent}

/* ── MISC ────────────────────────────────────────────────────── */
html[data-glass] .template-bar,
html[data-glass] .recurring-banner{
  border:1px solid var(--glass-border);background:var(--glass-bg);
  backdrop-filter:blur(14px);border-radius:18px;
}
html[data-glass] #costHeatmap td:hover{
  transform:scale(1.15);box-shadow:0 0 14px rgba(56,189,248,.18);z-index:3;position:relative;
}

/* ── STAGGERED CARD ANIMATIONS ───────────────────────────────── */
html[data-glass] .view.active .card{animation:_cardIn .5s var(--ease) both}
html[data-glass] .view.active .card:nth-child(1){animation-delay:.04s}
html[data-glass] .view.active .card:nth-child(2){animation-delay:.08s}
html[data-glass] .view.active .card:nth-child(3){animation-delay:.12s}
html[data-glass] .view.active .card:nth-child(4){animation-delay:.16s}
html[data-glass] .view.active .card:nth-child(5){animation-delay:.20s}
html[data-glass] .view.active .card:nth-child(6){animation-delay:.24s}
@keyframes _cardIn{
  from{opacity:0;transform:translateY(18px) scale(.98);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}
html[data-glass] .view.active .hero{animation:_heroIn .55s var(--ease) both}
@keyframes _heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

html[data-glass] .view.active{animation:_viewIn .45s var(--ease) both}
@keyframes _viewIn{
  from{opacity:0;transform:translateY(12px);filter:blur(2px)}
  to{opacity:1;transform:none;filter:none}
}

/* ── RESPONSIVE MOBILE DOCK ──────────────────────────────────── */
@media(max-width:599px){
  html[data-glass] .sidebar{
    background:rgba(7,11,26,.85);
    backdrop-filter:blur(18px) saturate(165%);-webkit-backdrop-filter:blur(18px) saturate(165%);
    border-top:1px solid rgba(255,255,255,.06);
  }
  /* Rainbow top glow on mobile dock */
  html[data-glass] .sidebar::before{
    content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
    background:var(--prism);pointer-events:none;z-index:5;
  }
  html[data-glass] .navitem{border-radius:10px}
}
@media(max-width:1024px){
  html[data-glass] .sidebar{
    background:rgba(7,11,26,.5);
    backdrop-filter:blur(22px) saturate(170%);
    border-bottom:1px solid rgba(255,255,255,.05);
  }
}

/* ── PRINT ───────────────────────────────────────────────────── */
@media print{
  html[data-glass] body::before,html[data-glass] body::after{display:none}
  html[data-glass] .card{backdrop-filter:none;background:#fff;color:#000;box-shadow:none;border:1px solid #ccc}
}


html.lgx-scrolled[data-glass] .topbar{background:rgba(7,11,26,.78);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);}
html[data-glass] .card,html[data-glass] .hero,html[data-glass] .hero-card{will-change:auto !important;}