/* ============================================================
   NETRUNNERACADEMY — DESIGN SYSTEM
   Перенесено из дизайн-концепта (Main/Fixer/LabCard/Profile.dc.html)
   ============================================================ */

@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/ChakraPetch-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/ChakraPetch-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/ChakraPetch-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Share Tech Mono";
  src: url("../fonts/ShareTechMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-void: oklch(0.14 0.028 280);
  --bg-panel: oklch(0.19 0.035 280);
  --bg-panel-2: oklch(0.235 0.042 280);
  --border: oklch(0.36 0.05 280 / 55%);
  --border-bright: oklch(0.55 0.09 280 / 70%);
  --text: oklch(0.96 0.008 250);
  --text-dim: oklch(0.68 0.02 260);
  --text-faint: oklch(0.46 0.02 260);
  --cyan: oklch(0.85 0.16 195);
  --magenta: oklch(0.72 0.23 345);
  --violet: oklch(0.6 0.19 300);
  --green: oklch(0.82 0.19 150);
  --amber: oklch(0.8 0.15 80);
  --bad: oklch(0.65 0.22 25);
  --bad-soft: oklch(0.65 0.22 25 / 14%);
  --ink: #08131a;
  --mono: "Share Tech Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --display: "Chakra Petch", -apple-system, "Segoe UI", system-ui, sans-serif;
  --sans: -apple-system, "Segoe UI", system-ui, sans-serif;
  --radius: 3px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(700px 500px at 85% -10%, oklch(0.4 0.14 300 / 22%), transparent 60%),
    radial-gradient(600px 460px at -5% 105%, oklch(0.4 0.15 195 / 16%), transparent 60%),
    var(--bg-void);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  position: relative;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--magenta); }

/* ---------- decorative overlays ---------- */

.grid-overlay {
  position: fixed; inset: 0; pointer-events: none; opacity: 0.5; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, oklch(0.9 0.02 250 / 4%) 0px, transparent 1px, transparent 46px, oklch(0.9 0.02 250 / 4%) 47px),
    repeating-linear-gradient(90deg, oklch(0.9 0.02 250 / 4%) 0px, transparent 1px, transparent 46px, oklch(0.9 0.02 250 / 4%) 47px);
}

.scanlines {
  position: fixed; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: overlay; z-index: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px);
}

/* Карта Кобальта — заказчик отверг тёмный HUD-грид/scanlines поверх новой
   "мокрой бумажной карты": страница карты гасит оба глобальных декоративных
   слоя у себя (только у себя, остальной сайт не трогаем, см. base.html). */
body.page-map .grid-overlay,
body.page-map .scanlines {
  display: none;
}

.corner { position: fixed; width: 34px; height: 34px; border-color: var(--border-bright); opacity: 0.8; pointer-events: none; z-index: 5; }
.corner.tl { top: 16px; left: 16px; border-top: 2px solid; border-left: 2px solid; }
.corner.tr { top: 16px; right: 16px; border-top: 2px solid; border-right: 2px solid; }
.corner.bl { bottom: 16px; left: 16px; border-bottom: 2px solid; border-left: 2px solid; }
.corner.br { bottom: 16px; right: 16px; border-bottom: 2px solid; border-right: 2px solid; }

.hexcol {
  position: fixed; top: 130px; left: 22px; width: 26px; display: flex; flex-direction: column; gap: 10px;
  font-family: var(--mono); font-size: 10px; color: oklch(0.85 0.16 195 / 25%); writing-mode: vertical-rl; letter-spacing: 4px;
  pointer-events: none; z-index: 0;
}
@media (max-width: 1100px) { .hexcol { display: none; } }

.hazard {
  height: 6px;
  background: repeating-linear-gradient(45deg, var(--amber) 0 10px, #0a0a0d 10px 20px);
  position: relative; z-index: 2;
}

/* ---------- shared visual utilities ---------- */

.cut { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.cut-sm { clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.chroma { text-shadow: -1.5px 0 var(--magenta), 1.5px 0 var(--cyan); }
.underline-head { border-bottom: 2px solid var(--cyan); padding-bottom: 8px; display: inline-block; }

/* ---------- layout frame ---------- */

.frame {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 20px 40px 16px;
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; flex-direction: column; gap: 2px; }
.brand-mark { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-faint); }
.brand-name { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: 0.05em; color: var(--text); }
.brand-name span { color: var(--cyan); text-shadow: 0 0 18px oklch(0.85 0.16 195 / 55%); }

.user-chip { display: flex; align-items: center; gap: 14px; }
.user-id { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.user-rank { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--magenta); text-transform: uppercase; }
/* Позывной (магазин Фиксера, см. callsigns.py) — если активен, встаёт над
   рангом как основной идентификатор, ранг уходит во вспомогательную строку
   помельче (.user-rank-sub), не пропадая совсем. */
.user-callsign {
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--cyan); text-transform: uppercase; text-shadow: 0 0 12px oklch(0.85 0.16 195 / 45%);
}
.user-rank-sub { font-size: 10px; color: var(--text-faint); }
.user-name { font-size: 12px; color: var(--text-faint); font-family: var(--mono); }
.xp-pill { display: flex; align-items: center; gap: 8px; }
.xp-bar { width: 120px; height: 6px; border-radius: 999px; background: var(--bg-panel-2); overflow: hidden; border: 1px solid var(--border); }
.xp-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--magenta)); }
.xp-pill-label { font-family: var(--mono); font-size: 11px; color: var(--text-dim); white-space: nowrap; }

