/* Карта знаний маршрута (ЕГЭ и ОГЭ) — на весь экран.
 * «Фокус и глубина»: прокручиваемая плоскость с путём слегка наклонена (perspective на внешнем слое,
 * rotateX на самой плоскости: так нативная прокрутка и попадание по звёздам остаются точными), звёзды и подписи
 * рядом с текущей темой крупнее и ярче, дальние тусклее. Свечение — radial-gradient внутри одного
 * элемента. Анимируются только transform и opacity (плюс stroke-dashoffset у короткого «потока света»).
 * Шрифт Inter подключается в шаблоне страницы. */

.sm-wrap {
  --milk: 247, 245, 240;
  --espresso-hi: 168, 140, 120;       /* #A88C78 — осветлённый эспрессо: читается на чёрном */
  --gold: 255, 205, 120;
  --copper: 214, 132, 100;
  --panel: rgba(17, 17, 17, .72);
  --panel-line: rgba(255, 255, 255, .08);
  --tilt: 20deg;
  font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
.sm-wrap [hidden] { display: none !important; }

/* ── Сцена: выходит за поля страницы и занимает экран ──────────────────── */
.sm-stage {
  --hdr: 53px;          /* высота шапки сайта */
  --top: 132px;         /* место под карточку прогресса */
  --bot: 92px;          /* место под нижнюю панель */
  --ext: 70px;          /* на сколько плоскость выступает за сцену: после наклона её края не должны оголяться */
  position: relative;
  width: 100vw;
  margin: -24px 0 0 calc(50% - 50vw);
  height: calc(100vh - var(--hdr));
  height: calc(100dvh - var(--hdr));
  min-height: 520px;
  overflow: hidden;
  contain: layout paint;
  background: #000;
  scroll-margin-top: var(--hdr);
}
/* Виньетка по краям — статичный градиент */
.sm-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.74) 100%);
}
@media (max-width: 768px) {
  .sm-stage {
    height: calc(100vh - var(--hdr) - 58px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - var(--hdr) - 58px - env(safe-area-inset-bottom, 0px));
    --top: 142px;
    --bot: 96px;
  }
}

/* ── Новый каркас кабинета (body.ui-v2): сцена заполняет область контента справа от меню ── */
body.ui-v2 .sm-stage { --hdr: 0px; width: auto; margin: calc(-1 * var(--ui-sp-6)) calc(-1 * var(--ui-sp-6)) 0; height: 100vh; height: 100dvh; }
@media (max-width: 768px) {
  body.ui-v2 .sm-stage { margin: calc(-1 * var(--ui-sp-4)) calc(-1 * var(--ui-sp-4)) 0; height: calc(100vh - 120px); height: calc(100dvh - 120px); }
}

/* ── Небо: тёплая гамма, слои звёзд с параллаксом ────────────────────── */
.sm-sky {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 120%, rgba(58, 47, 42, .34), rgba(58, 47, 42, 0) 62%),
    #000;
}
.sm-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sm-layer {
  position: absolute; top: 0; left: 0; height: 100%;
  background-repeat: repeat-x; background-position: 0 0;
}

.sm-tilt {
  position: absolute; inset: 0; z-index: 2;
  perspective: 1300px;                     /* глубина: дальний (верхний) край карты чуть меньше ближнего */
  perspective-origin: 50% 38%;
}
.sm-scroll {
  position: absolute; left: calc(var(--ext) * -1); right: calc(var(--ext) * -1);
  top: calc(var(--ext) * -1); bottom: calc(var(--ext) * -1);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
  outline: none;
  transform: rotateX(var(--tilt));
  transform-origin: 50% 62%;
}
.sm-scroll::-webkit-scrollbar { display: none; }
.sm-scroll.dragging { cursor: grabbing; user-select: none; }

