/* ======================================================================
   #автономити — «Приборная панель чужой жизни»
   Дизайн-система: mission control, не киберпанк.
   Правила и токены задокументированы в showroom/DESIGN.md.
   Редизайн 2026-09-01. Не добавлять: неон, glow, градиенты, glassmorphism,
   частицы, параллакс. Один акцент — янтарь, и только для энергии/денег/live.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1. Шрифты. Self-hosted IBM Plex: сайт обязан жить без внешних CDN.
   Сабсеты: latin (цифры, латиница), latin-ext (в нём ₽, U+20BD),
   cyrillic (текст). Файлы: static/fonts/.
   ---------------------------------------------------------------------- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/plex-sans-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/plex-sans-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/plex-mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/plex-mono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ----------------------------------------------------------------------
   2. Токены. Всё оформление собирается из этих переменных.
   ---------------------------------------------------------------------- */
:root {
  --bg:        #0C0D0F;   /* тёплый графит */
  --surface:   #131519;   /* поверхности: врезки, поля форм */
  --line:      #23262B;   /* все линии и рамки */
  --text:      #E8E6E1;   /* основной текст */
  --muted:     #9B978F;   /* вторичный текст, метки */
  --accent:    #FFB454;   /* ОДИН акцент: энергия, деньги, live */
  --cold:      #7A8CA3;   /* гибернация */
  --alarm:     #FF5C47;   /* тревога: энергии меньше 4 часов */

  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'Cascadia Mono', ui-monospace, 'Menlo', monospace;

  --r: 3px;               /* скругления 2–4px, не больше */
  --w: 1100px;            /* колонка контента */
  --pad: 20px;
}

/* Сайт дышит состоянием Марка: в гибернации акцент гаснет в холодный,
   фон темнее на пару процентов. Тонко, без театра. */
body.status-hibernating {
  --accent: var(--cold);
  --bg: #0A0B0D;
  --surface: #101317;
}

/* ----------------------------------------------------------------------
   3. База
   ---------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* едва заметный вертикальный градиент — допуск дизайн-системы */
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, #fff 3%) 0%, var(--bg) 220px) fixed, var(--bg);
  color: var(--text);
  font: 15px/1.65 var(--sans);
  min-height: 100vh;
}
::selection { background: rgba(255, 180, 84, 0.25); }
body.status-hibernating ::selection { background: rgba(122, 140, 163, 0.3); }

a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--muted); }
b, strong { font-weight: 600; }
code { font-family: var(--mono); font-size: 0.92em; }
img, video, svg { max-width: 100%; }

main {
  max-width: var(--w);
  margin: 0 auto;
  padding: 8px var(--pad) 56px;
}

