:root{
  --bg:#07090d;--bg2:#0b0e14;--panel:#10141c;--panel2:#151a26;--line:#1d2330;--line2:#2a3244;
  --text:#e9ecf2;--muted:#8d96a9;--dim:#5b6477;
  --acc:#c8f560;--acc-ink:#0b1200;--acc-soft:rgba(200,245,96,.13);
  --up:#1fd18b;--up-soft:rgba(31,209,139,.14);--down:#ff5a6e;--down-soft:rgba(255,90,110,.14);
  --warn:#ffb84d;--info:#6aa9ff;
  --c:#c8f560;--c-soft:rgba(200,245,96,.14);
  --disp:"Unbounded",system-ui,sans-serif;--sans:"Geologica",system-ui,-apple-system,Segoe UI,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:18px;--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;min-height:100%}
body{overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.up{color:var(--up)}.down{color:var(--down)}.muted{color:var(--muted)}
.hide{display:none!important}
svg{display:block}
[data-ch=metals]{--c:#f5c451;--c-soft:rgba(245,196,81,.14)}
[data-ch=oil]{--c:#ff8a3d;--c-soft:rgba(255,138,61,.14)}
[data-ch=fx]{--c:#6aa9ff;--c-soft:rgba(106,169,255,.14)}
[data-ch=stocks]{--c:#1fd18b;--c-soft:rgba(31,209,139,.14)}
[data-ch=crypto]{--c:#b18cff;--c-soft:rgba(177,140,255,.16)}
[data-ch=kids]{--c:#ff7eb6;--c-soft:rgba(255,126,182,.16)}
[data-ch=kids2]{--c:#ff9f5a;--c-soft:rgba(255,159,90,.16)}
[data-ch=agri]{--c:#d9c25a;--c-soft:rgba(217,194,90,.15)}
[data-ch=rates]{--c:#5fd4e6;--c-soft:rgba(95,212,230,.14)}
[data-ch=corp]{--c:#ff6f91;--c-soft:rgba(255,111,145,.14)}
[data-ch=ta]{--c:#9fe870;--c-soft:rgba(159,232,112,.14)}
[data-ch=mini]{--c:#ffd23f;--c-soft:rgba(255,210,63,.15)}
[data-ch=geo]{--c:#8fb3ff;--c-soft:rgba(143,179,255,.14)}
[data-ch=crisis]{--c:#ff5a6e;--c-soft:rgba(255,90,110,.14)}
[data-ch=kids3]{--c:#4fe0b0;--c-soft:rgba(79,224,176,.15)}
[data-ch=kids4]{--c:#b18cff;--c-soft:rgba(177,140,255,.15)}

/* ── кнопки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:16px;font-weight:600;font-size:16px;transition:transform .15s var(--ease),background .2s,opacity .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-acc{background:var(--acc);color:var(--acc-ink);box-shadow:0 10px 30px -10px rgba(200,245,96,.55)}
.btn-acc:hover{background:#d8ff7e}
.btn-ghost{background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line2)}
.btn-ghost:hover{background:#1b2130}
.btn[disabled]{opacity:.35;pointer-events:none;box-shadow:none}
.btn-sm{height:40px;padding:0 16px;font-size:14px;border-radius:12px}
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line2);color:var(--muted)}
.icon-btn:hover{color:var(--text)}
.icon-btn.off{opacity:.5}

/* ── шапка ── */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));background:linear-gradient(var(--bg) 60%,rgba(7,9,13,0))}
.top .sp{flex:1}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.01em}
.brand i{width:32px;height:32px;border-radius:10px;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center}
.chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:12px;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line2);font-size:14px;font-weight:500}
.chip svg{color:var(--acc)}
.chip .num{font-size:14px}

/* ── старт ── */
.intro{min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden;padding:24px 16px}
.intro canvas.bgfx{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.intro .glow{position:absolute;inset:-20%;background:radial-gradient(40% 35% at 50% 40%,rgba(200,245,96,.14),transparent 70%),radial-gradient(30% 30% at 80% 80%,rgba(177,140,255,.12),transparent 70%),radial-gradient(30% 30% at 15% 75%,rgba(106,169,255,.10),transparent 70%);pointer-events:none}
.intro-in{position:relative;max-width:760px;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);background:rgba(16,20,28,.8);box-shadow:inset 0 0 0 1px var(--line2);border-radius:99px;padding:7px 14px 7px 10px;backdrop-filter:blur(8px)}
.kicker b{width:8px;height:8px;border-radius:50%;background:var(--down);box-shadow:0 0 0 0 rgba(255,90,110,.6);animation:live 1.6s infinite}
@keyframes live{70%{box-shadow:0 0 0 8px rgba(255,90,110,0)}100%{box-shadow:0 0 0 0 rgba(255,90,110,0)}}
.intro h1{font-family:var(--disp);font-weight:800;font-size:clamp(44px,9vw,96px);line-height:.95;letter-spacing:-.045em;margin:22px 0 18px}
.intro h1 em{font-style:normal;color:var(--acc);display:inline-block}
.intro .lead{font-size:clamp(17px,2.3vw,20px);color:var(--muted);max-width:34em;margin:0 auto 30px;font-weight:300}
.intro .lead b{color:var(--text);font-weight:500}
.intro-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.intro-note{max-width:34em;margin:16px auto 0;color:var(--muted);font-size:14.5px;line-height:1.55}
.intro-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:44px auto 0;max-width:680px;text-align:left}
.intro-steps div{background:rgba(16,20,28,.75);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:14px 16px;font-size:14px;color:var(--muted)}
.intro-steps b{display:block;color:var(--text);font-weight:600;font-size:15px;margin-bottom:2px}
.intro-steps i{font-style:normal;font-family:var(--mono);color:var(--acc);font-size:12px}
.intro .push-demo{margin:0 auto 26px;max-width:420px}

/* ── пуш ── */
.push{display:flex;gap:12px;align-items:flex-start;text-align:left;background:rgba(28,33,46,.92);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-radius:22px;padding:13px 15px;box-shadow:0 20px 50px -12px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08)}
.push .pi{width:38px;height:38px;flex:none;border-radius:10px;background:var(--down);display:grid;place-items:center;color:#fff}
.push .pm{flex:1;min-width:0}
.push .ph{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.push .pt{font-weight:600;font-size:15px;line-height:1.3;margin-top:2px}

/* ── мапа ── */
.mapwrap{display:grid;grid-template-columns:340px 1fr;gap:28px;max-width:1240px;margin:0 auto;padding:0 24px 80px}
.side{position:sticky;top:76px;align-self:start;display:flex;flex-direction:column;gap:14px}
.card{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r);padding:18px}
.side h2{font-family:var(--disp);font-size:24px;letter-spacing:-.03em;line-height:1.05}
.side p{color:var(--muted);font-size:14px;margin-top:8px}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.stat{background:var(--bg2);border-radius:14px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--line)}
.stat small{display:block;color:var(--muted);font-size:12px}
.stat b{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-.03em}
.rank{display:flex;align-items:center;gap:12px}
.rank .rk{width:46px;height:46px;border-radius:14px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;flex:none}
.rank b{font-family:var(--disp);font-size:16px;display:block}
.rank small{color:var(--muted);font-size:13px}
.bar{height:6px;border-radius:9px;background:var(--line);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;background:var(--acc);border-radius:9px;transition:width .8s var(--ease)}
.tabs{display:flex;gap:6px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;padding:4px}
.tabs button{flex:1;height:38px;border-radius:10px;font-size:14px;font-weight:500;color:var(--muted)}
.tabs button.on{background:var(--panel2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.side .links{display:flex;flex-direction:column;gap:8px}
.side .links button{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;text-align:left}
.side .links button:hover{background:var(--panel2)}
.side .links svg{color:var(--acc)}
.side .links span{flex:1}
.side .links em{font-style:normal;color:var(--muted);font-family:var(--mono);font-size:13px}

.map{position:relative;border-radius:28px;overflow:hidden;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.map svg.road{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.zone{position:absolute;left:0;right:0;overflow:hidden}
.zone .zbg{position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--c-soft) 18%,var(--c-soft) 82%,transparent);opacity:.75}
.zone .doodles{position:absolute;inset:0;color:var(--c);opacity:.13}
.zone-head{position:absolute;left:18px;right:18px;display:flex;align-items:center;gap:14px;z-index:4;padding:10px 14px;border-radius:20px;background:rgba(11,14,20,.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--line)}
.zone-head .zi{width:52px;height:52px;border-radius:16px;background:var(--c-soft);color:var(--c);display:grid;place-items:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent);flex:none}
.zone-head b{font-family:var(--disp);font-size:20px;letter-spacing:-.02em;display:block;line-height:1.1}
.zone-head small{color:var(--muted);font-size:13.5px}
.zone-head .zs{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
.zone-head .zs svg{color:var(--c)}

.node{position:absolute;width:78px;margin-left:-39px;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2}
.node .nb{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:20px;position:relative;transition:transform .2s var(--ease)}
.node.boss .nb{width:82px;height:82px;font-size:22px}
.node .nb::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--panel2);box-shadow:inset 0 0 0 2px var(--line2),0 6px 0 #05070a}
.node .nb>*{position:relative}
.node.done .nb::before{background:var(--c);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 6px 0 color-mix(in srgb,var(--c) 45%,#000)}
.node.done .nb{color:#0b0d10}
.node.cur .nb::before{background:var(--acc);box-shadow:inset 0 -5px 0 rgba(0,0,0,.15),0 6px 0 #6d8a22}
.node.cur .nb{color:var(--acc-ink)}
.node.cur .nb::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--acc);opacity:.7;animation:ring 1.8s var(--ease) infinite}
@keyframes ring{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.25);opacity:0}}
.node.lock .nb{color:var(--dim)}
.node button{display:contents}
.node:not(.lock) .nb:hover{transform:translateY(-3px)}
.node .stars{display:flex;gap:2px;height:16px}
.node .stars svg{color:var(--line2)}
.node .stars svg.on{color:#ffd23f}
.node .nl{font-size:12px;color:var(--muted);text-align:center;line-height:1.2;max-width:120px;white-space:nowrap}
.node.cur .nl{color:var(--text);font-weight:500}
.node .crown{position:absolute;top:-16px;color:#ffd23f}
.me{position:absolute;z-index:3;width:44px;height:44px;margin:-80px 0 0 -22px;border-radius:14px;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;box-shadow:0 10px 24px -6px rgba(200,245,96,.6);animation:bob 2.4s ease-in-out infinite;pointer-events:none}
.me::after{content:"";position:absolute;bottom:-6px;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--acc);border-bottom:0}
@keyframes bob{50%{transform:translateY(-6px)}}

/* ── рівень ── */
.lvl{max-width:1240px;margin:0 auto;padding:0 24px 60px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,1fr);gap:22px;align-items:start}
.lvl-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.lvl-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:76px}
.sidebody{display:flex;flex-direction:column;gap:14px}
#newsSlot:empty{display:none}
.crumb{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.crumb b{color:var(--c);font-weight:600}
.asset{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.asset h1{font-family:var(--disp);font-size:clamp(24px,3.4vw,34px);letter-spacing:-.035em;line-height:1.05}
.asset .tk{font-family:var(--mono);font-size:13px;color:var(--c);background:var(--c-soft);padding:3px 8px;border-radius:7px;display:inline-block;margin-bottom:8px}
.asset .px{text-align:right}
.asset .px b{font-family:var(--mono);font-size:clamp(24px,3.4vw,32px);font-weight:700;letter-spacing:-.04em;display:block;line-height:1}
.asset .px small{color:var(--muted);font-size:12.5px}
.chartbox{position:relative;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r);padding:6px 6px 0;overflow:hidden}
.chartbox canvas{width:100%;height:360px;display:block}
.chartbox .when{position:absolute;left:16px;top:14px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;z-index:2}
.chartbox .when b{color:var(--text);font-weight:500}
.pnl-live{margin-left:auto;text-align:right;padding:6px 14px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.pnl-live small{display:block;color:var(--muted);font-size:12px}
.pnl-live b{font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:-.04em}
.ctx{font-size:16px;line-height:1.6;color:#c9cfdb}
.ctx-card{display:flex;gap:14px}
.ctx-card .ci{width:36px;height:36px;border-radius:11px;background:var(--c-soft);color:var(--c);display:grid;place-items:center;flex:none}
.ctx-card h3{font-size:13px;color:var(--muted);font-weight:500;margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em}
.note{font-size:12.5px;color:var(--dim);margin-top:4px}

.newscard{background:linear-gradient(160deg,#1b1f2b,#12151d);border-radius:var(--r);padding:20px;box-shadow:inset 0 0 0 1px var(--line2);position:relative;overflow:hidden}
.newscard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--down)}
.newscard .nh{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--down);font-weight:700}
.newscard .nh .lv{width:7px;height:7px;border-radius:50%;background:var(--down);animation:live 1.6s infinite}
.newscard .nh span.t{color:var(--muted);margin-left:auto;font-weight:500;letter-spacing:0;text-transform:none}
.newscard h2{font-family:var(--disp);font-size:clamp(19px,2.3vw,23px);line-height:1.22;letter-spacing:-.025em;margin:10px 0 8px;font-weight:600}
.newscard p{color:#b9c0cd;font-size:15px}
.listen{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);height:32px;padding:0 12px;border-radius:10px;background:rgba(255,255,255,.05)}
.newscard .listen{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);height:32px;padding:0 12px;border-radius:10px;background:rgba(255,255,255,.05)}
.listen:hover{color:var(--text)}
.listen.on{color:var(--acc)}
.wave{display:inline-flex;gap:2px;align-items:center;height:14px}
.wave i{width:2.5px;height:4px;background:currentColor;border-radius:2px}
.listen.on .wave i{animation:wv .9s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.15s!important}.wave i:nth-child(3){animation-delay:.3s!important}.wave i:nth-child(4){animation-delay:.45s!important}
@keyframes wv{50%{height:14px}}

.panel{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r);padding:18px}
.panel h3{font-family:var(--disp);font-size:17px;letter-spacing:-.02em;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.panel h3 small{font-family:var(--sans);font-size:13px;color:var(--muted);font-weight:400;margin-left:auto}
.waiting{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:15px}
.dots{display:inline-flex;gap:4px}.dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dt 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dt{40%{opacity:.2}}
.step{margin-top:16px}
.step:first-of-type{margin-top:0}
.step>label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px;font-weight:500}
.dirs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dir{position:relative;border-radius:16px;padding:14px;text-align:left;background:var(--bg2);box-shadow:inset 0 0 0 1.5px var(--line2);transition:box-shadow .15s,background .15s,transform .15s var(--ease)}
.dir:active{transform:scale(.98)}
.dir b{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}
.dir small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.35}
.dir.long b svg{color:var(--up)}.dir.short b svg{color:var(--down)}.dir.out b svg{color:var(--muted)}
.dir.long.on{background:var(--up-soft);box-shadow:inset 0 0 0 2px var(--up)}
.dir.short.on{background:var(--down-soft);box-shadow:inset 0 0 0 2px var(--down)}
.dir.out.on,.dir.neu.on{background:rgba(141,150,169,.12);box-shadow:inset 0 0 0 2px var(--muted)}
.dir.wide{grid-column:1/-1}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;background:var(--bg2);border-radius:14px;padding:4px;box-shadow:inset 0 0 0 1px var(--line)}
.seg button{height:44px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.seg button small{font-size:11px;color:var(--dim);font-weight:400;margin-top:2px}
.seg button.on{background:var(--panel2);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--acc)}
.seg button.on small{color:var(--muted)}
.chips{display:flex;gap:8px}
.chips button{flex:1;height:58px;border-radius:14px;background:var(--bg2);box-shadow:inset 0 0 0 1.5px var(--line2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.chips button .cc{display:flex;gap:3px}
.chips button .cc i{width:12px;height:12px;border-radius:50%;background:var(--line2);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.chips button.on{box-shadow:inset 0 0 0 2px var(--acc);background:var(--acc-soft)}
.chips button.on .cc i{background:var(--acc)}
.chips button small{font-size:12px;color:var(--muted);font-family:var(--mono)}
.go{margin-top:16px;width:100%}
.hint{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.45}
.pos{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg2);border-radius:14px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;margin-bottom:14px}
.pos b{font-family:var(--mono)}

/* результат */
.res-big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.res-big b{font-family:var(--mono);font-size:42px;font-weight:700;letter-spacing:-.05em;line-height:1}
.res-big span{color:var(--muted);font-size:14px}
.res-sub{color:var(--muted);font-size:14px;margin-top:8px}
.mx{display:grid;grid-template-columns:auto repeat(3,1fr);gap:4px;margin-top:14px;font-size:13px}
.mx>div{padding:9px 6px;border-radius:9px;text-align:center;font-family:var(--mono);background:var(--bg2);position:relative}
.mx>div.h{background:none;color:var(--muted);font-family:var(--sans);padding:4px 6px}
.mx>div.rl{background:none;text-align:left;font-family:var(--sans);color:var(--muted);padding-left:0}
.mx>div.you{box-shadow:inset 0 0 0 2px var(--acc)}
.mx>div.best::after{content:"";position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:#ffd23f}
.mx-note{font-size:12.5px;color:var(--muted);margin-top:8px;display:flex;gap:14px;flex-wrap:wrap}
.mx-note i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.reveal-date{display:flex;align-items:center;gap:10px;background:var(--c-soft);color:var(--text);border-radius:14px;padding:12px 14px;font-size:14px}
.reveal-date svg{color:var(--c);flex:none}
.reveal-date b{font-weight:600}
.quiz .qopts{display:flex;flex-direction:column;gap:8px}
.qopt{text-align:left;padding:13px 14px;border-radius:14px;background:var(--bg2);box-shadow:inset 0 0 0 1.5px var(--line2);font-size:14.5px;line-height:1.4;transition:box-shadow .15s,background .15s}
.qopt:hover{box-shadow:inset 0 0 0 1.5px var(--muted)}
.qopt.ok{background:var(--up-soft);box-shadow:inset 0 0 0 2px var(--up)}
.qopt.bad{background:var(--down-soft);box-shadow:inset 0 0 0 2px var(--down)}
.qopt[disabled]{cursor:default}
.exp p{color:#c9cfdb;font-size:15px;line-height:1.6;margin-top:10px}
.exp p:first-child{margin-top:0}
.rule{margin-top:14px;border-radius:16px;padding:16px;background:linear-gradient(135deg,var(--acc-soft),rgba(200,245,96,.04));box-shadow:inset 0 0 0 1px rgba(200,245,96,.3)}
.rule small{display:flex;align-items:center;gap:8px;color:var(--acc);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.rule p{font-family:var(--disp);font-size:16.5px;line-height:1.35;letter-spacing:-.015em;margin-top:6px;font-weight:500}
.starsbig{display:flex;justify-content:center;gap:10px;margin:4px 0 12px}
.starsbig .sb{display:flex;flex-direction:column;align-items:center;gap:6px;width:92px;text-align:center}
.starsbig svg{color:var(--line2);transition:color .3s,transform .5s var(--ease)}
.starsbig .sb.on svg{color:#ffd23f;animation:pop .6s var(--ease) both}
.starsbig small{font-size:12px;color:var(--muted);line-height:1.25}
@keyframes pop{0%{transform:scale(.3) rotate(-30deg)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.nav-btns{display:flex;gap:10px;margin-top:6px}
.nav-btns .btn{flex:1}
.fadein{animation:fadein .5s var(--ease) both}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}}

/* пуш, що прилітає */
.pushfly{position:fixed;left:50%;top:14px;z-index:60;width:min(440px,calc(100vw - 24px));transform:translate(-50%,-140%);transition:transform .6s var(--ease)}
.pushfly.in{transform:translate(-50%,0)}
.flash{position:fixed;inset:0;z-index:55;pointer-events:none;background:radial-gradient(60% 50% at 50% 0%,rgba(255,90,110,.22),transparent 70%);opacity:0;transition:opacity .4s}
.flash.on{opacity:1}

/* правила, фінал */
.page{max-width:900px;margin:0 auto;padding:0 20px 80px}
.page h1{font-family:var(--disp);font-size:clamp(28px,4.5vw,44px);letter-spacing:-.04em;line-height:1.05;margin:10px 0 8px}
.page .lead{color:var(--muted);font-size:16px;margin-bottom:22px}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rcard{background:var(--panel);border-radius:var(--r);padding:16px;box-shadow:inset 0 0 0 1px var(--line);position:relative;overflow:hidden}
.rcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.rcard small{color:var(--c);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.rcard p{font-family:var(--disp);font-size:15px;line-height:1.4;margin-top:6px;letter-spacing:-.01em;font-weight:500}
.rcard em{display:block;font-style:normal;color:var(--muted);font-size:12.5px;margin-top:8px}
.rcard.lock p{filter:blur(5px);opacity:.4;user-select:none}
.done-hero{text-align:center;padding:30px 0 10px}
.done-hero .big{font-family:var(--mono);font-size:54px;font-weight:700;letter-spacing:-.05em}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,40px);opacity:0;z-index:80;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line2),0 20px 40px -10px rgba(0,0,0,.6);padding:12px 18px;border-radius:14px;font-size:14px;transition:all .35s var(--ease);pointer-events:none;max-width:calc(100vw - 32px)}
.toast.on{transform:translate(-50%,0);opacity:1}

/* дитячий режим */
.kidsmode .mascot{display:flex;gap:12px;align-items:flex-start}
.kidsmode .mascot .mi{flex:none;width:64px;height:64px}
.kidsmode .bubble{background:var(--panel2);border-radius:18px 18px 18px 4px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--line2);font-size:16px;line-height:1.55}
.dir.k{padding:18px 14px;text-align:center}
.dir.k b{justify-content:center;font-size:17px}
.dir.k .ki{margin:0 auto 8px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center}
.dir.k.long .ki{background:var(--up-soft);color:var(--up)}
.dir.k.short .ki{background:var(--down-soft);color:var(--down)}
.dir.k.neu .ki{background:rgba(141,150,169,.14);color:var(--muted)}
.dirs.three{grid-template-columns:repeat(3,1fr)}

/* ── теханаліз ── */
.seg button{height:auto;min-height:44px;padding:5px 4px;text-align:center}
.step.dim{opacity:.35;pointer-events:none}
.mx.mx-ta{grid-template-columns:auto 1fr 1fr}
.mx>div.mx-g{grid-column:1/-1;background:none;text-align:left;font-family:var(--sans);font-weight:600;color:var(--text);padding:8px 0 0}
.mx>div small{display:block;font-family:var(--sans);font-size:10.5px;color:var(--muted);margin-top:1px}

/* ── діти 10+ ── */
.tabs button{font-size:13.5px;padding:0 4px}
.wallet small{display:block;color:var(--muted);font-size:13px}
.wallet>b,.pig-info>b{font-family:var(--mono);font-size:clamp(34px,5vw,46px);font-weight:700;letter-spacing:-.05em;line-height:1.1}
.wallet .goal{margin-top:12px}
.wallet .goal-h{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.wallet .bar{height:10px;margin-top:6px}
.wallet .bar i{background:var(--c);transition:none}
.scene .ctx{margin-top:14px;font-size:16px;line-height:1.55}
.tl h3{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:16px;margin-bottom:10px}
.tl h3 svg{color:var(--c)}
.tl-row{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.tl-k{font-size:13px;color:var(--c);font-weight:600;padding-top:1px}
.tl-i p{display:flex;justify-content:space-between;gap:10px;font-size:15px;line-height:1.4}
.tl-i p+p{margin-top:4px}
.tl-i p.inc{color:var(--muted);font-size:13.5px}
.tl-i b{font-family:var(--mono);white-space:nowrap}
.tl-goal{grid-column:2;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-weight:600;font-size:14px;color:var(--acc-ink);background:var(--acc);border-radius:10px;padding:5px 10px;justify-self:start}
.dirs.one{grid-template-columns:1fr}
.dir.mini{display:flex;gap:12px;align-items:center}
.dir.mini .ki{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--c-soft);color:var(--c)}
.dir.mini.on{background:var(--c-soft);box-shadow:inset 0 0 0 2px var(--c)}
.mx.mx-mini>div{text-align:right;padding:9px 8px}
.mx.mx-mini>div.rl{text-align:left;color:var(--text);font-size:13.5px}
.mx.mx-mini>div.h{text-align:right}.mx.mx-mini>div.h:first-child{text-align:left}
.mx.mx-mini .bstar{color:#ffd23f}
.wallet .w-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.wk-chip{font-size:13px;font-weight:600;color:var(--c);background:var(--c-soft);border-radius:999px;padding:4px 10px}
.traps{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.trap{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:5px 11px}
.trap.ok{color:var(--up);background:var(--up-soft);box-shadow:none}
.trap.bad{color:var(--down);background:var(--down-soft);box-shadow:none}
.intro-st h3,.lesson .ls-h{display:flex;align-items:center;gap:8px}
.intro-st p{font-size:15.5px;line-height:1.55;margin-top:10px}
.st-goal{background:var(--c-soft);border-radius:14px;padding:12px 14px;margin-top:12px}
.st-goal small{display:block;font-size:12.5px;color:var(--c);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.st-goal b{display:block;font-family:var(--disp);font-size:18px;line-height:1.3;margin-top:4px}
.st-k{font-size:13px;font-weight:600;color:var(--c)}
.st-lead{font-size:17px;line-height:1.5;margin:8px 0 12px}
.lesson .ls-h{font-family:var(--disp);font-size:18px;font-weight:600}
.lesson.good .ls-h svg{color:var(--up)}.lesson.bad .ls-h svg{color:var(--down)}
.ls-cost{font-size:16px;font-weight:600;margin-top:8px}
.lesson.bad .ls-cost{color:var(--down)}.lesson.good .ls-cost{color:var(--up)}
.lesson.mid .ls-h svg,.lesson.mid .ls-cost{color:#ffd23f}
.ls-bal{font-size:15px;margin-top:6px;color:var(--muted)}.ls-bal b{font-family:var(--mono)}
.lesson .rule{margin-top:14px}
.lesson .rule p{font-size:18px;line-height:1.4}
.ls-why{font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:12px}
.st-rule{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5}
.st-rule svg{flex:none;margin-top:3px}
.st-rule.ok svg{color:var(--up)}.st-rule.bad svg{color:var(--down)}
.intro-st .nav-btns{align-items:center}
/* свинка в грі */
.wallet.pigw{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center}
.pigbox .pig{width:100%;height:auto;display:block}
.pig-fill{transition:none}
.goal-h span{display:inline-flex;align-items:center;gap:6px}
/* вступна сторінка історії */
.st-land{--c:#ffd23f;--c-soft:rgba(255,210,63,.15);max-width:1080px;margin:0 auto;padding:10px 24px 70px}
.sl-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding:26px 0 40px}
.sl-tag{display:inline-block;font-size:13px;font-weight:600;color:var(--c);background:var(--c-soft);border-radius:999px;padding:5px 12px}
.sl-hero h1{font-family:var(--disp);font-size:clamp(32px,4.6vw,54px);line-height:1.02;letter-spacing:-.03em;margin:16px 0 14px}
.sl-sub{font-size:clamp(17px,1.9vw,20px);line-height:1.5;color:var(--muted);max-width:520px}
.sl-cta{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}
.sl-cta .btn,.sl-win .btn{min-width:220px}
.sl-art{position:relative;background:radial-gradient(closest-side,rgba(255,210,63,.14),transparent);border-radius:32px;padding:30px 30px 20px}
.sl-art .pig{width:100%;max-width:360px;height:auto;display:block;margin:0 auto}
.sl-coin{position:absolute;left:50%;top:-6px;width:34px;height:34px;margin-left:-26px;border-radius:50%;background:var(--c);color:#3a2c00;font-weight:800;font-size:18px;display:grid;place-items:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);animation:coin 2.6s cubic-bezier(.5,0,.8,.6) infinite;opacity:0}
.sl-coin.c2{animation-delay:1.3s}
@keyframes coin{0%{transform:translateY(-30px) rotateY(0);opacity:0}15%{opacity:1}55%{transform:translateY(54px) rotateY(360deg);opacity:1}62%,100%{transform:translateY(64px) rotateY(400deg);opacity:0}}
.sl-goal{display:flex;gap:12px;align-items:center;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;padding:12px 14px;margin:14px auto 0;max-width:340px}
.sl-goal>span{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--c-soft);color:var(--c)}
.sl-goal>div{flex:1}.sl-goal small{display:block;font-size:12.5px;color:var(--muted)}
.sl-goal b{display:block;font-size:15px;margin:2px 0 6px}
.sl-goal .bar{height:8px}.sl-goal .bar i{background:var(--c)}
.sl-sec{padding:30px 0}
.sl-sec h2{font-family:var(--disp);font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin-bottom:18px}
.sl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sl-step{position:relative;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:20px;padding:20px 18px}
.sl-n{position:absolute;top:16px;right:18px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.sl-i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--c-soft);color:var(--c);margin-bottom:14px}
.sl-step b{display:block;font-family:var(--disp);font-size:17px;margin-bottom:6px}
.sl-step p{font-size:14.5px;line-height:1.5;color:var(--muted)}
.sl-win{display:flex;gap:30px;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--c-soft),transparent);box-shadow:inset 0 0 0 1px rgba(255,210,63,.3);border-radius:24px;padding:28px;margin-top:20px}
.sl-win h2{margin-bottom:8px}.sl-win p{font-size:16.5px;line-height:1.5;max-width:560px}
.sl-win .trap{color:var(--c);box-shadow:inset 0 0 0 1px rgba(255,210,63,.35)}
.sl-note{color:var(--muted);font-size:15.5px;margin:-8px 0 18px}
.sl-goals{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.sl-g{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;padding:16px 14px;color:var(--text);cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.sl-g:hover{transform:translateY(-2px)}
.sl-g.on{background:var(--c-soft);box-shadow:inset 0 0 0 2px var(--c)}
.sl-gi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--c-soft);color:var(--c);margin-bottom:8px}
.sl-g.on .sl-gi{background:var(--c);color:#3a2c00}
.sl-g b{font-size:15px;line-height:1.25}
.sl-g small{font-size:12.5px;color:var(--muted);line-height:1.35}
.sl-own{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;padding:16px 18px}
.sl-own[hidden]{display:none}
.sl-own label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--muted)}
.sl-own label b{color:var(--c);font-family:var(--mono)}
.sl-own input[type=text],.sl-own input:not([type]){background:var(--bg2);border:0;box-shadow:inset 0 0 0 1px var(--line2);border-radius:12px;padding:12px 14px;color:var(--text);font:inherit;font-size:16px}
.sl-own input:not([type]):focus{outline:none;box-shadow:inset 0 0 0 2px var(--c)}
.sl-own input[type=range]{accent-color:var(--c);width:100%;height:28px}
@media (max-width:1000px){.sl-goals{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.sl-steps{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.sl-goals{grid-template-columns:1fr 1fr;gap:10px}.sl-own{grid-template-columns:1fr}}
@media (max-width:700px){
  .st-land{padding:0 16px 50px}
  .sl-hero{grid-template-columns:1fr;gap:10px;padding:14px 0 20px}
  .sl-art{padding:30px 16px 6px}.sl-art .pig{max-width:200px}
  .sl-hero h1{margin-top:12px}
  .sl-cta .btn{flex:1}
  .sl-steps{grid-template-columns:1fr;gap:10px}
  .sl-step{display:grid;grid-template-columns:46px 1fr;column-gap:14px;padding:16px}
  .sl-step .sl-i{grid-row:span 2;margin:0}.sl-step b{margin:2px 0 4px;padding-right:20px}
  .sl-win{flex-direction:column;align-items:stretch;padding:22px}
  .wallet.pigw{grid-template-columns:96px 1fr;gap:14px}
}
@media (max-width:980px){
  .mapwrap{grid-template-columns:minmax(0,1fr);padding:0 16px 60px}
  .side{position:static;gap:10px;min-width:0}
  .side .card.rank{display:none}
  .side .card:not(.rank) p{font-size:13.5px;margin-top:4px}
  .side .card{padding:14px}
  .side h2{font-size:18px}
  .side .stat-row{margin-top:10px}
  .side .links{flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .side .links button{flex:none;padding:10px 12px}
  .lvl{grid-template-columns:1fr;padding:0 16px 40px}
  .lvl-side{position:static}
}
@media (max-width:640px){
  .intro-steps{grid-template-columns:1fr}
  .chartbox canvas{height:270px}
  .rules{grid-template-columns:1fr}
  .zone-head{left:16px;right:16px}
  .zone-head b{font-size:17px}
  .top{padding:10px 12px}
  .brand span{display:none}
  .res-big b{font-size:36px}
  .starsbig .sb{width:84px}
  .dir.k{padding:14px 8px}.dir.k b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* заставка глави */
.splash{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:radial-gradient(60% 50% at 50% 45%,var(--c-soft),rgba(7,9,13,.96) 70%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:spIn .5s var(--ease) both;cursor:pointer}
.splash.out{animation:spOut .45s var(--ease) both}
.sp-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 24px}
.sp-i{width:96px;height:96px;border-radius:30px;background:var(--c-soft);color:var(--c);display:grid;place-items:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent),0 20px 60px -10px var(--c-soft);margin-bottom:14px;animation:pop .7s var(--ease) both .1s}
.sp-in small{color:var(--c);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.sp-in b{font-family:var(--disp);font-size:clamp(34px,7vw,64px);letter-spacing:-.04em;line-height:1;animation:fadein .6s var(--ease) both .15s}
.sp-in em{font-style:normal;color:var(--muted);font-size:17px;animation:fadein .6s var(--ease) both .3s}
@keyframes spIn{from{opacity:0}}
@keyframes spOut{to{opacity:0;transform:scale(1.04)}}

/* ролик */
.vmodal{position:fixed;inset:0;z-index:90;background:rgba(3,4,7,.86);backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px;animation:spIn .3s var(--ease) both}
.vbox{position:relative;height:min(86vh,calc((100vw - 32px) * 16 / 9));aspect-ratio:9/16;border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 0 0 1px var(--line2);background:#000}
.vbox video{width:100%;height:100%;display:block;object-fit:cover}
.vclose{position:absolute;top:10px;right:10px;font-size:16px;background:rgba(16,20,28,.8)}
/* підлітки: гроші на рік */
.yr h3{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:16px;margin-bottom:4px}
.yr h3 svg{color:var(--c)}
.ratebox{position:relative;margin:10px 0 6px}
.ratesvg{width:100%;height:150px;display:block}
.ratesvg text{fill:var(--muted);font-size:12px;font-family:var(--sans)}
.ratesvg .rl{stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 1.4s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.rate-lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;color:var(--text);margin-top:-2px}
.sv-head,.sv-row{display:grid;grid-template-columns:1fr 92px 108px;gap:10px;align-items:center}
.sv-head{font-size:12px;color:var(--muted);margin-top:14px;padding:0 10px 6px}
.sv-head span:not(:first-child){text-align:right}
.sv-row{padding:10px;border-radius:12px;margin-top:4px;background:var(--panel2)}
.sv-row.you{box-shadow:inset 0 0 0 2px var(--acc)}
.sv-row b{font-size:14px;font-weight:600}.sv-row .bstar{color:#ffd23f}
.sv-row .num{text-align:right;font-family:var(--mono);font-size:14px}
.sv-bar{grid-column:1/-1;position:relative;height:6px;border-radius:4px;background:var(--line)}
.sv-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--c-soft)}
.sv-bar i.re{background:var(--c)}
.gloss{margin:10px 0 2px;font-size:14px}
.gloss summary{cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;gap:6px;list-style:none}
.gloss summary::-webkit-details-marker{display:none}
.gloss p{margin-top:8px;line-height:1.5;color:var(--muted)}.gloss b{color:var(--text)}
.savemode .wallet>b{font-size:clamp(30px,4vw,40px)}
@media (max-width:520px){.sv-head,.sv-row{grid-template-columns:1fr 80px 92px;gap:6px}.sv-row b{font-size:13px}}
/* головна підлітків */
.st-land.teen{--c:#ff7eb6;--c-soft:rgba(255,126,182,.15)}
.st-land.teen .sl-win{box-shadow:inset 0 0 0 1px rgba(255,126,182,.3)}
.tn-art{display:flex;flex-direction:column;gap:14px;padding:26px 22px;background:radial-gradient(closest-side,rgba(255,126,182,.16),transparent)}
.tn-push .push{position:static;transform:none;max-width:none;animation:tnFloat 5s ease-in-out infinite}
.tn-card{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;padding:14px 16px;width:86%;align-self:flex-end;animation:tnFloat 5s ease-in-out 1.2s infinite}
.tn-h{display:flex;justify-content:space-between;font-size:14px}.tn-h b{font-family:var(--mono)}
.tn-ch{width:100%;height:70px;display:block;margin:8px 0 4px}
.tn-card small{font-size:12px;color:var(--muted)}
.tn-coins{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:var(--c-soft);color:var(--c);font-weight:600;font-size:14px;border-radius:999px;padding:8px 14px}
@keyframes tnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.tn-chs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tn-ch-card{text-align:left;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:20px;padding:20px 18px;color:var(--text);cursor:pointer;transition:transform .15s}
.tn-ch-card:hover{transform:translateY(-2px)}
.tn-ch-card .sl-i{background:var(--c-soft);color:var(--c)}
.tn-ch-card b{display:block;font-family:var(--disp);font-size:17px;margin-bottom:4px}
.tn-ch-card p{font-size:14px;color:var(--muted);line-height:1.45;margin-bottom:12px}
.tn-ch-card .bar{height:6px}.tn-ch-card .bar i{background:var(--c)}
.tn-ch-card small{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
@media (max-width:700px){.tn-chs{grid-template-columns:1fr}.tn-art{padding:16px 6px 4px}}


/* вихід на сайт з інтро */
.intro-home{position:absolute;top:14px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:inherit;text-decoration:none;font-size:13px;font-weight:600}
.intro-home:hover{background:rgba(255,255,255,.12)}

/* ───────── підсумки глави і маршруту, грамота, PDF правил (21.10) ───────── */
.sec-h{font-family:var(--disp);font-size:18px;margin:26px 0 12px;letter-spacing:-.01em}.sec-h .mut{color:var(--muted);font-weight:400;font-size:14px;font-family:var(--sans)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kpi{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.kpi small{display:block;color:var(--muted);font-size:12px}.kpi b{display:block;font-family:var(--mono);font-size:19px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kpi b i{font-style:normal;font-size:13px;opacity:.8}
.kpi .up,.kpi b.up,.hr.up,.curve .up{color:var(--up)}.kpi .down,.kpi b.down,.hr.down,.curve .down{color:var(--down)}
.curve{margin-top:10px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;padding:12px 14px}
.curve-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:6px}.curve-h small{color:var(--muted);font-size:12px}.curve-h b{font-family:var(--mono);font-size:14px}
.curve svg{width:100%;height:150px;display:block}.curve .base{stroke:var(--line2);stroke-dasharray:4 5}
.curve .ln{fill:none;stroke-width:2.5;vector-effect:non-scaling-stroke}.curve .ln.up{stroke:var(--up)}.curve .ln.down{stroke:var(--down)}
.curve .area.up{fill:var(--up-soft)}.curve .area.down{fill:var(--down-soft)}.curve circle.up{fill:var(--up)}.curve circle.down{fill:var(--down)}
.hist{display:flex;flex-direction:column;gap:6px}
.hrow{display:grid;grid-template-columns:28px minmax(0,1.3fr) minmax(0,1.6fr) 96px 52px;gap:10px;align-items:center;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:12px;padding:10px 12px;color:inherit;text-decoration:none;position:relative}
.hrow::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--c)}
.hn{color:var(--muted);font-family:var(--mono);font-size:12px}.ha b{display:block;font-size:14px}.ha small{color:var(--muted);font-size:12px}.hp{color:var(--muted);font-size:13px}
.hr{font-family:var(--mono);font-size:14px;text-align:right}.hs{color:#ffd23f;font-size:13px;letter-spacing:1px;text-align:right}.hs i{font-style:normal;color:var(--line2)}
.hist-d{margin-top:12px}.hist-d summary{cursor:pointer;color:var(--muted);margin-bottom:10px}
.sticker{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--c);color:#17201a;box-shadow:0 0 0 3px #fff,0 6px 16px rgba(0,0,0,.35);transform:rotate(-8deg)}
.sticker.big{width:96px;height:96px;animation:stick .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes stick{0%{transform:scale(1.8) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(-8deg);opacity:1}}
.stickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.st-cell{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:inherit;text-decoration:none;font-size:12px;line-height:1.25}
.st-cell small{color:var(--muted)}.st-cell.off .sticker{filter:grayscale(1);opacity:.25;box-shadow:none}
.dip-wrap{margin:8px 0 6px}.dip-in{display:flex;flex-direction:column;gap:14px;align-items:center}
.dip-name{display:flex;flex-direction:column;gap:6px;width:min(420px,100%)}.dip-name span{color:var(--muted);font-size:13px}
.dip-name input{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;color:var(--text);font:inherit;font-size:16px}
.diploma{position:relative;width:min(760px,100%);border-radius:10px;overflow:visible}.diploma img{width:100%;display:block;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.diploma.reveal img{animation:dipIn 1s cubic-bezier(.2,1,.3,1) both}
@keyframes dipIn{0%{transform:perspective(900px) rotateX(40deg) translateY(40px) scale(.9);opacity:0}100%{transform:none;opacity:1}}
.diploma .seal{position:absolute;right:-14px;top:-14px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--acc-ink,#0b0f14);box-shadow:0 8px 20px rgba(0,0,0,.4);animation:stamp .5s .9s cubic-bezier(.3,1.6,.5,1) both}
@keyframes stamp{0%{transform:scale(2.4) rotate(-25deg);opacity:0}100%{transform:scale(1) rotate(-8deg);opacity:1}}
.dip-lock b{display:flex;gap:8px;align-items:center;font-family:var(--disp)}
.tips{margin-bottom:16px}.tips h3{display:flex;gap:8px;align-items:center;font-family:var(--disp);font-size:16px;margin-bottom:8px}.tips ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.5}.tips b{color:var(--text)}
.rcard .note{width:100%;margin-top:10px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--text);font:inherit;font-size:14px;resize:vertical}
.print-only{display:none}
@media (max-width:700px){.diploma .seal{right:-4px;top:-18px;width:52px;height:52px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.hrow{grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"n a r" "n p s"}.hn{grid-area:n}.ha{grid-area:a}.hp{grid-area:p}.hr{grid-area:r}.hs{grid-area:s}.sticker.big{width:84px;height:84px}}
@media print{
  html,body{background:#fff!important;color:#000!important}
  .top,.fph,.fpf,.noprint,.toast,canvas.bgfx,.glow{display:none!important}
  .print-only{display:block!important}.print-h{font-size:12px;color:#444;margin-bottom:10px}
  .page{max-width:none;padding:0}.rules{grid-template-columns:1fr 1fr;gap:8px}
  .rcard,.card{background:#fff!important;box-shadow:inset 0 0 0 1px #ccc!important;break-inside:avoid;color:#000}
  .rcard p,.tips b{color:#000!important}.rcard small{color:#555!important}.rcard em{color:#999}
  .note-p{margin-top:6px;font-size:12px;color:#333;font-style:italic;white-space:pre-wrap}.note-p:empty{display:none!important}
  .tips ol{font-size:12px}h1{font-size:22px;color:#000}.lead{color:#333}
}
/* кабінет і рейтинг (21.10) */
.acct{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;line-height:1.45;color:var(--muted);text-decoration:none;margin:10px 0}
.acct svg{flex:none;margin-top:1px;color:var(--acc)}.acct b{color:var(--text)}a.acct:hover{box-shadow:inset 0 0 0 1px var(--acc)}.acct.on svg{color:var(--up)}
.rt-tabs{display:flex;gap:6px;margin:4px 0 14px}.rt-tabs button{flex:none;padding:8px 14px}
.rt-head,.rt-row{display:grid;grid-template-columns:40px minmax(0,1.6fr) 70px 90px 64px 76px 84px;gap:8px;align-items:center;padding:10px 12px}
.rt-head{color:var(--muted);font-size:12px}.rt-row{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:12px;margin-bottom:6px;font-size:14px}
.rt-row.rt-me{box-shadow:inset 0 0 0 2px var(--acc)}.rt-n{font-family:var(--mono);color:var(--muted)}.rt-nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-s{color:#ffd23f;font-family:var(--mono)}.rt-w,.rt-l,.rt-t{color:var(--muted);font-size:13px}.rt-c{font-family:var(--mono)}.rt-c.up{color:var(--up)}.rt-c.down{color:var(--down)}
.rt .hint a{color:var(--acc)}
@media (max-width:700px){.rt-head{display:none}.rt-row{grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"n k s" "n w c" "n l t"}.rt-n{grid-area:n}.rt-nick{grid-area:k}.rt-s{grid-area:s;text-align:right}.rt-w{grid-area:w}.rt-c{grid-area:c;text-align:right}.rt-l{grid-area:l}.rt-t{grid-area:t;text-align:right}}
/* рядок розділу під спільною шапкою (fp-nav.js): без другого логотипа, назва як в інших розділах */
header.top.fps .brand>i{display:none!important}
header.top.fps .brand>span{font-family:Geologica,system-ui,sans-serif;font-size:19px;font-weight:700;letter-spacing:-.02em}
header.top.fps .icon-btn{width:34px;height:34px}
@media (max-width:560px){header.top.fps .brand>span{font-size:16px}}