/* Paper Cards — лента в Telegram Mini App.
   Киберпанк-палитра — база. Тема Telegram (переменные --tg-theme-*, их ставит SDK)
   подмешивается поверх: фон, поверхности и текст берут оттенок клиента, неон остаётся.
   Читаемость важнее эффектов: свечение и глитч только на заголовках интерфейса,
   текст карточек без эффектов. Анимации выключаются при prefers-reduced-motion. */

:root {
  --cp-bg: #08070f;
  --cp-surface: #110f24;
  --cp-surface-2: #1a1736;
  --cp-line: #2b2752;
  --cp-text: #ece9ff;
  --cp-dim: #aaa6cc;
  --cp-faint: #7a76a0;
  --cp-cyan: #00e5ff;
  --cp-magenta: #ff2bd6;
  --cp-violet: #b18cff;
  --cp-yellow: #f5e663;
  --cp-green: #3dffa2;
  --cp-red: #ff5c7a;
  --cp-code-bg: #0b0a1a;
  --cp-on-accent: #05040c;
  --glow-a: rgba(0, 229, 255, 0.45);
  --glow-b: rgba(255, 43, 214, 0.35);
  --tint-a: rgba(0, 229, 255, 0.08);
  --tint-b: rgba(255, 43, 214, 0.08);
  --grid: rgba(0, 229, 255, 0.045);

  --hl-kw: #ff79e1;
  --hl-str: #7dffb8;
  --hl-num: #f5e663;
  --hl-com: #7a76a0;
  --hl-fn: #62e6ff;
  --hl-type: #c2a6ff;
  --hl-attr: #ffb86b;
  --hl-meta: #9a96c4;

  --bg: var(--cp-bg);
  --surface: var(--cp-surface);
  --surface-2: var(--cp-surface-2);
  --line: var(--cp-line);
  --text: var(--cp-text);
  --dim: var(--cp-dim);
  --faint: var(--cp-faint);
  --accent: var(--cp-cyan);
  --accent-2: var(--cp-magenta);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 3px;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  color-scheme: dark;
}

:root[data-scheme="light"] {
  --cp-bg: #f2f0fa;
  --cp-surface: #ffffff;
  --cp-surface-2: #ebe7fa;
  --cp-line: #d5cff0;
  --cp-text: #16132c;
  --cp-dim: #4c4770;
  --cp-faint: #6f6a96;
  --cp-cyan: #00717f;
  --cp-magenta: #b0008c;
  --cp-violet: #5a32c8;
  --cp-yellow: #7d6200;
  --cp-green: #007a4a;
  --cp-red: #c0143a;
  --cp-code-bg: #f7f5fe;
  --cp-on-accent: #ffffff;
  --glow-a: rgba(0, 113, 127, 0.18);
  --glow-b: rgba(176, 0, 140, 0.14);
  --tint-a: rgba(0, 113, 127, 0.07);
  --tint-b: rgba(176, 0, 140, 0.06);
  --grid: rgba(90, 50, 200, 0.05);

  --hl-kw: #a3007f;
  --hl-str: #00704a;
  --hl-num: #8a5300;
  --hl-com: #75709a;
  --hl-fn: #006778;
  --hl-type: #5a32c8;
  --hl-attr: #9c4500;
  --hl-meta: #5d5884;
  color-scheme: light;
}

/* Тема Telegram поверх палитры: только там, где браузер умеет color-mix. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root[data-tg] {
    --bg: color-mix(in srgb, var(--tg-theme-bg-color, var(--cp-bg)) 30%, var(--cp-bg));
    --surface: color-mix(in srgb, var(--tg-theme-secondary-bg-color, var(--cp-surface)) 25%, var(--cp-surface));
    --text: color-mix(in srgb, var(--tg-theme-text-color, var(--cp-text)) 55%, var(--cp-text));
    --dim: color-mix(in srgb, var(--tg-theme-hint-color, var(--cp-dim)) 45%, var(--cp-dim));
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body { overscroll-behavior: none; overflow: hidden; }
::selection { background: var(--accent-2); color: var(--cp-on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }

.backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 100% 0%, var(--tint-b), transparent 60%),
    radial-gradient(100% 50% at 0% 100%, var(--tint-a), transparent 60%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 32px 100%;
}

.screen { position: fixed; inset: 0; z-index: 1; }

/* ---------- заголовки с неоном и глитчем ---------- */

