/* Inter — локально (приложение работает без интернета), лицензия OFL — fonts/LICENSE.txt. Переменный шрифт:
   начертания 100–900 и оптический размер — крупные цифры сами берут тонкий «дисплейный» рисунок. */
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Дизайн-токены (06.10.2026, набор Ventriloc из DESIGN.md): две темы — «Бумага» (тёплая бумага, почти без цвета,
   один оранжевый акцент) и «Тёмная» (Metro: цветные плитки). Без атрибута data-theme — как в системе.
   Цвет в данных (классы активов в клетках, противник, рост и падение) — смысловой и есть в обеих темах. */
:root {
  /* Шрифты: интерфейс — Inter, заголовки и крупные цифры — Inter тонким начертанием (замена PolySans) */
  --font-ui: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-display: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --tracking-display: -0.02em;
  /* Отступы — шаг 4 px; радиусы — прямые кнопки, асимметричные карточки, капсулы навигации */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --radius-btn: 0;
  --radius-input: 0;
  --radius-card: 6px 0 0 0;
  --radius-pill: 200px;

  /* «Бумага» */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --surface-3: #efefef;
  --text: #202020;
  --text-2: #4d4d4d;
  --muted: #828282;
  --line: #e8e8e8;
  --line-strong: #202020;
  --accent: #ff682c;
  --brass: #816729;
  --primary: #202020;
  --primary-text: #ffffff;
  --danger: #c2410c;
  --warn: #b45309;
  --remind: #ca8a04; /* «напоминает»: есть дела, но не нарушение (доклады «Штаба») */
  --gain: #2f6b3a;
  --bar: #202020;
  --hatch: #a3a3a3;
  --hover: #f5f5f5;
  --row: #f5f5f5;
  --backdrop: rgba(32, 32, 32, 0.35);
  /* Плитки: серые и цвета слоновой кости, смысл — тонкой меткой слева */
  --tile: #efefef; --tile-text: #202020; --tile-mark: transparent;
  --tile-child: #f5f5f5;
  --tile-empty: #f5f5f5; --tile-empty-text: #4d4d4d;
  --tile-warn: #efefef; --tile-warn-mark: #ff682c;
  --tile-remind: #efefef; --tile-remind-mark: var(--remind);
  --tile-danger: #efefef; --tile-danger-mark: #c2410c;
  --tile-reserve: #ebe6dd;
  --tile-places: #ebe6dd;
  --tile-flow: #efefef; --tile-flow-mark: #816729;
  --tile-budget: #ebe6dd; --tile-budget-deficit: #efefef; --tile-budget-deficit-mark: #c2410c;
  --tile-cashback: #efefef; --tile-cashback-due: #efefef; --tile-cashback-due-mark: #ff682c;
  --tile-assault: #efefef; --tile-assault-mark: #ff682c;
  --tile-enemy: #efefef; --tile-enemy-mark: #ff682c;
  --tile-enemy-mortgage: #efefef; --tile-enemy-expense: #efefef; --tile-enemy-purchase: #efefef; --tile-enemy-card: #efefef;
  --tile-enemy-next: #ebe6dd; --tile-enemy-next-mark: #ff682c;
  --tile-scenarios: #f5f5f5;
  --cell-next: #ff682c;
  --enemy: #c2410c;
  --enemy-soft: rgba(255, 104, 44, 0.10);
  --assault-text: #c2410c;
  --card-info-mark: #816729;
  /* Графика: лента дисциплины и схема снабжения */
  --ok: #2f6b3a; --ok-soft: #dfe9d8; --wait: #b45309; --miss: #c2410c;
  --chart-home: #c9c4bb; --chart-army: #816729; --chart-enemy: #ff682c; --chart-free: #4d4d4d; --chart-deficit: #c2410c;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #15171a;
  --surface: #1e2125;
  --surface-2: #24272c;
  --surface-3: #2b2f35;
  --text: #e8e6e1;
  --text-2: #c9c7c2;
  --muted: #9aa0a6;
  --line: #33373c;
  --line-strong: #6b7178;
  --accent: #ff7a45;
  --brass: #c9a85a;
  --primary: #e8e6e1;
  --primary-text: #15171a;
  --danger: #f97066;
  --warn: #fdb022;
  --remind: #d9c84a;
  --gain: #6cc57f;
  --bar: #8fb36a;
  --hatch: #7a8088;
  --hover: #2b2f35;
  --row: #24272c;
  --backdrop: rgba(0, 0, 0, 0.55);
  --tile: #3f5a24; --tile-text: #eef3e6; --tile-mark: transparent;
  --tile-child: #56733a;
  --tile-gain: #c5f09a; --tile-loss: #ffb3a7;
  --tile-empty: #5f5e5a; --tile-empty-text: #f1efe8;
  --tile-warn: #8a5a14; --tile-warn-mark: transparent;
  --tile-remind: #6b6216; --tile-remind-mark: transparent;
  --tile-danger: #8f2a24; --tile-danger-mark: transparent;
  --tile-reserve: #34495e;
  --tile-places: #2f3a46;
  --tile-flow: #185fa5; --tile-flow-mark: transparent;
  --tile-budget: #2d4a3e; --tile-budget-deficit: #6b2a24; --tile-budget-deficit-mark: transparent;
  --tile-cashback: #3d3a5c; --tile-cashback-due: #6a4a1c; --tile-cashback-due-mark: transparent;
  --tile-assault: #7a2e1f; --tile-assault-mark: transparent;
  --tile-enemy: #6b1f1f; --tile-enemy-mark: transparent;
  --tile-enemy-mortgage: #561a2a; --tile-enemy-expense: #5c4418; --tile-enemy-purchase: #3d2f63; --tile-enemy-card: #5c1f3f;
  --tile-enemy-next: #b3261e; --tile-enemy-next-mark: transparent;
  --tile-scenarios: #262a30;
  --cell-next: #ff9a80;
  --enemy: #b3261e;
  --enemy-soft: rgba(179, 38, 30, 0.12);
  --assault-text: #d9734f;
  --card-info-mark: #993556;
  --ok: #639922; --ok-soft: #eaf3de; --wait: #ba7517; --miss: #c0392b;
  --chart-home: #888780; --chart-army: #6a8a45; --chart-enemy: #b3261e; --chart-free: #4f8a3c; --chart-deficit: #e24b4a;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #15171a;
    --surface: #1e2125;
    --surface-2: #24272c;
    --surface-3: #2b2f35;
    --text: #e8e6e1;
    --text-2: #c9c7c2;
    --muted: #9aa0a6;
    --line: #33373c;
    --line-strong: #6b7178;
    --accent: #ff7a45;
    --brass: #c9a85a;
    --primary: #e8e6e1;
    --primary-text: #15171a;
    --danger: #f97066;
    --warn: #fdb022;
    --remind: #d9c84a;
    --gain: #6cc57f;
    --bar: #8fb36a;
    --hatch: #7a8088;
    --hover: #2b2f35;
    --row: #24272c;
    --backdrop: rgba(0, 0, 0, 0.55);
    --tile: #3f5a24; --tile-text: #eef3e6; --tile-mark: transparent;
    --tile-child: #56733a;
    --tile-gain: #c5f09a; --tile-loss: #ffb3a7;
    --tile-empty: #5f5e5a; --tile-empty-text: #f1efe8;
    --tile-warn: #8a5a14; --tile-warn-mark: transparent;
    --tile-remind: #6b6216; --tile-remind-mark: transparent;
    --tile-danger: #8f2a24; --tile-danger-mark: transparent;
    --tile-reserve: #34495e;
    --tile-places: #2f3a46;
    --tile-flow: #185fa5; --tile-flow-mark: transparent;
    --tile-budget: #2d4a3e; --tile-budget-deficit: #6b2a24; --tile-budget-deficit-mark: transparent;
    --tile-cashback: #3d3a5c; --tile-cashback-due: #6a4a1c; --tile-cashback-due-mark: transparent;
    --tile-assault: #7a2e1f; --tile-assault-mark: transparent;
    --tile-enemy: #6b1f1f; --tile-enemy-mark: transparent;
    --tile-enemy-mortgage: #561a2a; --tile-enemy-expense: #5c4418; --tile-enemy-purchase: #3d2f63; --tile-enemy-card: #5c1f3f;
    --tile-enemy-next: #b3261e; --tile-enemy-next-mark: transparent;
    --tile-scenarios: #262a30;
    --cell-next: #ff9a80;
    --enemy: #b3261e;
    --enemy-soft: rgba(179, 38, 30, 0.12);
    --assault-text: #d9734f;
    --card-info-mark: #993556;
    --ok: #639922; --ok-soft: #eaf3de; --wait: #ba7517; --miss: #c0392b;
    --chart-home: #888780; --chart-army: #6a8a45; --chart-enemy: #b3261e; --chart-free: #4f8a3c; --chart-deficit: #e24b4a;
    color-scheme: dark;
}
}

* { box-sizing: border-box; }

/* Атрибут hidden должен побеждать display из классов (.field и т. п.). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--font-ui);
}

button, input, select { font: inherit; color: inherit; }

.top {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* Несвежий сервер или интерфейс — полоса над шапкой (app.js, checkServer) */
.stale-banner { padding: 8px 16px; background: var(--tile-warn); color: var(--text); font-size: 13px; border-bottom: 2px solid var(--warn); }
.stale-banner button { margin-left: 8px; }

.brand { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.06em; }
.top-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.likbez-link { font-size: 12px; color: var(--muted); text-decoration: none; }
.likbez-link:hover, .likbez-link:focus-visible { color: var(--accent); text-decoration: underline; }