.sm-track {
  position: relative; height: 100%;
  --ptop: calc(var(--top) + var(--ext));                 /* отступы внутри выступающей плоскости */
  --pbot: calc(var(--bot) + var(--ext));
  --band: calc(100% - var(--ptop) - var(--pbot));        /* свободная полоса между карточкой и нижней панелью */
  --amp: min(calc(var(--band) * .17), 78px);             /* размах пути: не больше 78 px, чтобы подписи не сталкивались */
}
/* Слабая тёплая туманность у текущего месяца — обычный градиент, без blur */
.sm-nebula {
  position: absolute; top: calc(var(--ptop) + var(--band) / 2); width: 980px; height: 720px; margin: -360px 0 0 -490px;
  background: radial-gradient(closest-side, rgba(58, 47, 42, .62), rgba(58, 47, 42, 0));
  pointer-events: none;
}

/* ── Путь: органичная кривая ─────────────────────────────────────────── */
.sm-path, .sm-flow {
  position: absolute; left: 0;
  top: calc(var(--ptop) + var(--band) / 2 - var(--amp));
  height: calc(var(--amp) * 2);
  pointer-events: none; overflow: visible;
}
.sm-path path, .sm-flow path { fill: none; stroke-linecap: round; }
.sm-path .future { stroke: rgba(var(--milk), .15); stroke-width: 1; }
.sm-path .done-soft { stroke: rgba(var(--gold), .10); stroke-width: 7; }
.sm-path .done { stroke-width: 1.7; }
.sm-flow path { stroke: rgba(255, 240, 200, .95); stroke-width: 1.8; stroke-dasharray: 16 560; }

/* Название месяца — над своим созвездием */
.sm-month {
  position: absolute; top: calc(var(--ptop) + var(--band) / 2 - var(--amp) - 104px);
  transform: translateX(-50%);
  font-size: .64rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; white-space: nowrap;
  color: rgb(var(--espresso-hi)); pointer-events: none;
}

/* ── Точка карты: звезда и подпись привязаны к одной координате ───────── */
.sm-pt {
  position: absolute; width: 0; height: 0;
  top: calc(var(--ptop) + var(--band) / 2 + var(--amp) * var(--sv));
}
.sm-node {
  position: absolute; left: 0; top: 0; width: 36px; height: 36px;
  transform: translate(-50%, -50%) scale(var(--sc, 1)); opacity: var(--op, 1);
  display: block; border-radius: 50%; text-decoration: none; -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.sm-node::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; }
