/* =========================================================================
   BACKBENCH — LIQUID GLASS (Premium, v2)
   A material, not a blur. Every pane has: a frosted body, a rim that is
   brighter where the light lands (top-left), an inner shadow where the
   glass thickens (bottom), a soft drop shadow under it, and — on Chromium —
   a real lens that bends what sits behind the smaller, thicker pieces
   (header, dock, active tab, primary buttons).
   Every selector starts with html:root[data-theme="premium"]; other
   themes are untouched.
   ========================================================================= */
html:root[data-theme="premium"]{
  --bg:#06080C; --bg-2:#0C1016; --bg-3:#121822; --bg-4:#1A2230;
  --tx:#F5F8FC; --tx-2:#C4CEDB; --tx-3:#8E9AAB;
  --line:rgba(190,220,255,.13); --line-2:rgba(200,228,255,.24);
  --accent:#6CCFF6; --accent-2:#3E8EF0;
  --ink-1:#7ED6B4; --ink-2:#6CCFF6; --ink-3:#E39BB2; --ink-4:#E4C98F; --ink-5:#8FB6EA; --ink-6:#E3A488;
  --r:24px; --r-sm:14px; --r-lg:32px;
  /* the three thicknesses of glass */
  --g1:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 42%,rgba(160,200,255,.05) 78%,rgba(255,255,255,.08));
  --g2:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.06) 46%,rgba(170,210,255,.08));
  --g3:linear-gradient(150deg,rgba(26,34,48,.82),rgba(12,17,26,.86));
  --gblur:blur(22px) saturate(1.9) brightness(1.06);
  /* thick glass: a bright band just inside the top edge, a weaker one
     inside the bottom edge (light passing through the slab), a soft inner
     glow under the top, and the slab's own shadow underneath */
  --gsh:0 24px 48px -26px rgba(0,0,0,.9),0 4px 12px -6px rgba(0,0,0,.5),
        inset 0 1.5px 0 rgba(255,255,255,.34),inset 0 -1.5px 0 rgba(255,255,255,.10),
        inset 0 14px 22px -16px rgba(255,255,255,.16),inset 0 -16px 26px -18px rgba(110,180,255,.16);
  --gsh-lift:0 34px 60px -28px rgba(0,0,0,.95),0 6px 16px -8px rgba(0,0,0,.55),
        inset 0 1.5px 0 rgba(255,255,255,.42),inset 0 -1.5px 0 rgba(255,255,255,.14),
        inset 0 18px 26px -18px rgba(255,255,255,.2),inset 0 -22px 34px -24px rgba(120,190,255,.22);
  /* a glass PILL, Blender-style: two bright caustic arcs just inside the rim */
  --gpill:inset 0 1.5px 0 rgba(255,255,255,.62),inset 0 -1.5px 0 rgba(255,255,255,.30),
        inset 0 0 0 1px rgba(255,255,255,.10),inset 0 7px 10px -7px rgba(255,255,255,.34),
        inset 0 -7px 10px -7px rgba(255,255,255,.18);
}

