/* Звёздный экран — Telegram Mini App. Тёмная тема, фиксированная. */
:root{
  --bg:#0B0E14; --card:#151C27; --card2:#1B2431; --line:#26303F;
  --text:#E9EDF3; --muted:#8793A6; --accent:#F5C451; --ok:#3FCF8E; --bad:#F2726B;
  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"IBM Plex Mono",monospace;
  --tabs-h:62px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body{
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; padding-bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom));
}
button{font-family:inherit}

.top{
  display:flex; align-items:center; gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:5;
}
.mark{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:linear-gradient(160deg,#2A2213,#1A1F2B); border:1px solid #3A3320; color:var(--accent);
}
.who b{display:block; font-size:15px; font-weight:700; letter-spacing:-.01em}
.who span{display:block; font-size:11.5px; color:var(--muted)}

main{padding:14px 16px 20px}
.screen[hidden]{display:none}

.s-title{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:2px 0 12px;
}
.s-title:not(:first-child){margin-top:24px}

.gauge{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; gap:16px; align-items:center}
.gauge svg{flex:none}
.gauge .val{font-family:var(--mono); font-size:30px; font-weight:600; line-height:1}
.gauge .lbl{color:var(--accent); font-size:13px; font-weight:700; margin-top:4px}
.gauge .sub{color:var(--muted); font-size:11.5px; margin-top:6px}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.tile{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 13px}
.tile .k{color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.04em}
.tile .v{font-family:var(--mono); font-size:17px; font-weight:600; margin-top:5px}
.tile .d{font-family:var(--mono); font-size:11.5px; margin-top:2px}
.up{color:var(--ok)} .down{color:var(--bad)}

.razbor{background:var(--card2); border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:0 14px 14px 0; padding:13px 14px}
.razbor .who-line{font-size:11px; color:var(--muted); font-weight:600; margin-bottom:5px}
.razbor p{margin:0; font-size:14px; line-height:1.5; color:#D4DAE4}

.coin{display:flex; align-items:center; gap:12px; padding:12px 13px; margin-bottom:8px;
  background:var(--card); border:1px solid var(--line); border-radius:14px}
.coin .tic{width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:#212B3A; font-family:var(--mono); font-size:11px; font-weight:600; color:#C3CCDA}
.coin .body{flex:1; min-width:0}
.coin .name{font-size:14px; font-weight:700; letter-spacing:-.01em}
.coin .meta{font-size:11.5px; color:var(--muted); margin-top:2px}
.coin .pct{font-family:var(--mono); font-size:13px; font-weight:600; text-align:right}
.chip{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:2px 7px; border-radius:6px; margin-top:5px}
.chip.kachestvo{background:rgba(245,196,81,.14); color:var(--accent)}
.chip.baza{background:#222C3A; color:var(--muted)}
.chip.new{background:rgba(63,207,142,.13); color:var(--ok)}
.coin .name{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.coin .name .chip{margin-top:0}
.coin .side{text-align:right; flex:none}
.coin .turn{font-family:var(--mono); font-size:12.5px; font-weight:600}
.coin .crit{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:3px}
.locked .body,.locked .pct,.locked .tic{filter:blur(4px); opacity:.5}

.lockbar{margin-top:12px; background:linear-gradient(180deg,rgba(245,196,81,.10),rgba(245,196,81,.04));
  border:1px solid rgba(245,196,81,.28); border-radius:16px; padding:15px}
.lockbar h4{margin:0 0 6px; font-size:14px; font-weight:700; color:var(--accent)}
.lockbar p{margin:0 0 12px; font-size:12.5px; color:#BCC5D2; line-height:1.5}

.btn{display:block; width:100%; text-align:center; border:0; cursor:pointer; background:var(--accent);
  color:#1A1405; font-size:14px; font-weight:700; padding:12px; border-radius:11px}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--text)}
.btn + .btn{margin-top:8px}
.btn:active{opacity:.85}

.progress{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.bar{flex:1; height:5px; border-radius:99px; background:#222C3A; overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--accent); transition:width .3s}
.progress span{font-family:var(--mono); font-size:11.5px; color:var(--muted)}

.lesson{display:flex; align-items:center; gap:11px; padding:12px 13px; margin-bottom:7px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; cursor:pointer}
.lesson .n{width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--mono); font-size:10.5px; font-weight:600; background:#222C3A; color:var(--muted)}
.lesson.done .n{background:rgba(63,207,142,.15); color:var(--ok)}
.lesson .t{flex:1; font-size:13.5px; font-weight:500}
.lesson .m{font-family:var(--mono); font-size:11px; color:var(--muted)}

.guide{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px}
.guide h4{margin:0 0 8px; font-size:14px; font-weight:700}
.guide ol{margin:0; padding-left:18px; font-size:13.5px; color:#C6CEDA; line-height:1.7}

.hint{margin:11px 0 0; padding-top:11px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted); line-height:1.5}

.status,.ref{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:15px}
.ref{margin-top:0}
.status .row{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.status .row + .row{margin-top:11px; padding-top:11px; border-top:1px solid var(--line)}
.status .k{font-size:12.5px; color:var(--muted)}
.status .v{font-size:13.5px; font-weight:600}
.badge{font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:3px 8px; border-radius:6px;
  background:rgba(245,196,81,.14); color:var(--accent)}
.badge.full{background:rgba(63,207,142,.15); color:var(--ok)}

.uid{display:flex; gap:8px; margin-top:12px}
.uid input{flex:1; min-width:0; background:#0F141D; border:1px solid var(--line); border-radius:10px;
  color:var(--text); font-family:var(--mono); font-size:14px; padding:11px}
.uid input:focus{outline:2px solid rgba(245,196,81,.45); outline-offset:1px}
.uid button{flex:none; border:0; cursor:pointer; background:#222C3A; color:var(--text);
  font-size:13px; font-weight:600; padding:0 15px; border-radius:10px}

.ref .nums{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 13px}
.ref .nums div{text-align:center; background:#0F141D; border-radius:11px; padding:10px 4px}
.ref .nums b{display:block; font-family:var(--mono); font-size:19px; font-weight:600}
.ref .nums span{font-size:10.5px; color:var(--muted)}
.ref .nums .hl b{color:var(--accent)}

.toggle{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px 15px; cursor:pointer}
.toggle .t{font-size:13.5px; font-weight:600}
.toggle .s{font-size:11.5px; color:var(--muted); margin-top:2px}
.sw{width:42px; height:24px; border-radius:99px; background:#2A3444; flex:none; position:relative; transition:background .2s}
.sw::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#7C8798; transition:left .2s, background .2s}
.toggle.on .sw{background:var(--accent)}
.toggle.on .sw::after{left:21px; background:#12161E}

.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); background:#0D1219;
  padding-bottom:env(safe-area-inset-bottom);
}
.tabs button{border:0; background:none; cursor:pointer; padding:10px 4px 12px;
  font-size:10.5px; font-weight:600; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:5px}
.tabs button svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7}
.tabs button[aria-selected="true"]{color:var(--accent)}

.offline{
  position:fixed; left:12px; right:12px; bottom:calc(var(--tabs-h) + 12px + env(safe-area-inset-bottom));
  background:#2A2214; border:1px solid #4A3C1C; color:#E4CE93;
  font-size:12px; text-align:center; padding:9px 12px; border-radius:10px; z-index:11;
}
.skeleton{color:var(--muted); font-size:13px; padding:8px 0}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}


/* ——— экран урока ——— */
.back {
  background: none; border: 0; color: #8A94A6; font-size: 14px;
  padding: 4px 0 10px; cursor: pointer;
}
.lesson-h { font-size: 21px; line-height: 1.25; margin: 2px 0 14px; }
.lesson-body { font-size: 15.5px; line-height: 1.62; color: #D7DCE5; }
.lesson-body p { margin: 0 0 13px; }
.lesson-body h4 { font-size: 15px; margin: 20px 0 8px; color: #fff; }
.lesson-body ul { margin: 0 0 13px; padding-left: 18px; }
.lesson-body li { margin-bottom: 7px; }
.lesson-body .note {
  border-left: 3px solid #F5C451; background: #141A24;
  padding: 11px 13px; border-radius: 0 10px 10px 0; margin: 0 0 14px;
}
.lesson-body .warn {
  border-left: 3px solid #E4574B; background: #1A1417;
  padding: 11px 13px; border-radius: 0 10px 10px 0; margin: 0 0 14px;
}
.lesson-body .said {
  color: #A8B0BE; font-style: italic;
  border-left: 3px solid #2A3342; padding-left: 12px; margin: 0 0 14px;
}

.lesson { cursor: pointer; }
.lesson:active { background: #151C27; }
.lesson .t .sub { display: block; font-size: 12px; font-weight: 400; color: #7C8698; margin-top: 2px; }
.lesson::after { content: "›"; color: #4A5668; font-size: 18px; line-height: 1; }