/* ЛИКБЕЗ — своя страница (likbez.html): статьи из копии заметки хранилища, ниже — черновик (старый глоссарий) */
.lk-page { max-width: 860px; margin: 0 auto; padding: 36px 24px 60px; }
.lk-title { margin: 0 0 14px; font-size: 44px; line-height: 1; }
.lk-lead { margin: 0 0 8px; color: var(--muted); }
.lk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 10px; }
.lk-search { max-width: 360px; }
.lk-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 22px; font-size: 13px; }
.lk-toc a { color: var(--text); }
.lk-toc a.draft { color: var(--muted); }
.lk-toc a:hover { color: var(--accent); }
.lk-article { scroll-margin-top: 12px; margin: 0 0 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.lk-article h2 { margin: 0 0 12px; font-size: 26px; }
.lk-article p { margin: 0 0 10px; line-height: 1.5; }
.lk-article p.lk-first { font-size: 16px; }
.lk-article ul { margin: 0 0 12px; padding-left: 20px; }
.lk-article li { margin: 0 0 6px; line-height: 1.5; }
.lk-article strong { color: var(--text); }
.lk-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.lk-link.draft { text-decoration-style: dashed; text-decoration-color: var(--muted); }
.lk-link:hover { color: var(--accent); }
.lk-missing { border-bottom: 1px dotted var(--muted); cursor: help; }
.lk-draft { margin-top: 36px; color: var(--muted); }
.lk-draft h2 { margin: 0 0 4px; font-size: 22px; color: var(--muted); }
.lk-draft h3 { margin: 16px 0 6px; font-size: 15px; color: var(--muted); }
.lk-draft ul { margin: 0; padding-left: 18px; }
.lk-draft li { margin: 0 0 6px; line-height: 1.45; scroll-margin-top: 12px; }
.lk-article:target, .lk-draft li:target { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Схемы статей (likbez.js): лестница строя, строй в клетках, дерево подчинённости, правило */
.lk-diagram { margin: 2px 0 18px; }
.lk-diagram pre { margin: 0; white-space: pre-wrap; }
.lk-diagram-note { margin: 0 0 2px; color: var(--muted); font-size: 13px; font-style: italic; }
.lk-ladder { display: grid; gap: 8px; }
.lk-band { padding: 8px 12px; border-left: 3px solid var(--band); background: color-mix(in srgb, var(--band) 8%, transparent); }
.lk-band-0 { --band: var(--ok); } .lk-band-1 { --band: var(--warn); } .lk-band-2 { --band: var(--accent); }
.lk-band-head { margin-bottom: 4px; font-size: 13px; }
.lk-level { display: grid; grid-template-columns: 90px minmax(80px, 1fr) 64px minmax(0, 1.3fr); gap: 10px; align-items: center; padding: 3px 0; font-size: 14px; }
.lk-level-name { font-weight: 600; }
.lk-track { height: 10px; background: color-mix(in srgb, var(--band) 12%, transparent); }
.lk-track i { display: block; height: 100%; background: var(--band); }
.lk-level-size { text-align: right; }
.lk-level-made { color: var(--muted); font-size: 13px; }
.lk-cells { display: grid; gap: 6px; }
.lk-cells-title { font-size: 13px; color: var(--muted); }
.lk-cell-group { display: flex; align-items: stretch; gap: 12px; }
.lk-cell-rows { display: grid; gap: 2px; align-content: center; }
.lk-cell-row { display: grid; grid-template-columns: repeat(10, 14px); gap: 2px; }
.lk-cell-row i { height: 14px; background: var(--cell); }
.lk-cell-label { display: flex; flex-direction: column; justify-content: center; padding-left: 10px; border-left: 2px solid var(--cell); font-size: 13px; }
.lk-g0 { --cell: var(--ok); } .lk-g1 { --cell: var(--accent); } .lk-g2 { --cell: var(--brass); } .lk-g3 { --cell: var(--muted); }
.lk-tree ul { margin: 0; padding-left: 26px; list-style: none; }
.lk-tree > ul { padding-left: 0; }
.lk-tree li { position: relative; margin: 0; padding: 3px 0 3px 16px; line-height: 1.3; }
.lk-tree > ul > li { padding-left: 0; }
.lk-tree li::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 17px; border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.lk-tree li::after { content: ""; position: absolute; left: 0; top: 17px; bottom: 0; border-left: 1px solid var(--line-strong); }
.lk-tree li:last-child::after, .lk-tree > ul > li::before, .lk-tree > ul > li::after { display: none; }
.lk-node { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lk-node-box { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 8px; border: 1px solid var(--line-strong); background: var(--hover); }
.lk-node-kind { font-size: 12px; color: var(--muted); }
.lk-chip { padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 12px; color: var(--muted); }
.lk-chip.supply { border-color: var(--ok); color: var(--ok); }
.lk-chip.sum { border-color: var(--brass); color: var(--brass); }
.lk-chip.plan { border-color: var(--accent); color: var(--accent); }
.lk-rule { display: grid; gap: 6px; }
.lk-case { display: flex; align-items: baseline; gap: 10px; padding: 6px 12px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); }
.lk-case.ok { --c: var(--ok); } .lk-case.no { --c: var(--danger); }
.lk-case-mark { font-weight: 700; color: var(--c); }
.lk-path { display: grid; gap: 6px; }
.lk-article ol.lk-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.lk-article .lk-step { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 10px; border: 1px solid var(--line-strong); background: var(--hover); font-size: 13px; line-height: 1.35; }
.lk-step b { font-size: 14px; }
.lk-step-n { font-size: 11px; color: var(--muted); }
.lk-step.main { border: 2px solid var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.lk-step.main b { color: var(--ok); }
.lk-step + .lk-step::before { content: "→"; position: absolute; left: -17px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; }
.lk-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.lk-kind { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-top: 3px solid var(--cell); background: color-mix(in srgb, var(--cell) 8%, transparent); font-size: 13px; line-height: 1.4; }
.lk-kind b { font-size: 15px; }
.lk-rhythm { display: flex; align-items: flex-end; gap: 2px; height: 22px; border-bottom: 1px solid var(--line-strong); }
.lk-rhythm i { flex: 1; background: var(--cell); }
@media (max-width: 600px) {
  .lk-article ol.lk-steps { grid-auto-flow: row; gap: 18px; }
  .lk-step + .lk-step::before { content: "↓"; left: 14px; top: -17px; transform: none; }
  .lk-level { grid-template-columns: 80px minmax(0, 1fr) 56px; }
  .lk-level-made { grid-column: 1 / -1; padding-left: 0; }
  .lk-cell-row { grid-template-columns: repeat(10, 11px); }
  .lk-cell-row i { height: 11px; }
}
.note-ref { color: var(--muted); }
h1, h2, h3, .section-title, .card-title h2, .metro-name, .structure-head h2 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-display);
}
.metro-big, .card-big { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-display); }

.summary { display: flex; gap: 24px; flex-wrap: wrap; margin: 0; flex: 1; }
.summary div { display: flex; flex-direction: column; }
.summary .summary-group { flex-direction: row; flex-wrap: wrap; gap: 24px; }
.summary dt { color: var(--muted); font-size: 12px; }
.summary dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.summary .warn dd { color: var(--warn); }
.warn-text { color: var(--warn); font-weight: 600; }

/* Навигация — капсула (Ventriloc): вкладки внутри одной скруглённой подложки */
.tabs { display: flex; width: max-content; max-width: calc(100% - 48px); gap: 2px; margin: 12px 24px 12px; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: var(--radius-pill); background: var(--surface-3); }
.tabs button {
  flex: none;
  white-space: nowrap;
  border: none;
  background: none;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--muted);
}
.tabs button.active { background: var(--surface); color: var(--text); font-weight: 500; }

main { padding: 0 24px 48px; }
.tab { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; }

.card { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 20px; }
.card h2 { font-size: 18px; margin: 0 0 12px; }

.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label { color: var(--muted); font-size: 12px; }

/* Мастер по шагам (wizard.js): шаги сверху, поля одного шага, внизу — «← Назад», «Далее →», «Создать» */
.wz-off { display: none !important; }
.wz-select { display: none; }
.wizard .fields { max-width: 820px; }
.wz-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.wz-steps button { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: none; color: var(--muted); }
.wz-steps button:disabled { opacity: 0.5; }
.wz-steps button.done { color: var(--text); }
.wz-steps button.active { border-color: var(--text); color: var(--text); font-weight: 600; }
.wz-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--hover); font-size: 12px; font-weight: 600; }
.wz-steps .active .wz-num { background: var(--primary); color: var(--primary-text); }
.wz-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-choices button { padding: 6px 14px; background: none; color: var(--text); border-color: var(--line-strong); }
.wz-choices button.active { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.wz-review { display: grid; margin: 0; }
.wz-review div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.wz-review dt { color: var(--muted); font-size: 13px; }
.wz-review dd { margin: 0; }
.wz-review .link { margin-left: 6px; font-size: 12px; }
@media (max-width: 600px) { .wz-review div { grid-template-columns: 1fr; gap: 2px; } }

input, select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: var(--surface);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input[type="radio"] { width: auto; }

.source-switch { display: flex; gap: 20px; margin-bottom: 12px; }
.source-switch label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.with-swatch { display: flex; align-items: center; gap: 8px; }

.actions { display: flex; gap: 8px; margin-top: 16px; }
/* Кнопки (Ventriloc): главная — графитовая заливка, второстепенная — контур; прямые углы. Оранжевый — не заливка. */
button {
  padding: 7px 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-btn);
  background: var(--primary);
  color: var(--primary-text);
  cursor: pointer;
}
button.secondary { background: none; color: var(--text); border-color: var(--line-strong); }
button:disabled { opacity: 0.6; cursor: default; }

.hint { color: var(--muted); font-size: 12px; min-height: 1em; }