/* ---------- the room: graphite, deep blue air, two sheets of curved glass */
html:root[data-theme="premium"] .lq-base{background:
  radial-gradient(90% 60% at 20% -10%,rgba(40,90,150,.42),transparent 62%),
  radial-gradient(80% 60% at 110% 40%,rgba(24,70,130,.40),transparent 60%),
  radial-gradient(90% 60% at -10% 90%,rgba(20,50,90,.40),transparent 62%),
  radial-gradient(60% 40% at 60% 110%,rgba(60,110,170,.22),transparent 64%),
  linear-gradient(180deg,#0A0E15,#06080D 55%,#040509)}
html:root[data-theme="premium"] .lq-flow i:nth-child(1){background:
  radial-gradient(circle at 34% 34%,rgba(150,190,235,.45),transparent 60%),
  radial-gradient(circle at 70% 66%,rgba(30,70,120,.85),transparent 68%)}
html:root[data-theme="premium"] .lq-flow i:nth-child(3){background:
  radial-gradient(circle at 40% 48%,rgba(110,150,200,.42),transparent 60%),
  radial-gradient(circle at 74% 34%,rgba(62,142,240,.30),transparent 64%)}
.lq-shape{display:none}
html:root[data-theme="premium"] .lq-shape{display:block;position:absolute;pointer-events:none;
  border-radius:50%;border:1px solid rgba(200,230,255,.10);
  background:radial-gradient(closest-side,transparent 86%,rgba(170,215,255,.07) 96%,transparent);
  box-shadow:inset 0 0 60px rgba(120,180,255,.06),0 0 80px -30px rgba(120,180,255,.25);
  animation:lqShape 70s ease-in-out infinite alternate;will-change:transform}
html:root[data-theme="premium"] .lq-shape-1{width:120vmax;height:120vmax;left:-78vmax;top:-10vmax}
html:root[data-theme="premium"] .lq-shape-2{width:90vmax;height:90vmax;right:-62vmax;top:30vh;
  animation-duration:94s;animation-delay:-30s;border-color:rgba(200,230,255,.07)}
@keyframes lqShape{to{transform:translate3d(4vmax,-3vmax,0) rotate(18deg)}}

/* ---------- the pane ------------------------------------------------------ */
html:root[data-theme="premium"] .card,
html:root[data-theme="premium"] .strip-i,
html:root[data-theme="premium"] .tile,
html:root[data-theme="premium"] .hero-r,
html:root[data-theme="premium"] .qk,
html:root[data-theme="premium"] .pl,
html:root[data-theme="premium"] .cram-act,
html:root[data-theme="premium"] .mkc,
html:root[data-theme="premium"] .tr-c{
  background:var(--g1)!important;
  -webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);
  border:1px solid rgba(200,228,255,.10)!important;
  box-shadow:var(--gsh)!important;
  transition:transform .5s var(--spring),box-shadow .4s var(--ease),background .3s var(--ease)}
/* the rim: bright where the light lands, fading round the far side */
html:root[data-theme="premium"] .card::before,
html:root[data-theme="premium"] .strip-i::before,
html:root[data-theme="premium"] .tile::before,
html:root[data-theme="premium"] .qk::before,
html:root[data-theme="premium"] .pl::before,
html:root[data-theme="premium"] .cram-act::before,
html:root[data-theme="premium"] .mkc::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:0;
  background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 30%,
    rgba(255,255,255,0) 55%,rgba(150,200,255,.12) 80%,rgba(255,255,255,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
html:root[data-theme="premium"] .strip-i,html:root[data-theme="premium"] .qk,
html:root[data-theme="premium"] .pl{position:relative}
html:root[data-theme="premium"] .strip-i>*,html:root[data-theme="premium"] .qk>*,
html:root[data-theme="premium"] .pl>*{position:relative;z-index:1}
@media (hover:hover) and (pointer:fine){
  html:root[data-theme="premium"] button.card:hover,html:root[data-theme="premium"] a.card:hover,
  html:root[data-theme="premium"] .strip-i[data-go2]:hover,html:root[data-theme="premium"] .tile:hover,
  html:root[data-theme="premium"] .qk:hover,html:root[data-theme="premium"] .mkc:hover,
  html:root[data-theme="premium"] .cram-act:hover{
    transform:translateY(-3px);box-shadow:var(--gsh-lift)!important;background:var(--g2)!important}
}

/* the heroes are thicker glass */
html:root[data-theme="premium"] #v-today .hero-r,
html:root[data-theme="premium"] .cram-hero,
html:root[data-theme="premium"] .mk-hero,
html:root[data-theme="premium"] .wl-hero,
html:root[data-theme="premium"] .en-hero{
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(108,207,246,.16),transparent 55%),
    var(--g2)!important;box-shadow:var(--gsh-lift)!important;border-radius:var(--r-lg)!important}

/* rows inside a pane stay flat — not every element is a floating card */
html:root[data-theme="premium"] .card .card{background:rgba(255,255,255,.035)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html:root[data-theme="premium"] .card .card::before{opacity:.35}
html:root[data-theme="premium"] .rw{border-color:rgba(200,228,255,.08)}

/* ---------- Today --------------------------------------------------------- */
html:root[data-theme="premium"] #v-today .hero-l .dsp{
  background:linear-gradient(100deg,#fff 0 58%,#BFE9FF 80%,#6CCFF6);-webkit-background-clip:text;
  background-clip:text;color:transparent}
html:root[data-theme="premium"] #v-today .hero-l{border-left-color:var(--accent)}
html:root[data-theme="premium"] .hero-lv .ring b{display:flex;flex-direction:column;align-items:center;line-height:1}
html:root[data-theme="premium"] .hero-lv .ring b::after{content:"Level";font-size:.62rem;letter-spacing:.06em;
  color:var(--tx-2);font-weight:600;margin-top:3px;font-family:inherit}
html:root[data-theme="premium"] .ring .fg{stroke:var(--accent);
  filter:drop-shadow(0 0 6px rgba(108,207,246,.55))}
html:root[data-theme="premium"] .hero-streak{background:rgba(255,255,255,.08)!important;color:var(--tx)!important;
  border:1px solid rgba(255,255,255,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)!important}
html:root[data-theme="premium"] .hero-streak svg{color:#F5C25A}
html:root[data-theme="premium"] .wk-b{background:rgba(255,255,255,.05);border:1px solid rgba(200,228,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -6px 10px -8px rgba(0,0,0,.6)}
html:root[data-theme="premium"] .wk-b .a{background:rgba(108,207,246,.28);opacity:1}
html:root[data-theme="premium"] .wk-b .f{background:linear-gradient(180deg,#9BE0FF,#3E8EF0);opacity:1;
  box-shadow:0 0 12px rgba(108,207,246,.5)}
/* the four stats become four panes with an icon and a way in */
html:root[data-theme="premium"] .strip{display:grid;gap:12px;background:none!important;border:0!important;
  box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible}
html:root[data-theme="premium"] .strip::before,html:root[data-theme="premium"] .strip::after{display:none}
html:root[data-theme="premium"] .strip-i{border-radius:var(--r)!important;border-right:1px solid rgba(200,228,255,.10)!important;
  border-bottom:1px solid rgba(200,228,255,.10)!important}
html:root[data-theme="premium"] .strip-ic{display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--tx-2)}
html:root[data-theme="premium"] .strip-go{display:grid;place-items:center;position:absolute!important;right:12px;top:11px;
  width:26px;height:26px;font-size:1.05rem!important;border-radius:50%;font-size:1.2rem;line-height:1;color:var(--tx-2);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
html:root[data-theme="premium"] .strip-i .big{text-shadow:0 0 24px rgba(108,207,246,.18)}

/* ---------- buttons: glass lozenges ------------------------------------- */
html:root[data-theme="premium"] .btn{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;
  border:1px solid rgba(210,232,255,.16)!important;color:var(--tx)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.04),0 8px 18px -12px rgba(0,0,0,.8)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)}
html:root[data-theme="premium"] .btn-q{background:rgba(255,255,255,.04)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important}
html:root[data-theme="premium"] .btn-p,html:root[data-theme="premium"] .un-go{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(214,232,248,.9))!important;color:#07121E!important;
  border:1px solid rgba(255,255,255,.7)!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px rgba(80,130,190,.25),0 12px 26px -12px rgba(108,207,246,.55),
    0 2px 6px -2px rgba(0,0,0,.5)!important}
html:root[data-theme="premium"] .btn-p svg,html:root[data-theme="premium"] .un-go svg{color:#07121E}
html:root[data-theme="premium"] .btn-bad{background:linear-gradient(180deg,rgba(238,107,100,.9),rgba(200,70,70,.85))!important;color:#fff!important}
html:root[data-theme="premium"] .btn:active,html:root[data-theme="premium"] .btn.lq-down{transform:scale(.96)}

/* chips, segs, pills */
html:root[data-theme="premium"] .chip,html:root[data-theme="premium"] .cram-sub,html:root[data-theme="premium"] .mk-chip{
  background:rgba(255,255,255,.05)!important;border:1px solid rgba(200,228,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
html:root[data-theme="premium"] .chip[aria-pressed="true"],html:root[data-theme="premium"] .cram-sub[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(108,207,246,.34),rgba(62,142,240,.22))!important;color:#fff!important;
  border-color:rgba(160,220,255,.5)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px -8px rgba(108,207,246,.6)}
html:root[data-theme="premium"] .seg,html:root[data-theme="premium"] .mk-tabs{
  background:rgba(0,0,0,.25)!important;border:1px solid rgba(200,228,255,.10)!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.06)}
html:root[data-theme="premium"] .seg button[aria-pressed="true"],html:root[data-theme="premium"] .mk-tabs button[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07))!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -8px rgba(0,0,0,.8)!important}
html:root[data-theme="premium"] .pill-ok{background:rgba(67,206,139,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* inputs sit INTO the glass */
html:root[data-theme="premium"] .inp,html:root[data-theme="premium"] .mk-sbox,html:root[data-theme="premium"] select.inp{
  background:rgba(0,0,0,.28)!important;border:1px solid rgba(200,228,255,.12)!important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.05)!important}
html:root[data-theme="premium"] .inp:focus{border-color:rgba(108,207,246,.6)!important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 0 0 4px rgba(108,207,246,.14)!important}

/* meters glow a little */
html:root[data-theme="premium"] .meter,html:root[data-theme="premium"] .un-bar,
html:root[data-theme="premium"] .cram-now-bar,html:root[data-theme="premium"] .wl-bar{
  background:rgba(0,0,0,.3)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
html:root[data-theme="premium"] .meter i{box-shadow:0 0 10px currentColor}

/* dialogs and the tour card: the thickest glass */
html:root[data-theme="premium"] dialog{background:var(--g3)!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
  border:1px solid rgba(210,232,255,.16)!important;box-shadow:var(--gsh-lift),0 60px 120px -40px rgba(0,0,0,.9)!important}
html:root[data-theme="premium"] dialog::backdrop{background:rgba(3,6,12,.55);backdrop-filter:blur(8px) saturate(1.2)}
html:root[data-theme="premium"] .tr-c{background:var(--g3)!important}
html:root[data-theme="premium"] .toast{background:rgba(20,28,40,.78)!important;border:1px solid rgba(210,232,255,.16);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 20px 40px -20px rgba(0,0,0,.9)}
html:root[data-theme="premium"] .empty{border-color:rgba(200,228,255,.16)!important;
  background:rgba(255,255,255,.025)!important}

/* ---------- the header and the dock: thick pieces, with a real lens ----- */
html:root[data-theme="premium"] .mtop{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),rgba(8,12,19,.72)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.9);backdrop-filter:blur(26px) saturate(1.9);
  border-bottom:1px solid rgba(210,232,255,.12)!important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),0 10px 30px -18px rgba(0,0,0,.8)}
html:root[data-theme="premium"] .mtop .chip,html:root[data-theme="premium"] .mtop [class*="cred"]{
  background:rgba(255,255,255,.07)!important;border:1px solid rgba(210,232,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important}
html:root[data-theme="premium"] .rail{background:rgba(8,11,17,.55)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);
  border-right:1px solid rgba(210,232,255,.08)!important}
html:root[data-theme="premium"] .nav-ind{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05))!important;
  border:1px solid rgba(210,232,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px -10px rgba(0,0,0,.8)!important}