.glitch { position: relative; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.glitch::before { color: var(--cp-magenta); }
.glitch::after { color: var(--cp-cyan); }
@media (prefers-reduced-motion: no-preference) {
  .glitch::before { animation: glitch-a 7s infinite steps(1, end); }
  .glitch::after { animation: glitch-b 7s infinite steps(1, end); }
}
@keyframes glitch-a {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  91% { opacity: 0.85; transform: translate(-3px, 0); clip-path: inset(12% 0 58% 0); }
  93% { opacity: 0.85; transform: translate(2px, 0); clip-path: inset(62% 0 10% 0); }
  95% { opacity: 0; }
}
@keyframes glitch-b {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  92% { opacity: 0.8; transform: translate(3px, 0); clip-path: inset(45% 0 30% 0); }
  94% { opacity: 0.8; transform: translate(-2px, 0); clip-path: inset(5% 0 75% 0); }
  96% { opacity: 0; }
}

/* ---------- кнопки ---------- */

.icon-btn {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.icon-btn:active { border-color: var(--accent); color: var(--accent); }
.icon-btn svg, .nav-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent);
  font: 600 14px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.btn:active { background: var(--tint-a); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font: 600 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--dim);
}
.chip[data-status="generated"] { color: var(--cp-cyan); }
.chip[data-status="read"] { color: var(--cp-yellow); }
.chip[data-status="in_anki"] { color: var(--cp-green); }
.chip[data-status="error"] { color: var(--cp-red); }
.chip[data-status="read"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .chip[data-status="read"]::before { animation: pulse 1.2s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: 0.25; } }

/* ---------- сообщения ---------- */

.screen-msg {
  display: grid;
  place-items: center;
  padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));
  overflow-y: auto;
}
.msg-box { width: 100%; max-width: 440px; }
.msg-code { margin: 0 0 8px; color: var(--accent-2); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.msg-title {
  margin: 0 0 12px;
  font: 700 26px/1.15 var(--mono);
  letter-spacing: 0.04em;
  color: var(--accent);
  text-shadow: 0 0 10px var(--glow-a);
}
.msg-text { margin: 0 0 20px; color: var(--dim); }
.msg-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- список колод ---------- */

.screen-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(16px + var(--safe-top)) 16px calc(28px + var(--safe-bottom));
}
.list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto 18px;
}
.logo {
  margin: 0;
  font: 800 25px/1.1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--accent);
  text-shadow: 0 0 8px var(--glow-a), 0 0 22px var(--glow-b);
}
.list-sub { margin: 6px 0 0; color: var(--dim); font-size: 12.5px; }
.deck-groups { max-width: 720px; margin: 0 auto; }
.group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 10px;
  color: var(--dim);
  font: 600 12px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.deck-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.deck {
  position: relative;
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 14px 14px 13px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--deck-accent, var(--line));
  border-radius: var(--radius);
  cursor: pointer;
}
.deck[data-status="generated"] { --deck-accent: var(--cp-cyan); }
.deck[data-status="read"] { --deck-accent: var(--cp-yellow); }
.deck[data-status="in_anki"] { --deck-accent: var(--cp-green); }
.deck[data-status="error"] { --deck-accent: var(--cp-red); }
.deck:active { border-color: var(--accent); }
.deck-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.deck-kind { color: var(--faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.deck-title { font-weight: 650; font-size: 1.05rem; line-height: 1.3; }
.deck-src { color: var(--dim); font-size: 0.88rem; line-height: 1.35; }
.deck-meta { color: var(--faint); font-size: 12px; }
.deck-note { color: var(--accent); font-size: 12px; }
.deck-note[data-kind="error"] { color: var(--cp-red); }

/* ---------- лента ---------- */

.screen-feed {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.feed-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(8px + var(--safe-top)) 12px 8px;
  background: var(--bg);
}
body[data-tg-back] #btn-back { display: none; }
.feed-title-wrap { min-width: 0; flex: 1; }
.feed-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-meta { margin: 2px 0 0; color: var(--dim); font-size: 11.5px; letter-spacing: 0.04em; }
.progress { height: 3px; background: var(--line); }
.progress-bar {
  height: 100%;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--cp-cyan), var(--cp-magenta));
  box-shadow: 0 0 8px var(--glow-a);
  transition: transform 0.25s ease-out;
}

.track {
  display: flex;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 14px 14px 28px;
}