.search { position: relative; }
.search-results {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
}
.search-results li { padding: 6px 10px; cursor: pointer; }
.search-results li:hover, .search-results li:focus { background: var(--hover); outline: none; }
.search-results li.empty { color: var(--muted); cursor: default; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: var(--hover); }
tfoot td { font-weight: 600; border-bottom: none; }
td.empty { color: var(--muted); text-align: center; padding: 24px; }
.sub { color: var(--muted); font-size: 12px; font-weight: normal; }
.nowrap { white-space: nowrap; }
.tree { color: var(--muted); }

.swatch {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -1px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.row-actions { white-space: nowrap; text-align: right; }

/* Ссылка — с оранжевым подчёркиванием (единственный акцент) */
.link {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  text-align: left;
  text-decoration: underline 1px var(--accent);
  text-underline-offset: 3px;
}
.link:hover { color: var(--accent); }

a.button {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  color: var(--text);
  text-decoration: none;
}
a.button:hover { background: var(--hover); }

/* --- Дашборд армии --- */

.stats { display: flex; gap: 24px; flex-wrap: wrap; margin: 0; }
.army-stats { margin-bottom: 20px; }
.stats div { display: flex; flex-direction: column; }
.stats dt { color: var(--muted); font-size: 12px; }
.stats dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
/* Чьи цифры в строке над армией: «Вся · Армия» или «Взвод · ШТ-600» */
.stats .stats-scope { padding-right: 24px; border-right: 1px solid var(--line); }
.stats .stats-scope dd { font-size: 18px; line-height: 1.2; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.page-footer { padding: 0 24px 32px; margin-top: -24px; }
.legend > span { display: inline-flex; align-items: center; }

.army { --cell: 22px; --indent: 24px; overflow-x: auto; overflow-y: hidden; } /* своей вертикальной прокрутки нет: анимация плиток не должна её вызывать */
.unit {
  margin-left: calc(var(--depth) * var(--indent));
  padding: 2px 0 6px 12px; /* без вертикальных линий слева — уровень виден по отступу (замечание автора 23.10.2026) */
}
/* Карточки и сведения в один ряд: сведения — справа от карточек (army.js, unitBody) */
.unit-body { display: flex; align-items: flex-start; gap: 6px 18px; }
.unit-body .unit-grid { flex: none; }
.unit-body .unit-foot { flex: 1 1 220px; min-width: 0; margin: 0; }
.unit-body.no-grid { justify-content: flex-end; }
.unit-body.no-grid .unit-foot { flex: 0 1 auto; margin: 0 0 4px; text-align: right; }
@media (max-width: 1100px) { .unit-body { flex-wrap: wrap; } .unit-body .unit-foot { margin-left: 16px; } }
.unit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 6px; }
.unit-name { font-weight: 600; }
.army-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.army-toolbar .segmented { margin-bottom: 0; }

/* Строка соединения: колонки выровнены по правому краю — отступ иерархии их не сдвигает */
.army { max-width: 1180px; }
.army-columns, .unit.unit-row .unit-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px 118px 88px 118px 92px;
  gap: 0;
  align-items: stretch;
}
.army-columns { padding: 0 8px 6px 22px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.army-columns span:not(:first-child) { text-align: right; }
.army-columns span:not(:first-child), .unit.unit-row .unit-head .num { padding: 0 8px; border-left: 1px solid var(--line); }
.unit.unit-row .unit-head { margin-bottom: 4px; padding: 6px 8px; border-radius: 6px; background: var(--row); }
.unit.unit-row .unit-head:hover { background: var(--hover); }
.unit.unit-row .unit-title { align-self: center; }
.unit.unit-row .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.unit-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.unit-title .unit-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.caret-button { width: 16px; padding: 0; border: none; background: none; color: var(--muted); flex: none; }
.caret-space { width: 16px; flex: none; }
.staff-bar { display: block; height: 4px; margin-top: 3px; margin-left: auto; width: 100%; overflow: hidden; border-radius: 2px; background: var(--line); }
.staff-bar > span { display: block; height: 100%; background: var(--bar); }
.staff-bar.over > span { background: var(--warn); }
table.compact th, table.compact td { padding: 4px 6px; }
.unit.collapsed { padding-bottom: 4px; }
.unit-foot { margin-top: 4px; margin-left: 16px; font-size: 12px; color: var(--muted); }
.unit-note { font-style: italic; }
.badge { padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; font-size: 11px; color: var(--muted); }
.unit-count, .unit-value { font-variant-numeric: tabular-nums; color: var(--muted); }
.no-data { color: var(--muted); } /* неизвестный доход — прочерк (app.js, noData) */

.cell-row { display: flex; align-items: center; gap: 12px; margin-bottom: 3px; }
.cells { display: grid; grid-template-columns: repeat(10, var(--cell)); gap: 3px; flex: none; }
.cell {
  width: var(--cell);
  height: var(--cell);
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background: var(--c);
}
.cell:hover, .cell:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.cell.vacancy, .swatch.hatch {
  background: repeating-linear-gradient(135deg, var(--hatch) 0 1.5px, transparent 1.5px 5px);
  border-color: var(--hatch);
}
.cell.recruit, .swatch.recruit { background: var(--surface); border: 1px dashed var(--muted); }
/* Боец — карточка (army.js, fighterCell; решение автора 22.10.2026): тикер, цена, результат от покупки, за день */
.army { --card-w: 84px; }
.cells.fighters { grid-template-columns: repeat(10, var(--card-w)); gap: 4px; }
/* Вид — как у плиток «Армии» (замечания автора 23.10.2026): квадрат одного цвета — цвета класса актива бойца,
   текст тёмный или светлый по яркости (army.js, textOn), без скруглений и рамки */
.cell.fighter { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: var(--card-w); height: var(--card-w); padding: 6px 5px 6px 7px; overflow: hidden; border: none; border-radius: 0; background: var(--c); color: var(--fg, #fff); box-shadow: none; font-size: 11px; line-height: 1.25; text-align: left; }
.cell.fighter:hover, .cell.fighter:focus-visible { outline: 3px solid var(--text); outline-offset: -3px; }

.cell.fighter .f-ticker { max-width: 100%; overflow: hidden; font-size: 12px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.cell.fighter .f-price { max-width: 100%; overflow: hidden; opacity: 0.8; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cell.fighter .f-result { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cell.fighter .f-day { opacity: 0.8; font-variant-numeric: tabular-nums; }
/* Боец в два нажатия (army.js, flipOrOpen; просьба автора 23.10.2026): первое — поворот, на обороте подробности, второе —
   карточка. Цвет — на сторонах, а не на кнопке: при повороте за ней не видно квадрата. */
.cell.fighter.flip-card { display: block; padding: 0; background: none; perspective: 500px; }
.f-flip { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1); }
.cell.fighter.flipped .f-flip { transform: rotateY(180deg); }
.f-face, .f-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 6px 5px 6px 7px; box-sizing: border-box; overflow: hidden; background: var(--c); color: var(--fg, #fff); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* Оборот — тот же цвет и шрифт, что лицо (замечание автора 24.10.2026: «ничего не видно»): затемнение на светлых
   классах съедало тёмный текст */
.f-back { justify-content: flex-start; gap: 1px; transform: rotateY(180deg); }
.f-back-head { display: flex; align-items: baseline; justify-content: space-between; gap: 3px; width: 100%; margin-bottom: 1px; }
.f-back-head .f-ticker { min-width: 0; }
.f-slot { flex: none; font-size: 10px; opacity: 0.8; font-variant-numeric: tabular-nums; }
.f-line { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cell.fighter.flip-card:hover .f-face, .cell.fighter.flip-card:focus-visible .f-face, .cell.fighter.flip-card:hover .f-back, .cell.fighter.flip-card:focus-visible .f-back { box-shadow: inset 0 0 0 3px var(--text); }
.cell.fighter.flip-card:hover, .cell.fighter.flip-card:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .f-flip { transition: none; } }
/* Вакансия в карточке и окно новой позиции поверх «Армии» (army.js, openVacancy, openPositionDialog) */
.card-swatch.vacancy-swatch { background: repeating-linear-gradient(135deg, var(--vc, var(--hatch)) 0 1.5px, transparent 1.5px 6px); border-color: var(--vc, var(--hatch)); }
#position-dialog { width: min(820px, calc(100vw - 32px)); }
#position-dialog #position-form { margin: 0; padding: 16px 20px; border: none; border-radius: 0; background: none; box-shadow: none; }
#position-dialog #position-form-title { display: none; }
/* Вакансия — штриховкой (по плану — цвета класса будущей бумаги) */
.cell.fighter.vacancy { justify-content: flex-start; padding-left: 7px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--vc, var(--hatch)) 55%, transparent) 0 1.5px, transparent 1.5px 7px); border: 1px solid color-mix(in srgb, var(--vc, var(--hatch)) 70%, transparent); box-shadow: none; color: var(--text); }
.cell.fighter.vacancy .f-ticker { padding: 0 2px; background: var(--bg, var(--surface)); font-size: 11px; }
@media (max-width: 700px) {
  .cells.fighters { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cell.fighter { width: auto; }
}
.unit.recruits { border-left-style: dashed; margin-bottom: 8px; }
.unit.reserve-block { border-left-style: dotted; margin-bottom: 8px; }
.excess-notice { margin-bottom: 12px; padding: 8px 12px; border: 1px solid var(--warn); border-radius: 6px; }
.excess-title { margin-bottom: 4px; font-weight: 600; color: var(--warn); }
.excess-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 3px 0; }
.grid-note { margin-top: 4px; }
.unit-grid { margin-left: 16px; }
.empty-note { color: var(--muted); }
.section-title { font-size: 14px; margin: 16px 0 8px; }
.field.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
.field.check input { width: auto; }
.copy-preview { min-height: 0; }

/* --- План --- */

.plan-item { display: grid; grid-template-columns: 1fr 140px 80px auto; gap: 8px; align-items: center; margin-top: 6px; }
.plan-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plan-total { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.flow-item { display: grid; grid-template-columns: 1fr 130px 140px 120px 130px 140px auto; gap: 8px; align-items: center; margin: 6px 0; }
.invisible { visibility: hidden; }
button.small { padding: 2px 10px; font-size: 12px; }
.plan-unit { margin-bottom: 14px; max-width: 820px; }
.plan-unit h3 { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.plan-line { display: grid; grid-template-columns: 1fr auto 70px auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.plan-line .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .plan-item { grid-template-columns: 1fr 70px auto; }
  .plan-item select { grid-column: 1 / -1; grid-row: 2; }
  .plan-line { grid-template-columns: 1fr auto; }
  .flow-item { grid-template-columns: 1fr 1fr; }
}

/* --- Календарь --- */

.segmented { display: inline-flex; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.segmented button { border: none; border-radius: 0; background: none; color: var(--muted); padding: 6px 14px; }
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button.active { background: var(--hover); color: var(--text); font-weight: 600; }
#calendar-list { max-width: 720px; }
.cal-day { margin-bottom: 14px; }
.cal-day h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cal-event {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text);
  text-align: left;
}
.cal-event:hover { background: var(--hover); }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gain); }
.cal-event.out .cal-dot { background: var(--danger); }
.cal-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* --- Карточка бойца --- */

.card-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
}
.card-dialog::backdrop { background: var(--backdrop); }
.card-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-swatch { flex: none; width: 28px; height: 28px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; background: var(--c); }
.card-title { min-width: 0; }
.card-title h2 { margin: 0 0 2px; font-size: 18px; }
.card-close { margin-left: auto; }
.card-fighters { padding: 12px 20px 0; }
.card-big { font-size: 32px; font-variant-numeric: tabular-nums; }
.card-section { padding: 12px 20px; }
.card-section h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--line); }
.gain { color: var(--gain); }
.loss { color: var(--danger); }
.icon {
  padding: 2px 8px;
  border: none;
  background: none;
  color: var(--muted);
}
.icon:hover { color: var(--text); background: var(--hover); }
.icon.danger:hover { color: var(--danger); }

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: 480px;
  padding: 10px 16px;
  border-radius: var(--radius-card);
  background: var(--text);
  color: var(--bg);
}
.toast.error { background: var(--danger); color: var(--primary-text); }