.user-account { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.user-account form { margin: 0; }
.logout-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 2px;
}
.logout-btn:hover { color: var(--magenta); }

/* доверие Фиксера — тот же язык, что у xp-bar, но акцент magenta/violet:
   это "человеческие отношения", а не прогресс по программе обучения */
.trust-bar { width: 100%; height: 6px; border-radius: 999px; background: var(--bg-panel-2); overflow: hidden; border: 1px solid var(--border); }
.trust-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--magenta), var(--violet)); }

/* USDN — нелегальная валюта Фиксера, монета с буквой N, в духе Tether,
   но на акцентных cyan/violet цветах проекта */
.usdn-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 11px; line-height: 1;
  box-shadow: 0 0 8px oklch(0.6 0.19 300 / 45%);
}
.usdn-pill {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: nowrap;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px 5px 5px;
  background: var(--bg-panel-2);
  text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease;
}
.usdn-pill:hover { border-color: var(--cyan); color: var(--cyan); }

.shop-link {
  font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  white-space: nowrap; text-decoration: none; letter-spacing: 0.03em;
  transition: color 0.15s ease;
}
.shop-link:hover { color: var(--magenta); }

.container {
  position: relative; z-index: 1;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 40px 60px;
  flex: 1;
}

.keybar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 13px 40px;
  background: oklch(0.09 0.02 280 / 90%);
  border-top: 1px solid var(--border-bright);
}
.keybar .kb { display: flex; align-items: center; gap: 8px; }
.keybar .key {
  font-family: var(--display); font-size: 11px; font-weight: 700; color: var(--text); background: var(--bg-panel-2);
  border: 1px solid var(--border-bright); padding: 3px 9px; min-width: 20px; text-align: center;
}
.keybar .kb-label { font-family: var(--mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.06em; }

/* ---------- panels ---------- */

.panel {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  padding: 20px;
}
.panel-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--text-faint);
  margin-bottom: 14px; text-transform: uppercase;
}
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); }
.stat-row:first-of-type { border-top: none; }
.stat-label { font-size: 13px; color: var(--text-dim); }
.stat-value { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--text); }

/* ---------- dashboard hero / status ---------- */

.main-row { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.path-col { flex: 2; min-width: 320px; }
.side-col { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 18px; }

.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--text-faint); margin-bottom: 6px; text-transform: uppercase; }
.page-title, .path-title {
  font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: 0.02em;
  margin: 0 0 24px; text-transform: uppercase;
}

.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.badge {
  background: var(--bg-panel-2);
  border: 1px solid var(--border-bright);
  color: var(--cyan);
  padding: 5px 12px;
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.03em;
}
.muted { color: var(--text-faint); font-size: 0.9rem; font-family: var(--mono); }

/* ---------- fixer teaser card ---------- */

.fixer-card {
  background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
  border: 2px solid var(--magenta);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.fixer-card::before {
  content: ""; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px;
  background: radial-gradient(circle, oklch(0.72 0.23 345 / 30%), transparent 70%);
}
.fixer-row { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; position: relative; }
.fixer-avatar {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--magenta);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 0 12px oklch(0.72 0.23 345 / 45%); font-size: 18px;
}
.fixer-tag { font-family: var(--mono); font-size: 11px; color: var(--magenta); letter-spacing: 0.08em; }
.fixer-soon {
  margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--ink);
  background: var(--amber); padding: 2px 8px; letter-spacing: 0.08em; font-weight: 700;
}
.fixer-quote { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-bottom: 14px; position: relative; }
.fixer-btn {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
  padding: 10px 16px; border: 1px solid var(--magenta); color: var(--magenta);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; background: transparent;
  cursor: not-allowed; opacity: 0.75;
}

.fixer-card.locked { border-color: var(--border-bright); filter: grayscale(0.6); opacity: 0.7; }
.fixer-card.locked .fixer-avatar { border-color: var(--border-bright); box-shadow: none; }
.fixer-card.locked .fixer-tag { color: var(--text-faint); }
.fixer-card.locked .fixer-btn { border-color: var(--border-bright); color: var(--text-faint); pointer-events: none; }
.fixer-card.locked::before { display: none; }

/* ---------- mission (module) cards ---------- */

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.mission-card {
  display: block;
  background: var(--bg-panel);
  border: 2px solid var(--border);
  padding: 18px;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.mission-card:hover { border-color: var(--cyan); transform: translateY(-2px); }
.mission-card.locked { filter: grayscale(0.6); opacity: 0.72; }
.mission-card.locked:hover { border-color: var(--border-bright); transform: none; }

.mission-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mission-icon { font-size: 22px; }

.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-size: 10.5px; letter-spacing: 0.04em; font-weight: 700;
  padding: 4px 10px; flex-shrink: 0;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  text-transform: uppercase;
}
.status-chip.done { color: var(--ink); background: var(--green); }
.status-chip.progress { color: var(--ink); background: var(--cyan); }
.status-chip.available { color: var(--text-dim); background: var(--bg-panel-2); border: 1px solid var(--border-bright); }
.status-chip.locked { color: var(--text-faint); background: var(--bg-panel-2); border: 1px solid var(--border-bright); }

