:root {
  --bg: #16171a;
  --card: #1e1f23;
  --card-2: #26272c;
  --line: #2f3036;
  --text: #e8e8e3;
  --muted: #8a8b86;
  --lime: #c6f432;
  --lime-ink: #16171a;
  --red: #ff6b5e;
  --amber: #f5b83d;
  --radius: 14px;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 15px/1.55 Manrope, system-ui, -apple-system, sans-serif; min-height: 100vh; }
a { color: inherit; }
h1 { font-size: 30px; line-height: 1.15; margin: 0 0 6px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 19px; margin: 0 0 12px; font-weight: 700; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 5; flex-wrap: wrap; }
.logo { font-weight: 700; font-size: 18px; text-decoration: none; letter-spacing: -0.02em; }
.logo span { color: var(--lime); }
nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
nav a { text-decoration: none; color: var(--muted); padding: 6px 12px; border-radius: 999px; font-size: 14px; }
nav a:hover { color: var(--text); }
nav a.on { color: var(--text); background: var(--card-2); }
.lvl-pill { font-family: var(--mono); font-size: 12px; color: var(--lime); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; margin-left: 6px; }

main { max-width: 1080px; margin: 0 auto; padding: 32px 24px 80px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.mt { margin-top: 16px; } .mt2 { margin-top: 28px; }

button, .btn { font: inherit; font-weight: 500; border: 1px solid var(--line); background: var(--card-2); color: var(--text);
  padding: 10px 18px; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
button:hover, .btn:hover { border-color: #45464d; }
.primary { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.primary:hover { border-color: #e1ff7a; background: #d4ff4a; }
.ghost { background: transparent; }
.small { padding: 6px 12px; font-size: 13px; }
.danger { color: var(--red); }
input, select, textarea { font: inherit; background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 14px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lime); }
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
.err { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 8px; }

/* статистика */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { background: var(--card-2); border-radius: 12px; padding: 14px 16px; }
.stat b { display: block; font: 500 26px/1.2 var(--mono); }
.stat span { font-size: 12px; color: var(--muted); }
.xpbar { height: 6px; background: var(--card-2); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.xpbar i { display: block; height: 100%; background: var(--lime); }

/* плитки номеров */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tile { border-radius: 12px; padding: 14px; min-height: 112px; text-decoration: none; display: flex; flex-direction: column;
  border: 1px solid transparent; transition: transform .12s; position: relative; }
.tile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.tile .n { font: 500 13px var(--mono); opacity: .8; }
.tile .t { font-weight: 700; font-size: 14px; line-height: 1.25; margin-top: 4px; }
.tile .p { margin-top: auto; font: 500 22px var(--mono); }
.tile.empty { background: var(--card); color: var(--muted); border: 1px dashed var(--line); cursor: default; }
.tile.empty:hover { transform: none; }
.legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.legend .scale { width: 160px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #3a2326, #5b4a26, #6f7d22, #c6f432); }

/* тренажёр */
.task-wrap { background: #fff; border-radius: 12px; padding: 18px; overflow-x: auto; }
.task-wrap img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.task-split { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
.task-split.fig-right .fig { order: 2; }
.task-split img { margin: 0; }
.task-split .txt { flex: 1 1 320px; min-width: 0; }
.task-split .txt img { margin: 0; }
.task-new { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; color: #1d1d1b; padding: 20px 22px; }
.task-new .st { flex: 1 1 280px; font: 19px/1.6 "PT Serif", Georgia, serif; }
.task-new > svg { flex: 0 0 auto; max-width: 100%; height: auto; }
svg.fig :is(line, polygon, circle, path, polyline) { fill: none; stroke: #1d1d1b; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
svg.fig .thin { stroke-width: 1.1; } svg.fig .grid { stroke: #d9d9d4; stroke-width: .8; } svg.fig .dash { stroke-dasharray: 4 4; stroke-width: 1; }
svg.fig .axis { stroke-width: 1.2; } svg.fig .vec { stroke-width: 1.8; } svg.fig :is(.dot, .head) { fill: #1d1d1b; stroke: none; }
svg.fig .lab { font: italic 17px "PT Serif", Georgia, serif; fill: #1d1d1b; stroke: none; }
svg.fig :is(.tick, .ax) { font: 13px "PT Serif", Georgia, serif; fill: #1d1d1b; stroke: none; } svg.fig .ax { font-style: italic; } svg.fig .fill { fill: #e6e6e3; stroke: none; } svg.fig .hole { fill: #fff; stroke: #1d1d1b; stroke-width: 1.3; } svg.fig .curve { stroke-width: 1.7; } svg.fig .sub { font-size: 12px; font-style: normal; }
.type-title { font-size: 13px; max-width: 520px; }
.task-text { color: #1b1b19; font-size: 17px; white-space: pre-wrap; }
.answer-row { display: flex; gap: 10px; margin-top: 16px; }
.answer-row input { font: 500 20px var(--mono); max-width: 260px; }
.verdict { margin-top: 14px; padding: 14px 16px; border-radius: 12px; font-weight: 500; }
.verdict.ok { background: rgba(198,244,50,.12); color: var(--lime); }
.verdict.bad { background: rgba(255,107,94,.12); color: var(--red); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 13px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.counter { font: 500 14px var(--mono); color: var(--muted); }
.timer { font: 500 22px var(--mono); color: var(--lime); }

/* таблицы */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; font-size: 12px; }
tr.me td { color: var(--lime); }
.heat td.c { text-align: center; font: 500 12px var(--mono); padding: 0; }
.heat td.c div { margin: 3px; padding: 7px 0; border-radius: 6px; }
.scroll-x { overflow-x: auto; }
.tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--card-2); color: var(--muted); white-space: nowrap; }
.ok-c { color: var(--lime); } .bad-c { color: var(--red); }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.thumb { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.thumb .img { background: #fff; border-radius: 8px; padding: 8px; max-height: 220px; overflow: hidden; }
.thumb img { max-width: 100%; display: block; }
.thumb input { padding: 6px 10px; font-family: var(--mono); }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); margin-top: 14px; }
.consent input { width: auto; margin-top: 3px; }
.foot { text-align: center; padding: 0 16px 28px; font-size: 12px; } .foot a { color: var(--muted); }
.policy h2 { margin-top: 22px; } .policy p { color: var(--text); }
.center-card { max-width: 420px; margin: 40px auto; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px); background: var(--text); color: var(--bg);
  padding: 10px 18px; border-radius: 10px; font-weight: 500; transition: transform .2s; z-index: 50; }
.toast.show { transform: translateX(-50%) translateY(0); }
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }

@media (max-width: 760px) {
  main { padding: 20px 16px 60px; }
  .top { padding: 10px 16px; gap: 6px; }
  nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; width: calc(100% + 32px); }
  nav::-webkit-scrollbar { display: none; }
  nav a { white-space: nowrap; }
  .card { padding: 14px; }
  #topics { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  #topics::-webkit-scrollbar { display: none; }
  #topics .chip { white-space: nowrap; }
  .task-split { flex-direction: column; gap: 10px; }
  .task-new { flex-direction: column; align-items: stretch; padding: 14px; }
  .task-new > svg { align-self: center; }
  .task-new .st { font-size: 17px; }
  .task-split .txt { flex: none; width: 100%; }
  .task-split.fig-right .fig { order: 0; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat b { font-size: 20px; }
  h1 { font-size: 24px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-wrap { padding: 10px; }
  .answer-row input { max-width: none; }
}