@media (max-width: 640px) {
  .top, .tabs, main { padding-left: 16px; padding-right: 16px; }
  .top { justify-content: space-between; gap: 12px; }
  .summary { order: 3; flex-basis: 100%; gap: 8px 20px; }
  .summary .summary-group { gap: 8px 20px; }
  .army { --cell: 20px; --indent: 12px; }
  .army-columns { display: none; }
  .unit.unit-row .unit-head { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; }
  .unit.unit-row .unit-title { grid-column: 1 / -1; }
  .unit.unit-row .num { text-align: left; }
  .unit.unit-row .unit-head .num { border-left: none; padding: 0; }
  .unit.unit-row .num::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); }
  .page-footer { padding: 0 16px 24px; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: 6px; }
  .tab { padding: 16px; }
}

/* --- Сегодня и потоки --- */

.today-block { margin-bottom: 20px; max-width: 820px; }
.pending-group { padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.pending-head { margin-bottom: 4px; }
.pending-head .badge { margin-left: 8px; }
.pending-row { display: grid; grid-template-columns: 100px 130px auto auto 1fr; gap: 8px; align-items: center; padding: 3px 0; }
.pending-all { margin-top: 6px; }
.task-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 0; }
.task-row.done > span:not(.task-counter) { color: var(--muted); text-decoration: line-through; }
.task-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.goal-row { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr auto; gap: 12px; align-items: center; padding: 4px 0; }
.goal-row .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress { height: 6px; border-radius: 0; background: var(--surface-3); overflow: hidden; }
.progress-bar { height: 100%; background: var(--muted); }
.progress-bar.done { background: var(--gain); }
.flow-card h2 .badge { margin-left: 4px; font-weight: normal; }
.flow-card h2 .sub { font-weight: normal; }
.flow-part { margin-top: 12px; }
.flow-part h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.flow-part .stats { margin-bottom: 8px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.inline-form > input, .inline-form > select { width: auto; }
.inline-form input:not([type]) { flex: 1 1 220px; }
.inline-form input[type="number"] { width: 130px; }
.pending-row input { padding-top: 4px; padding-bottom: 4px; }
.item-row { display: grid; grid-template-columns: 1fr 100px 200px auto; gap: 8px 12px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.item-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.item-actions { display: flex; gap: 6px; justify-content: flex-end; }
.sold-items { margin-top: 8px; }
.sold-items summary { cursor: pointer; color: var(--muted); }
.sold-items .item-row { grid-template-columns: 1fr 100px 200px; }
.pool-line { color: var(--muted); }
.expand-line { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .pending-row { grid-template-columns: 90px 1fr auto auto; }
  .goal-row { grid-template-columns: 1fr auto; }
  .goal-row .progress { grid-column: 1 / -1; grid-row: 2; }
  .item-row { grid-template-columns: 1fr auto; }
  .item-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.flow-history summary { cursor: pointer; color: var(--muted); }
.history-month { max-width: 640px; margin-top: 6px; }
.history-head { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.history-row { display: grid; grid-template-columns: 100px 110px 1fr; gap: 12px; padding: 3px 0; }
.history-row .num, .history-head .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Превью армии в стиле Metro: плоские плитки, крупные цифры, мини-строй --- */

.metro { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); grid-auto-rows: minmax(132px, auto); grid-auto-flow: dense; gap: 8px; max-width: 1180px; margin-bottom: 16px; }
.metro-strip { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1180px; margin-bottom: 16px; }
.metro-tile.wide { flex: 1 1 320px; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.metro-tile.wide .metro-foot { margin: 0 0 0 auto; }
.metro-tile.wide .metro-big { font-size: 26px; }
.metro-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; overflow: hidden; background: var(--tile); color: var(--tile-text); cursor: pointer; box-shadow: inset 3px 0 0 var(--mark, var(--tile-mark)); }
.metro-tile.scale-squad { grid-column: span 1; grid-row: span 1; }
/* Плитка подразделения — размер по уровню, у всех одинаковый (замечание автора 23.10.2026: «Единообразие!»):
   ширина — колонки сетки, высота — из пропорции; лишнее обрезается, а не растягивает ряд. Отделение и рота —
   квадраты, взвод — два квадрата в ряд, батальон — четыре на два. */
.metro-tile.unit-tile { position: relative; gap: 3px; }
/* «+» на плитке — раскрыть следующий уровень обзора (army.js, overviewLevel; решение автора 23.10.2026) */
.tile-expand { position: absolute; z-index: 2; right: 4px; bottom: 4px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 0; background: transparent; color: inherit; }
.tile-expand:hover, .tile-expand:focus-visible { background: color-mix(in srgb, currentColor 18%, transparent); }
/* Шеврон вместо «+» (решение автора 23.10.2026): вниз — раскрыть, вверх — свернуть */
.tile-expand .chevron { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease-out; }
.tile-expand.open .chevron { transform: translateY(2px) rotate(-135deg); }
.metro-tile.has-expand .metro-foot { padding-right: 24px; }
/* Анимации плиток, как в Windows Phone (army.js; решение автора 23.10.2026): лицо и оборот, подглядывание,
   турникет при входе, наклон при нажатии; при «уменьшать движение» — без анимаций */
.metro-tile, .dk-tile { transition: transform 0.12s ease-out; }
.tile-face { display: flex; flex-direction: column; gap: 3px; min-height: 0; height: 100%; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
.metro-tile.roomy .tile-face { gap: 4px; }
.tile-back { position: absolute; left: 0; right: 0; top: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; overflow: hidden; background: inherit; box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.14), inset 3px 0 0 var(--mark, var(--tile-mark)); font-size: 12px; line-height: 1.3; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
.tile-back .metro-name { margin-bottom: 2px; font-size: 14px; }
.tile-back-line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.metro-tile.peek .tile-face { transform: translateY(calc(-100% - 20px)); }
.metro-tile.peek .tile-back { transform: translateY(-100%); }
.metro-tile.enter { transform-origin: left center; animation: tile-turnstile 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes tile-turnstile { from { opacity: 0; transform: perspective(900px) rotateY(70deg); } to { opacity: 1; transform: none; } } /* дальний край уходит вглубь — плитка не вылезает за ряд */
@media (prefers-reduced-motion: reduce) { .metro-tile, .dk-tile, .tile-face, .tile-back { transition: none; } .metro-tile.enter { animation: none; } }
/* Подчинённые раскрытой плитки — ряд сразу под рядом (army.js, overviewLevel): без подложки и каймы, «только фон и
   только плитки» (замечание автора 24.10.2026); раскрытая — по шеврону вверх */
/* На «Армии» колонка — ровно 140 px: плитка одного уровня одинаковая и в ряду, и среди подчинённых */
#army .metro, #enemy-tiles .metro { grid-template-columns: repeat(auto-fill, 140px); } /* «Противник» — как «Армия» (24.10.2026) */
/* Квадраты и прямоугольники выше батальона — по колонкам и рядам сетки, чтобы плитка уровня была одна на всех */
.metro-tile.unit-tile.scale-regiment { aspect-ratio: 1 / 1; }
.metro-tile.unit-tile.scale-brigade { aspect-ratio: 3 / 2; }
.metro-tile.unit-tile.add-tile { grid-column: span 1; text-align: center; }
.metro-branch { margin: -8px 0 8px; }
.metro-branch .metro { margin-bottom: 8px; }
.metro-branch .metro-branch { margin: 0; }
.metro-tile.unit-tile:not(.roomy) { padding: 8px 12px; }
.metro-tile.unit-tile .metro-foot { line-height: 1.3; }
.metro-tile.unit-tile.scale-squad, .metro-tile.unit-tile.scale-company { aspect-ratio: 1 / 1; }
.metro-tile.unit-tile.scale-platoon { aspect-ratio: 2.05 / 1; }
.metro-tile.unit-tile.scale-battalion { aspect-ratio: 2.03 / 1; }
.metro-tile.unit-tile:not(.roomy) .metro-big { font-size: 24px; line-height: 1; }
.metro-tile.unit-tile .metro-flag { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.metro-tile.scale-squad .metro-kind { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.metro-tile.scale-squad .metro-count { flex-wrap: nowrap; }
.metro-tile.scale-squad .metro-rank { font-size: 11px; }
.metro-tile.scale-platoon { grid-column: span 2; grid-row: span 1; }
.metro-tile.scale-company { grid-column: span 2; grid-row: span 2; }
.metro-tile.scale-battalion { grid-column: span 4; grid-row: span 2; }
.metro-tile.scale-regiment { grid-column: span 4; grid-row: span 4; }
.metro-tile.scale-brigade { grid-column: span 6; grid-row: span 4; }
.metro-tile.scale-division { grid-column: 1 / -1; grid-row: span 4; }
.metro-tile.roomy { padding: 14px 16px; }
@media (max-width: 1240px) { .metro-tile.scale-brigade { grid-column: span 4; } }
@media (max-width: 720px) { .metro-tile.scale-battalion, .metro-tile.scale-regiment, .metro-tile.scale-brigade { grid-column: 1 / -1; } }
.metro-tile.child { background: var(--tile-child); }
.metro-tile.empty { background: var(--tile-empty); color: var(--tile-empty-text); }
.metro-tile.warn { background: var(--tile-warn); --mark: var(--tile-warn-mark); }
.metro-tile.danger { background: var(--tile-danger); --mark: var(--tile-danger-mark); }
.metro-tile.reserve { background: var(--tile-reserve); }
.metro-tile:hover, .metro-tile:focus-visible { outline: 3px solid var(--text); outline-offset: -3px; }
.metro-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.metro-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.metro-tile.roomy .metro-name { font-size: 20px; }
.metro-kind { flex: none; font-size: 11px; opacity: 0.8; }
.metro-count { font-size: 13px; font-variant-numeric: tabular-nums; }
.metro-big { font-size: 26px; line-height: 1.1; }
.metro-tile.roomy .metro-big { font-size: 44px; }
.mini-grid { --mc: 9px; display: grid; grid-template-columns: repeat(var(--cols, 10), var(--mc)); gap: 1px; align-content: start; }
.mini-stack { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3px 6px; }
.metro-tile.roomy .mini-stack { gap: 5px 10px; }
.metro-tile.scale-company .mini-stack { flex-direction: column; }
.mini-block { display: flex; align-items: flex-start; gap: 6px; }
.mini-rows { display: flex; flex-direction: column; gap: 2px; }
.mini-label { width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 10px; opacity: 0.85; }
.metro-tile.scale-battalion .mini-grid { --mc: 9px; } /* как у роты, взвода и отделения — клетки одного размера */
.metro-tile.scale-regiment .mini-grid { --mc: 8px; }
.metro-tile.scale-brigade .mini-grid, .metro-tile.scale-division .mini-grid { --mc: 5px; }
.mini-cell { width: var(--mc); height: var(--mc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.mini-cell.empty { background: color-mix(in srgb, currentColor 16%, transparent); box-shadow: none; }
.metro-foot { margin-top: auto; font-size: 12px; line-height: 1.4; }
/* Узкая плитка (отделение): вид — под названием, звание — под числом бойцов, ничего не обрезается */
.metro-tile.scale-squad .metro-head { flex-direction: column; align-items: flex-start; gap: 0; }
.metro-count { flex-wrap: wrap; row-gap: 0; }
.metro-count > span:first-child { white-space: nowrap; }
.metro-money { font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.9; white-space: nowrap; overflow: hidden; }
.metro-flag { font-weight: 600; }
.metro-tile .no-data { color: inherit; }

/* Календарь: пополнения по плану потоков — серым */
.plan-text { color: var(--muted); }
.cal-event.plan .cal-dot { background: var(--muted); }
.cal-event.plan .cal-title { color: var(--muted); }

/* --- Потоки: плитки Metro и карточка потока --- */

.flow-group-title { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.metro-tile.flow-tile { grid-column: span 2; background: var(--tile-flow); --mark: var(--tile-flow-mark); }
.metro-tile.flow-tile.open { outline: 3px solid var(--text); outline-offset: -3px; }
.tile-plus { flex: none; width: 26px; height: 26px; padding: 0; border: 1px solid color-mix(in srgb, currentColor 50%, transparent); border-radius: 0; background: none; color: inherit; font-size: 16px; line-height: 1; }
.tile-plus:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.tile-bar { height: 4px; margin-top: auto; background: color-mix(in srgb, currentColor 25%, transparent); }
.tile-bar > span { display: block; height: 100%; background: currentColor; }
.tile-quick { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.tile-quick input { background: var(--surface); color: var(--text); border-color: transparent; }
.metro-tile.add-tile { grid-column: span 2; align-items: center; justify-content: center; border: 1px dashed var(--line); background: none; color: var(--muted); }
.metro-tile.add-tile:hover { background: var(--hover); }
.flow-open { max-width: 1180px; margin: -8px 0 16px; padding: 12px 16px; border: 1px solid var(--line); background: var(--surface); }
.flow-open-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.flow-open-head .icon { margin-left: auto; }
.flow-section { border-top: 1px solid var(--line); padding: 6px 0; }
.flow-discipline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--line); }
/* «Дисциплина»: чек-даты и дела одного снабжения — подсветка при переходе из карточки или «Штаба» */
.discipline-flow.focus { animation: discipline-focus 2.4s ease-out; }
@keyframes discipline-focus { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .discipline-flow.focus { animation: none; outline: 2px solid var(--accent); } }
.flow-section summary { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; cursor: pointer; }
.flow-section-body { padding: 6px 0 4px; }
.metro-count { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.metro-rank { font-size: 13px; font-weight: 500; white-space: nowrap; }
.metro-tile.roomy .metro-big { font-size: 38px; }
.brand-rank { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.metro-tile.assault { background: var(--tile-assault); --mark: var(--tile-assault-mark); }
.assault-text { color: var(--assault-text); font-weight: 600; }
.metro-tile .assault-text, .metro-tile .metro-flag { color: inherit; }
.price-input { width: 120px; }

/* --- Противник плитками --- */

.metro-tile.enemy { background: var(--tile-enemy); --mark: var(--tile-enemy-mark); }
.metro-tile.enemy.mortgage { background: var(--tile-enemy-mortgage); }
.metro-tile.enemy.expense { background: var(--tile-enemy-expense); }
.metro-tile.enemy.purchase { background: var(--tile-enemy-purchase); }
.metro-tile.enemy-next { background: var(--tile-enemy-next); --mark: var(--tile-enemy-next-mark); }
.mini-cell.enemy-cell { background: color-mix(in srgb, currentColor 30%, transparent); box-shadow: none; }
.mini-cell.enemy-cell.next { background: var(--cell-next); }
.mini-cell.enemy-cell.interest { background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.metro-tile.enemy .mini-cell.empty, .metro-tile.enemy-next .mini-cell.empty { background: color-mix(in srgb, currentColor 8%, transparent); }
/* Строй противника (enemy.js, formationGrid): клетка — 1 БЕ, отделение — строка из 10 клеток, взвод и рота —
   строки столбиком, дальше уровни чередуются (ряд/столбик); чем старше уровень, тем шире промежуток между частями */
.metro-tile .mini-stack.fm { --mc: 7px; flex-direction: row; flex-wrap: wrap; }
.metro-tile.scale-company .mini-stack.fm { --mc: 10px; }
.metro-tile.scale-brigade .mini-stack.fm { --mc: 5px; }
.metro-tile.scale-division .mini-stack.fm { --mc: 4px; }
.fm-squad { display: grid; grid-template-columns: repeat(var(--cols, 10), var(--mc)); gap: 1px; }
.fm-unit { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fg, 1px); }
.fm-unit.fm-row { flex-direction: row; }
.fm-platoon { --fg: 1px; }
.fm-company { --fg: 3px; }
.fm-battalion { --fg: 4px; }
.fm-regiment { --fg: 6px; }
.fm-brigade { --fg: 8px; }
.fm-division { --fg: 10px; }
.fm-corps { --fg: 12px; }
.fm-army { --fg: 14px; }

/* Окна усиления и изъятия: списки с отметками */
.pick-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.pick-row { display: grid; grid-template-columns: auto 1fr 130px 130px; gap: 8px; align-items: center; }
.pick-row input[type="checkbox"] { width: auto; }
.pick-list .pick-row:only-child, #reinforce .pick-row { grid-template-columns: auto 1fr 130px; }

/* Варианты боя с долгом */
.metro-tile.scenarios { grid-column: span 4; grid-row: span 2; cursor: default; background: var(--tile-scenarios); color: var(--text); }
.metro-tile.scenarios:hover { outline: none; }
.scenario-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.scenario-col { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.scenario-title { font-weight: 600; font-size: 13px; }
.scenario-pay .metro-big { font-size: 22px; }
.scenario-gain { margin-top: 2px; color: var(--gain); font-weight: 600; }
.metro-tile.scenarios input[type="range"] { width: 100%; margin-top: 6px; padding: 0; }
@media (max-width: 1100px) { .metro-tile.scenarios { grid-column: 1 / -1; grid-row: auto; } }

/* Построение противника деревом */
.enemy-structure { max-width: 820px; margin-top: 8px; }
.enemy-tree-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) 130px 120px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.enemy-tree-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.enemy-tree-row .staff-bar { margin: 0; }
.enemy-tree-row .staff-bar > span { background: var(--enemy); }
.enemy-tree-row.fight { background: var(--enemy-soft); }
.fight-badge { color: var(--enemy); font-weight: 600; }
.tree-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.structure-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.structure-head h2 { margin: 0 auto 0 0; }

/* Позиции: одна строка на инструмент, записи по соединениям — под ней */
tr.group-open > td { border-bottom-color: transparent; }
tr.lot-row > td { padding-top: 4px; padding-bottom: 4px; background: var(--surface); font-size: 13px; }

/* --- Поток-0: бюджет семьи --- */
.metro-tile.budget-tile { background: var(--tile-budget); }
.metro-tile.budget-tile.deficit { background: var(--tile-budget-deficit); --mark: var(--tile-budget-deficit-mark); }
.metro-tile.budget-tile.open { outline: 3px solid var(--text); outline-offset: -3px; }
.budget-nav { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.budget-card .stats { margin: 8px 0 4px; }
.budget-section { border-top: 1px solid var(--line); padding: 6px 0; }
.budget-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 110px minmax(80px, 160px) auto; gap: 8px 12px; align-items: center; padding: 3px 0; }
.budget-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.budget-head { color: var(--muted); font-size: 13px; }
.budget-head b { color: var(--text); }
.budget-total { border-top: 1px dashed var(--line); font-weight: 600; }
.budget-sub { color: var(--muted); font-size: 13px; padding: 0; }
.budget-sub > :first-child { padding-left: 14px; }
.budget-plan { width: 110px; text-align: right; }
.budget-entry, .budget-entries { margin: 0 0 6px 16px; }
.budget-due { margin: 6px 0; font-weight: 600; }
.budget-fact { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); }
.budget-fact h3 { margin: 0 0 4px; font-size: 15px; }
.budget-fact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; margin: 6px 0; }
.budget-fact-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.budget-fact-row input { width: 130px; }
.budget-new { margin-top: 8px; }
@media (max-width: 640px) {
  .budget-row { grid-template-columns: minmax(0, 1fr) 96px 80px; }
  .budget-row > :nth-child(4), .budget-row > :nth-child(5) { grid-column: 1 / -1; }
  .budget-plan { width: 90px; }
}
.progress-bar.over { background: var(--danger); }
.budget-card .flow-open-head { flex-wrap: wrap; }
.budget-card .flow-open-head .metro-name { flex: none; }
.metro-tile.budget-tile .metro-kind { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
  .budget-nav { order: 3; width: 100%; justify-content: space-between; margin-left: 0; }
}

/* --- Графика потоков: схема снабжения и лента дисциплины --- */
.supply-card { max-width: 1180px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); }
.supply-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 6px; }
.supply-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.supply-box { min-height: 60px; }
.supply-svg { display: block; overflow: visible; }
.supply-label { font-size: 12px; fill: var(--text); }
.supply-label.deficit { fill: var(--danger); font-weight: 600; }
.supply-sum { fill: var(--muted); }
.supply-node.open { cursor: pointer; }
.supply-node.open:hover rect { stroke: var(--text); stroke-width: 1.5; }
.supply-link:hover { stroke-opacity: 0.7; }
.ribbon { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.ribbon-title { margin-bottom: 4px; font-size: 13px; }
.ribbon-row { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 170px; gap: 4px 10px; align-items: center; padding: 2px 0; }
.ribbon-row.bare { grid-template-columns: minmax(0, 1fr) auto; }
.ribbon-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ribbon-cells { display: grid; grid-template-columns: repeat(var(--days, 30), minmax(0, 1fr)); gap: 2px; }
.ribbon-sum { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc { position: relative; display: inline-block; height: 16px; min-width: 6px; border-radius: 0; background: var(--surface-3); }
.rc-got { background: var(--ok); }
.rc-ok { background: transparent; box-shadow: inset 0 0 0 2px var(--ok); }
.rc-wait { background: transparent; box-shadow: inset 0 0 0 2px var(--wait); }
.rc-miss { background: var(--miss); }
.rc-plan { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); }
.rc-task::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ok); }
.rc-got.rc-task::after { background: var(--ok-soft); }
.rc-today { outline: 2px solid var(--text); outline-offset: 1px; }
.ribbon-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.ribbon-legend .rc { width: 14px; height: 12px; margin-right: 5px; vertical-align: -2px; }
@media (max-width: 640px) {
  .ribbon-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ribbon-row .ribbon-cells { grid-column: 1 / -1; grid-row: 2; }
}
.supply-tools .segmented { margin-bottom: 0; }
.supply-tools .segmented button { padding: 3px 10px; }
.metro-tile.enemy.card { background: var(--tile-enemy-card); }
.card-info { max-width: 1180px; margin: -8px 0 16px; padding: 8px 12px; border-left: 3px solid var(--card-info-mark); background: var(--surface); font-size: 13px; line-height: 1.5; }

/* Плечо брокера: в его пределах — спокойно, сверх — тревога */
.summary .danger dd, .summary .danger dt { color: var(--danger); font-weight: 700; }
.margin-text { color: var(--warn); }
/* Дисциплина: голос соединения, чек-лист дня, темп к цели */
.voice { margin: 0 0 10px; padding: 8px 12px 6px; border: 1px solid var(--line); background: var(--surface); box-shadow: inset 3px 0 0 var(--voice, var(--muted)); border-radius: var(--radius-card); }
.voice-ok { --voice: var(--ok); }
.voice-remind { --voice: var(--accent); }
.voice-warn { --voice: var(--warn); }
.voice-alarm { --voice: var(--danger); border: 2px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.voice-head { display: flex; align-items: baseline; gap: 8px; }
.voice-level { font-size: 12px; font-weight: 600; color: var(--voice); text-transform: lowercase; }
.voice-text { margin: 4px 0 6px; font-size: 13px; }
.voice-alarm .voice-text { font-weight: 600; }
.checklist { padding: 6px 0 2px; border-top: 1px solid var(--line); }
.checklist-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.checklist-head .link { font-weight: 600; }
.pace { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 4px 0; max-width: 640px; }
.pace .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pace-bar { position: relative; height: 8px; background: var(--surface-3); }
.pace-fact { display: block; height: 100%; background: var(--muted); }
.pace-fact.done { background: var(--gain); }
.pace-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); }
.task-counter { display: inline-flex; align-items: center; gap: 6px; }
.pips { display: inline-flex; align-items: center; gap: 3px; }
.pips .num { margin-left: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pip { display: inline-block; width: 9px; height: 9px; border: 1.5px solid var(--muted); border-radius: 50%; }
.pip.on { background: var(--gain); border-color: var(--gain); }
.task-line .item-actions { display: inline-flex; gap: 4px; }
.inline-form input.narrow { width: 64px; }
.metro-tile.flow-tile.warn { background: var(--tile-warn); --mark: var(--tile-warn-mark); }
.metro-tile.flow-tile.danger { background: var(--tile-danger); --mark: var(--tile-danger-mark); }
@media (max-width: 640px) {
  .pace { grid-template-columns: 1fr auto; }
  .pace-bar { grid-column: 1 / -1; }
}

.margin-alarm { border: 2px solid var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); padding: 10px 12px; }
.margin-alarm .section-title { color: var(--danger); }
@keyframes alarm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 75, 74, 0.7); } 50% { box-shadow: 0 0 0 6px rgba(226, 75, 74, 0); } }
.metro-tile.alarm { animation: alarm-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .metro-tile.alarm { animation: none; outline: 3px solid var(--danger); outline-offset: -3px; } }

/* Налоги */
.tax-year { max-width: 820px; }
.tax-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.tax-row .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tax-total { font-weight: 600; border-bottom: none; padding-top: 8px; }
.sale-tax { color: var(--text); }
.month-picker { position: relative; display: inline-flex; }
.month-picker .segmented { margin-bottom: 0; }
.month-picker .segmented button { padding: 3px 10px; }
.month-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; width: 232px; padding: 10px; border: 1px solid var(--line-strong); background: var(--surface); }
.month-pop-year { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.month-pop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.month-pop-grid button { padding: 6px 0; border: 1px solid var(--line); background: none; color: var(--text); }
.month-pop-grid button:hover { background: var(--hover); }
.month-pop-grid button.now { font-weight: 700; }
.month-pop-grid button.active { background: var(--hover); border-color: var(--text); }
.budget-tile .tile-action { margin-left: auto; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.budget-past { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--hover); }
.budget-tile .tile-mode { font-size: 12px; font-weight: 600; opacity: 0.85; }

/* Купоны к подтверждению */
.coupon-row .num { margin-left: auto; font-variant-numeric: tabular-nums; }
.coupon-edit { margin: 0 0 6px 16px; }
.coupon-edit input[type="number"] { width: 110px; }
#p-tariff, .trade-form .field .sub { display: block; margin-top: 2px; font-size: 12px; }
.cargo-block { border-left: 3px solid var(--muted); padding-left: 10px; }
tr.pending-row > td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
tr.pending-row .pending-sum { color: var(--warn); font-variant-numeric: tabular-nums; }
tr.pending-row .row-actions { display: flex; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.metro-tile.cashback-tile { background: var(--tile-cashback); }
.metro-tile.cashback-tile.due { background: var(--tile-cashback-due); --mark: var(--tile-cashback-due-mark); }
.metro-tile.cashback-tile.open { outline: 3px solid var(--text); outline-offset: -3px; }
.cashback-card .flow-open-head { flex-wrap: wrap; }
.cashback-months { display: inline-flex; gap: 4px; }
.cashback-row .task-row { flex-wrap: wrap; }
.pick-form { flex-direction: column; align-items: stretch; }
.pick-row { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto; gap: 6px; max-width: 480px; }
.card-form, .promo-form { flex-wrap: wrap; }
.day-input { width: 56px; }
.deposit-form { margin: 6px 0 2px; font-size: 13px; color: var(--text); }
.deposit-form .inline-form { margin-top: 0; }
.deposit-hint { margin-top: 4px; }
.info-tip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; margin-left: 2px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; vertical-align: 1px; }
.info-tip:hover, .info-tip:focus-visible { color: var(--text); background: var(--line); }
.info-pop { position: fixed; z-index: 1000; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface); color: var(--text); font-size: 13px; font-weight: normal; line-height: 1.45; letter-spacing: 0; font-family: var(--font-ui); }
.info-pop .legend, .info-pop .ribbon-legend { margin: 0; }
.calendar-head { display: flex; align-items: center; gap: 6px; }
.calendar-head .calendar-past { margin-left: 14px; font-size: 13px; color: var(--muted); }
.calendar-dates { display: inline-flex; align-items: center; gap: 6px; }
.calendar-dates[hidden] { display: none; }
.calendar-dates input { width: auto; padding: 5px 8px; }
.settings-open { padding: 4px 10px; font-size: 16px; margin-left: auto; margin-right: 8px; }
.privacy-toggle { display: inline-flex; align-items: center; padding: 5px 9px; margin-left: auto; margin-right: 8px; }
.privacy-toggle[hidden] { display: none; }
.privacy-toggle:not([hidden]) + .settings-open { margin-left: 0; }
.settings-check { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; cursor: pointer; }
.settings-check input { width: auto; flex: none; margin: 0; }

/* Скрытие сумм от посторонних глаз (privacy.js). Блоки — в ⚙, клик по скрытому — показать на 10 секунд.
   Сумма в строке — под матовым стеклом (замечание автора 07.10.2026: вымарка в шапке «выглядит аляповато»);
   суммы шапки — одним прямоугольником размытия на весь блок (07.10.2026: «сделай одним блоком блюр»);
   плитка целиком — гриф «Секретно»: содержимое размыто и приглушено, штриховка и штамп (выбор автора 06.10.2026). */
:root.hide-header:not(.show-header) [data-private="header"],
:root.hide-places:not(.show-places) [data-private="places"],
:root.hide-reserve:not(.show-reserve) [data-private="reserve"],
:root.hide-army:not(.show-army) [data-private="army"],
:root.hide-enemy:not(.show-enemy) [data-private="enemy"],
:root.hide-budget:not(.show-budget) [data-private="budget"] {
  position: relative;
  width: fit-content;
  user-select: none;
  cursor: pointer;
}
:root.hide-header:not(.show-header) [data-private="header"]::after,
:root.hide-places:not(.show-places) [data-private="places"]::after,
:root.hide-reserve:not(.show-reserve) [data-private="reserve"]::after,
:root.hide-army:not(.show-army) [data-private="army"]::after,
:root.hide-enemy:not(.show-enemy) [data-private="enemy"]::after,
:root.hide-budget:not(.show-budget) [data-private="budget"]::after {
  content: "";
  position: absolute;
  inset: -3px -6px;
  border-radius: 6px;
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
  backdrop-filter: blur(6px) saturate(1.4);
  background: linear-gradient(135deg, color-mix(in srgb, var(--glass, var(--text)) 14%, transparent), color-mix(in srgb, var(--glass, var(--text)) 5%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px color-mix(in srgb, var(--glass, var(--text)) 10%, transparent);
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root.hide-header:not(.show-header) [data-private="header"],
  :root.hide-places:not(.show-places) [data-private="places"],
  :root.hide-reserve:not(.show-reserve) [data-private="reserve"],
  :root.hide-army:not(.show-army) [data-private="army"],
  :root.hide-enemy:not(.show-enemy) [data-private="enemy"],
  :root.hide-budget:not(.show-budget) [data-private="budget"] { filter: blur(6px); }
}
.metro-tile [data-private] { --glass: var(--tile-text); }
/* Крупные цифры плиток под тонким стеклом угадываются — стекло плотнее */
:root.hide-army:not(.show-army) .metro-count [data-private="army"]::after,
:root.hide-enemy:not(.show-enemy) .metro-count [data-private="enemy"]::after,
:root.hide-enemy:not(.show-enemy) .metro-big[data-private="enemy"]::after { -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
:root.hide-places:not(.show-places) [data-private-tile="places"],
:root.hide-reserve:not(.show-reserve) [data-private-tile="reserve"],
:root.hide-budget:not(.show-budget) [data-private-tile="budget"] { position: relative; user-select: none; cursor: pointer; }
:root.hide-places:not(.show-places) [data-private-tile="places"] > *,
:root.hide-reserve:not(.show-reserve) [data-private-tile="reserve"] > *,
:root.hide-budget:not(.show-budget) [data-private-tile="budget"] > * { filter: blur(6px); opacity: 0.45; }
:root.hide-places:not(.show-places) [data-private-tile="places"]::after,
:root.hide-reserve:not(.show-reserve) [data-private-tile="reserve"]::after,
:root.hide-budget:not(.show-budget) [data-private-tile="budget"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 9px, color-mix(in srgb, var(--tile-text) 6%, transparent) 9px 18px);
  pointer-events: none;
}
:root.hide-places:not(.show-places) [data-private-tile="places"]::before,
:root.hide-reserve:not(.show-reserve) [data-private-tile="reserve"]::before,
:root.hide-budget:not(.show-budget) [data-private-tile="budget"]::before {
  content: "СЕКРЕТНО";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: 3px 12px;
  border: 2px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.22em;
  white-space: nowrap;
  pointer-events: none;
}
[data-private-tile] > * { transition: filter 0.15s ease, opacity 0.15s ease; }
/* Шапка — один прямоугольник размытия поверх всех сумм, без штампа */
:root.hide-header:not(.show-header) [data-private-tile="header"] { position: relative; user-select: none; cursor: pointer; }
:root.hide-header:not(.show-header) [data-private-tile="header"] > * { filter: blur(7px); opacity: 0.7; }
:root.hide-header:not(.show-header) [data-private-tile="header"]::after {
  content: "";
  position: absolute;
  inset: -6px -12px;
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--text) 10%, transparent), color-mix(in srgb, var(--text) 3%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
  pointer-events: none;
}
:root.hide-places:not(.show-places) [data-private-tile="places"] .place-bar > span { visibility: hidden; } /* полоски выдали бы доли */
/* Клетки светлых классов (рубли, доллары) на светлой плитке — с обводкой, чтобы не терялись */
:root:not([data-theme="dark"]) .metro-tile .mini-cell:not(.empty):not(.enemy-cell) { box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .metro-tile .mini-cell:not(.empty):not(.enemy-cell) { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); } }
/* Карточки и блоки «Сегодня» — асимметричный угол (подпись Ventriloc) */
.today-block.margin-alarm, .excess-notice, .budget-fact, .flow-open, .supply-card { border-radius: var(--radius-card); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.settings-inputs { display: inline-flex; align-items: center; gap: 6px; }
.settings-input { width: 80px; }
.settings-input.wide { width: 240px; }
.settings-input.time { width: 110px; }

.settings-version { margin-left: auto; align-self: center; }
/* Вход по учётной записи (auth.js; решение автора 24.10.2026) */
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 16px; box-sizing: border-box; background: var(--bg); }
.login-card { display: flex; flex-direction: column; gap: 10px; width: min(340px, 100%); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.login-card h1 { margin: 0 0 6px; font-size: 32px; }
.login-card button { margin-top: 4px; }
.login-error { min-height: 1.3em; margin: 0; color: var(--danger); font-size: 13px; }
.login-log { display: grid; gap: 2px; }
.login-log-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; font-size: 13px; }
.login-log-row.fail { color: var(--warn); }
@media (max-width: 600px) { .login-log-row { grid-template-columns: 110px minmax(0, 1fr); } .login-log-row .sub { grid-column: 1 / -1; } }

/* «Штаб» плитками, как «Армия» (staff.js; решение автора 24.10.2026, вариант A): службы — плитки 2×1 рядами по три,
   шеврон — дела квадратами под рядом, дело в два нажатия (оборот с действием, затем карточка), доклад — карточкой */
#today .metro { grid-template-columns: repeat(auto-fill, 140px); }
/* Метка слева — как у плиток «Армии» (замечание автора 24.10.2026: «убери эти полоски, как в Армии»): в тёмной теме
   её нет, смысл — цветом плитки; в «Бумаге» плитки почти одного цвета — смысл тонкой меткой */
.lv-ok { --lv-bg: var(--tile); --lv-mark: var(--tile-mark); }
.lv-remind { --lv-bg: var(--tile-remind); --lv-mark: var(--tile-remind-mark); }
.lv-warn { --lv-bg: var(--tile-warn); --lv-mark: var(--tile-warn-mark); }
.lv-alarm { --lv-bg: var(--tile-danger); --lv-mark: var(--tile-danger-mark); }
.lv-tool { --lv-bg: var(--surface-3); --lv-mark: transparent; }
.metro-tile.svc-tile { position: relative; grid-column: span 2; aspect-ratio: 2.05 / 1; gap: 3px; background: var(--lv-bg); box-shadow: inset 3px 0 0 var(--lv-mark); }
.metro-tile.svc-tile.lv-tool { color: var(--muted); }
.svc-who { font-size: 11px; opacity: 0.8; }
.svc-sum { margin-top: auto; padding-right: 26px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.3; }
.metro.deeds { margin-top: -8px; }
.metro-tile.deed-tile { position: relative; aspect-ratio: 1 / 1; padding: 0; overflow: visible; background: transparent; box-shadow: none; perspective: 600px; }
.deed-flip { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1); }
.deed-tile.flipped .deed-flip { transform: rotateY(180deg); }
.deed-face, .deed-back { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; box-sizing: border-box; overflow: hidden; background: var(--lv-bg); color: var(--tile-text); box-shadow: inset 3px 0 0 var(--lv-mark); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.deed-tile.lv-tool .deed-face { color: var(--muted); }
.deed-back { transform: rotateY(180deg); }
.deed-tile:not(.flipped) .deed-back { pointer-events: none; }
.deed-tile:hover .deed-face, .deed-tile:focus-visible .deed-face, .deed-tile:hover .deed-back, .deed-tile:focus-visible .deed-back { box-shadow: inset 3px 0 0 var(--lv-mark), inset 0 0 0 2px var(--text); }
.deed-tile:focus-visible { outline: none; }
.deed-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-display); font-size: 14px; letter-spacing: var(--tracking-display); }
.deed-kind { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; opacity: 0.8; }
.deed-text { margin-top: auto; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; font-size: 12px; line-height: 1.3; }
.deed-actions { display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
.deed-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.deed-line { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11px; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .deed-flip { transition: none; } }
#deed-card { width: min(720px, calc(100vw - 32px)); }
#deed-card .deed-detail { padding: 4px 20px 16px; }
.staff-row + .dk-log { margin-top: -8px; }
/* Прежний вид «Штаба» (до 24.10.2026): плитки докладов и доклады ниже; остались лог «Архива» и стили доклада в карточке */
.dk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 820px; margin: 0 0 16px; }
.dk-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 104px; padding: 10px 12px; border: none; border-radius: 0; background: var(--tile); color: var(--tile-text); text-align: left; font: inherit; cursor: pointer; box-shadow: inset 3px 0 0 var(--dk, var(--tile-mark)); }
.dk-tile.dk-alarm { background: var(--tile-danger); } .dk-tile.dk-warn { background: var(--tile-warn); } .dk-tile.dk-remind { background: var(--tile-remind); }
.dk-tile:hover, .dk-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dk-tile .t-name { font-family: var(--font-display); font-size: 16px; letter-spacing: var(--tracking-display); }
.dk-tile .t-who { font-size: 11px; opacity: 0.8; }
.dk-tile .t-sum { margin-top: auto; font-size: 13px; }
.dk { max-width: 820px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 3px 0 0 var(--dk, var(--muted)); scroll-margin-top: 12px; }
.dk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px 8px 16px; border-bottom: 1px solid var(--line); }
.dk-head b { font-family: var(--font-display); font-size: 16px; font-weight: 400; }
.dk-head .dk-sum { margin-left: auto; font-size: 13px; }
.dk-body { padding: 2px 14px 6px 16px; }
.dk-body .today-block { max-width: none; margin-bottom: 8px; }
.dk-body .section-title { margin: 10px 0 6px; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.dk-body .margin-alarm .section-title { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--danger); }
.dk-alarm { --dk: var(--danger); } .dk-warn { --dk: var(--warn); } .dk-remind { --dk: var(--remind); } .dk-ok { --dk: var(--ok); }
/* «Архив» — серый, без акцента (замечание автора 21.10.2026: «не надо акцентировать внимание») */
.dk-tile.dk-archive { --dk: transparent; background: var(--surface-3); color: var(--muted); }
.dk-tile.dk-archive.open, .dk-tile.dk-archive:hover, .dk-tile.dk-archive:focus-visible { outline: 1px solid var(--line); outline-offset: -1px; color: var(--text); }
.dk-archive-row { margin-bottom: 8px; scroll-margin-top: 12px; }
.dk-log { padding: 4px 14px 10px 16px; }
.dk-log-day h3 { margin: 10px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dk-log-row { display: grid; grid-template-columns: 42px 10px 110px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 3px 0; font-size: 13px; }
.dk-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--dk); }
@media (max-width: 720px) {
  .dk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-log-row { grid-template-columns: 42px 10px minmax(0, 1fr); }
  .dk-log-row > span:last-child { grid-column: 3; }
}