.mission-title {
  font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: 0.01em;
  margin-bottom: 6px; text-transform: uppercase;
}
.mission-summary { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; min-height: 2.8em; }

.xp-bar-row { display: flex; align-items: center; gap: 6px 10px; margin-bottom: 12px; flex-wrap: wrap; }
.xp-bar-row .xp-bar { flex: 1; width: auto; }
.xp-label { font-family: var(--mono); font-size: 11px; color: var(--text-faint); white-space: nowrap; }

.progress-row { display: flex; gap: 16px; flex-wrap: wrap; }
.prog-step { display: flex; align-items: center; gap: 6px; }
.prog-dot {
  width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); color: var(--text-faint); font-family: var(--mono); font-size: 10px; flex-shrink: 0;
}
.prog-step.on .prog-dot { border-color: var(--green); color: var(--green); }
.prog-step span.lbl { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.prog-step.on span.lbl { color: var(--text-dim); }

/* ---------- generic content window ---------- */

.window {
  position: relative;
  background: var(--bg-panel);
  border: 2px solid var(--border-bright);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  margin-bottom: 22px;
  overflow: hidden;
}
.win-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px;
  background: var(--bg-panel-2); border-bottom: 1px solid var(--border);
}
.win-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-bright); }
.win-title { font-family: var(--mono); font-size: 12px; color: var(--text-faint); margin-left: 8px; letter-spacing: 0.04em; }
.win-body { padding: 30px 34px; }

.breadcrumb {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px; font-family: var(--mono); font-size: 12px;
}
.breadcrumb a { color: var(--cyan); }
.step-indicator { color: var(--text-faint); letter-spacing: 0.05em; text-transform: uppercase; }

.markdown-body h1 { font-family: var(--display); font-size: 1.4rem; margin-top: 0; text-transform: uppercase; }
.markdown-body h2 {
  font-family: var(--display); font-size: 1.1rem; margin-top: 30px; letter-spacing: 0.02em;
  border-top: 1px solid var(--border); padding-top: 20px; text-transform: uppercase; color: var(--cyan);
}
.markdown-body p, .markdown-body li { color: var(--text-dim); }
.markdown-body code {
  background: var(--bg-panel-2);
  color: var(--cyan);
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 0.88em;
  border: 1px solid var(--border);
}
.markdown-body pre {
  background: #0b0f16;
  color: var(--text);
  padding: 16px;
  border: 1px solid var(--border);
  overflow-x: auto;
}
.markdown-body pre code { background: none; color: var(--text-dim); padding: 0; border: none; }

/* ---------- buttons ---------- */

.btn-primary {
  display: inline-block;
  padding: 13px 28px;
  border: none;
  cursor: pointer;
  font-family: var(--display); font-size: 14px; letter-spacing: 0.04em; font-weight: 700;
  text-transform: uppercase;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  color: var(--ink);
  box-shadow: 0 0 24px oklch(0.85 0.16 195 / 25%);
  text-decoration: none;
}
.btn-ghost {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--text-dim);
  padding: 10px 20px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

.btn-primary:disabled, .btn-ghost:disabled {
  opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4);
  box-shadow: none; transform: none;
}
.btn-primary:disabled:hover, .btn-ghost:disabled:hover { border-color: var(--border-bright); color: var(--text-dim); }

/* ---------- магазин Фиксера ---------- */

.shop-swatch { display: flex; gap: 5px; margin-bottom: 12px; }
.shop-swatch span {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border-bright);
  box-shadow: 0 0 8px rgba(0,0,0,0.4);
}
.theme-card.active { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.theme-card .status-chip { margin-bottom: 10px; }

.btn-danger {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--bad);
  color: var(--bad);
  padding: 10px 20px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.btn-danger:hover { background: var(--bad-soft); }

.lab-cta { margin-left: 12px; }

/* ---------- quiz ---------- */

.quiz-question { border: none; border-top: 1px solid var(--border); padding: 18px 0; margin: 0; }
.quiz-question:first-child { border-top: none; padding-top: 0; }
.quiz-question legend {
  font-family: var(--display); font-weight: 700; font-size: 14.5px; margin-bottom: 12px; padding: 0;
  color: var(--text); letter-spacing: 0.01em;
}

.quiz-option {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 8px;
  background: var(--bg-panel-2);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s ease;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  font-size: 13.5px;
  color: var(--text-dim);
}
.quiz-option:hover { border-color: var(--cyan); }
.quiz-option input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-bright);
  flex-shrink: 0; margin: 0; position: relative; cursor: pointer;
}
.quiz-option input:checked { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 8px oklch(0.85 0.16 195 / 60%); }
.quiz-option:has(input:checked) { border-color: var(--cyan); background: oklch(0.85 0.16 195 / 8%); color: var(--text); }

/* ---------- banners ---------- */

.result-banner {
  padding: 14px 18px;
  margin-bottom: 18px;
  background: var(--bg-panel-2);
  border-left: 3px solid var(--border-bright);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 13px;
}
.result-banner.good { border-left-color: var(--green); color: var(--green); }
.result-banner.bad { border-left-color: var(--bad); color: var(--bad); background: var(--bad-soft); }