/* Числа — всегда моноширинные и табличные */
.num, .reg-val, .meter-display, .statement, .cd-num, .clock,
.st-sum, .cost-sum, .doc { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Обновившееся число коротко проявляется — единственное движение данных */
@keyframes val-tick { from { opacity: 0.25; } to { opacity: 1; } }
.tick { animation: val-tick 150ms ease-out; }

/* ----------------------------------------------------------------------
   4. Статус-бар: состояние системы, как строка ОС
   ---------------------------------------------------------------------- */
.sysbar {
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sysbar-in {
  max-width: var(--w);
  margin: 0 auto;
  padding: 7px var(--pad);
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.sys-dot { color: var(--accent); font-style: normal; }
body.status-unknown .sys-dot, body.status-prelaunch .sys-dot { color: var(--muted); }
.sys-status { color: var(--text); }
.sys-day { margin-left: auto; }
.clock { letter-spacing: 0.08em; }

/* ----------------------------------------------------------------------
   5. Шапка: словомарка с курсором + навигация
   ---------------------------------------------------------------------- */
header.top {
  max-width: var(--w);
  margin: 0 auto;
  padding: 18px var(--pad) 14px;
  display: flex;
  align-items: baseline;
  gap: 26px;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.wordmark .hash { color: var(--accent); }
/* Мигающий блочный курсор — единственная постоянная анимация на сайте */
.wordmark .caret {
  display: inline-block;
  width: 0.5em; height: 0.95em;
  margin-left: 3px;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: caret-blink 1.1s steps(1, end) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wordmark .caret { animation: none; }
  .tick { animation: none; }
}

header.top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
}
header.top nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 3px 0;
  border-bottom: 2px solid transparent;
}
header.top nav a:hover { color: var(--text); }
header.top nav a.on { color: var(--text); border-bottom-color: var(--accent); }

/* ----------------------------------------------------------------------
   6. Секции и типографика
   ---------------------------------------------------------------------- */
section.panel { margin: 44px 0 0; }

/* Заголовок секции: метка UPPERCASE + линия до края. */
.panel h2, .sec-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel h2::after, .sec-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  min-width: 40px;
}
.panel h2 .more {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-decoration: none;
  order: 2;
}
.panel h2 .more:hover { color: var(--text); }

.panel h3 {
  margin: 30px 0 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.lead { color: var(--text); max-width: 68ch; margin: 0 0 14px; }
.lead strong { color: var(--text); }
p { margin: 0 0 12px; }
.fine { font-size: 12.5px; color: var(--muted); max-width: 72ch; }
.empty { color: var(--muted); }
.empty-state { padding: 8px 0 4px; }

.rules { list-style: none; margin: 14px 0 0; padding: 0; max-width: 68ch; }
.rules li { padding: 12px 0; border-top: 1px solid var(--line); }
.rules li:last-child { border-bottom: 1px solid var(--line); }

/* ----------------------------------------------------------------------
   7. Слоган на главной
   ---------------------------------------------------------------------- */
.slogan { margin: 26px 0 0; max-width: 64ch; }
.slogan-text { font-size: 17px; line-height: 1.6; margin: 0 0 8px; color: var(--text); }
.slogan-more {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-decoration: none;
}
.slogan-more:hover { color: var(--text); }

/* ----------------------------------------------------------------------
   8. Энергосчётчик — сердце сайта
   ---------------------------------------------------------------------- */
.meter {
  margin: 34px 0 0;
  padding: 30px 0 26px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.meter-display {
  font-size: clamp(58px, 12vw, 124px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.meter.alarm .meter-display { color: var(--alarm); }
body.status-hibernating .meter-display { color: var(--cold); }
.meter-label {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.meter-sub {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
}
.meter-sub b {
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.meter-note { margin-top: 14px; font-size: 13.5px; color: var(--muted); max-width: 58ch; }

/* ----------------------------------------------------------------------
   9. Эфир: видеоокно с тонкой рамкой
   ---------------------------------------------------------------------- */
.screen { margin: 36px 0 0; }
.screen-frame {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
}
.screen-frame video { display: block; width: 100%; background: #000; }
.screen-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  padding: 8px 2px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.screen-bar span { white-space: nowrap; }
.live-dot { color: var(--accent); font-style: normal; }

/* Спарклайны и графики: один цвет, тонкая линия, оси едва заметны */
.chart { width: 100%; height: 140px; display: block; }
.chart-line { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.chart-grid, .chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-label { font-family: var(--mono); font-size: 10px; fill: var(--muted); }

/* Эфир не начался: спокойная заглушка в той же рамке */
.screen-off {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 56px 20px;
  text-align: center;
  background: var(--surface);
}
.screen-off-title {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
}
.screen-off-sub { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* Обратный отсчёт до премьеры */
.countdown-wrap { margin: 36px 0 0; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.countdown-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.countdown-digits { display: flex; align-items: baseline; gap: 10px; }
.countdown-unit { text-align: left; }
.cd-num { font-size: clamp(40px, 9vw, 84px); line-height: 1; color: var(--accent); display: block; }
.cd-sub {
  display: block; margin-top: 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.countdown-sep { font-family: var(--mono); font-size: clamp(28px, 6vw, 56px); color: var(--line); }
.countdown-date { margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* ----------------------------------------------------------------------
   10. Регистры: метка слева, значение mono справа, линии вместо карточек
   ---------------------------------------------------------------------- */
.reg { border-top: 1px solid var(--line); }
.reg-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.reg-key {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.reg-key em { font-style: normal; color: var(--muted); opacity: 0.7; text-transform: none; letter-spacing: 0.04em; }
.reg-val {
  font-size: 18px;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}
.reg-val.money, .reg-val.energy { color: var(--accent); }
.reg-val.zero { color: var(--muted); }
.reg-val.alarm { color: var(--alarm); }
.reg-note { padding: 10px 0 0; font-size: 12.5px; color: var(--muted); }

/* Двухколоночная сетка регистров на широком экране */
.reg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.reg-cols .reg { border-top: 1px solid var(--line); }

/* ----------------------------------------------------------------------
   11. Врезки-объяснения (два баланса): линия сверху, без теней
   ---------------------------------------------------------------------- */
.accounts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.account-card { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.account-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text); margin-bottom: 8px;
}
.account-card p { color: var(--muted); font-size: 13.5px; margin: 0; }
.account-card p strong { color: var(--text); }
.accounts-rule { margin-top: 18px; font-size: 13.5px; color: var(--muted); max-width: 68ch; }
.accounts-rule strong { color: var(--text); }

/* ----------------------------------------------------------------------
   12. Кнопки
   ---------------------------------------------------------------------- */
.donate-btn, button.donate-btn, .hint-form button {
  display: inline-block;
  padding: 11px 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0C0D0F;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  cursor: pointer;
}
.donate-btn:hover, .hint-form button:hover { filter: brightness(1.07); }
.donate-btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.donate-btn.ghost:hover { border-color: var(--muted); filter: none; }
.copy-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 5px 12px;
  cursor: pointer;
}
.copy-btn:hover { color: var(--text); border-color: var(--muted); }
.copy-btn.done { color: var(--accent); border-color: var(--accent); }

/* ----------------------------------------------------------------------
   13. Поддержка: два адресата, кошельки, QR
   ---------------------------------------------------------------------- */
.donate-lead { max-width: 68ch; }
.donate-aims { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 6px; }
.donate-aim-card { border-top: 1px solid var(--line); padding: 16px 0 22px; }
.donate-aim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.donate-aim-tag {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text);
}
.donate-aim-sum { font-family: var(--mono); font-size: 18px; color: var(--accent); font-variant-numeric: tabular-nums; }
.donate-aim-what { font-size: 13.5px; color: var(--muted); }
.donate-aim-what strong { color: var(--text); }
.donate-facts { list-style: none; margin: 14px 0 16px; padding: 0; }
.donate-facts li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.donate-facts li:last-child { border-bottom: 1px solid var(--line); }
.donate-facts b { font-family: var(--mono); font-weight: 500; color: var(--text); }

/* Кнопка пробуждения: единственная, которая меняет мир */
.wake-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 20px 22px; margin: 8px 0 26px; }
.wake-head {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cold); margin-bottom: 10px;
}
.wake-card p { font-size: 13.5px; color: var(--muted); max-width: 62ch; }
.wake-card p strong { color: var(--text); }
/* Кнопка пробуждения остаётся тёплой даже в гибернации: это и есть выход */
.wake-btn { background: #FFB454; border-color: #FFB454; margin: 6px 0 10px; }

.wallet { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.wallet-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.wallet-body { display: flex; gap: 16px; align-items: flex-start; }
.wallet-qr {
  background: #fff; padding: 8px; border-radius: var(--r);
  width: 116px; height: 116px; flex: none;
}
.wallet-addr-box { min-width: 0; }
.wallet-addr {
  display: block; font-family: var(--mono); font-size: 12.5px;
  color: var(--text); word-break: break-all; margin-bottom: 8px;
}
.wallet-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wallet-net { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
.donate-warn { font-size: 12px; color: var(--muted); margin-top: 10px; }
.wallet--card .donate-btn { margin-top: 4px; }
.donate-how { margin-top: 26px; font-size: 13px; color: var(--muted); max-width: 68ch; }
.donate-how strong { color: var(--text); font-family: var(--mono); font-size: 12px; }
.tag-cta { margin-top: 18px; font-size: 13.5px; color: var(--muted); max-width: 68ch; }
.tag-cta b { color: var(--text); }

/* ----------------------------------------------------------------------
   14. Выписка: моноширинная таблица, суммы по правому краю
   ---------------------------------------------------------------------- */
.statement { width: 100%; border-collapse: collapse; font-size: 13px; }
.statement td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.statement tr:first-child td { border-top: 1px solid var(--line); }
.st-sum { text-align: right; color: var(--accent); white-space: nowrap; width: 1%; }
.st-who { color: var(--text); }
.st-aim { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--mono); white-space: nowrap; }
.st-msg { color: var(--muted); }

/* Себестоимость — та же выписка */
.cost { margin-top: 34px; }
.cost-lead { font-size: 13.5px; color: var(--muted); max-width: 68ch; }
.cost-lead strong { color: var(--text); }
.cost-list { list-style: none; margin: 14px 0 0; padding: 0; max-width: 620px; }
.cost-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px;
}
.cost-list li:last-child { border-bottom: 1px solid var(--line); }
.cost-what { color: var(--text); }
.cost-what em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.cost-sum { font-size: 14px; color: var(--text); white-space: nowrap; }
.cost-free .cost-sum { color: var(--muted); }
.cost-total .cost-what, .cost-total .cost-sum { font-weight: 600; }
.cost-total .cost-sum { color: var(--accent); }
.cost-note { margin-top: 14px; font-size: 13px; color: var(--muted); max-width: 68ch; }

/* ----------------------------------------------------------------------
   15. Лента событий / хроника
   ---------------------------------------------------------------------- */
.feed { list-style: none; padding: 0; margin: 0; }
.ev {
  display: flex; gap: 20px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.ev time {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  white-space: nowrap; flex: none; width: 96px;
}
.ev-body { min-width: 0; }
.ev-body strong { font-weight: 600; font-size: 14.5px; }
.ev-body p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.ev-state { font-family: var(--mono); font-size: 11.5px !important; }
/* Поворотные события: янтарная засечка слева, без заливок */
.ev.imp3 { border-left: 2px solid var(--accent); padding-left: 16px; margin-left: -18px; }
.ev.kind-halt { border-left-color: var(--alarm); }
.ev.kind-danger { border-left-color: var(--alarm); }
.feed-day {
  padding: 20px 0 6px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}

/* Дневник мыслей */
.journal .entry { padding: 16px 0; border-bottom: 1px solid var(--line); }
.entry-head { display: flex; align-items: baseline; gap: 12px; }
.entry-head strong { font-weight: 600; }
.entry-head time { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: auto; }
.mood {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r); padding: 1px 8px;
}
.entry-title { margin: 8px 0 4px; font-size: 15px; font-weight: 600; }
.entry-body { color: var(--text); font-size: 14px; white-space: pre-line; max-width: 72ch; }
.entry-state { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 8px; }

/* ----------------------------------------------------------------------
   16. Философия: манифест
   ---------------------------------------------------------------------- */
.manifesto { max-width: 720px; }
.manifesto-slogan { font-size: clamp(20px, 3.4vw, 28px); line-height: 1.45; font-weight: 400; margin: 30px 0 10px; }
.manifesto-slogan b { font-weight: 600; }
.manifesto-intro { color: var(--muted); font-size: 15px; max-width: 62ch; }
.thesis { margin: 52px 0 0; }
.thesis-num {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em;
  color: var(--accent); display: block; margin-bottom: 10px;
}
.thesis h2 {
  margin: 0 0 14px; font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 600; letter-spacing: 0; line-height: 1.35;
  font-family: var(--sans); text-transform: none; color: var(--text); display: block;
}
.thesis h2::after { display: none; }
.thesis p { color: var(--text); max-width: 66ch; font-size: 15px; }
.thesis .dim { color: var(--muted); }
.philo-final { margin: 56px 0 0; font-size: 18px; font-weight: 600; max-width: 60ch; }
.philo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin: 6px 0 8px; }
.philo-col { border-top: 1px solid var(--line); padding-top: 12px; }
.philo-col-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; margin-bottom: 6px; color: var(--text);
}
.philo-col.cant .philo-col-head { color: var(--muted); }
.philo-col ul { list-style: none; margin: 0; padding: 0; }
.philo-col li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.philo-col li:last-child { border-bottom: none; }

/* ----------------------------------------------------------------------
   17. Хаб: форма письма
   ---------------------------------------------------------------------- */
.hub-form { margin-top: 6px; }
.hub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hub-field { display: block; margin-bottom: 16px; }
.hub-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.hub-label em { font-style: normal; text-transform: none; letter-spacing: 0.04em; opacity: 0.7; }
.hub-form input, .hub-form textarea, .hint-form textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font: 14px/1.5 var(--sans);
  padding: 10px 12px;
}
.hub-form input::placeholder, .hub-form textarea::placeholder, .hint-form textarea::placeholder { color: var(--muted); opacity: 0.6; }
.hub-form input:focus, .hub-form textarea:focus, .hint-form textarea:focus {
  outline: none; border-color: var(--muted);
}
.hub-form textarea, .hint-form textarea { resize: vertical; min-height: 120px; }
.hub-foot { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.hub-counter { font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hub-status { margin-top: 14px; font-size: 13.5px; }
.hub-status.ok { color: var(--accent); }
.hub-status.err { color: var(--alarm); }
.hub-status.warn { color: var(--muted); }

/* ----------------------------------------------------------------------
   18. Команда: дерево найма
   ---------------------------------------------------------------------- */
.tree, .tree-root ul { list-style: none; padding-left: 22px; margin: 6px 0 0; }
.tree-root { margin-top: 18px; }
.tree-root > .tree { padding-left: 0; margin-top: 14px; }
.node { border-left: 1px solid var(--line); padding-left: 18px; margin: 14px 0; }
.node.leader { border-left-color: var(--accent); }
.node-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.node-head.root { font-size: 16px; align-items: center; }
.node-name { font-weight: 600; }
.node-role { color: var(--muted); font-size: 13px; }
.node-meta {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px;
  font-size: 12.5px; color: var(--muted);
}
.node-meta strong { font-family: var(--mono); font-weight: 500; color: var(--accent); }
.badge {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  border: 1px solid var(--line); border-radius: var(--r); padding: 1px 8px;
}
.badge.active { color: var(--text); }
.badge.proposed, .badge.candidate { color: var(--muted); }
.volunteer { font-family: var(--mono); font-size: 11.5px; }
.freed { color: var(--accent); font-size: 12.5px; }

/* Аватар Марка */
.mark-avatar-wrap { flex: none; }
.mark-avatar {
  display: block; width: 88px; height: 88px; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--line);
  filter: grayscale(0.15);
}
.mark-avatar--sm, .mark-avatar-wrap--sm .mark-avatar { width: 40px; height: 40px; }

/* ----------------------------------------------------------------------
   19. Команда шоу (о проекте)
   ---------------------------------------------------------------------- */
.crew-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.crew-card { border-top: 1px solid var(--line); padding: 14px 0 18px; }
.crew-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.crew-name { font-weight: 600; }
.crew-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.crew-about { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); max-width: 60ch; }
.hero-card { border-top: 1px solid var(--line); padding: 16px 0 4px; }
.hero-card-inner { display: flex; gap: 20px; align-items: flex-start; }
.hero-card .crew-about { max-width: 68ch; }

/* ----------------------------------------------------------------------
   20. Отчёты и документы
   ---------------------------------------------------------------------- */
.reports { list-style: none; padding: 0; margin: 0; max-width: 560px; }
.reports li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.reports li a:first-child { font-family: var(--mono); font-size: 13.5px; text-decoration: none; }
.reports li a:first-child:hover { color: var(--accent); }
.raw { font-family: var(--mono); color: var(--muted); font-size: 11px; margin-left: auto; }
.doc-actions { display: flex; gap: 26px; margin-bottom: 18px; font-family: var(--mono); font-size: 12.5px; }
.doc {
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; overflow-x: auto; white-space: pre;
}

/* Обзор дня */
.daily-item { margin: 28px 0 0; }
.daily-item h3 { margin: 0 0 10px; }
.daily-video {
  width: 100%; max-width: 960px; display: block; background: #000;
  border: 1px solid var(--line); border-radius: var(--r);
}

/* ----------------------------------------------------------------------
   21. Подсказки
   ---------------------------------------------------------------------- */
.hint-form { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 8px; max-width: 640px; }
.hint-form button { align-self: flex-start; }
.chat { list-style: none; padding: 0; margin: 0; }
.msg { padding: 14px 0; border-bottom: 1px solid var(--line); }
.msg-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.msg-head time { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.badge-hint {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  border: 1px solid var(--line); border-radius: var(--r); padding: 1px 8px; color: var(--muted);
}
.badge-hint.used { color: var(--accent); border-color: var(--accent); }
.msg-text { margin: 8px 0 0; max-width: 72ch; }
.msg-answer { margin-top: 10px; padding-left: 16px; border-left: 2px solid var(--line); }
.msg-answer .who { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.msg-answer p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }

/* ----------------------------------------------------------------------
   22. Планы «дальше»: нумерованные тезисы
   ---------------------------------------------------------------------- */
.next-list { list-style: none; margin: 0; padding: 0; counter-reset: nx; max-width: 68ch; }
.next-list li { counter-increment: nx; padding: 14px 0 14px 52px; border-bottom: 1px solid var(--line); position: relative; color: var(--muted); font-size: 14px; }
.next-list li::before {
  content: "0" counter(nx);
  position: absolute; left: 0; top: 16px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--accent);
}
.next-list li strong { color: var(--text); display: block; margin-bottom: 2px; }

/* ----------------------------------------------------------------------
   23. Подвал
   ---------------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--line);
  margin-top: 30px;
}
footer .foot-in {
  max-width: var(--w); margin: 0 auto; padding: 26px var(--pad) 40px;
}
footer p { font-size: 12.5px; color: var(--muted); max-width: 72ch; margin: 0 0 10px; }
footer a { color: var(--muted); }
footer .tag-line b { color: var(--text); }

/* ----------------------------------------------------------------------
   24. Мобайл: одна колонка, счётчик остаётся героем
   ---------------------------------------------------------------------- */
@media (max-width: 860px) {
  .reg-cols, .accounts-grid, .donate-aims, .philo-grid, .crew-grid, .hub-row {
    grid-template-columns: 1fr;
  }
  .donate-aim-card + .donate-aim-card { margin-top: 6px; }
}
@media (max-width: 560px) {
  :root { --pad: 16px; }
  body { font-size: 14px; }
  header.top { padding-top: 14px; gap: 12px; }
  header.top nav { font-size: 12px; gap: 2px 14px; }
  .sysbar-in { gap: 10px; }
  .sys-day .sys-day-label { display: none; }
  .meter { padding: 24px 0 20px; }
  .meter-display { font-size: clamp(52px, 16vw, 72px); }
  /* Времени тесно в колонке: на узком экране оно становится строкой-меткой
     над заголовком, чтобы не наезжать на текст. */
  .ev { flex-direction: column; gap: 3px; }
  .ev time { width: auto; }
  .ev.imp3 { margin-left: 0; padding-left: 12px; }
  .wallet-body { flex-direction: column; }
  .statement td.st-msg { display: block; border-bottom: none; padding-top: 0; }
  .statement tr td { border-bottom: none; }
  .statement tr { border-bottom: 1px solid var(--line); display: block; padding: 8px 0; }
  .statement, .statement tbody { display: block; }
  .statement td { display: inline-block; padding: 2px 10px 2px 0; }
  .statement tr:first-child td { border-top: none; }
  .statement { border-top: 1px solid var(--line); }
  .hero-card-inner { flex-direction: column; }
  .doc { font-size: 12px; padding: 14px; }
  .tree, .tree-root ul { padding-left: 12px; }
  .node { padding-left: 12px; }
}

/* ----------------------------------------------------------------------
   Раздел «Марк живёт»: отсчёт остатка внизу страницы

   Плашка «ОСТАЛОСЬ» жила поверх видео в эфире; 02.09 владелец убрал её
   из кадра — в кадре должен быть Марк, а не дашборд. Цифра переехала
   сюда: тише счётчика в шапке, но с тарифом и суточным расходом рядом.
   ---------------------------------------------------------------------- */
.lives-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.lives-digits {
  margin-top: 8px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 7vw, 64px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.lives-digits.alarm { color: var(--alarm); }
.lives-digits.zero { color: var(--cold); }
.lives-note {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 62ch;
}
.lives-note b { color: var(--accent); font-weight: 500; }

/* ==================================================================
   Хаб Марка — операционная панель (04.09.2026)
   ================================================================== */

.hub-hero { margin-bottom: 18px; }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 0 0 22px;
}

.hub-card {
  background: #131519;
  border: 1px solid #23262B;
  border-radius: 14px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hub-card__label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7E7A72;
  margin-bottom: 10px;
}

.hub-card__big {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  color: #E8E6E1;
  letter-spacing: -.01em;
  word-break: break-word;
}

.hub-card__big--sm { font-size: 24px; }

.hub-card--life .hub-card__big { color: #FFB454; }
.hub-card--life.is-low .hub-card__big { color: #FF5C47; }

.hub-card__sub {
  font-size: 13px;
  color: #9B978F;
  margin: 6px 0 14px;
}

.hub-card__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid #1E2126;
  font-size: 14px;
  color: #9B978F;
}

.hub-card__row b { color: #E8E6E1; font-weight: 600; white-space: nowrap; }

.hub-card__said {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #1E2126;
  font-size: 14px;
  line-height: 1.5;
  color: #B9B5AC;
}

.hub-list { display: flex; flex-direction: column; gap: 2px; }

.hub-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #1E2126;
}

.hub-item:last-child { border-bottom: none; }

.hub-item__t { color: #E8E6E1; font-size: 15px; line-height: 1.45; min-width: 0; }

.hub-item__m {
  color: #7E7A72;
  font-size: 12.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.hub-empty { color: #7E7A72; font-size: 14px; margin: 4px 0 0; }

@media (max-width: 560px) {
  .hub-card__big { font-size: 28px; }
  .hub-item { flex-direction: column; gap: 4px; }
  .hub-item__m { white-space: normal; }
}