/* Контроль трат Потока-0: траты месяца, кошельки, рапорты (spending.js) */
.spend-list { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 10px; }
.spend-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto auto; gap: 4px 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.today-block .spend-row { grid-template-columns: 84px minmax(0, 1fr) auto auto auto; }
.spend-row.waiting { box-shadow: inset 3px 0 0 var(--warn); padding-left: 8px; }
.spend-row .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.spend-row .report-form { grid-column: 1 / -1; }
.wallet-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.chip { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; }
.chip.active { border-color: var(--accent); }
.danger-text { color: var(--danger); }
@media (max-width: 640px) {
  .spend-row, .today-block .spend-row { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.mini-cell.recruit-cell { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 55%, transparent); }
.metro-tile.places { background: var(--tile-places); }
.metro-tile.static { cursor: default; }
.metro-tile.static:hover { outline: none; }
.places-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.place-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(40px, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.place-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.place-bar { height: 6px; background: color-mix(in srgb, currentColor 14%, transparent); }
.place-bar > span { display: block; height: 100%; background: var(--accent); }
.place-sum { font-variant-numeric: tabular-nums; }
.fix-note { color: var(--warn); }
.fix-history { font-size: 12px; color: var(--muted); }
.op-edit .inline-form { margin-top: 4px; }
.op-edit label input { width: 110px; }
.recon-places { margin: 0 16px; flex-wrap: wrap; }
.recon-cash { margin-top: 6px; font-size: 13px; }
.recon-actual { white-space: nowrap; }
.recon-status { white-space: nowrap; }
.recon-table td { vertical-align: middle; }
.settings-select { width: auto; min-width: 160px; }
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* --- Отчёт месяца (report.html): печатный отчёт в «Бумаге» — Ventriloc: крупные тонкие заголовки, полосы фона
   вместо линий, данные — главная картинка; оранжевый — только акцент (долг, кольцо покрытия) --- */
body.report { background: var(--bg); }
.report-page { max-width: 1200px; margin: 0 auto; padding: 40px 24px 60px; }
.report-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.report-caption { margin: 0 0 12px; font-family: var(--font-display); font-size: 13px; letter-spacing: var(--tracking-display); color: var(--brass); }
.report-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 66px; line-height: 0.91; letter-spacing: -1.32px; }
.report-subtitle { margin: 16px 0 0; max-width: 640px; font-size: 18px; line-height: 1.25; color: var(--text-2); }
.report-tools { display: flex; gap: 8px; }
.report-tools .button.ghost { border-color: var(--line-strong); }
.report-band { margin: 0 -24px; padding: 40px 24px; }
.report-band.ash { background: var(--surface-3); }
.report-band h2 { margin: 0 0 20px; font-size: 32px; line-height: 1.19; }
.report-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.report-kpi { padding: 20px; background: var(--surface); border-radius: 20px; }
.report-kpis.small .report-kpi { border-radius: var(--radius-card); }
.report-kpi-title { font-size: 13px; color: var(--muted); }
.report-kpi-value { margin: 6px 0; font-family: var(--font-display); font-size: 40px; line-height: 1.1; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; }
.report-kpis.small .report-kpi-value { font-size: 26px; }
.report-kpi-note { font-size: 13px; color: var(--text-2); }
.report-ring { display: flex; align-items: center; gap: 16px; }
.report-ring .ring-track { stroke: var(--surface-3); }
.report-ring .ring-fill { stroke: var(--accent); stroke-linecap: butt; }
.report-lead { margin: 0 0 16px; max-width: 820px; font-size: 18px; line-height: 1.35; color: var(--text-2); }
.report-lead .accent, .report-row .accent { color: var(--accent); }
.report-chart { display: block; width: 100%; height: auto; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-axis { fill: var(--muted); font-size: 12px; font-family: var(--font-ui); }
.chart-axis.now { fill: var(--text); font-weight: 600; }
.chart-now { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.chart-line { fill: none; stroke-width: 2.5; }
.chart-line.army { stroke: var(--text); }
.chart-line.debt { stroke: var(--accent); }
.chart-line.plan { stroke-dasharray: 6 6; }
.chart-dot.army { fill: var(--text); }
.chart-dot.debt { fill: var(--accent); }
.chart-end { font-size: 13px; font-family: var(--font-ui); }
.chart-end.army { fill: var(--text); }
.chart-end.debt { fill: var(--accent); }
.report-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.report-legend .key { display: inline-block; width: 22px; height: 0; border-top: 2.5px solid var(--text); }
.report-legend .key.debt { border-color: var(--accent); }
.report-legend .key.plan { border-top-style: dashed; border-color: var(--muted); }
.report-rows { max-width: 900px; }
.report-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 130px minmax(120px, 240px); gap: 8px 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.report-row.flows { grid-template-columns: minmax(0, 1fr) 120px 120px minmax(100px, 200px) 150px; }
.report-row.head { padding-top: 0; font-size: 12px; color: var(--muted); }
.report-row .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-band.ash .report-row { border-bottom-color: var(--line-strong); border-bottom-color: color-mix(in srgb, var(--text) 12%, transparent); }
.report-bar { display: block; height: 6px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.report-bar > span { display: block; height: 100%; background: var(--text); }
.report-sub { color: var(--muted); font-size: 13px; }
.report-note { color: var(--text-2); font-size: 15px; }
.report-foot { margin-top: 40px; font-family: var(--font-display); font-size: 13px; color: var(--muted); }
@media (max-width: 720px) {
  .report-title { font-size: 44px; }
  .report-row, .report-row.flows { grid-template-columns: minmax(0, 1fr) auto; }
  .report-row > :nth-child(n+3) { grid-column: 1 / -1; }
}
@media print {
  @page { size: A4; margin: 12mm; }
  .report-tools { display: none; }
  .report-page { padding: 0; }
  .report-band { margin: 0; padding: 20px 0; break-inside: avoid; }
  .report-band.ash { background: none; border-top: 1px solid var(--line); }
  .report-kpi { border: 1px solid var(--line); }
}
.report-link { float: right; }