/* ═══════════════════════════════════════════════════════════════════════════
   OTT Downloader — shared design system · "OBSIDIAN 3D"

   One stylesheet for the verify page, the user Mini App and the admin console.

   Design language:

   · Deep-space dark ground with a living volumetric light field behind
     everything (fx.js). Light mode is fully redefined, not inverted.
   · Depth comes from EXTRUSION: every surface reads as a slab of smoked
     glass floating above the field — gradient hairline borders, a specular
     top-edge highlight, stacked ambient+key shadows, and an inner glow at
     the base. Buttons are physical keys with a shadow "lip"; pressing
     pushes them into the surface.
   · Premium typography: Space Grotesk for display numerals and headings,
     Manrope for UI text, JetBrains Mono for data. Micro-labels are
     uppercase, wide-tracked, gradient-tinted.
   · Motion budget unchanged: one or two moving things per view, shared
     timing tokens, everything stops dead under prefers-reduced-motion.
   · Contrast checked ≥4.5:1 for body/muted text on their surfaces in both
     themes. Focus rings 2px + offset, never removed.

   Class names are load-bearing: the Mini App's JS builds markup as strings
   and toggles .on/.active/.hide/.show. Restyle freely, rename nothing.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme: light dark;

  /* text */
  --ink:#eaf0ff;
  --ink-2:#b9c3e0;
  --ink-3:#8b95b5;

  /* ground + surfaces */
  --page:#05070f;
  --page-2:#090d1a;
  --surface:#11162a;
  --surface-2:#171e38;
  --glass:rgba(19,25,48,.72);
  --glass-2:rgba(19,25,48,.55);
  --blur:18px;

  /* brand */
  --brand:#7c8cff;
  --brand-2:#a78bfa;
  --brand-3:#c084fc;
  --accent:#22d3ee;
  --gold:#f5c76a;
  --brand-soft:rgba(124,140,255,.14);
  --brand-line:rgba(124,140,255,.42);

  /* status */
  --ok:#34e3a4;  --ok-soft:rgba(52,227,164,.13);
  --bad:#ff6b8b; --bad-soft:rgba(255,107,139,.13);
  --warn:#ffc46b; --warn-soft:rgba(255,196,107,.14);

  --line:rgba(148,163,220,.20);
  --line-2:rgba(148,163,220,.10);

  /* elevation: ambient occlusion below, key light rim above, inner base glow */
  --e1:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  --e2:0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.45),
       inset 0 1px 0 rgba(255,255,255,.09),
       inset 0 -14px 24px -18px rgba(124,140,255,.16);
  --e3:0 3px 8px rgba(0,0,0,.45), 0 26px 56px rgba(0,0,0,.55),
       inset 0 1px 0 rgba(255,255,255,.12),
       inset 0 -20px 30px -20px rgba(124,140,255,.20);
  --press:inset 0 2px 10px rgba(0,0,0,.6);
  --glow:0 14px 40px rgba(124,140,255,.35);

  /* gradient hairline painted around slabs */
  --edge:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 34%,rgba(124,140,255,.14) 78%,rgba(34,211,238,.10));

  --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px;

  --disp:'Space Grotesk',var(--sans);
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* motion tokens */
  --dur:.22s;
  --dur-slow:.42s;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.2,.9,.3,1.15);
}