/* ---------- intercepted message (lore archive) ---------- */

.intercept-window { margin-top: -6px; }
.intercept-window .win-title { color: var(--amber); }
.intercept-body { padding: 22px 26px; }
.intercept-text {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  border-left: 2px solid var(--amber);
  padding-left: 16px;
  margin: 0;
  white-space: pre-line;
}

/* ---------- finale epilogue (capstone module only) ---------- */

.epilogue-window {
  margin-top: -6px;
  border-color: var(--magenta);
  box-shadow: 0 0 50px oklch(0.72 0.23 345 / 18%);
}
.epilogue-window .win-bar {
  background: linear-gradient(90deg, var(--bg-panel-2), oklch(0.72 0.23 345 / 14%));
}
.epilogue-window .win-title { color: var(--magenta); }
.epilogue-body { padding: 36px 40px; }
.epilogue-title {
  font-family: var(--display);
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}
.epilogue-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--magenta);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.epilogue-text {
  color: var(--text-dim);
  line-height: 1.75;
  font-size: 15px;
  margin: 0 0 16px;
}
.epilogue-text:last-of-type { margin-bottom: 0; }
.epilogue-transmission {
  margin: 30px 0;
  padding: 22px 26px;
  background: #0b0f16;
  border-left: 3px solid var(--cyan);
}
.epilogue-line {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.85;
  color: var(--text);
  margin: 0 0 14px;
}
.epilogue-line:last-child { margin-bottom: 0; }
.epilogue-tag { color: var(--cyan); font-weight: 700; margin-right: 6px; white-space: nowrap; }
.epilogue-outro {
  color: var(--text-faint);
  font-style: italic;
  line-height: 1.75;
  margin-top: 26px;
  border-top: 1px solid var(--border);
  padding-top: 22px;
}

/* ---------- lab page ---------- */

.target-url {
  font-family: var(--mono); font-size: 1rem; color: var(--cyan);
  background: #0b0f16; border: 1px solid var(--border); padding: 3px 8px; display: inline-block; margin-top: 6px;
}
.hint { color: var(--text-dim); }

.content-card {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  padding: 26px 30px;
  margin-bottom: 20px;
}

.flag-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.flag-form label { font-family: var(--mono); font-size: 12px; color: var(--text-faint); width: 100%; text-transform: uppercase; letter-spacing: 0.05em; }
.flag-form input {
  flex: 1;
  min-width: 200px;
  padding: 12px 14px;
  border: 1px solid var(--border-bright);
  background: #0b0f16;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 14px;
}
.flag-form input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px oklch(0.85 0.16 195 / 20%); }

/* ---------- theory cards ---------- */

.tc-hidden { display: none; }

.tc-progress {
  display: flex; align-items: center; gap: 8px; margin-bottom: 22px; flex-wrap: wrap;
}
.tc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--border); background: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tc-dot.done { border-color: var(--green); background: var(--green); }
.tc-dot.current { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 10px oklch(0.85 0.16 195 / 60%); }

.theory-card { display: none; animation: tc-fade-in 0.18s ease; }
.theory-card.active { display: block; }

@keyframes tc-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.tc-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.tc-counter { font-family: var(--mono); font-size: 12px; color: var(--text-faint); letter-spacing: 0.05em; }
.tc-nav .tc-back:disabled { opacity: 0.35; cursor: not-allowed; }
.tc-nav .tc-next:disabled {
  opacity: 0.4; cursor: not-allowed; box-shadow: none;
  background: var(--bg-panel-2); color: var(--text-faint);
}

/* first heading inside a card sits flush at the top, no extra rule above it */
.theory-card .markdown-body > h1:first-child,
.theory-card .markdown-body > h2:first-child {
  margin-top: 0; border-top: none; padding-top: 0;
}

/* ---------- terminal-sim widget ---------- */

.tsim {
  background: #0b0f16;
  border: 2px solid var(--border-bright);
  margin: 18px 0;
  overflow: hidden;
}
.tsim-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--bg-panel-2); border-bottom: 1px solid var(--border);
}
.tsim-title { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-left: 6px; letter-spacing: 0.04em; }
.tsim-body { padding: 14px 16px; }
.tsim-log { font-family: var(--mono); font-size: 13px; line-height: 1.6; min-height: 0; }
.tsim-log:empty { display: none; }
.tsim-line { white-space: pre-wrap; word-break: break-word; color: var(--text-dim); }
.tsim-line.cmd { color: var(--text); }
.tsim-line.cmd::before { content: ""; }
.tsim-line.out { color: var(--green); }
.tsim-line.err { color: var(--bad); }
.tsim-input-row {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-family: var(--mono); font-size: 13px;
}
.tsim-prompt { color: var(--cyan); flex-shrink: 0; }
.tsim-input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--mono); font-size: 13px; caret-color: var(--cyan);
}
.tsim-input::placeholder { color: var(--text-faint); }
.tsim-input:disabled { color: var(--green); opacity: 0.8; }
.tsim-hint { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); margin-top: 8px; letter-spacing: 0.04em; }
.tsim.solved { border-color: var(--green); }
.tsim.solved .tsim-bar { border-bottom-color: var(--green); }

@media (max-width: 720px) {
  .topbar, .container, .keybar { padding-left: 20px; padding-right: 20px; }
  .win-body { padding: 22px 20px; }
}

