/* =====================================================================
   Summit · v2 "Level Up" design layer
   Loaded after the original styles. Only visuals and layout change here;
   every screen still comes from the original app logic.
   Idea: a premium game-like study app. Electric violet → hot pink → sunset
   gradients for energy, cyan for gems, lime for wins, chunky tactile buttons,
   rounded glass cards and short, springy motion.
   ===================================================================== */
/* Theme: navy -> electric blue -> cyan, matching the app icon. Darker blues carry the big cards;
   orange (streaks) and gold (XP) stay as the only warm accents. */
:root{
  --bg:#F1F5FF;--surface:#FFFFFF;--surface2:#EAF0FF;--surface3:#DCE6FF;--ink:#0A1633;--muted:#5B6B91;--line:#E1E8F8;--line2:#CBD7F2;
  --accent:#1D4ED8;--accent-deep:#0B2A7A;--accent-ink:#FFFFFF;--accent-soft:#E6EEFF;
  --good:#12B981;--good-deep:#0A8A5F;--good-soft:#DBFBEA;--bad:#FF3D68;--bad-deep:#C3123F;--bad-soft:#FFE5EC;
  --flame:#FF6B1A;--gem:#06B6D4;--xp:#F59E0B;--gold:#FFC83D;--warn-soft:#FFF3D1;
  --pink:#18C8F0;--cyan:#22D3EE;--lime:#84CC16;--blue:#3B82F6;
  --night1:#06103A;--night2:#1238B8;--night3:#18C8F0;
  --grad:linear-gradient(120deg,#0B2A7A 0%,#1748E0 45%,#1E90FF 75%,#18C8F0 100%);
  --grad-cool:linear-gradient(135deg,#1748E0,#06B6D4);
  --grad-warm:linear-gradient(135deg,#FF6B1A,#FFB020);
  --grad-green:linear-gradient(135deg,#16D49A,#0EA5A0);
  --r-xl:30px;--r-lg:24px;--r-md:18px;--r-sm:12px;
  --shadow:0 1px 2px rgba(8,24,80,.05),0 10px 30px -14px rgba(15,40,110,.28);
  --shadow-lift:0 2px 6px rgba(8,24,80,.08),0 28px 60px -24px rgba(15,40,110,.45);
  --glow:0 10px 30px -10px rgba(30,120,255,.55);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#060C22;--surface:#0D1735;--surface2:#142146;--surface3:#1C2C5C;--ink:#EEF4FF;--muted:#93A4CF;--line:#1A2852;--line2:#293C70;
  --accent:#60A5FA;--accent-deep:#1D4ED8;--accent-ink:#FFFFFF;--accent-soft:#132A62;
  --good:#34E3A0;--good-deep:#14A874;--good-soft:#0E3328;--bad:#FF5C82;--bad-deep:#C3123F;--bad-soft:#3D1426;
  --flame:#FF8A3D;--gem:#3FD8F2;--xp:#FFC23D;--gold:#FFD15C;--warn-soft:#3A2C0E;
  --night1:#040A28;--night2:#0E2E95;--night3:#0FB4E0;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -16px rgba(0,0,0,.75);--shadow-lift:0 26px 54px -20px rgba(0,0,0,.85);
  --glow:0 10px 34px -8px rgba(30,144,255,.5);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#060C22;--surface:#0D1735;--surface2:#142146;--surface3:#1C2C5C;--ink:#EEF4FF;--muted:#93A4CF;--line:#1A2852;--line2:#293C70;
  --accent:#60A5FA;--accent-deep:#1D4ED8;--accent-ink:#FFFFFF;--accent-soft:#132A62;
  --good:#34E3A0;--good-deep:#14A874;--good-soft:#0E3328;--bad:#FF5C82;--bad-deep:#C3123F;--bad-soft:#3D1426;
  --flame:#FF8A3D;--gem:#3FD8F2;--xp:#FFC23D;--gold:#FFD15C;--warn-soft:#3A2C0E;
  --night1:#040A28;--night2:#0E2E95;--night3:#0FB4E0;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -16px rgba(0,0,0,.75);--shadow-lift:0 26px 54px -20px rgba(0,0,0,.85);
  --glow:0 10px 34px -8px rgba(30,144,255,.5);color-scheme:dark}

/* ---------- canvas ---------- */
body{background-color:var(--bg);background-image:
  radial-gradient(60% 38% at 0% 0%,color-mix(in srgb,#1D4ED8 20%,transparent),transparent 70%),
  radial-gradient(50% 32% at 100% 4%,color-mix(in srgb,#18C8F0 18%,transparent),transparent 70%),
  radial-gradient(60% 30% at 50% 100%,color-mix(in srgb,#06B6D4 10%,transparent),transparent 70%);
  background-attachment:fixed;background-size:auto;background-repeat:no-repeat}
h1{font-size:32px;font-weight:800;letter-spacing:-.035em}
h2{font-weight:800;letter-spacing:-.03em}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.main{padding-block:14px 150px}

/* ---------- cards ---------- */
.card{border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line),var(--shadow)}
.card.soft{background:var(--surface2);box-shadow:none}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.hero .eyebrow,.rankcard.big .eyebrow{color:rgba(255,255,255,.78)}

/* ---------- buttons: chunky, tactile, gradient ---------- */
.btn{border-radius:18px;background:var(--grad);background-size:160% 100%;background-position:0 0;color:#fff;
  box-shadow:0 5px 0 color-mix(in srgb,#0B2A7A 85%,#000),var(--glow);transition:transform .1s,box-shadow .1s,background-position .4s,filter .15s}
.btn:hover{background-position:100% 0;filter:none}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,#0B2A7A 85%,#000)}
.btn.sm{border-radius:14px;box-shadow:0 3px 0 color-mix(in srgb,#0B2A7A 85%,#000)}
.btn.good{background:var(--grad-green);box-shadow:0 5px 0 #0A7A63,0 10px 26px -10px rgba(20,200,150,.6);color:#fff}
.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:0 0 0 2px var(--line2),0 4px 0 var(--line2)}
.btn.ghost.sm{box-shadow:0 0 0 2px var(--line2),0 3px 0 var(--line2)}
.btn.ghost:active{box-shadow:0 0 0 2px var(--line2),0 0 0 var(--line2)}
.btn.quiet{background:none;box-shadow:none;color:var(--accent)}
.btn.danger{background:linear-gradient(135deg,#FF3D68,#FF7A45);box-shadow:0 4px 0 #B3123A}
.btn[disabled]{opacity:.4;filter:saturate(.4)}
.pill{font-weight:700;border-radius:999px}
.pill.acc{background:var(--accent-soft);color:var(--accent)}
.bar{background:var(--surface3);box-shadow:none}
.bar>i{background:var(--grad)}
.bar.good>i{background:var(--grad-green)}
.bar.flame>i{background:var(--grad-warm)}
.bar.xp>i{background:linear-gradient(90deg,#FFD15C,#FF9F43)}
.opt.on{box-shadow:0 0 0 2px var(--accent);background:var(--accent-soft);color:var(--accent)}
.tgl.on{background:var(--grad-green)}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],textarea,select{border-radius:16px}

/* ---------- HUD (top bar) ---------- */
.status{background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:0}
.status .wrap{height:64px}
.hud-me{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;color:inherit;min-width:0;text-align:left}
.hud-av{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center}
.hud-av svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.hud-av b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-family:var(--display);font-weight:800;font-size:16px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.hud-lv{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.hud-lv b{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.02em}
.hud-lv span{font-size:11px;color:var(--muted);font-weight:650;white-space:nowrap}
.stats{gap:6px}
.stat{padding:7px 10px;font-size:14px;box-shadow:0 0 0 1px var(--line),0 2px 8px -4px rgba(15,40,110,.25)}
.stat.rank .rk-n{display:inline}
@media (max-width:390px){.stat.rank .rk-n{display:none}.hud-lv span{display:none}}

/* ---------- tab bar: floating dock with a big GO button ---------- */
.tabbar{padding:0 14px calc(12px + env(safe-area-inset-bottom,0px))}
.tabbar .wrap{display:grid;grid-template-columns:1fr 1fr 76px 1fr 1fr;align-items:end;max-width:440px;padding:7px 8px;border-radius:28px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);box-shadow:0 0 0 1px var(--line),0 20px 44px -18px rgba(8,24,80,.45)}
.tabbar .wrap.few{grid-template-columns:1fr 76px 1fr}
.tab{border-radius:20px;padding:8px 2px 6px;font-size:11px;font-weight:750}
.tab.on{color:var(--accent);background:var(--accent-soft)}
.tab-go{justify-self:center;width:66px;height:66px;margin-top:-30px;border:0;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 6px var(--bg),0 6px 0 color-mix(in srgb,#0B2A7A 85%,#000),0 16px 30px -8px rgba(30,120,255,.7);transition:transform .12s,box-shadow .12s;position:relative}
.tab-go .ic{width:28px;height:28px;margin-left:3px}
.tab-go:active{transform:translateY(4px);box-shadow:0 0 0 6px var(--bg),0 1px 0 #071E5C}
.tab-go::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid color-mix(in srgb,#18C8F0 60%,transparent);animation:goPulse 2.4s ease-out infinite;pointer-events:none}
.tab-go small{position:absolute;bottom:-17px;font:800 10px var(--body);color:var(--accent);letter-spacing:.06em}
@keyframes goPulse{0%{transform:scale(.92);opacity:.9}70%,100%{transform:scale(1.25);opacity:0}}

/* ---------- home ---------- */
.v2-greet{padding:2px 2px 0}
.v2-date{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.v2-greet h1{font-size:30px;line-height:1.1;margin-top:2px}
.bubble{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:22px 22px 22px 8px;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow)}
.bubble .b-ico{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--grad-cool);color:#fff}
.bubble .b-ico .ic{width:18px;height:18px}

.mission{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:16px;color:#fff;background:var(--grad);background-size:180% 180%;animation:gradShift 12s ease-in-out infinite;box-shadow:var(--glow),0 24px 50px -26px rgba(14,50,160,.8)}
.mission::before{content:"";position:absolute;width:240px;height:240px;right:-80px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%);pointer-events:none}
.mission::after{content:"";position:absolute;inset:auto -30px -60px auto;width:260px;height:120px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 110'%3E%3Cpath d='M0 110 L60 50 L85 72 L130 20 L220 110Z' fill='%23fff' fill-opacity='.12'/%3E%3Cpath d='M70 110 L130 40 L160 66 L185 45 L220 80 L220 110Z' fill='%23fff' fill-opacity='.08'/%3E%3C/svg%3E") no-repeat bottom right/contain;pointer-events:none}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.m-top{display:flex;justify-content:space-between;gap:8px;position:relative;z-index:1}
.m-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:750;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);white-space:nowrap}
.m-chip .ic{width:14px;height:14px}
.m-main{position:relative;z-index:1;display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;padding:0;border:0;background:none;color:#fff;text-align:left}
.m-ico{width:56px;height:56px;flex:none;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.m-ico .ic{width:28px;height:28px}
.m-main .grow{display:flex;flex-direction:column;gap:2px}
.m-k{font-size:12.5px;font-weight:700;opacity:.85}
.m-t{font-family:var(--display);font-size:23px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.m-s{font-size:13.5px;opacity:.88;line-height:1.3}
.m-play{width:56px;height:56px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;color:#1D4ED8;box-shadow:0 8px 18px -6px rgba(0,0,0,.45);transition:transform .15s}
.m-play .ic{width:24px;height:24px;margin-left:3px}
.m-main:active .m-play{transform:scale(.92)}
.m-main.done{cursor:default}
.m-steps{position:relative;z-index:1;display:flex;gap:6px;margin-top:16px}
.m-steps i{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.25)}
.m-steps i.on{background:#fff}
.m-steps i.cur{background:rgba(255,255,255,.55);animation:stepBlink 1.6s ease-in-out infinite}
@keyframes stepBlink{50%{background:rgba(255,255,255,.9)}}

.qstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qs{position:relative;overflow:hidden;border-radius:22px;padding:13px 12px 12px;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow);display:flex;flex-direction:column;gap:6px;min-width:0;border:0;text-align:left;color:inherit}
.qs b{font-family:var(--display);font-size:28px;font-weight:800;line-height:1;letter-spacing:-.04em}
.qs .qs-l{font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.2}
.qs .qs-h{font-size:10.5px;color:var(--muted);line-height:1.2}
.qs .qs-top{display:flex;align-items:center;gap:6px}
.qs .qs-top .ic{width:22px;height:22px}
.qs-streak{background:linear-gradient(160deg,color-mix(in srgb,#FF6B1A 22%,var(--surface)),var(--surface) 75%)}
.qs-streak .ic{color:var(--flame);fill:color-mix(in srgb,var(--flame) 40%,transparent)}
.qs-streak.cold .ic{color:var(--muted);fill:none}
.qs-q{background:linear-gradient(160deg,color-mix(in srgb,#06B6D4 18%,var(--surface)),var(--surface) 75%)}
.qs-q .ic{color:var(--gem)}
.qs-lv{background:linear-gradient(160deg,color-mix(in srgb,#F59E0B 20%,var(--surface)),var(--surface) 75%)}
.qs-lv .ic{color:var(--xp);fill:color-mix(in srgb,var(--xp) 35%,transparent)}
.qs .bar{height:7px;margin-top:auto}
.qs-q .bar>i{background:var(--grad-cool)}
.mini-week{gap:3px}
.mini-week i.on{background:var(--grad-warm)}

.hero{background:radial-gradient(110% 90% at 100% 0%,color-mix(in srgb,var(--night3) 55%,transparent),transparent 60%),radial-gradient(80% 70% at 0% 100%,color-mix(in srgb,#1E90FF 30%,transparent),transparent 60%),linear-gradient(165deg,var(--night2),var(--night1));
  box-shadow:0 26px 50px -24px rgba(14,50,160,.8),inset 0 1px 0 rgba(255,255,255,.14)}
.hero .pills .pill.gold{background:rgba(255,209,92,.2);color:#FFD15C;box-shadow:inset 0 0 0 1px rgba(255,209,92,.4)}
.ridge .crest{stroke:#fff;stroke-width:2.5}

.sec-title{margin:16px 2px -4px}
.sec-title h2{font-size:21px}
.sec-title h2 .ic{background:var(--grad);color:#fff;border-radius:12px}
.sub-hint{margin-top:-8px}

/* weak-spot "boss" cards */
.qcard{border-radius:24px;min-height:176px;padding:16px;color:#fff;box-shadow:var(--shadow);background:linear-gradient(150deg,#0B2A7A,#1748E0)}
.qcard.qc-rw{background:linear-gradient(150deg,#2563EB,#06B6D4)}
.qcard.qc-m{background:linear-gradient(150deg,#0B2A7A,#1D4ED8)}
.qcard::before{display:none}
.qcard::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12)}
.qcard .qc-dom{background:rgba(255,255,255,.2);color:#fff}
.qcard .qc-why{color:rgba(255,255,255,.85)}
.qc-stars i{color:rgba(255,255,255,.3)}
.qc-stars i.on{color:#FFD15C;text-shadow:0 2px 10px rgba(255,209,92,.7)}
.qcard:active{transform:scale(.97)}
.qcard{transition:transform .12s}

/* route list */
.trail::before{border-left:3px dotted var(--line2)}
.trail .stop{border-radius:22px;box-shadow:0 0 0 1px var(--line),var(--shadow)}
.trail .stop .dot{background:var(--accent-soft)}
.trail .stop.cur{box-shadow:0 0 0 2.5px var(--accent),var(--glow)}
.trail .stop.cur .dot{background:var(--grad)}
.trail .stop.done .dot{background:var(--grad-green)}
.plan-item{border-radius:20px}
.plan-item .dot{border-radius:16px}

.rankcard:not(.big){background:linear-gradient(135deg,color-mix(in srgb,var(--rk2) 26%,var(--surface)),var(--surface) 65%)}
.notes .insight .ic{color:var(--accent)}

/* ---------- practice (Train) ---------- */
.feature{border-radius:28px;padding:22px 18px;background:var(--grad);background-size:180% 180%;animation:gradShift 12s ease-in-out infinite;box-shadow:var(--glow),0 24px 46px -26px rgba(14,50,160,.8)}
.feature .ft-ico{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.feature .nx-go{color:#1D4ED8}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode{position:relative;overflow:hidden;border:0;border-radius:24px;padding:16px;min-height:128px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;text-align:left;color:#fff;box-shadow:var(--shadow);transition:transform .12s}
.mode:active{transform:scale(.97)}
.mode::after{content:"";position:absolute;right:-26px;top:-26px;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.14)}
.mode .mi{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.22)}
.mode .mi .ic{width:22px;height:22px}
.mode b{font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.15;display:block}
.mode span.ms{font-size:12.5px;opacity:.88}
.mode.m-rev{background:linear-gradient(150deg,#FF6B1A,#FF9A2E)}
.mode.m-math{background:linear-gradient(150deg,#1E3A8A,#1D4ED8)}
.mode.m-rw{background:linear-gradient(150deg,#0EA5E9,#06B6D4)}
.mode.m-jr{background:linear-gradient(150deg,#16C47F,#0EA5A0)}
.mode .badge-n{top:12px;right:12px;background:#fff;color:#FF6B1A;z-index:1}
.clock-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.clk{border:0;border-radius:22px;padding:14px;text-align:left;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow);display:flex;flex-direction:column;gap:6px;color:inherit;transition:transform .12s}
.clk:active{transform:scale(.97)}
.clk .ck-i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff}
.clk .ck-i .ic{width:19px;height:19px}
.clk.math .ck-i{background:linear-gradient(150deg,#1D4ED8,#1E3A8A)}
.clk.rw .ck-i{background:linear-gradient(150deg,#0EA5E9,#06B6D4)}
.clk b{font-family:var(--display);font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.clk span{font-size:12px;color:var(--muted);line-height:1.3}
.clk .ck-tag{align-self:flex-start;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);letter-spacing:.03em}

/* ---------- rewards ---------- */
.lvcard{display:flex;align-items:center;gap:16px}
.lvring{position:relative;width:92px;height:92px;flex:none}
.lvring svg{width:100%;height:100%;transform:rotate(-90deg)}
.lvring div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;line-height:1}
.lvring div b{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.04em;display:block}
.lvring div span{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.bgrid{gap:10px}
.bdg{border-radius:22px;box-shadow:0 0 0 1px var(--line),var(--shadow)}
.bdg:not(.lock) .ico{background:var(--grad);box-shadow:0 10px 22px -10px rgba(30,120,255,.8);position:relative;overflow:hidden}
.bdg:not(.lock) .ico::after{content:"";position:absolute;inset:-40%;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-100%);animation:shine 4.5s ease-in-out infinite}
.bgrid .bdg:nth-child(3n+2):not(.lock) .ico::after{animation-delay:1.2s}.bgrid .bdg:nth-child(3n):not(.lock) .ico::after{animation-delay:2.4s}
@keyframes shine{0%,60%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)}}

/* ---------- practice session ---------- */
.shead{background:color-mix(in srgb,var(--bg) 85%,transparent)}
.shead .bar{height:16px;border-radius:99px;background:var(--surface3)}
.shead .bar>i{background:var(--grad);background-size:200% 100%;animation:barFlow 3s linear infinite}
.shead .bar>i::after{background:rgba(255,255,255,.45)}
@keyframes barFlow{to{background-position:-200% 0}}
.stem{font-size:19.5px;font-weight:650}
.passage::before{background:var(--grad)}
.choice{border-radius:20px;padding:15px 16px;box-shadow:0 0 0 2px var(--line2),0 4px 0 var(--line2)}
.choice .lt{border-radius:50%;width:36px;height:36px;box-shadow:inset 0 0 0 2px var(--line2);font-weight:800}
.choice.sel{box-shadow:0 0 0 2.5px var(--accent),0 4px 0 var(--accent-deep);background:var(--accent-soft)}
.choice.sel .lt{background:var(--grad);color:#fff}
.choice.right{box-shadow:0 0 0 2.5px var(--good),0 4px 0 var(--good-deep)}
.choice.right .lt{background:var(--grad-green)}
.choice.wrong{box-shadow:0 0 0 2.5px var(--bad),0 4px 0 var(--bad-deep)}
.key{border-radius:16px;box-shadow:0 0 0 1.5px var(--line2),0 4px 0 var(--line2)}
.gdisp{border-radius:20px}
.timer{font-weight:800}
.fbcard{border-radius:26px}
.fbcard.good{background:linear-gradient(160deg,var(--good-soft),var(--surface) 90%)}
.fbcard.bad{background:linear-gradient(160deg,var(--bad-soft),var(--surface) 90%)}
.fbcard .rew span{box-shadow:0 0 0 1px var(--line),0 4px 12px -6px rgba(15,40,110,.3)}
.dock{background:color-mix(in srgb,var(--bg) 88%,transparent);border-top:0;box-shadow:0 -12px 30px -18px rgba(8,24,80,.35)}
.qmeta .pill.acc{background:var(--grad);color:#fff}

/* ---------- misc ---------- */
.mark{background:var(--grad)}
.tile .ti{background:var(--accent-soft)}
.kpi>div{border-radius:18px}
.kpi b{font-weight:800}
.toast{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.modal{border-radius:30px}
.ring svg circle:last-child{filter:drop-shadow(0 0 4px color-mix(in srgb,currentColor 30%,transparent))}

/* ---------- motion: screens slide in, cards follow one after another ---------- */
#app.v2-enter .main>*{animation:v2rise .5s cubic-bezier(.2,.9,.25,1.1) both}
#app.v2-enter .main>*:nth-child(1){animation-delay:0s}
#app.v2-enter .main>*:nth-child(2){animation-delay:.04s}
#app.v2-enter .main>*:nth-child(3){animation-delay:.08s}
#app.v2-enter .main>*:nth-child(4){animation-delay:.12s}
#app.v2-enter .main>*:nth-child(5){animation-delay:.16s}
#app.v2-enter .main>*:nth-child(6){animation-delay:.2s}
#app.v2-enter .main>*:nth-child(n+7){animation-delay:.24s}
#app.v2-enter .qbody{animation:v2slide .38s cubic-bezier(.2,.9,.25,1) both}
@keyframes v2rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes v2slide{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mission,.feature,.tab-go::after,.shead .bar>i,.bdg .ico::after,.m-steps i.cur{animation:none!important}}

/* ---------- performance colours (weak red -> royal green). Bars are coloured inline by ui-v2.js ---------- */
:root{--royal:#0E7C4A;--royal-soft:#DCF5E8;--weak:#D92D3A;--weak-soft:#FDE4E6;--mid:#B7791F;--mid-soft:#FFF1D6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--royal:#3FCB8A;--royal-soft:#0F3527;--weak:#FF6B75;--weak-soft:#3D1522;--mid:#FFC24D;--mid-soft:#3A2C0E}}
:root[data-theme="dark"]{--royal:#3FCB8A;--royal-soft:#0F3527;--weak:#FF6B75;--weak-soft:#3D1522;--mid:#FFC24D;--mid-soft:#3A2C0E}
.pill.good{background:var(--royal-soft);color:var(--royal)}
.pill.bad{background:var(--weak-soft);color:var(--weak)}
.pill.warn{background:var(--mid-soft);color:var(--mid)}
.bar.perf>i{box-shadow:0 0 10px -3px currentColor}
.qcard .qc-why{color:rgba(255,255,255,.9)}
.perf-t{color:color-mix(in srgb,var(--pc) 88%,#000)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .perf-t{color:color-mix(in srgb,var(--pc) 62%,#fff)}}
:root[data-theme="dark"] .perf-t{color:color-mix(in srgb,var(--pc) 62%,#fff)}