@media (prefers-color-scheme: light){
  :root{
    --ink:#101527; --ink-2:#39415c; --ink-3:#5d6584;

    --page:#eceffb; --page-2:#e2e8f9;
    --surface:#ffffff; --surface-2:#f1f4fd;
    --glass:rgba(255,255,255,.82);
    --glass-2:rgba(255,255,255,.66);

    --brand:#4f46e5; --brand-2:#7c3aed; --brand-3:#a855f7; --accent:#0891b2;
    --gold:#b45309;
    --brand-soft:rgba(79,70,229,.10);
    --brand-line:rgba(79,70,229,.32);

    --ok:#047857;  --ok-soft:rgba(4,120,87,.11);
    --bad:#be123c; --bad-soft:rgba(190,18,60,.11);
    --warn:#b45309; --warn-soft:rgba(180,83,9,.13);

    --line:rgba(16,21,39,.13);
    --line-2:rgba(16,21,39,.07);

    --e1:0 1px 1px rgba(16,21,39,.05), inset 0 1px 0 rgba(255,255,255,.9);
    --e2:0 2px 6px rgba(16,21,39,.07), 0 12px 26px rgba(16,21,39,.10),
         inset 0 1px 0 rgba(255,255,255,.95),
         inset 0 -14px 22px -18px rgba(79,70,229,.14);
    --e3:0 3px 8px rgba(16,21,39,.08), 0 24px 50px rgba(16,21,39,.15),
         inset 0 1px 0 rgba(255,255,255,1),
         inset 0 -18px 26px -20px rgba(79,70,229,.16);
    --press:inset 0 2px 8px rgba(16,21,39,.16);
    --glow:0 12px 34px rgba(79,70,229,.30);

    --edge:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.35) 40%,rgba(79,70,229,.16));
  }
}

/* ── base ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{max-width:100%;overflow-x:hidden}

body{
  margin:0;padding:16px 14px 116px;
  color:var(--ink);
  font:600 14.5px/1.55 var(--sans);
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(120vw 64vh at 6% -14%, rgba(124,140,255,.16), transparent 58%),
    radial-gradient(90vw 54vh at 106% 0%, rgba(34,211,238,.09), transparent 56%),
    radial-gradient(70vw 44vh at 50% 118%, rgba(192,132,252,.10), transparent 60%),
    linear-gradient(180deg, var(--page) 0%, var(--page-2) 100%);
  background-repeat:no-repeat;
  min-height:100vh;
}

/* the animated field lives behind everything and never eats a tap */
#fxbg{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;display:block;
  opacity:0;transition:opacity .8s var(--ease);
}
#fxbg.on{opacity:1}

h1{font-family:var(--disp);font-size:23px;font-weight:700;letter-spacing:-.02em;
   margin:0 0 3px;line-height:1.14}
h2{font-family:var(--disp);font-size:10.5px;font-weight:700;text-transform:uppercase;
   letter-spacing:.22em;color:var(--ink-3);margin:26px 0 11px;
   display:flex;align-items:center;gap:10px}
h2:before{content:'';width:14px;height:2px;border-radius:2px;flex:0 0 auto;
          background:linear-gradient(90deg,var(--brand),var(--accent))}
h2:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.display{font-family:var(--disp);font-size:29px;font-weight:700;letter-spacing:-.03em;
         line-height:1.08}

a{color:var(--brand)}

::selection{background:rgba(124,140,255,.35)}