/* ---------- аккаунты (login/register) ----------
   Отдельный минимальный layout (templates/auth_base.html) — без HUD-шапки
   (ранг/XP/USDN бессмысленны до логина), но с тем же фоном/декором/шрифтами,
   что и весь остальной проект. */

.auth-topbar { justify-content: center; padding-bottom: 24px; }
.auth-container { display: flex; justify-content: center; padding-top: 48px; }
.auth-card { max-width: 460px; width: 100%; }
.auth-lead {
  color: var(--text-dim); font-size: 13px; line-height: 1.65;
  font-family: var(--mono); margin: 0 0 24px; white-space: pre-line;
}
.auth-form .auth-field { margin-bottom: 16px; }
.auth-form label {
  display: block; font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.auth-form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-bright);
  background: #0b0f16;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 14px;
}
.auth-form input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px oklch(0.85 0.16 195 / 20%); }
.auth-form .btn-primary { width: 100%; text-align: center; margin-top: 8px; }
.auth-switch {
  margin-top: 20px; font-family: var(--mono); font-size: 12px;
  color: var(--text-faint); text-align: center;
}

/* ---------- безопасность аккаунта: 2FA (/security, /login/2fa) ---------- */

.qr-box {
  display: flex; justify-content: center; padding: 16px;
  background: #0b0f16; border: 1px solid var(--border-bright);
}
.qr-box img { display: block; image-rendering: pixelated; }
.backup-codes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin-top: 6px;
}
.backup-codes code {
  display: block; padding: 10px 12px; text-align: center;
  background: #0b0f16; border: 1px solid var(--border-bright);
  color: var(--cyan); font-family: var(--mono); font-size: 14px; letter-spacing: 0.05em;
}

/* ---------- альтернативные темы интерфейса (магазин Фиксера) ----------
   Каждая тема просто переопределяет акцентные переменные из :root
   (--cyan/--magenta/--violet) — вся остальная таблица стилей их
   переиспользует, так что палитра меняется целиком без дублирования
   правил. --green/--amber/--bad (успех/предупреждение/ошибка) намеренно
   не трогаются — их смысл должен оставаться одинаковым в любой теме.
   Активная тема ставится атрибутом data-theme на <html> (см. base.html,
   app.py:inject_hud → nav_theme, db.player_state.theme_id). */

[data-theme="acid"] {
  --cyan: oklch(0.88 0.24 142);
  --magenta: oklch(0.68 0.19 128);
  --violet: oklch(0.5 0.14 150);
}

[data-theme="redcode"] {
  --cyan: oklch(0.72 0.21 34);
  --magenta: oklch(0.58 0.24 22);
  --violet: oklch(0.42 0.16 18);
}

[data-theme="ghost"] {
  --cyan: oklch(0.9 0.05 235);
  --magenta: oklch(0.76 0.08 280);
  --violet: oklch(0.62 0.09 260);
}

[data-theme="cobalt"] {
  --cyan: oklch(0.68 0.1 235);
  --magenta: oklch(0.58 0.1 250);
  --violet: oklch(0.36 0.06 255);
}

[data-theme="helios"] {
  --cyan: oklch(0.83 0.15 85);
  --magenta: oklch(0.68 0.16 55);
  --violet: oklch(0.38 0.06 255);
}

[data-theme="zeroday"] {
  --cyan: oklch(0.75 0.19 275);
  --magenta: oklch(0.65 0.24 320);
  --violet: oklch(0.38 0.14 290);
}

[data-theme="icebreach"] {
  --cyan: oklch(0.86 0.18 95);
  --magenta: oklch(0.63 0.24 15);
  --violet: oklch(0.4 0.12 55);
}

/* ---------- карта города (Кобальт) ---------- */

.section-nav {
  display: flex; gap: 6px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.section-nav-item {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); padding: 9px 16px;
  border: 1px solid transparent; border-bottom: none;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
  transition: color 0.15s ease, background 0.15s ease;
}
a.section-nav-item:hover { color: var(--cyan); background: var(--bg-panel-2); }
.section-nav-item.active {
  color: var(--text); background: var(--bg-panel);
  border-color: var(--border-bright); border-bottom: 2px solid var(--bg-panel);
  margin-bottom: -1px;
}

/* Карта — "мокрая бумажная карта города + цифровой overlay расследования".
   Сознательно НЕ тёмный HUD: фон карты тёплый/бумажный, неон используется
   только точечно (обводки, пунктирные "цифровые следы", скан-линия). */

/* Карта — главный объект экрана, не зажатая в стандартную ширину сайта
   (та же .container, что у dashboard/shop, максимум 1180px) — на странице
   карты контейнер расширяется, а сама карта получает большую часть
   горизонтального пространства. */
body.page-map .container { max-width: 1760px; }

.map-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 240px;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