@media (max-width:960px){
  /* the header floats as its own pane */
  html:root[data-theme="premium"] .mtop{margin-inline:calc(var(--gut) * -1 + 10px)!important;
    top:calc(env(safe-area-inset-top,0px) + 8px)!important;border-radius:26px;
    border:1px solid rgba(210,232,255,.14)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.05),0 20px 40px -22px rgba(0,0,0,.9)!important}
  html:root[data-theme="premium"] .tabs{
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),rgba(8,12,19,.82)!important;
    -webkit-backdrop-filter:blur(26px) saturate(2);backdrop-filter:blur(26px) saturate(2);
    border:1px solid rgba(210,232,255,.16)!important;border-radius:30px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.06),
      0 24px 50px -20px rgba(0,0,0,.95),0 4px 12px -4px rgba(0,0,0,.6)!important}
  /* the active tab: a raised lens of blue-tinted glass */
  html:root[data-theme="premium"] .tab-ind{border-radius:24px!important;
    background:radial-gradient(120% 90% at 50% 0%,rgba(150,220,255,.38),rgba(62,142,240,.22) 60%,rgba(40,100,200,.28))!important;
    border:1px solid rgba(170,225,255,.55)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(20,60,140,.45),
      0 10px 22px -8px rgba(62,142,240,.65),0 0 0 1px rgba(0,0,0,.2)!important;
    transition:transform .6s var(--spring),opacity .24s!important}
  html:root[data-theme="premium"] .tb[aria-current="page"],
  html:root[data-theme="premium"] .tb[aria-current="page"] svg{color:#fff!important}
  html:root[data-theme="premium"] .tb[aria-current="page"] svg{filter:drop-shadow(0 0 6px rgba(150,220,255,.8))}
}
/* the lens — Chromium only; every other browser keeps the frost */
html.lq-lens:root[data-theme="premium"] .tab-ind{
  -webkit-backdrop-filter:url(#bb-lens) blur(3px) saturate(1.8) brightness(1.15);
  backdrop-filter:url(#bb-lens) blur(3px) saturate(1.8) brightness(1.15)}


/* =========================================================================
   v57 · LIQUID, not just frosted
   ========================================================================= */
/* every pill-shaped control is a piece of thick clear glass */
html:root[data-theme="premium"] .btn,
html:root[data-theme="premium"] .chip,
html:root[data-theme="premium"] .cram-sub,
html:root[data-theme="premium"] .mk-chip,
html:root[data-theme="premium"] .hero-streak,
html:root[data-theme="premium"] .strip-go,
html:root[data-theme="premium"] .mtop .chip,
html:root[data-theme="premium"] .mtop [class*="cred"]{
  box-shadow:var(--gpill),0 8px 18px -12px rgba(0,0,0,.85)!important}
html:root[data-theme="premium"] .btn-p,html:root[data-theme="premium"] .un-go{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(222,236,250,.86))!important;
  box-shadow:inset 0 1.5px 0 #fff,inset 0 -2px 3px rgba(60,110,170,.22),inset 0 -8px 12px -8px rgba(90,150,220,.28),
    0 10px 22px -12px rgba(0,0,0,.8),0 2px 4px -2px rgba(0,0,0,.5)!important}

/* the level ring reads as a glass dial */
html:root[data-theme="premium"] .hero-lv .ring b::after{font-family:"Instrument Sans",system-ui,sans-serif;letter-spacing:.04em}
html:root[data-theme="premium"] .hero-lv .ring{border-radius:50%;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.18),inset 0 -8px 16px -10px rgba(110,180,255,.22)}

/* subject attendance cards */
html:root[data-theme="premium"] .sa{background:var(--g1);border:1px solid rgba(200,228,255,.10);
  box-shadow:var(--gsh)}
html:root[data-theme="premium"] .sa-bg{stroke:rgba(255,255,255,.08)}
html:root[data-theme="premium"] .sa-fg{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--sa) 70%,transparent))}
html:root[data-theme="premium"] .sa-ring{border-radius:50%;background:rgba(0,0,0,.18);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.08)}
@media (hover:hover) and (pointer:fine){
  html:root[data-theme="premium"] .sa:hover{background:var(--g2);box-shadow:var(--gsh-lift)}
}