/* ── surfaces ───────────────────────────────────────────────────────────── */
.card{
  position:relative;
  background:var(--glass);
  border:1px solid transparent;
  border-radius:var(--r-lg);
  padding:17px;margin-bottom:13px;
  box-shadow:var(--e2);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* gradient hairline border: paint the edge inside the border-box */
.card:before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.card.flat{box-shadow:var(--e1);background:var(--glass-2)}
.card.raise{box-shadow:var(--e3)}
.card.tap:active{transform:translateY(1px) scale(.994)}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;color:#fff;border:0;border-radius:var(--r-lg);
  background:
    radial-gradient(120% 150% at 88% -22%, rgba(34,211,238,.30), transparent 46%),
    linear-gradient(135deg,#3730a3 0%,#5b3fd6 46%,#7c3aed 74%,#9333ea 100%);
  box-shadow:var(--glow),
             0 3px 10px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.34),
             inset 0 -22px 36px -24px rgba(0,0,0,.55);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.hero:before{
  content:'';position:absolute;inset:-60% -30% auto auto;width:280px;height:280px;
  border-radius:50%;background:rgba(255,255,255,.22);filter:blur(26px);
  animation:drift 14s ease-in-out infinite;will-change:transform;
}
.hero:after{
  content:'';position:absolute;inset:auto auto -70% -20%;width:240px;height:240px;
  border-radius:50%;background:rgba(34,211,238,.30);filter:blur(30px);
  animation:drift 18s ease-in-out infinite reverse;will-change:transform;
}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-30px,24px,0)}
}
.hero *{position:relative;z-index:1}
.hero .muted,.hero h1,.hero b{color:#fff}
.hero .muted{opacity:.88}

.head{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.avatar{
  width:50px;height:50px;border-radius:17px;flex:0 0 auto;overflow:hidden;
  display:grid;place-items:center;font-size:19px;font-weight:800;color:#fff;
  background:linear-gradient(145deg,var(--brand),#5b3fd6 60%,var(--brand-3));
  box-shadow:0 10px 24px rgba(91,63,214,.45),
             0 2px 5px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.45),
             inset 0 -8px 14px -10px rgba(0,0,0,.5);
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* ── stats ──────────────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px}
.stat{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--glass),var(--glass-2));
  border:1px solid transparent;border-radius:var(--r);
  padding:15px 9px;text-align:center;box-shadow:var(--e2);
  transition:transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease);
}
.stat:before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.stat:active{transform:translateY(-2px);box-shadow:var(--e3)}
.stat:after{
  content:'';position:absolute;inset:auto 12% 0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  opacity:.9;filter:drop-shadow(0 0 6px rgba(124,140,255,.6));
}
.stat b{display:block;font-family:var(--disp);font-size:23px;font-weight:700;
        letter-spacing:-.025em;line-height:1.12;
        background:linear-gradient(180deg,var(--ink) 20%,var(--brand) 130%);
        -webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
           color:var(--ink-3)}

/* ── layout helpers ─────────────────────────────────────────────────────── */
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row+.row{margin-top:10px}

/* ── form controls ──────────────────────────────────────────────────────── */
input,select,textarea{
  font:600 14px/1.45 var(--sans);width:100%;padding:13px 15px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);
  box-shadow:var(--press), inset 0 1px 2px rgba(0,0,0,.25);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