.map-filters, .map-details { display: flex; flex-direction: column; }
.map-filter-row {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; color: var(--text-dim);
  padding: 7px 0; cursor: pointer; user-select: none;
}
.map-filter-row input {
  width: 15px; height: 15px; accent-color: var(--cyan); cursor: pointer; flex-shrink: 0;
}
.mf-swatch { width: 10px; height: 10px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.mf-missions { background: var(--magenta); }
.mf-intel { background: var(--amber); }
.mf-threats { background: var(--bad); }
.mf-npc { background: var(--violet); }
.mf-locations { background: var(--cyan); }

.map-zoom-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.zoom-btns { display: flex; gap: 6px; margin-bottom: 8px; }
.zoom-btn {
  flex: 1; padding: 8px 0; font-family: var(--display); font-size: 15px; font-weight: 700;
}
.zoom-label { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.06em; text-align: center; }

/* ---------- сцена карты ---------- */

.map-stage {
  position: relative;
  aspect-ratio: 1000 / 640;
  width: 100%;
  overflow: hidden;
  border: 2px solid var(--border-bright);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.map-canvas {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  transition: transform 0.35s ease;
}
.map-stage.zoom-far .map-canvas { transform: scale(1); }
.map-stage.zoom-medium .map-canvas { transform: scale(1.35); }
.map-stage.zoom-close .map-canvas { transform: scale(1.85); }

.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* zoom: элементы с data-zoom появляются только с заданного уровня и выше */
.map-stage.zoom-far [data-zoom="medium"],
.map-stage.zoom-far [data-zoom="close"] { display: none; }
.map-stage.zoom-medium [data-zoom="close"] { display: none; }

/* фильтры слоёв (левая панель) */
.map-stage.hide-missions [data-filter-group="missions"],
.map-stage.hide-intel [data-filter-group="intel"],
.map-stage.hide-threats [data-filter-group="threats"],
.map-stage.hide-npc [data-filter-group="npc"],
.map-stage.hide-locations [data-filter-group="locations"] { display: none; }

.map-zoom-controls {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 4px;
}
.zoom-mini-btn {
  width: 26px; height: 26px; border: 1px solid #3a2f1c; background: rgba(30,24,14,0.72);
  color: #e9dcb6; font-family: var(--display); font-weight: 700; font-size: 14px;
  cursor: pointer; line-height: 1;
}
.zoom-mini-btn:hover { background: rgba(30,24,14,0.9); border-color: var(--cyan); color: var(--cyan); }

/* ---------- бумажная основа (SVG-фильтры, без внешних картинок) ---------- */

.paper-grain { mix-blend-mode: multiply; opacity: 0.55; pointer-events: none; }
.paper-stains ellipse { mix-blend-mode: multiply; }
.paper-folds line {
  stroke: #40331d; stroke-opacity: 0.14; stroke-width: 3.5;
  filter: blur(1.4px);
}
.paper-vignette { pointer-events: none; mix-blend-mode: multiply; }

.news-fragment {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  fill: #3c2f1a; opacity: 0.15; pointer-events: none;
}

.ink-mark {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.ink-blue { stroke: #1f3f7a; stroke-width: 3; opacity: 0.62; }
.ink-blue-thin { stroke: #1f3f7a; stroke-width: 2; opacity: 0.5; }
.ink-red { stroke: #8a1f1f; stroke-width: 3; opacity: 0.62; }

/* ---------- география ---------- */

.map-water { fill: #2c3a3f; fill-opacity: 0.82; stroke: #1b2528; stroke-width: 2; }
.map-water-waves path {
  fill: none; stroke: #cfe4e6; stroke-width: 1.4; opacity: 0.3;
}

.map-alleys line { stroke: #6b5738; stroke-opacity: 0.28; stroke-width: 1.5; }

/* ---------- дороги и застройка (ink-on-paper, не неон) ---------- */

.map-road { stroke: #5b4b32; stroke-opacity: 0.4; stroke-width: 3; }
.map-avenue { stroke: #8a6a2e; stroke-opacity: 0.4; stroke-width: 3; stroke-dasharray: 12 9; }

.city-buildings { mix-blend-mode: screen; }
.city-building { fill: #3a4a6b; }
.city-building.district-financial { fill: var(--cyan); }
.city-building.district-lower { fill: var(--amber); }
.city-building.district-port { fill: var(--violet); }
.city-building.district-media { fill: var(--magenta); }
.city-building.neutral { fill: #3a4a6b; }

/* границы районов — единственное место на бумаге, где цифровой слой
   классифицирует территорию (тонкий пунктир, акцентный цвет района) */
.district { fill-opacity: 0.05; stroke-width: 1.5; stroke-dasharray: 5 4; stroke-opacity: 0.8; }
.district-financial { fill: var(--cyan); stroke: var(--cyan); }
.district-lower { fill: var(--amber); stroke: var(--amber); }
.district-port { fill: var(--violet); stroke: var(--violet); }
.district-media { fill: var(--magenta); stroke: var(--magenta); }

/* ---------- цифровой слой (точечно) ---------- */

.map-route {
  fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-dasharray: 7 6;
  filter: drop-shadow(0 0 3px oklch(0.85 0.16 195 / 70%));
}
.route-arrow { fill: var(--cyan); }

.digital-traces line {
  stroke: var(--violet); stroke-width: 1.6; stroke-dasharray: 3 5; opacity: 0.75;
  filter: drop-shadow(0 0 3px oklch(0.6 0.19 300 / 70%));
}

.digital-scanline {
  fill: var(--cyan);
  opacity: 0.16;
  mix-blend-mode: screen;
  animation: scan-sweep 8s linear infinite;
  pointer-events: none;
}
@keyframes scan-sweep {
  0% { transform: translateX(0); }
  100% { transform: translateX(1080px); }
}

/* ---------- district labels ---------- */

.map-overlay { position: absolute; inset: 0; pointer-events: none; }

.district-tag {
  position: absolute; transform: translate(-50%, -100%);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text); background: rgba(20, 15, 8, 0.82);
  padding: 5px 11px; white-space: nowrap;
  border-left: 2px solid var(--border-bright);
  pointer-events: none;
}
.tag-financial { border-left-color: var(--cyan); }
.tag-lower { border-left-color: var(--amber); }
.tag-port { border-left-color: var(--violet); }
.tag-media { border-left-color: var(--magenta); }

/* ---------- маркеры (7 типов) ---------- */

.map-marker {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; pointer-events: auto; z-index: 2;
}
.marker-badge {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  border: 2px solid #2a2013; background: rgba(24, 19, 11, 0.85); color: var(--text);
  position: relative;
}
.marker-badge.small { width: 20px; height: 20px; font-size: 11px; flex-shrink: 0; }

/* Подпись маркера видна только по наведению/фокусу — постоянно открытые
   подписи у 15-20 меток на компактной карте гарантированно налезают друг
   на друга (так и было в предыдущей версии). Полное досье объекта и так
   уже показывается в правой панели — подпись под меткой нужна только как
   быстрая подсказка на секунду, а не как часть основного макета. */
.map-marker .marker-label {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  font-family: var(--mono); font-size: 10.5px; color: #f1e6c8;
  background: rgba(15, 11, 6, 0.95); padding: 4px 9px; white-space: nowrap;
  border-left: 2px solid var(--border-bright);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 20;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.map-marker:hover .marker-label,
.map-marker:focus .marker-label,
.map-marker:focus-visible .marker-label {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* targeting-скобки на активных/важных маркерах */
.marker-badge--module::before, .marker-badge--module::after,
.marker-badge--gig::before, .marker-badge--gig::after {
  content: ""; position: absolute; width: 7px; height: 7px; opacity: 0; transition: opacity 0.15s ease;
}
.marker-main-mission .marker-badge--module::before,
.marker-side-mission .marker-badge--gig::before { opacity: 1; top: -4px; left: -4px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.marker-main-mission .marker-badge--module::after,
.marker-side-mission .marker-badge--gig::after { opacity: 1; bottom: -4px; right: -4px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }

/* TRAINING */
.marker-training .marker-badge--module {
  border-color: var(--cyan); color: var(--cyan);
  box-shadow: 0 0 8px oklch(0.85 0.16 195 / 30%);
}
.marker-training .marker-label { border-left-color: var(--cyan); }

/* MAIN MISSION — крупный, выделенный, единственный на карте */
.marker-main-mission .marker-badge--module {
  width: 44px; height: 44px; font-size: 20px;
  background: linear-gradient(135deg, var(--cyan), var(--magenta)); color: var(--ink);
  border-color: var(--cyan);
  box-shadow: 0 0 22px oklch(0.85 0.16 195 / 60%);
  animation: marker-pulse 1.8s ease-in-out infinite;
}
.marker-main-mission .marker-label {
  border-left-color: var(--magenta); font-size: 11px; color: #fff2d8; font-weight: 700;
}

/* SIDE MISSION (доступный гиг) */
.marker-side-mission .marker-badge--gig {
  border-color: var(--magenta); color: var(--ink); background: var(--magenta);
  box-shadow: 0 0 16px oklch(0.72 0.23 345 / 55%);
  animation: marker-pulse 1.9s ease-in-out infinite;
}
.marker-side-mission .marker-label { border-left-color: var(--magenta); }

/* COMPLETED (модуль или гиг) */
.marker-completed .marker-badge {
  border-color: var(--green); color: var(--green);
  box-shadow: 0 0 8px oklch(0.82 0.19 150 / 35%);
}
.marker-completed .marker-label { border-left-color: var(--green); opacity: 0.85; }

/* UNKNOWN (гиг, который Фиксер ещё не предложила) */
.marker-unknown { cursor: help; }
.marker-unknown .marker-badge {
  color: var(--text-faint); opacity: 0.55; box-shadow: none;
  border-style: dashed;
}
.marker-unknown .marker-label { opacity: 0.65; }
.marker-unknown:hover .marker-badge { opacity: 0.8; border-color: var(--text-faint); }

/* INTEL */
.marker-intel { cursor: pointer; }
.marker-intel .marker-badge {
  border-color: var(--amber); color: var(--amber);
  transform: rotate(45deg); font-size: 13px;
  box-shadow: 0 0 8px oklch(0.8 0.15 80 / 30%);
}
.marker-intel .marker-badge span { display: inline-block; transform: rotate(-45deg); }
.marker-intel .marker-label { border-left-color: var(--amber); max-width: 190px; white-space: normal; }

/* THREAT */
.marker-threat { cursor: help; }
.marker-threat .marker-badge {
  border-color: var(--bad); color: var(--bad);
  box-shadow: 0 0 10px oklch(0.65 0.22 25 / 40%);
  animation: threat-pulse 2.2s ease-in-out infinite;
}
.marker-threat .marker-label { border-left-color: var(--bad); }
@keyframes threat-pulse {
  0%, 100% { box-shadow: 0 0 8px oklch(0.65 0.22 25 / 35%); }
  50% { box-shadow: 0 0 18px oklch(0.65 0.22 25 / 65%); }
}

/* NPC */
.marker-npc .marker-badge {
  border-color: var(--violet); color: var(--violet);
  box-shadow: 0 0 8px oklch(0.6 0.19 300 / 35%);
}
.marker-npc .marker-label { border-left-color: var(--violet); }

/* LOCATION (штаб) */
.marker-location .marker-badge--location {
  border-color: var(--cyan); color: var(--cyan); font-size: 14px;
  box-shadow: 0 0 10px oklch(0.85 0.16 195 / 30%);
}
.marker-location .marker-label { border-left-color: var(--cyan); }

@keyframes marker-pulse {
  0%, 100% { box-shadow: 0 0 16px oklch(0.72 0.23 345 / 50%); transform: scale(1); }
  50% { box-shadow: 0 0 26px oklch(0.72 0.23 345 / 80%); transform: scale(1.07); }
}

/* ---------- правая панель "досье объекта" ---------- */

.map-details-empty { font-family: var(--mono); font-size: 12px; color: var(--text-faint); line-height: 1.6; }
.md-type { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--magenta); text-transform: uppercase; margin-bottom: 6px; }
.md-name { font-family: var(--display); font-size: 15px; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; }
.md-status { font-family: var(--mono); font-size: 11px; color: var(--cyan); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.md-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; margin: 0; }

.route-note { margin-bottom: 22px; }

/* ---------- легенда ---------- */

.map-legend { max-width: 640px; }
.legend-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; color: var(--text-dim); }
.legend-row .marker-badge { position: static; transform: none; background: var(--bg-panel-2); }
.legend-row .marker-badge--intel { transform: none; }
.legend-row .marker-badge--intel span { transform: none; }

@media (max-width: 980px) {
  .map-layout { grid-template-columns: 1fr; }
  .map-filters { order: 2; }
  .map-details { order: 3; }
  .map-stage { order: 1; }
}

@media (max-width: 720px) {
  .map-marker .marker-label { display: none; }
  .district-tag { font-size: 9.5px; padding: 4px 8px; }
}

/* ---------- публичный лендинг ('/', для анонимных посетителей) ----------
   Композиция, не новая дизайн-система: секции переиспользуют .panel,
   .mission-card, .fixer-card, .window, .btn-primary/.btn-ghost, шрифты и
   акцентные переменные как есть. Ниже — только раскладка (grid/flex/отступы)
   и увеличенная типографика hero, специфичные для этой страницы. */

.landing-topbar-actions { display: flex; align-items: center; gap: 14px; }

.landing-hero {
  padding: 64px 0 56px;
  max-width: 760px;
}
.landing-hero-title {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 10px 0 20px;
}
.landing-hero-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0 0 30px;
  max-width: 620px;
}
.landing-cta-row { display: flex; gap: 16px; flex-wrap: wrap; }

.landing-section { margin-top: 56px; }
.landing-section-head { margin-bottom: 22px; }
.landing-section-head .path-title { margin: 6px 0 0; }
.landing-section-lead {
  color: var(--text-dim); font-size: 14px; line-height: 1.7; max-width: 720px;
  margin: -6px 0 24px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.feature-card { display: flex; flex-direction: column; gap: 8px; }
.feature-icon { font-size: 26px; }
.feature-title { font-family: var(--display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.01em; }
.feature-text { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 0; }

.gig-teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.gig-teaser-grid .fixer-quote { margin-bottom: 0; }

.landing-pricing-note {
  font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  margin-top: 18px;
}

.landing-final-cta { margin-top: 64px; border-color: var(--cyan); }
.landing-final-cta-body { text-align: center; padding: 48px 34px; }
.landing-final-cta-title {
  font-family: var(--display); font-size: clamp(22px, 3vw, 30px);
  text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 14px;
}
.landing-final-cta-text {
  color: var(--text-dim); font-size: 14px; margin: 0 0 26px;
}

@media (max-width: 720px) {
  .landing-topbar-actions { gap: 8px; }
  .landing-topbar-actions .btn-ghost, .landing-topbar-actions .btn-primary { padding: 9px 14px; font-size: 11px; }
  .landing-hero { padding: 40px 0 40px; }
}

/* ---------- админ-панель владельца ('/admin') ----------
   Композиция, не новая дизайн-система: те же .panel/.window/.cut, что и
   везде. Ниже — только сетка карточек статистики и таблица для списков
   (users/lab_instances), которых раньше в проекте не было. */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.admin-rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 24px;
}

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
.admin-table th {
  text-align: left; padding: 8px 12px; color: var(--text-faint);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-bright); white-space: nowrap;
}
.admin-table td {
  padding: 8px 12px; color: var(--text-dim); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-table tbody tr:hover { background: var(--bg-panel-2); }

/* ---------- /leaderboard — переиспользует .window/.admin-table ---------- */

.lb-me { background: var(--bg-panel-2); box-shadow: inset 3px 0 0 var(--cyan); }
.lb-callsign { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: var(--cyan); }

.admin-table code {
  background: var(--bg-panel-2); color: var(--cyan); padding: 1px 5px;
  border: 1px solid var(--border); font-size: 0.92em;
}