/* ---- the dock and the header: one material, same tone, no colour cast ---- */
@media (max-width:960px){
  html:root[data-theme="premium"] .mtop,
  html:root[data-theme="premium"] .tabs{
    background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03)),rgba(9,13,20,.80)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.7);backdrop-filter:blur(24px) saturate(1.7);
    border:1px solid rgba(210,232,255,.14)!important;
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.26),inset 0 -1.5px 0 rgba(255,255,255,.07),
      inset 0 12px 20px -14px rgba(255,255,255,.12),0 22px 44px -22px rgba(0,0,0,.95)!important}
  /* the active tab: a clear glass lens — tinted only by what is behind it */
  html:root[data-theme="premium"] .tab-ind{
    background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 55%,rgba(255,255,255,.10))!important;
    border:1px solid rgba(220,238,255,.30)!important;
    box-shadow:var(--gpill),0 6px 14px -8px rgba(0,0,0,.8)!important}
  html:root[data-theme="premium"] .tb[aria-current="page"] svg{filter:none;color:#fff!important}
  html:root[data-theme="premium"] .tb[aria-current="page"] span{color:#fff}
}
html.lq-lens:root[data-theme="premium"] .tab-ind{
  -webkit-backdrop-filter:url(#bb-lens) blur(1.5px) saturate(1.4) brightness(1.12);
  backdrop-filter:url(#bb-lens) blur(1.5px) saturate(1.4) brightness(1.12)}

/* ---- desktop: roomier, calmer ---- */
@media (min-width:961px){
  html:root[data-theme="premium"] .main{max-width:1480px}
  html:root[data-theme="premium"] .rail{
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(8,11,17,.62)!important;
    box-shadow:inset -1px 0 0 rgba(255,255,255,.05),20px 0 60px -40px rgba(0,0,0,.9)}
  html:root[data-theme="premium"] .nv{border-radius:14px}
  html:root[data-theme="premium"] .nav-ind{border-radius:14px;box-shadow:var(--gpill),0 8px 18px -12px rgba(0,0,0,.8)!important}
  html:root[data-theme="premium"] .mtop{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),rgba(7,10,16,.55)!important}
}

/* =========================================================================
   PERFORMANCE — a phone composites every backdrop-filter on every frame
   it scrolls. Only the pieces that float over moving content keep one
   (header, dock, dialogs, the level hero); everything else gets the same
   look from a baked gradient, which costs nothing.
   ========================================================================= */
@media (max-width:960px),(hover:none){
  html:root[data-theme="premium"] .card,html:root[data-theme="premium"] .strip-i,
  html:root[data-theme="premium"] .tile,html:root[data-theme="premium"] .qk,
  html:root[data-theme="premium"] .sa,html:root[data-theme="premium"] .cram-act,
  html:root[data-theme="premium"] .mkc,html:root[data-theme="premium"] .btn,
  html:root[data-theme="premium"] .chip,html:root[data-theme="premium"] .note,
  html:root[data-theme="premium"] .more-sec,html:root[data-theme="premium"] .empty{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html:root[data-theme="premium"] .card,html:root[data-theme="premium"] .strip-i,
  html:root[data-theme="premium"] .tile,html:root[data-theme="premium"] .qk,
  html:root[data-theme="premium"] .sa,html:root[data-theme="premium"] .cram-act,
  html:root[data-theme="premium"] .mkc{
    background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.035) 42%,rgba(150,195,255,.05) 78%,rgba(255,255,255,.07)),
      rgba(12,17,26,.55)!important}
  html:root[data-theme="premium"] .lq-sheen-2,html:root[data-theme="premium"] .lq-ripple{display:none}
  html:root[data-theme="premium"] .card::after{display:none}
}

/* ---------- motion (cheap: transform and opacity only) ------------------ */
@media (prefers-reduced-motion:no-preference){
  html:root[data-theme="premium"] .view.on{animation:glassIn .45s var(--ease) both}
  @keyframes glassIn{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){html:root[data-theme="premium"] .lq-shape{animation:none}}
html:root[data-theme="premium"] .strip-i[data-go2] .lab{padding-right:30px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block;letter-spacing:.1em}