input:hover,textarea:hover,select:hover{border-color:var(--brand-line)}
input:focus,textarea:focus,select:focus{
  outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft), 0 0 18px rgba(124,140,255,.18), var(--press);
}
input::placeholder,textarea::placeholder{color:var(--ink-3);font-weight:500}
textarea{min-height:86px;resize:vertical;line-height:1.5}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ── buttons: physical keys ─────────────────────────────────────────────── */
button{
  position:relative;overflow:hidden;
  font-family:var(--disp);
  font:700 13.5px/1 var(--disp);letter-spacing:.01em;padding:14px 18px;border:0;
  border-radius:var(--r-sm);cursor:pointer;color:#fff;
  background:linear-gradient(180deg,#8b98ff 0%,var(--brand) 38%,#5b63e8 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,
             0 -2px 0 rgba(20,16,80,.55) inset,
             0 5px 0 #2c2a86,
             0 10px 22px rgba(91,99,232,.38),
             0 3px 8px rgba(0,0,0,.3);
  transform:translateZ(0);
  transition:transform .1s var(--ease), box-shadow .16s var(--ease),
             filter var(--dur) var(--ease);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
button:hover{filter:brightness(1.08)}
button:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset,
             0 -2px 0 rgba(20,16,80,.55) inset,
             0 1px 0 #2c2a86,
             0 3px 8px rgba(91,99,232,.30),
             var(--press);
}
button:after{
  content:'';position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  pointer-events:none;
}
button:active:after{animation:sweep .55s var(--ease-out)}
@keyframes sweep{to{transform:translateX(120%) skewX(-18deg)}}

button.sec{
  color:var(--ink);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,
             0 -2px 0 rgba(0,0,0,.4) inset,
             0 4px 0 rgba(0,0,0,.5),
             0 8px 18px rgba(0,0,0,.35);
}
button.sec:active{
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,
             0 -2px 0 rgba(0,0,0,.4) inset,
             0 1px 0 rgba(0,0,0,.5),
             var(--press);
}
button.danger{
  background:linear-gradient(180deg,#ff8098 0%,#f43f5e 42%,#c11d43 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset,
             0 -2px 0 rgba(90,10,30,.55) inset,
             0 5px 0 #6e0f28,
             0 10px 22px rgba(225,29,72,.35);
}
button.danger:active{box-shadow:0 1px 0 rgba(255,255,255,.25) inset,
                     0 -2px 0 rgba(90,10,30,.55) inset,
                     0 1px 0 #6e0f28, 0 3px 8px rgba(225,29,72,.28), var(--press)}
button.warn{
  background:linear-gradient(180deg,#ffd08a 0%,#f59e0b 42%,#c26d04 100%);
  color:#231000;
  box-shadow:0 1px 0 rgba(255,255,255,.40) inset,
             0 -2px 0 rgba(105,60,0,.5) inset,
             0 5px 0 #7a4200,
             0 10px 22px rgba(217,119,6,.33);
}
button.warn:active{box-shadow:0 1px 0 rgba(255,255,255,.32) inset,
                   0 -2px 0 rgba(105,60,0,.5) inset,
                   0 1px 0 #7a4200, 0 3px 8px rgba(217,119,6,.26), var(--press)}
button.ok{
  background:linear-gradient(180deg,#5cf0bd 0%,#10c98a 42%,#05805c 100%);
  color:#012a1c;
  box-shadow:0 1px 0 rgba(255,255,255,.40) inset,
             0 -2px 0 rgba(0,70,45,.5) inset,
             0 5px 0 #03492f,
             0 10px 22px rgba(5,150,105,.33);
}
button.ok:active{box-shadow:0 1px 0 rgba(255,255,255,.30) inset,
                 0 -2px 0 rgba(0,70,45,.5) inset,
                 0 1px 0 #03492f, 0 3px 8px rgba(5,150,105,.26), var(--press)}
button.ghost{
  background:transparent;color:var(--brand);
  box-shadow:none;border:1px dashed var(--brand-line);
}
button.sm{padding:10px 13px;font-size:12px;border-radius:11px;
          box-shadow:0 1px 0 rgba(255,255,255,.3) inset,
                     0 -2px 0 rgba(20,16,80,.5) inset,
                     0 3px 0 #2c2a86,
                     0 7px 16px rgba(91,99,232,.32)}
button.sec.sm{box-shadow:0 -2px 0 rgba(0,0,0,.4) inset,
                         0 3px 0 rgba(0,0,0,.45),
                         0 6px 14px rgba(0,0,0,.3)}
button:disabled{opacity:.4;box-shadow:none;cursor:not-allowed;filter:grayscale(.4)}
button:disabled:active{transform:none}
button.block{width:100%}
button.busy{pointer-events:none}
button.busy:before{
  content:'';width:14px;height:14px;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:r .7s linear infinite;
}
button.warn.busy:before,button.ok.busy:before{border-color:rgba(0,0,0,.25);border-top-color:#000}

/* inline SVG icons inside buttons / nav */
.ico{width:18px;height:18px;flex:0 0 auto;display:block;
     fill:none;stroke:currentColor;stroke-width:1.9;
     stroke-linecap:round;stroke-linejoin:round}

/* ── pills ──────────────────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;
      font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
      font-family:var(--disp);
      border:1px solid transparent;box-shadow:var(--e1)}
.pill.on{background:var(--ok-soft);color:var(--ok);border-color:rgba(52,227,164,.3)}
.pill.off{background:var(--bad-soft);color:var(--bad);border-color:rgba(255,107,139,.3)}
.pill.w{background:var(--warn-soft);color:var(--warn);border-color:rgba(255,196,107,.3)}
.pill.b{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}
.pill.live:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;
                  animation:pulse 1.6s var(--ease) infinite;
                  box-shadow:0 0 8px currentColor}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ── key/value rows ─────────────────────────────────────────────────────── */
.kv{display:flex;justify-content:space-between;align-items:center;gap:11px;
    padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;min-width:0}
.kv:last-child{border-bottom:0}
.kv>span:first-child{color:var(--ink-3);font-weight:600;flex:1 1 auto;
                     min-width:0;overflow-wrap:anywhere}
.kv>span:last-child{text-align:right;font-weight:700;flex:0 1 auto;
                    min-width:0;overflow-wrap:anywhere}

.devrow{padding:12px 0;border-bottom:1px solid var(--line-2);font-size:13px;min-width:0}
.devrow:last-child{border-bottom:0}
.devrow b{display:block;font-weight:750;line-height:1.35;overflow-wrap:anywhere}
.devrow .when{display:block;margin-top:3px;font-size:11px;color:var(--ink-3);white-space:nowrap;
              font-family:var(--mono)}

/* ── chips: selectable keys ─────────────────────────────────────────────── */
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:9px}
.chip{
  position:relative;
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px 10px;
  font-family:var(--disp);
  font-size:12.5px;font-weight:700;text-align:center;cursor:pointer;user-select:none;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:0 -2px 0 rgba(0,0,0,.35) inset,
             0 3px 0 rgba(0,0,0,.42),
             0 6px 14px rgba(0,0,0,.3),
             inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .1s var(--ease-spring), border-color var(--dur) var(--ease),
             box-shadow .16s var(--ease), background var(--dur) var(--ease);
  min-height:46px;display:flex;align-items:center;justify-content:center;
}
.chip:hover{border-color:var(--brand-line)}
.chip:active{transform:translateY(2px);
             box-shadow:0 -2px 0 rgba(0,0,0,.35) inset,
                        0 1px 0 rgba(0,0,0,.42),
                        var(--press)}
.chip.on{
  border-color:var(--brand);
  background:linear-gradient(180deg,rgba(124,140,255,.26),rgba(124,140,255,.10));
  color:var(--brand);
  text-shadow:0 0 14px rgba(124,140,255,.5);
  box-shadow:0 -2px 0 rgba(20,16,80,.4) inset,
             0 3px 0 #2c2a86,
             0 8px 20px rgba(124,140,255,.30),
             inset 0 1px 0 rgba(255,255,255,.16);
}
.chip.ok{border-color:var(--ok);background:linear-gradient(180deg,rgba(52,227,164,.20),rgba(52,227,164,.07));color:var(--ok)}
.chip.lock{opacity:.45;cursor:not-allowed}

/* ── progress ───────────────────────────────────────────────────────────── */
.bar{height:10px;border-radius:99px;background:rgba(0,0,0,.42);overflow:hidden;
     margin-top:9px;box-shadow:var(--press), inset 0 1px 2px rgba(0,0,0,.5);position:relative}
.bar i{display:block;height:100%;border-radius:99px;position:relative;
       background:linear-gradient(90deg,var(--brand),var(--brand-2) 60%,var(--accent));
       box-shadow:0 0 12px rgba(124,140,255,.55), inset 0 1px 0 rgba(255,255,255,.4);
       transition:width .4s var(--ease-out)}
/* travelling specular stripe sells motion even when % is static */
.bar i:after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:sheen 1.8s var(--ease) infinite;
}
@keyframes sheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.bar.live i{width:34%;animation:sl 1.15s linear infinite;will-change:margin-left}
@keyframes sl{0%{margin-left:-36%}100%{margin-left:102%}}

/* ── text ───────────────────────────────────────────────────────────────── */
.mono{font-family:var(--mono);font-size:11.5px;font-weight:500;word-break:break-all}
.muted{color:var(--ink-3);font-size:12.5px;font-weight:600}
.step{font-family:var(--disp);
      font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
      margin-bottom:11px;display:flex;align-items:center;gap:8px;
      background:linear-gradient(90deg,var(--brand) 10%,var(--brand-3) 60%,var(--accent));
      -webkit-background-clip:text;background-clip:text;color:transparent;
      filter:drop-shadow(0 0 10px rgba(124,140,255,.35))}
.item{border:1px solid transparent;border-radius:var(--r);padding:14px;margin-top:11px;
      background:var(--surface-2);box-shadow:var(--e1);
      transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.item:before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--edge);opacity:.5;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.item{position:relative}
.item:active{transform:translateY(1px)}
.item.err{border-left:4px solid var(--bad)}

/* ── toast ──────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:16px;right:16px;bottom:96px;padding:15px 18px;border-radius:var(--r);
  background:color-mix(in srgb,var(--ink) 94%,transparent);color:var(--page);
  font-size:13.5px;font-weight:700;text-align:center;
  opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease-spring);
  pointer-events:none;z-index:99;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.toast.show{opacity:1;transform:translateY(0) scale(1)}

/* ── bottom navigation: floating dock ───────────────────────────────────── */
.nav{
  position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex;gap:3px;padding:9px 8px;
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--line-2);border-radius:20px;z-index:60;
  box-shadow:0 -1px 0 rgba(255,255,255,.06) inset,
             0 3px 0 rgba(0,0,0,.4),
             0 18px 44px rgba(0,0,0,.55),
             0 6px 16px rgba(0,0,0,.4);
}
.nav button{
  flex:1;background:transparent;color:var(--ink-3);box-shadow:none;padding:8px 0;
  font:700 10px/1 var(--disp);letter-spacing:.04em;flex-direction:column;gap:5px;
  min-height:48px;border-radius:13px;
}
.nav button:after{display:none}          /* no sweep on tabs */
.nav button:hover{filter:none;color:var(--ink-2)}
.nav button:active{transform:none}
.nav button .ico{width:21px;height:21px;transition:transform var(--dur) var(--ease-spring)}
.nav button b{font-size:17px;font-weight:500;line-height:1}   /* legacy glyph tabs */
.nav button.active{color:var(--brand)}
.nav button.active .ico{transform:translateY(-2px) scale(1.1);
                        filter:drop-shadow(0 0 8px rgba(124,140,255,.6))}
.nav button.active b{transform:translateY(-1px)}
.nav button.active:before{
  content:'';position:absolute;inset:3px 7px;border-radius:13px;z-index:-1;
  background:linear-gradient(180deg,var(--brand-soft),transparent 130%);
  border:1px solid var(--brand-line);
  box-shadow:0 6px 16px rgba(124,140,255,.22), inset 0 1px 0 rgba(255,255,255,.10);
  animation:padin .28s var(--ease-spring);
}
@keyframes padin{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

/* ── utility ────────────────────────────────────────────────────────────── */
.hide{display:none!important}
.spin{width:28px;height:28px;margin:30px auto;border:3px solid var(--line);
      border-top-color:var(--brand);border-radius:50%;animation:r .75s linear infinite;
      filter:drop-shadow(0 0 8px rgba(124,140,255,.5))}
@keyframes r{to{transform:rotate(360deg)}}

.reveal{animation:rise .5s var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

/* ── motion & transparency preferences ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .spin,.bar.live i,button.busy:before{animation-duration:1.4s!important;
                                       animation-iteration-count:infinite!important}
  #fxbg{display:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav,.toast{background:var(--surface)}
}

.blur,.nav,.toast{backdrop-filter:blur(20px) saturate(160%);
                  -webkit-backdrop-filter:blur(20px) saturate(160%)}