.card {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 15px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-wrap: break-word;
  --accent: var(--cp-cyan);
}
.card[data-tier="deep"] { --accent: var(--cp-violet); }
.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.card::before { top: -1px; left: -1px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.card::after { right: -1px; bottom: -1px; border-right: 2px solid var(--accent-2); border-bottom: 2px solid var(--accent-2); }

.card-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.tier {
  flex: none;
  padding: 3px 6px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.ctx { color: var(--dim); font-size: 12px; line-height: 1.45; padding-top: 2px; }
.disputed {
  margin: -4px 0 12px;
  padding: 4px 8px;
  border-left: 2px solid var(--cp-yellow);
  color: var(--cp-yellow);
  font-size: 12px;
  line-height: 1.45;
}

/* «моими словами» — первой строкой ответа */
.mw { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.mw-label {
  margin: 0 0 3px;
  color: var(--accent-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rich.mw-text { font-weight: 560; }

/* кнопки в бота: «непонятно», «моими словами» */
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.act {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.act:active { border-color: var(--accent-2); color: var(--accent-2); }

/* первый экран колоды: работы обзора и «уточни связи» */
.slide-intro { max-width: 720px; margin: 0 auto 12px; display: grid; gap: 10px; }
.slide-intro:empty { display: none; }
.slide-intro .block-related {
  margin: 0;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.block-related .label { color: var(--accent-2); }
.related-list { margin: 0; padding-left: 1.2em; font-size: 0.92rem; line-height: 1.45; }
.related-list li { margin: 0.25em 0; }
.related-list li::marker { color: var(--accent-2); }
.related-list a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.end-extra:empty, .end-merge:empty { display: none; }
.end-extra { margin-bottom: 16px; }
.end-merge { margin-top: 18px; }

.merge {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--cp-yellow);
  border-radius: var(--radius);
}
.card .merge { background: transparent; }
.merge-summary {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  color: var(--cp-yellow);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.merge-summary::-webkit-details-marker { display: none; }
.merge-summary::after { content: "+"; margin-left: auto; font-size: 16px; }
.merge[open] .merge-summary::after { content: "−"; }
.merge-hint { margin: 6px 0 10px; color: var(--dim); font-size: 0.88rem; line-height: 1.45; }
.merge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.merge-q { padding-top: 10px; border-top: 1px dashed var(--line); }
.merge-text { margin: 0 0 6px; line-height: 1.45; }
.merge-from { color: var(--faint); font-size: 11.5px; }
.merge-gives { list-style: none; margin: 0 0 8px; padding: 0; color: var(--dim); font-size: 0.86rem; line-height: 1.4; }
.merge-gives li { margin: 2px 0; }
.merge-gives .mono { color: var(--accent); font-size: 11px; }
.merge-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mbtn {
  min-height: 40px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: 600 12.5px/1.2 var(--mono);
  cursor: pointer;
}
.mbtn[data-answer="same"] { border-color: var(--cp-green); color: var(--cp-green); }
.mbtn:disabled { opacity: 0.45; cursor: progress; }
.mbtn:not(:disabled):active { background: var(--tint-a); }
.merge-done { margin: 0; color: var(--cp-green); font-size: 12px; }

.block { margin: 0 0 14px; }
.block:last-child { margin-bottom: 0; }
.label {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
}
.rich.q { font-size: 1.14rem; font-weight: 620; line-height: 1.42; }
.block-a {
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--tint-a);
}
.card[data-tier="deep"] .block-a { background: var(--tint-b); }
.rich.a { font-weight: 520; }
.block-quote { padding-left: 12px; border-left: 2px dashed var(--accent-2); }
.block-quote .label { color: var(--accent-2); }
.rich.quote { margin: 0; color: var(--dim); font-size: 0.95rem; }
.section { margin: 6px 0 0; color: var(--faint); font-size: 12px; }

.card-foot {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--faint);
  font-size: 12px;
  line-height: 1.5;
}
.card-foot p { margin: 0; }
.src { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.src a { color: var(--accent); text-decoration: none; }
.src a:active { text-decoration: underline; }

/* ---------- содержимое полей (HTML от бота) ---------- */

.rich p { margin: 0 0 0.7em; }
.rich > :last-child { margin-bottom: 0; }
.rich ul, .rich ol { margin: 0.35em 0 0.7em; padding-left: 1.3em; }
.rich li { margin: 0.2em 0; }
.rich li::marker { color: var(--accent); }
.rich a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.rich b, .rich strong { font-weight: 680; }
.rich h3, .rich h4, .rich h5, .rich h6 { margin: 0.8em 0 0.4em; font-size: 1rem; }
.rich hr { border: 0; border-top: 1px dashed var(--line); margin: 1em 0; }
.rich mark { background: var(--tint-b); color: inherit; padding: 0 2px; }
.rich kbd { font: 0.85em var(--mono); padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; }
.rich blockquote { margin: 0.6em 0; padding-left: 10px; border-left: 2px solid var(--line); color: var(--dim); }
.rich code {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.08em 0.35em;
  border-radius: 3px;
  background: var(--tint-a);
  overflow-wrap: anywhere;
}
.rich pre {
  position: relative;
  margin: 0.7em 0;
  padding: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--cp-code-bg);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-2);
  font-size: 13px;
  line-height: 1.5;
  tab-size: 4;
}
.rich pre[data-lang] { padding-top: 26px; }
.rich pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 7px;
  background: var(--accent-2);
  color: var(--cp-on-accent);
  font: 600 10px/1.4 var(--mono);
  letter-spacing: 0.08em;
}
.rich pre code {
  display: block;
  padding: 0;
  background: none;
  font-size: inherit;
  white-space: pre;
  overflow-wrap: normal;
  color: var(--text);
}
.table-wrap { margin: 0.7em 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.rich table { border-collapse: collapse; font-size: 0.92em; }
.rich th, .rich td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.rich th { color: var(--accent); font: 600 0.82em var(--mono); letter-spacing: 0.04em; background: var(--tint-a); }

/* MathJax: блочная формула в обёртке .math-wrap (render.js). Шире экрана — горизонтальный
   скролл; край, за которым ещё есть формула, затухает (mask), снизу подсказка.
   До обёртки (MathJax ещё набирает) формула сама не шире карточки. */
.rich mjx-container[jax="CHTML"][display="true"] {
  margin: 0.6em 0;
  padding: 4px 0;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}
.rich mjx-container { color: inherit; }
.math-wrap { position: relative; margin: 0.6em 0; }
.math-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 2px 0;
  outline: none;
}
.math-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rich .math-scroll > mjx-container[jax="CHTML"][display="true"] {
  margin: 0;
  padding: 2px 0;
  overflow: visible;
  max-width: none;
}
.math-wrap[data-right] .math-scroll {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
}
.math-wrap[data-left] .math-scroll {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
}
.math-wrap[data-left][data-right] .math-scroll {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
.math-hint { display: none; margin-top: 2px; color: var(--accent); font-size: 11px; text-align: right; letter-spacing: 0.04em; }
.math-wrap[data-overflow] .math-hint { display: block; }
.math-wrap[data-overflow]:not([data-right]) .math-hint { visibility: hidden; }
.math-wrap[data-overflow] { border-bottom: 1px dashed var(--line); }

/* ---------- картинки ---------- */

.figs:empty { display: none; }
.fig { margin: 0.8em 0 0; }
.fig-btn {
  position: relative;
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cp-code-bg);
  cursor: zoom-in;
  overflow: hidden;
}
.fig-img { display: block; width: 100%; height: auto; }
.fig-img:not([src]) { display: none; }
.fig-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 12px; }
.fig[data-state="ok"] .fig-btn { min-height: 0; }
/* размеры известны заранее: место занято до загрузки, высокие картинки не длиннее ~62% экрана */
.fig[data-sized] .fig-btn {
  min-height: 0;
  aspect-ratio: var(--ar);
  width: min(100%, calc(62vh * var(--ar)));
  margin: 0 auto;
}
.fig[data-sized] .fig-img { width: 100%; height: 100%; object-fit: contain; }
.fig[data-state="ok"] .fig-wait { display: none; }
.fig[data-state="error"] .fig-wait { color: var(--cp-red); }
.fig-cap { margin-top: 6px; color: var(--dim); font-size: 13px; line-height: 1.45; }

.lightbox { position: fixed; inset: 0; z-index: 30; background: rgba(4, 3, 10, 0.95); }
.lightbox-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: calc(56px + var(--safe-top)) 8px calc(16px + var(--safe-bottom));
  touch-action: pan-x pan-y pinch-zoom;
}
.lightbox-scroll img { max-width: 100%; height: auto; cursor: zoom-in; background: #fff; }
.lightbox[data-zoom] .lightbox-scroll { place-items: start; }
.lightbox[data-zoom] .lightbox-scroll img { max-width: none; width: 220%; cursor: zoom-out; }
.lightbox-close { position: absolute; top: calc(10px + var(--safe-top)); right: 12px; background: var(--cp-bg); color: #fff; }

/* ---------- конец ленты ---------- */

.card-end { text-align: left; }
.end-code { margin: 0 0 6px; color: var(--accent-2); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.end-title {
  margin: 0 0 16px;
  font: 800 24px/1.15 var(--mono);
  letter-spacing: 0.05em;
  color: var(--accent);
  text-shadow: 0 0 10px var(--glow-a);
}
.after { margin: 0; font-size: 1.08rem; line-height: 1.5; }
.block-after { padding: 10px 12px; border-left: 3px solid var(--accent-2); background: var(--tint-b); }
.block-after .label { color: var(--accent-2); }
.end-stats { margin: 0 0 16px; color: var(--faint); font-size: 12px; }
.end-status { display: grid; justify-items: start; gap: 8px; margin-bottom: 16px; }
.end-status:empty { display: none; }
.status-text { margin: 0; color: var(--dim); font-size: 0.95rem; }
.status-text:empty { display: none; }
.cta {
  width: 100%;
  min-height: 52px;
  border: 0;
  background: var(--cp-cyan);
  color: var(--cp-on-accent);
  font: 800 15px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: 0 0 18px var(--glow-a);
}
.cta:disabled { opacity: 0.5; cursor: progress; }
.cta-hint { margin: 10px 0 0; color: var(--faint); font-size: 12.5px; }
.cta-hint:empty { display: none; }

.feed-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 12px calc(8px + var(--safe-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--dim);
  font: 600 13px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.nav-next { border-color: var(--accent); color: var(--accent); }
.nav-btn:disabled { opacity: 0.3; cursor: default; }
.nav-btn:not(:disabled):active { background: var(--tint-a); }

/* ---------- тост ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(78px + var(--safe-bottom));
  z-index: 20;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text);
  font: 13px/1.4 var(--mono);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
.toast-action {
  flex: none;
  padding: 4px 8px;
  border: 1px solid var(--accent-2);
  border-radius: 2px;
  background: transparent;
  color: var(--accent-2);
  font: 600 12px/1.2 var(--mono);
  text-transform: uppercase;
  cursor: pointer;
}

.noscript { padding: 24px 16px; font-family: var(--mono); }

/* ---------- подсветка кода (highlight.js, своя тема) ---------- */

.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag { color: var(--hl-kw); }
.hljs-built_in, .hljs-type, .hljs-title.class_, .hljs-title.class_.inherited__ { color: var(--hl-type); }
.hljs-title, .hljs-title.function_, .hljs-section { color: var(--hl-fn); }
.hljs-string, .hljs-regexp, .hljs-char.escape_, .hljs-addition { color: var(--hl-str); }
.hljs-number, .hljs-symbol, .hljs-bullet { color: var(--hl-num); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-params, .hljs-property { color: var(--hl-attr); }
.hljs-meta, .hljs-meta .hljs-keyword, .hljs-selector-id, .hljs-selector-class, .hljs-name, .hljs-tag { color: var(--hl-meta); }
.hljs-comment, .hljs-quote { color: var(--hl-com); font-style: italic; }
.hljs-deletion { color: var(--cp-red); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* ---------- игра (v2): вкладки, карта, лист узла, профиль ----------
   Без data-game на body (GET /api/game не 200) ничего из этого не показывается. */

:root {
  --st-visible: var(--cp-faint);
  --st-working: var(--cp-yellow);
  --st-familiar: var(--cp-cyan);
  --st-mastered: var(--cp-green);
  --st-hardened: var(--cp-violet);
  --st-extern: var(--cp-magenta);
  --st-profile: #8ea2c9;
  --rust-light: #d39a4a;
  --rust-rusting: #b4592c;
  --rust-dark: #4c2419;
  --glyph: #05040c;
  --glyph-on-rust: #f3e6dc;
  --key: var(--cp-text);
  --boss: var(--cp-red);
  --tabs-h: 56px;
}
:root[data-scheme="light"] {
  --st-profile: #556893;
  --rust-light: #c27a1c;
  --rust-rusting: #a2441b;
  --rust-dark: #4f2216;
  --glyph: #ffffff;
  --glyph-on-rust: #ffffff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.setting {
  color: var(--accent-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* вкладки: только на списке, карте и профиле и только с игрой */
.tabs {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  grid-template-columns: repeat(3, 1fr);
  height: calc(var(--tabs-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--bg);
  border-top: 1px solid var(--line);
}
body[data-game][data-screen="list"] .tabs,
body[data-game][data-screen="map"] .tabs,
body[data-game][data-screen="profile"] .tabs { display: grid; }
body[data-game] .screen-list { padding-bottom: calc(28px + var(--tabs-h) + var(--safe-bottom)); }
.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dim);
  font: 600 11px/1.1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab[aria-current="page"] { color: var(--accent); }
.tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28%;
  right: 28%;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--glow-a);
}
.tab-sub { color: var(--accent-2); font-size: 9px; letter-spacing: 0.04em; text-transform: none; opacity: 0.85; }
.tab-sub:empty { display: none; }
body[data-game] .toast { bottom: calc(var(--tabs-h) + 14px + var(--safe-bottom)); }

/* ---- карта ---- */

.screen-map {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding-bottom: calc(var(--tabs-h) + var(--safe-bottom));
}
.map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: calc(10px + var(--safe-top)) 14px 8px;
  background: var(--bg);
}
.map-titles { min-width: 0; }
.map-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-shadow: 0 0 8px var(--glow-a);
}
.map-title .setting { font-size: 12px; text-shadow: none; }
.map-meta { margin: 3px 0 0; color: var(--dim); font-size: 11.5px; line-height: 1.35; }
.map-fog .fog-n { color: var(--accent-2); }
.map-data { color: var(--faint); }
.map-data[data-stale="1"] { color: var(--cp-yellow); }
.map-data[data-stale="1"]::after { content: " · устарели"; }
.map-tools { display: flex; gap: 8px; }
.map-tools .icon-btn[aria-expanded="true"], #btn-map-filter[data-active="1"] { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { fill: none; }

.map-wrap {
  position: relative;
  min-height: 0;
  overflow: hidden;
  outline: none;
  border-top: 1px solid var(--line);
  background: radial-gradient(90% 70% at 50% 45%, var(--tint-a), transparent 70%);
}
.map-wrap:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
}
.map-svg:active { cursor: grabbing; }

.edge { fill: none; stroke-width: 1.3px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-opacity: 0.62; }
.e-prerequisite_of { stroke: var(--cp-cyan); stroke-width: 1.5px; }
.e-part_of { stroke: var(--cp-violet); stroke-dasharray: 1 3.5; stroke-width: 2px; }
.e-uses { stroke: var(--cp-dim); stroke-dasharray: 5 3; }
.e-improves { stroke: var(--cp-green); stroke-dasharray: 8 3 2 3; }
.e-alternative_to { stroke: var(--cp-magenta); stroke-dasharray: 7 6; }
.e-same_as { stroke: var(--cp-text); stroke-dasharray: 1 2; stroke-width: 1px; }
.map-svg.filtered .edge { stroke-opacity: 0.2; }

.stop-working { stop-color: var(--st-working); }
.stop-familiar { stop-color: var(--st-familiar); }
.stop-mastered { stop-color: var(--st-mastered); }
.stop-hardened { stop-color: var(--st-hardened); }
.stop-extern { stop-color: var(--st-extern); }
.stop-profile { stop-color: var(--st-profile); }
.stop-rust-clean { stop-color: var(--st-familiar); }
.stop-rust-light { stop-color: var(--rust-light); }
.stop-rust-rusting { stop-color: var(--rust-rusting); }
.stop-rust-dark { stop-color: var(--rust-dark); }

.mn-c { stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke: var(--bg); }
.s-working .mn-c { stroke: var(--st-working); }
.s-familiar .mn-c { stroke: var(--st-familiar); }
.s-mastered .mn-c { stroke: var(--st-mastered); }
.s-hardened .mn-c { stroke: var(--st-hardened); }
.s-extern .mn-c { stroke: var(--st-extern); }
.s-profile .mn-c { stroke: var(--st-profile); }
.s-visible .mn-c { fill: var(--bg); stroke: var(--st-visible); stroke-dasharray: 3 2; }
.mn-g {
  fill: none;
  stroke: var(--glyph);
  stroke-width: 1.7px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s-familiar .mn-g { fill: var(--glyph); }
.r-rusting .mn-g, .r-dark .mn-g { stroke: var(--glyph-on-rust); }
.s-familiar.r-rusting .mn-g, .s-familiar.r-dark .mn-g { fill: var(--glyph-on-rust); }
.mn-ring { fill: none; stroke: var(--st-hardened); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.mn-feed { fill: none; stroke: var(--cp-yellow); stroke-width: 1.3px; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.mn-ext { fill: var(--cp-magenta); stroke: var(--bg); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* ключ: босс узла побеждён (v3-bosses §2); контур цвета фона отделяет его от узла и рёбер */
.mn-key { fill: var(--key); stroke: var(--bg); stroke-width: 1px; vector-effect: non-scaling-stroke; paint-order: stroke; }
.mn.dim, .fogb.dim { opacity: 0.13; }
.map-svg[data-z="far"] .mn-g,
.map-svg[data-z="far"] .fogb,
.map-svg[data-z="far"] .mn-ext,
.map-svg[data-z="far"] .mn-key { display: none; }
.map-sel { fill: none; stroke: var(--cp-text); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .map-sel { animation: sel-pulse 1.6s ease-in-out infinite; }
}
@keyframes sel-pulse { 50% { stroke-opacity: 0.35; } }
.mlabel {
  fill: var(--text);
  stroke: var(--bg);
  stroke-linejoin: round;
  paint-order: stroke;
  font-family: var(--font);
  font-weight: 560;
  dominant-baseline: central;
  pointer-events: none;
}
.mlabel.vis { fill: var(--dim); font-weight: 450; }
.mlabel.sel { fill: var(--cp-cyan); font-weight: 750; }
.fogb { fill: var(--accent-2); font-family: var(--mono); font-weight: 700; pointer-events: none; }

.map-zoom { position: absolute; right: 12px; bottom: 12px; display: grid; gap: 8px; }
.map-zoom .icon-btn { background: var(--surface); }
.map-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: var(--bg);
}
.map-status .msg-code { margin: 0; }
.map-status-text { margin: 0; max-width: 340px; color: var(--dim); }
.map-panel {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  z-index: 2;
  max-height: calc(100% - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.mp-group { margin: 0 0 12px; }
.mp-title { margin: 0 0 6px; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.mp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--dim);
  font: 12.5px/1.2 var(--font);
  cursor: pointer;
}
.fchip[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: var(--tint-a); }
.mp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--faint); font-size: 12px; }
.lg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lg-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.35; }
.lg-text { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.lg-fog { color: var(--accent-2); font-weight: 700; font-size: 12px; min-width: 18px; text-align: center; }
.sw { flex: none; overflow: visible; }
.sw-edge { flex: none; }

/* ---- лист узла ---- */

.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 22; }
.sheet-panel {
  max-height: 58vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(18px + var(--safe-bottom));
  background: var(--surface);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.45);
  outline: none;
}
@media (prefers-reduced-motion: no-preference) {
  .sheet:not([hidden]) .sheet-panel { animation: sheet-in 0.22s ease-out; }
}
@keyframes sheet-in { from { transform: translateY(28px); opacity: 0; } }
.sheet-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 8px 0 2px;
  background: var(--surface);
}
.sheet-grip { width: 44px; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--line); }
.sheet-close { position: absolute; top: 6px; right: -4px; width: 36px; height: 36px; }
.sheet-close svg { width: 18px; height: 18px; }
.sheet-body { max-width: 720px; margin: 0 auto; }
.sh-loading { color: var(--faint); font-size: 12px; padding: 18px 0; }
.sh-error { padding: 12px 0; display: grid; gap: 8px; justify-items: start; }
.sh-error p { margin: 0; color: var(--dim); }
.sh-top { display: flex; gap: 12px; align-items: flex-start; padding-right: 36px; }
.sh-art { flex: none; width: 52px; height: 52px; }
.sh-titles { min-width: 0; }
.sh-kicker { margin: 0; color: var(--accent-2); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.sh-name { margin: 2px 0 2px; font-size: 1.3rem; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.sh-aliases { margin: 0; color: var(--dim); font-size: 0.88rem; }
.sh-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 12px; }
.st-chip[data-state="visible"] { color: var(--st-visible); }
.st-chip[data-state="working"] { color: var(--st-working); }
.st-chip[data-state="familiar"] { color: var(--st-familiar); }
.st-chip[data-state="mastered"] { color: var(--st-mastered); }
.st-chip[data-state="hardened"] { color: var(--st-hardened); }
.st-chip[data-state="extern"] { color: var(--st-extern); }
.st-chip[data-state="profile"] { color: var(--st-profile); }
.sh-since { color: var(--faint); font-size: 11.5px; }
.sh-tag { padding: 2px 6px; border: 1px dashed var(--line); border-radius: 2px; color: var(--dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.sh-tag.feed { border-color: var(--cp-yellow); color: var(--cp-yellow); }
.sh-tag.key { display: inline-flex; align-items: center; gap: 5px; border-style: solid; border-color: var(--key); color: var(--text); }
.sw-key { flex: none; overflow: visible; }
.sh-sec { margin: 0 0 14px; }
.sh-gives { margin: 0; line-height: 1.45; }
.sh-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.act-extern { border-color: var(--cp-magenta); color: var(--cp-magenta); }
.act-boss { border-color: var(--boss); color: var(--boss); font-weight: 700; }
.act-next, .act-deck { border-color: var(--accent); color: var(--accent); }
.act[aria-expanded="true"] { border-color: var(--accent-2); color: var(--accent-2); }
.sh-unclear { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--accent-2); border-radius: var(--radius); }
.sh-unclear, .sh-decks, .sh-bosses { scroll-margin-top: 52px; }
.sh-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sh-pick-btn {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}
.sh-pick-btn:active { border-color: var(--accent-2); }
.sh-pick-meta { color: var(--faint); font-size: 11px; }
.sh-pick-q { font-size: 0.92rem; line-height: 1.35; }
.sh-hint, .p-hint { margin: 8px 0 0; color: var(--faint); font-size: 12px; }
.sh-boss-hint { margin: -6px 0 14px; line-height: 1.45; }
.sh-boss-hint b { color: var(--boss); font-weight: 700; }
.sh-boss-log { list-style: none; margin: 0; padding: 0; display: grid; }
.sh-boss {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 4px 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.9rem;
  line-height: 1.3;
}
.sh-boss:last-child { border-bottom: 0; }
.sh-boss-date { color: var(--faint); font-size: 11.5px; }
.sh-boss-kind { min-width: 0; overflow-wrap: anywhere; }
.sh-boss-out[data-outcome="won"] { color: var(--cp-green); }
.sh-boss-out[data-outcome="partial"] { color: var(--cp-yellow); }
.sh-boss-out[data-outcome="lost"] { color: var(--dim); }
.fbar { height: 8px; overflow: hidden; border-radius: 2px; background: var(--line); }
.fbar-fill { height: 100%; width: calc(var(--f, 0) * 100%); background: var(--st-mastered); }
.fbar[data-rust="light"] .fbar-fill { background: linear-gradient(90deg, var(--rust-light), var(--st-mastered)); }
.fbar[data-rust="rusting"] .fbar-fill { background: var(--rust-rusting); }
.fbar[data-rust="dark"] .fbar-fill { background: var(--rust-dark); }
.sh-line { margin: 6px 0 0; color: var(--dim); font-size: 12px; }
.sh-quest { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--rust-rusting); background: var(--tint-b); font-size: 0.92rem; line-height: 1.45; }
.axes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.axis { display: grid; grid-template-columns: minmax(0, 1fr) 30% 3.2em; align-items: center; gap: 8px; font-size: 0.9rem; }
.axis-bar { height: 6px; background: var(--line); border-radius: 2px; overflow: hidden; }
.axis-fill { display: block; height: 100%; width: calc(var(--w, 0) * 100%); background: var(--accent); }
.axis-val { color: var(--dim); font-size: 11.5px; text-align: right; }
.sh-stats { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0; font-size: 0.92rem; }
.sh-stats dt { color: var(--faint); font-size: 12px; }
.sh-stats dd { margin: 0; }
.sh-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sh-card { padding: 6px 10px; border-left: 2px solid var(--cp-cyan); background: var(--tint-a); }
.sh-card[data-tier="deep"] { border-left-color: var(--cp-violet); background: var(--tint-b); }
.sh-card-meta { margin: 0 0 2px; color: var(--faint); font-size: 11px; }
.sh-card-q { margin: 0; font-size: 0.92rem; line-height: 1.4; overflow-wrap: anywhere; }
.sh-deck-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sh-deck { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sh-deck-title { flex: 1; min-width: 50%; font-size: 0.95rem; line-height: 1.35; }
.chip[data-status="rejected"] { color: var(--cp-red); }
.sh-refs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: 13px/1.25 var(--font);
  text-align: left;
  cursor: pointer;
}
.ref:active { border-color: var(--accent); }
.ref-fog { color: var(--accent-2); font-size: 12px; }
.sh-merge .merge { margin-bottom: 8px; }

/* ---- профиль ---- */

.screen-profile {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(16px + var(--safe-top)) 16px calc(28px + var(--tabs-h) + var(--safe-bottom));
}
.list-sub[data-stale="1"], #profile-sub[data-stale="1"] { color: var(--cp-yellow); }
.profile-body { max-width: 720px; margin: 0 auto; display: grid; gap: 12px; }
.pcard {
  position: relative;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pcard .label { margin-bottom: 8px; }
.plevel { border-left: 3px solid var(--accent); }
.plevel-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.p-emblem { width: 64px; height: 64px; flex: none; }
.plevel-l { margin: 0; font-size: 34px; line-height: 1; color: var(--accent); text-shadow: 0 0 10px var(--glow-a); }
.plevel-l .mono { font-size: 15px; color: var(--dim); text-shadow: none; }
.p-rank { margin: 6px 0 0; font: 700 15px/1.2 var(--mono); letter-spacing: 0.08em; color: var(--accent-2); text-transform: uppercase; }
.pbar { height: 8px; border-radius: 2px; overflow: hidden; background: var(--line); }
.pbar-fill {
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, var(--cp-cyan), var(--cp-magenta));
  box-shadow: 0 0 8px var(--glow-a);
}
.p-line { margin: 6px 0 0; color: var(--dim); font-size: 12px; }
.p-axes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.p-axis-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.p-axis-name { font-weight: 600; }
.p-axis-l { color: var(--accent); font-weight: 700; }
.p-axis-k { margin: 3px 0 0; color: var(--faint); font-size: 11.5px; }
.pxp-row { display: flex; gap: 22px; }
.pstat { display: grid; gap: 2px; }
.pstat b { font-size: 22px; color: var(--cp-yellow); }
.pstat span { color: var(--dim); font-size: 12px; }
.rhythm { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 56px; align-items: end; }
.rh-col { display: flex; align-items: flex-end; height: 100%; background: var(--tint-a); }
.rh-fill { display: block; width: 100%; height: calc(var(--h, 0) * 100%); min-height: 2px; background: var(--accent); }
.rh-col[data-days="0"] .rh-fill { min-height: 0; }
.p-report {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 13px/1.5 var(--mono);
  color: var(--text);
}

/* ---------- широкие экраны ---------- */

@media (min-width: 760px) {
  .slide { padding: 22px 24px 32px; }
  .card { padding: 20px 22px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}