/* Звезда = один элемент с radial-gradient: ядро и сияние без box-shadow и filter */
.sm-node .star {
  position: absolute; left: 50%; top: 50%; width: var(--sz, 40px); height: var(--sz, 40px);
  margin: calc(var(--sz, 40px) / -2) 0 0 calc(var(--sz, 40px) / -2); border-radius: 50%;
}
.st-done .star {
  --sz: 42px;
  background: radial-gradient(circle, #fffdf3 0 11%, rgba(255, 226, 160, .98) 16%, rgba(var(--gold), .42) 34%, rgba(var(--gold), .10) 55%, rgba(var(--gold), 0) 72%);
}
.st-done.skipped .star {
  background: radial-gradient(circle, #fff6df 0 10%, rgba(240, 214, 160, .92) 16%, rgba(var(--gold), .30) 34%, rgba(var(--gold), .07) 55%, rgba(var(--gold), 0) 72%);
}
.st-gap .star {
  --sz: 40px;
  background: radial-gradient(circle, #ffeee4 0 10%, rgba(222, 150, 116, .98) 16%, rgba(190, 104, 78, .40) 36%, rgba(190, 104, 78, .10) 56%, rgba(190, 104, 78, 0) 72%);
}
.st-now .star {
  --sz: 96px;
  background: radial-gradient(circle, #fff 0 7%, rgba(255, 240, 205, 1) 11%, rgba(var(--gold), .55) 24%, rgba(var(--gold), .16) 44%, rgba(var(--gold), 0) 70%);
}
.sm-node .breath {
  position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%;
  border: 1px solid rgba(255, 236, 200, .55); pointer-events: none;
}
/* «Пройти»: ученик отметил темы дальше, а эту пропустил */
.st-repeat .star {
  --sz: 38px;
  background: radial-gradient(circle, #fff1dc 0 10%, rgba(242, 166, 72, .98) 16%, rgba(226, 136, 40, .42) 36%, rgba(226, 136, 40, .10) 56%, rgba(226, 136, 40, 0) 72%);
}
.st-repeat .sm-label .n { color: rgb(240, 170, 90); }
/* «Ты здесь» на отмеченной теме — такая же крупная звезда, как текущая */
.st-done.is-now .star {
  --sz: 96px;
  background: radial-gradient(circle, #fff 0 7%, rgba(255, 240, 205, 1) 11%, rgba(var(--gold), .55) 24%, rgba(var(--gold), .16) 44%, rgba(var(--gold), 0) 70%);
}
.st-future .star { --sz: 11px; border: 1px solid rgba(var(--milk), .36); background: none; }
.st-future.beyond .star { border-color: rgba(var(--milk), .2); }
.st-future:hover .star { border-color: rgba(var(--milk), .8); }
.beyond .sm-node { opacity: calc(var(--op, 1) * .6); }
/* Публичная карта теории: все темы открыты — ровные тёплые звёзды, мягче пройденных */
.st-open .star {
  --sz: 34px;
  background: radial-gradient(circle, #fffaf0 0 10%, rgba(250, 226, 178, .9) 16%, rgba(var(--gold), .26) 34%, rgba(var(--gold), .06) 55%, rgba(var(--gold), 0) 72%);
  transition: transform .2s ease;
}
.st-open .sm-node:hover .star { transform: scale(1.25); }
.checking .star::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; border: 1px solid rgba(255, 196, 84, .8); }

@media (prefers-reduced-motion: no-preference) {
  .sm-flow path { animation: sm-flow 7s linear infinite; }
  .sm-node .breath { animation: sm-breath 4.2s ease-in-out infinite; }
  .st-now .star { animation: sm-pulse 4.2s ease-in-out infinite; }
  .st-gap .star { animation: sm-twinkle 6.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
}
@keyframes sm-flow { to { stroke-dashoffset: -576; } }
@keyframes sm-breath { 0%, 100% { transform: scale(.92); opacity: .4; } 50% { transform: scale(1.14); opacity: .85; } }
@keyframes sm-pulse { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.05); } }
@keyframes sm-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }

/* ── Подпись: название видно у всех, ярче у текущей и соседних ─────────── */
.sm-label {
  position: absolute; left: 0; width: 172px; text-align: center; z-index: 2;
  transform: translateX(-50%);
  opacity: var(--lop, 1);
}
.sm-label.side-a { bottom: 40px; }
.sm-label.side-b { top: 40px; }
.sm-label .head { display: block; text-decoration: none; color: inherit; padding: 2px 0; -webkit-tap-highlight-color: transparent; }
.sm-label .n {
  display: block; font-size: .62rem; font-weight: 500; letter-spacing: .28em; line-height: 1.4; margin-bottom: 3px;
  color: rgb(var(--espresso-hi)); font-variant-numeric: tabular-nums;
}
.sm-label .t {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .8rem; font-weight: 350; line-height: 1.34; letter-spacing: -.008em; color: rgba(var(--milk), .92);
}
.st-gap .sm-label .n { color: rgb(226, 150, 120); }
.is-now .sm-label { width: 216px; }
.is-now .sm-label .n { color: rgb(var(--milk)); }
.is-now .sm-label .t { font-size: 1.02rem; font-weight: 500; color: #fff; }
.st-future .sm-label .t { color: rgba(var(--milk), .8); }
.sm-label .head:hover .t { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .28); text-underline-offset: 3px; }
.sm-mini { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 8px; }
.sm-pill { font-size: .68rem; font-weight: 500; letter-spacing: .02em; padding: 2px 10px; border-radius: 999px; white-space: nowrap; background: rgba(17, 17, 17, .6); }
.sm-pill.gap { color: rgb(234, 160, 130); border: 1px solid rgba(var(--copper), .6); }
.sm-pill.now { color: #fff; border: 1px solid rgba(var(--milk), .4); }
.sm-pill.rep { color: rgb(244, 178, 100); border: 1px solid rgba(232, 146, 52, .6); }
.sm-pill.chk { color: rgb(255, 205, 120); border: 1px solid rgba(255, 196, 84, .5); }
/* base.html: «кнопки и ссылки не ниже 44px» растягивало звёзды в овалы и раздувало подписи */
.sm-wrap .sm-node, .sm-wrap .sm-label a, .sm-wrap .sm-hud a, .sm-wrap button, .sm-wrap .sm-sheet a { min-height: 0; min-width: 0; }

/* ── Интерфейс: карточка, нижняя панель, плашки — один стиль ───────────── */
.sm-hud, .sm-dock, .sm-sheet, .sm-legend-pop, .sm-known-chip {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 18px;
}
.sm-hud, .sm-dock { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }      /* размытие только у этих двух панелей */
.sm-hud { position: absolute; z-index: 5; left: 16px; top: 14px; width: min(390px, calc(100% - 32px)); padding: 13px 16px; }
.sm-hud-row { display: flex; align-items: center; gap: 12px; }
.sm-hud-exam { font-size: .7rem; font-weight: 600; letter-spacing: .2em; color: rgb(var(--milk)); }
.sm-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sm-bar > i { display: block; height: 100%; min-width: 4px; border-radius: 3px; background: linear-gradient(90deg, #d9b98a, #ffd98f); }
.sm-hud-sub { font-size: .8rem; color: rgba(var(--milk), .62); }
.sm-hud-count { font-size: .82rem; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.sm-hud-count em { font-style: normal; color: rgba(var(--milk), .45); }
.sm-hud-next {
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--panel-line); color: inherit; text-decoration: none;
}
.sm-hud-next .lbl { flex-basis: 100%; font-size: .58rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(var(--milk), .45); }
.sm-hud-next .name { flex: 1; min-width: 0; font-size: .94rem; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-hud-next .go { flex-shrink: 0; color: rgba(var(--milk), .7); }
.sm-tag { font-size: .66rem; font-weight: 500; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.sm-tag.gap { color: rgb(234, 160, 130); border: 1px solid rgba(var(--copper), .6); }
.sm-hud-note { margin-top: 7px; font-size: .72rem; line-height: 1.4; color: rgba(var(--milk), .58); }
.sm-hud-plan { margin-top: 7px; font-size: .7rem; color: rgba(var(--milk), .5); }
.sm-hud-plan b { color: rgb(255, 217, 143); font-weight: 600; }

.sm-dock {
  position: absolute; z-index: 5; left: 50%; bottom: 18px; transform: translateX(-50%);
  padding: 6px; display: flex; gap: 4px; align-items: center;
}
.sm-dbtn, .sm-views button, .sm-dq {
  font: 500 .78rem/1 'Inter', -apple-system, 'Segoe UI', sans-serif; color: rgba(var(--milk), .8);
  background: transparent; border: 0; border-radius: 13px; padding: 10px 14px; cursor: pointer; white-space: nowrap;
}
.sm-dbtn:hover, .sm-views button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sm-views { display: inline-flex; gap: 2px; }
.sm-views button.on { background: rgba(var(--milk), .13); color: #fff; }
.sm-dock .sep { width: 1px; height: 20px; background: var(--panel-line); margin: 0 3px; }
.sm-dq { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--panel-line); color: rgba(var(--milk), .6); }
.sm-dq[aria-expanded="true"] { color: #fff; border-color: rgba(255, 255, 255, .3); }

.sm-known-chip {
  position: absolute; z-index: 5; left: 50%; bottom: 82px; transform: translateX(-50%);
  padding: 9px 16px; font: 500 .74rem/1.2 'Inter', sans-serif; color: rgb(255, 217, 143);
  border-color: rgba(var(--gold), .45); cursor: pointer; max-width: calc(100% - 32px);
}
.sm-legend-pop { position: absolute; z-index: 6; right: 16px; bottom: 76px; padding: 12px 16px; font-size: .76rem; color: rgba(var(--milk), .8); background: rgba(17, 17, 17, .94); }
.sm-legend-pop div { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.lg { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.lg.done { background: radial-gradient(circle, #fffdf3 0 22%, rgba(255, 210, 130, .95) 40%, rgba(var(--gold), 0) 72%); }
.lg.gap { background: radial-gradient(circle, #ffeee4 0 22%, rgba(214, 140, 108, .95) 40%, rgba(190, 104, 78, 0) 72%); }
.lg.now { background: radial-gradient(circle, #fff 0 30%, rgba(255, 236, 190, .9) 50%, rgba(var(--gold), 0) 74%); }
.lg.future { border: 1px solid rgba(var(--milk), .4); width: 9px; height: 9px; margin: 0 2.5px; }
.lg.rep { background: radial-gradient(circle, #fff1dc 0 22%, rgba(242, 166, 72, .95) 40%, rgba(226, 136, 40, 0) 72%); }
.lg.beyond { border: 1px dashed rgba(var(--milk), .3); width: 9px; height: 9px; margin: 0 2.5px; }

/* Карточка темы по тапу: название, статус, переход */
.sm-sheet { position: absolute; z-index: 7; left: 50%; bottom: 84px; width: min(372px, calc(100% - 24px)); padding: 16px 18px; background: rgba(17, 17, 17, .94); animation: sm-sheet-in .22s ease-out; transform: translateX(-50%); }
@keyframes sm-sheet-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.sm-sheet .k { font-size: .62rem; font-weight: 500; letter-spacing: .26em; color: rgb(var(--espresso-hi)); padding-right: 28px; }
.sm-sheet .h { margin: 6px 0 5px; font-size: 1.02rem; font-weight: 500; line-height: 1.3; color: #fff; }
.sm-sheet .s { font-size: .78rem; line-height: 1.45; color: rgba(var(--milk), .62); }
.sm-sheet .acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 13px; }
.sm-sheet .go { font-size: .78rem; font-weight: 600; color: #0b0b0b; background: rgb(var(--milk)); border-radius: 999px; padding: 9px 16px; text-decoration: none; }
.sm-sheet .alt { font: 500 .76rem/1 'Inter', sans-serif; color: rgba(var(--milk), .7); background: none; border: 1px solid var(--panel-line); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.sm-sheet .alt:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.sm-sheet-x { position: absolute; right: 10px; top: 8px; width: 30px; height: 30px; background: none; border: 0; color: rgba(var(--milk), .55); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sm-sheet-x:hover { color: #fff; }

/* Стрелки и подсказка */
.sm-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 38px; height: 38px; border-radius: 50%; padding: 0;
  background: rgba(17, 17, 17, .72); color: rgba(var(--milk), .85); border: 1px solid var(--panel-line);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.sm-arrow:hover { border-color: rgba(255, 255, 255, .35); color: #fff; }
.sm-arrow.prev { left: 12px; }
.sm-arrow.next { right: 12px; }
@media (hover: none) { .sm-arrow { display: none; } }
.sm-hint {
  position: absolute; z-index: 4; left: 50%; bottom: 76px; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--milk), .42);
  pointer-events: none; transition: opacity .6s; white-space: nowrap;
}
.sm-hint.off { opacity: 0; }

/* ── Запасной вид «Список» ────────────────────────────────────────────── */
.sm-list-view { display: none; max-width: 1040px; margin: 0 auto; }
.sm-listbar { display: flex; justify-content: flex-end; margin: 4px 0 14px; }
.sm-listbar .sm-views { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; padding: 3px; }
.sm-wrap.view-list .sm-stage { display: none; }
.sm-wrap.view-list .sm-list-view { display: block; }

/* ── Телефон ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .sm-hud { left: 10px; top: 10px; width: calc(100% - 20px); padding: 11px 13px; border-radius: 16px; }
  .sm-hud-next { margin-top: 9px; padding-top: 9px; }
  .sm-hud-note { display: none; }
  .sm-label { width: 138px; }
  .is-now .sm-label { width: 176px; }
  .sm-label .t { font-size: .74rem; }
  .is-now .sm-label .t { font-size: .95rem; }
  .sm-dock { left: 12px; transform: none; bottom: 14px; max-width: calc(100% - 92px); padding: 5px; }
  .sm-dbtn, .sm-views button { padding: 10px 11px; font-size: .74rem; }
  .sm-dbtn.practice { display: none; }
  .sm-known-chip { left: 12px; transform: none; bottom: 70px; max-width: calc(100% - 92px); }
  .sm-legend-pop { left: 12px; right: auto; bottom: 70px; }
  .sm-sheet { bottom: 70px; }
  .sm-hint { bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-sheet { animation: none; }
}