/* Vtexte — редизайн 09.2026. Один файл на весь кабинет и витрину, без сборки.
   Спецификация: docs/дизайн/редизайн-2026-09/README.md

   Порядок секций важен: сначала общий слой (он контракт для всех экранов),
   потом совместимость со старой вёрсткой, потом пустые секции под каждый
   экран — правки по экранам ложатся туда и не пересекаются между собой.

   Оглавление:
     токены · шрифты · база · типографика · шапка · футер · раскладка ·
     карточки · кнопки · поля · бейджи и метки · вкладки · прогресс и тумблер ·
     баннеры и плашки · код и таблицы · анимации · мобильная · печать ·
     совместимость · экраны (пусто, под чипы) */

/* === токены === */

:root {
  color-scheme: light dark;   /* нативные поля и скроллбары в цвет темы (02.09, чип «пополнение») */
  --bg: #f4f3ef; --bg2: #ebeae4; --card: #fcfbf8;
  --ink: #191a18; --muted: #6f716c; --line: #dcdbd4;
  --accent: #1d8a5c; --accent-ink: #ffffff; --accent-soft: #dff2e7;
  --sp2: #3f74cc; --sp2-soft: #e3ecfb; --sp3: #b3651f; --sp3-soft: #f8ecdf;
  --err: #b3361f; --err-soft: #f8e6e1; --warn: #a8721c; --warn-soft: #f8efdc;
  --term: #101311; --term-ink: #e6efe9; --term-muted: #7d8a82; --term-line: #1f2622;

  --font: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* старые имена: ими ещё размечены неперерисованные экраны. Уйдут вместе
     с секцией «совместимость», когда каждый экран пройдёт свой чип */
  --err-bg: var(--err-soft);
  --ok-bg: var(--accent-soft);
}

/* Ручного переключателя нет — только системная тема. Терминал тёмный в обеих,
   печатный счёт белый в обеих (см. секции «код» и «печать»). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1210; --bg2: #151916; --card: #181d1a;
    --ink: #e8eae5; --muted: #8e938c; --line: #262c28;
    --accent: #4fcf8c; --accent-ink: #0b1a12; --accent-soft: #16301f;
    --sp2: #7fa8f0; --sp2-soft: #1a2436; --sp3: #e3a35c; --sp3-soft: #33261a;
    --err: #f08c7a; --err-soft: #3a201b; --warn: #e0b060; --warn-soft: #332a18;
    --term: #0a0d0b; --term-line: #1c2420;
  }
}

/* === шрифты === */
/* Только свои файлы: с 01.09 кабинет отдаёт CSP `default-src 'self'`, и стиль
   с fonts.googleapis.com браузер молча заблокирует. Происхождение и как
   обновить — static/fonts/README.md. Подмножества (unicode-range) делят
   загрузку: русской странице латиница и кириллица нужны, остальное не поедет. */

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/plex-mono-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@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:400;font-display:swap;src:url(/static/fonts/plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, 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-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@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}
@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-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, 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-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@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:400;font-display:swap;src:url(/static/fonts/plex-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, 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:500;font-display:swap;src:url(/static/fonts/plex-sans-500-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/plex-sans-500-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:500;font-display:swap;src:url(/static/fonts/plex-sans-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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:500;font-display:swap;src:url(/static/fonts/plex-sans-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+0304, U+0308, U+0329, U+2000-206F, 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-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@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 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-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* === база === */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* Ширина и поля `main` — по роду страницы. Класс ставит сама страница
   (`{% block body_class %}` в base.html), потому что <main> один на всех. */
main { max-width: 1200px; margin: 0 auto; padding: 32px 28px 64px; }

.p-tight main { padding-top: 28px; }                     /* запись, счёт */
.p-admin { font-size: 14px; }
.p-admin main { max-width: 1280px; }
.p-text main { max-width: 760px; }                       /* оферта */

/* лендинг: секции сами держат свою ширину, <main> им только не мешает */
.p-landing { font-size: 16px; }
.p-landing main { max-width: none; padding: 0; }

.p-doc { line-height: 1.55; }
.p-doc main { max-width: 1160px; padding: 48px 32px 96px; }

.p-login main {
  max-width: none; min-height: calc(100vh - 57px);
  display: grid; place-items: center; padding: 48px 28px;
}

/* липкая шапка — только там, где по странице долго скроллят */
.p-landing .top, .p-doc .top { position: sticky; top: 0; z-index: 5; }

/* === типографика === */

h1, h2, h3 { margin: 0 0 12px; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 20px; }                                  /* h1 страницы кабинета */
h2 { font-size: 16px; }
h3 { font-size: 15px; letter-spacing: 0; }
p { margin: 0 0 12px; }

.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.mono { font-family: var(--mono); }

/* Надзаголовок, две формы. `.eyebrow` — над секцией и страницей: текст пишут
   строчными, капитель делает CSS. `.eyebrow-label` — подпись карточки в
   сайдбаре («БЕСПЛАТНЫЙ ПАКЕТ»): там уже заглавные в разметке, второй раз
   переводить нечего, и кегль на полпункта меньше. */
.eyebrow {
  font: 500 12.5px/1.2 var(--mono);
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.eyebrow-label {
  font: 500 12px/1.2 var(--mono); letter-spacing: .05em; color: var(--muted);
}

/* строка-пояснение под названием: время, размер, число спикеров */
.meta { font: 12.5px/1.45 var(--mono); color: var(--muted); }
.meta.err { color: var(--err); }

/* длинное имя файла не должно распирать страницу вбок */
.wrap-any { overflow-wrap: anywhere; }

/* === шапка === */

.top { background: var(--bg); border-bottom: 1px solid var(--line); }

.top-in {
  max-width: 1200px; margin: 0 auto; padding: 0 28px; height: 56px;
  display: flex; align-items: center; gap: 36px;
}
.top--site .top-in {
  max-width: 1160px; padding: 0 32px; height: 60px;
  justify-content: space-between; gap: 24px;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none; flex: none;
}
.brand:hover { text-decoration: none; }
/* знак — картинка static/logo.svg: цвет, скругление и сами столбики держит
   файл, он же уезжает в фавикон и в аватары ботов. Здесь только размер, иначе
   знак пришлось бы держать в двух местах и они бы разъехались */
.brand-mark { width: 24px; height: 24px; display: block; }
.brand-name { font-weight: 600; font-size: 16px; }
.top--site .brand-mark { width: 26px; height: 26px; }
.top--site .brand-name { font-size: 17px; letter-spacing: -.01em; }

/* меню кабинета: активный пункт подчёркнут той же линией, что и низ шапки */
.nav { display: flex; align-items: center; gap: 4px; font-size: 14px; min-width: 0; }
.nav-a {
  display: flex; align-items: center; height: 56px; padding: 0 12px;
  color: var(--muted); text-decoration: none; white-space: nowrap;
}
.nav-a:hover { color: var(--ink); text-decoration: none; }
.nav-a.is-on {
  color: var(--ink); font-weight: 500;
  border-bottom: 2px solid var(--ink); margin-bottom: -1px;
}

/* меню витрины */
.nav-site { display: flex; align-items: center; gap: 28px; font-size: 14.5px; }
.nav-site a { color: var(--ink); }

.top-right {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
  font-size: 13.5px;
}
.top-right form { margin: 0; }
.top-balance { font-family: var(--mono); color: var(--muted); white-space: nowrap; }
.top-balance b { color: var(--ink); font-weight: 500; }
.top-sep { width: 1px; height: 18px; background: var(--line); flex: none; }
.who { color: var(--ink); white-space: nowrap; }
.top-back { font-size: 14px; color: var(--muted); }

/* === футер === */

footer { border-top: 1px solid var(--line); }
.foot-in {
  max-width: 1160px; margin: 0 auto; padding: 28px 32px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted);
}
.foot-brand { font-family: var(--mono); }
.foot-nav { display: flex; gap: 22px; }
.foot-nav a { color: var(--muted); }

/* === раскладка === */

/* контент + сайдбар. `.layout-narrow` — запись и счёт, там колонка уже */
.layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start;
}
.layout-narrow { grid-template-columns: 1fr 300px; }
aside { display: grid; gap: 16px; align-content: start; min-width: 0; }

.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-tight { gap: 8px; }
.spacer { margin-left: auto; }

/* === карточки === */

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px;
}
.card-flush { padding: 0; overflow: hidden; }             /* карточка-список */
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.card-lg { border-radius: 16px; }                         /* вход, терминал */

/* === кнопки === */

/* Один класс на все кнопки: `.btn` — заливка акцентом (то же, чем был старый
   `.btn`), дальше вид (`-ink`, `-line`, `-danger`, `-bare`) и высота
   (`-32`…`-48`). Голый <button> тоже основной — им размечены старые экраны. */
.btn, button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; border: 0; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: 14px; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover, button:hover { text-decoration: none; opacity: .9; }
button:disabled, .btn:disabled, .btn.is-off { opacity: .5; cursor: default; }

/* заливка держит вес 600, контур и «чернильная» — 500: так в прототипах */
.btn-ink { background: var(--ink); color: var(--bg); font-weight: 500; }
.btn-line {
  background: none; color: var(--ink); border: 1px solid var(--line);
  font-weight: 500;
}
.btn-line:hover { border-color: var(--ink); opacity: 1; }
.btn-danger { background: none; color: var(--err); border: 0; font-weight: 400; }
.btn-danger:hover { text-decoration: underline; opacity: 1; }
.btn-bare {
  background: none; color: var(--muted); border: 0; padding: 0; height: auto;
  font-weight: 400;
}
.btn-bare:hover { color: var(--ink); opacity: 1; }
.btn-bare.danger:hover { color: var(--err); }
.btn-wide { width: 100%; }

.btn-32 { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-34 { height: 34px; padding: 0 14px; font-size: 13.5px; }
.btn-36 { height: 36px; padding: 0 16px; }
.btn-38 { height: 38px; padding: 0 16px; }
.btn-40 { height: 40px; padding: 0 18px; }
.btn-42 { height: 42px; padding: 0 16px; font-size: 13.5px; }
.btn-46 { height: 46px; padding: 0 22px; border-radius: 10px; font-size: 15px; }
.btn-48 { height: 48px; padding: 0 22px; border-radius: 10px; font-size: 16px; }
.btn-48.btn-line { font-size: 15px; padding: 0 18px; }

/* ссылка-кнопка: «выйти», «отвязать», «перевыпустить ключ» */
.link, button.link, a.link {
  display: inline; height: auto; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--muted); font-weight: 400; font-size: inherit;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.link:hover, button.link:hover { color: var(--ink); text-decoration: underline; opacity: 1; }
.link.danger:hover, button.link.danger:hover { color: var(--err); }

/* === поля === */

input[type=text], input[type=url], input[type=email], input[type=tel],
input[type=number], input[type=search], input[type=file], input[type=password],
select, textarea {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-size: 14px;
}
textarea { height: auto; padding: 10px 12px; line-height: 1.5; }
input[type=file] { padding: 8px 12px; height: auto; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox], input[type=radio] {
  width: 15px; height: 15px; margin: 0; accent-color: var(--accent);
}
.input-mono { font-family: var(--mono); }
.input-32 { height: 32px; padding: 0 10px; font-size: 13.5px; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }

/* кружок с номером шага: вход, привязка канала, оглавление доки */
.step-num {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; flex: none;
  font: 500 11px var(--mono); color: var(--muted);
}

/* === бейджи и метки === */

/* пилюля-статус (radius 20) и прямоугольная метка (radius 5) — второй формой
   помечен админ в шапке и тип канала */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 20px;
  font: 500 12px/1 var(--mono); white-space: nowrap;
  background: var(--bg2); color: var(--muted);
}
.badge-ok, .badge.done { background: var(--accent-soft); color: var(--accent); }
.badge-err, .badge.failed { background: var(--err-soft); color: var(--err); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-tag { border-radius: 5px; padding: 2px 7px; font-size: 11px; }
.badge-admin {
  border-radius: 5px; padding: 2px 7px; font-size: 11px;
  background: var(--err-soft); color: var(--err); margin-left: 2px;
}

/* точка статуса: цвет задаёт модификатор, пульс — состояние «идёт» */
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); flex: none;
}
.dot-10 { width: 10px; height: 10px; }
.dot-ok { background: var(--accent); }
.dot-err { background: var(--err); }
.dot-warn { background: var(--warn); }
.dot-live { animation: pulse 1.4s infinite; }

/* === вкладки === */

.tabs {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--line); padding: 0 8px;
}
/* прозрачная линия у неактивной вкладки, а не её отсутствие — иначе при
   переключении содержимое дёргается на два пикселя */
.tab {
  height: auto; padding: 14px 14px 12px; border: 0; border-radius: 0;
  background: none; color: var(--muted);
  font-weight: 500; font-size: 14px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); opacity: 1; text-decoration: none; }
.tab.is-on { color: var(--ink); border-bottom-color: var(--ink); }

/* сегментные кнопки (куда слать уведомления) — не вкладки, а выбор */
.seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.seg .btn { height: 36px; padding: 0 16px; background: none;
            color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
.seg .btn.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* === прогресс и тумблер === */

.bar { height: 6px; border-radius: 3px; background: var(--bg2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
/* вторая полоса — суточный расход. Он не достижение, а ограничение,
   поэтому серым: акцент в карточке остаётся один */
.bar-4 { height: 4px; border-radius: 2px; }
.bar-4 > i { background: var(--muted); border-radius: 2px; }
/* доли спикеров: сегменты подряд, каждый своим цветом */
.bar-split { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; }
.bar-split > i { display: block; height: 100%; }

/* тумблер — это <button> формы /settings/keep-results, а не checkbox:
   состояние приходит с сервера, значит и рисуем по классу, а не по :checked.
   Кружок белый в обеих темах — как в прототипе: на зелёном и на сером он
   одинаково читается, а `--card` в тёмной теме слился бы с фоном */
.toggle {
  width: 42px; height: 24px; padding: 0; border: 0; border-radius: 12px;
  background: var(--line); flex: none; position: relative; cursor: pointer;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: left .15s;
}
.toggle:hover { opacity: 1; }
.toggle.is-on { background: var(--accent); }
.toggle.is-on::after { left: 20px; }

/* === баннеры и плашки === */

.banner {
  padding: 14px 18px; border-radius: 12px; margin: 0 0 16px;
  background: var(--accent-soft); font-size: 13.5px;
}
.banner.error, .banner-err { background: var(--err-soft); color: var(--err); }
.banner.warn, .banner-warn { background: var(--warn-soft); color: var(--warn); }
p.error { color: var(--err); }

/* пунктирная плашка: пустое состояние списка, «КОМАНДА» в прайсе */
.dashed {
  border: 1px dashed var(--line); border-radius: 14px;
  padding: 18px 24px; background: none; color: var(--muted);
}
.dashed-12 { border-radius: 12px; }                       /* код, drop-зона */
.dashed-15 { border-width: 1.5px; border-radius: 12px; }  /* drop-зона */
/* пунктирная плашка, по которой кликают (код входа, выбор файла) */
.dashed-btn { background: var(--bg); cursor: pointer; }
.dashed-btn:hover { border-color: var(--accent); }

/* === код и таблицы === */

/* тёмный блок примера — тёмный в обеих темах: это «экран терминала»,
   а не поверхность интерфейса */
pre {
  background: var(--term); color: var(--term-ink);
  border: 0; border-radius: 12px;
  padding: 18px 20px; margin: 12px 0 16px; overflow-x: auto;
  font: 13px/1.65 var(--mono); white-space: pre;
}
pre code { background: none; border: 0; padding: 0; color: inherit; font: inherit; }
pre .c { color: var(--term-muted); }                      /* комментарий в примере */

code {
  font-family: var(--mono); font-size: .92em;
  background: var(--bg2); border-radius: 4px; padding: 1px 6px;
}

/* Заголовок таблицы капителью не делаем: в разметке он местами уже заглавными
   (админка), а где не заглавными — там и по макету обычный регистр. Нужна
   капитель — это `.eyebrow`. */
table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 14px; }
table th {
  text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line);
  font: 500 12px/1.4 var(--mono); letter-spacing: .05em; color: var(--muted);
}
table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line);
           vertical-align: top; }
table tr:last-child td { border-bottom: 0; }

/* === анимации === */

@keyframes pulse { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }
@keyframes typein { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes eq { 0%, 100% { transform: scaleY(.25) } 50% { transform: scaleY(1) } }
@keyframes spin { to { transform: rotate(360deg) } }

/* уважаем системную настройку: анимации тут украшение, а не смысл */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* === мобильная === */
/* В прототипах узкой ширины нет — правило одно: сайдбар уезжает под контент,
   сетки схлопываются в колонку, шапка переносится и не режет содержимое. */

@media (max-width: 900px) {
  main { padding: 20px 16px 48px; }
  .p-doc main { padding: 24px 16px 64px; }
  .layout, .layout-narrow { grid-template-columns: 1fr; gap: 20px; }
  .p-doc main { grid-template-columns: 1fr; gap: 28px; }

  .top-in, .top--site .top-in {
    padding: 0 16px; height: auto; min-height: 56px; gap: 10px 16px;
    flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px;
  }
  .nav { order: 3; width: 100%; gap: 0; overflow-x: auto; }
  .nav-a { height: 40px; padding: 0 10px; }
  .nav-a.is-on { margin-bottom: 0; }
  .nav-site { order: 3; width: 100%; gap: 18px; overflow-x: auto; }
  .top-right { gap: 10px; }
  /* имя и остаток в одну строку не влезают — остаток важнее */
  .who { overflow: hidden; text-overflow: ellipsis; max-width: 9em; }

  .foot-in { padding: 20px 16px; gap: 12px; }
}

@media (max-width: 560px) {
  .top-balance { font-size: 12.5px; }
  .card { padding: 16px; }
  .banner { padding: 12px 14px; }
}

/* === печать === */

@media print {
  /* на бумаге остаётся только сам счёт: ни шапки, ни кнопок, ни подвала */
  /* !important: секции экранов стоят ниже и при равном весе перебивали бы
     это правило — ссылка «к подписке» и рамка счёта лезли на лист (02.09) */
  header.top, footer, aside, .noprint, .banner { display: none !important; }
  body { background: #fff; }
  main { max-width: none; padding: 0; display: block; }
  .card { box-shadow: none; border: 0; padding: 0; }

  /* счёт: сайдбар выключен строкой выше, но сетка осталась бы и держала
     под него пустую колонку — на листе это пустая треть справа */
  .inv-layout { display: block; }
  /* печатная карточка на бумаге — уже сам лист: без рамки и своих полей.
     Селекторы из двух классов не для красоты: секция «экран: invoice» идёт
     в файле НИЖЕ печати, и при равном весе побеждала бы она — счёт печатался
     бы в рамке, а ссылка «к подписке» лезла бы на лист вопреки `.noprint`. */
  .inv-layout .paper { border: 0; border-radius: 0; padding: 0; background: #fff; color: #191a18; }
  .noprint.inv-back { display: none; }
}

/* === совместимость: старая разметка === */
/* Экраны, которые ещё не прошли свой чип редизайна, размечены прежними
   классами. Здесь они переведены на новые токены — чтобы не разъехались, пока
   до них не дошла очередь. Свой экран перерисовал — удали отсюда его строки. */

.back { font-size: 13.5px; color: var(--muted); }
.box { background: var(--bg2); border-radius: 12px; padding: 14px 16px; }
.banner.ok { background: var(--accent-soft); }

/* «Жду код от бота…» — общая строка входа (`_login_state.html`) и привязки
   канала (`_link_state.html`). Шаги и сам код отсюда ушли: у входа своя
   секция, у каналов — `.ch-step` и `.ch-code` в своей */
.waiting { color: var(--muted); font-size: 13.5px; }
.waiting::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  border-radius: 50%; background: var(--accent); animation: pulse 1.4s infinite;
}


/* оферта */
.doc h2 { margin: 26px 0 8px; font-size: 14px; color: var(--muted);
          text-transform: uppercase; letter-spacing: .04em; }
.doc p { margin: 0 0 12px; }
.doc .callout { background: var(--accent-soft); border-radius: 12px; padding: 14px 16px; }
.todo { color: var(--err); }

@media (max-width: 640px) {
}

/* === экран: landing === */
/* Витрина: hero с «терминалом», полоска фактов, секции 01–05, CTA.
   Ширину держат сами секции — у `.p-landing main` полей нет (см. «база»).
   Классы: ld-hero · ld-term/eq · ld-facts · ld-sec/ld-split · ld-steps ·
   ld-cards2 · ld-api · ld-plans/ld-team · ld-grid2 · ld-cta */

/* якорь из шапки не должен уезжать под липкую шапку (60px + воздух) */
.p-landing section[id] { scroll-margin-top: 76px; }

/* --- hero --- */

.ld-hero {
  max-width: 1160px; margin: 0 auto; padding: 72px 32px 48px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.ld-eyebrow { margin: 0 0 20px; display: flex; align-items: center; gap: 10px; }
.ld-h1 {
  margin: 0 0 22px; font-size: 60px; line-height: 1.02; font-weight: 600;
  letter-spacing: -.03em;
}
.ld-lead {
  margin: 0 0 32px; font-size: 19px; line-height: 1.5;
  color: var(--muted); max-width: 34em;
}
.ld-hero-btns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ld-hero-note { margin: 22px 0 0; font: 13px/1.6 var(--mono); color: var(--muted); }

/* --- «терминал»: картинка результата в hero --- */
/* Полоса тёмная в обеих темах, поэтому цвета голосов тут числом, а не
   токеном: светлый --accent (#1d8a5c) на чёрном читался бы хуже. */

.ld-term {
  background: var(--term); color: var(--term-ink);
  border-radius: 16px; padding: 22px 24px 24px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
  font: 13.5px/1.55 var(--mono); min-width: 0;
}
.ld-term-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--term-line); margin-bottom: 16px;
}
.ld-term-file { color: var(--term-muted); font-size: 12px; }
.ld-term-live {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #4fcf8c; white-space: nowrap;
}
.ld-term-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4fcf8c;
}
.ld-cues { display: grid; gap: 14px; }
.ld-cue { animation: typein .5s both; }
.ld-cue:nth-child(1) { animation-delay: .1s; }
.ld-cue:nth-child(2) { animation-delay: .5s; }
.ld-cue:nth-child(3) { animation-delay: .9s; }
.ld-cue:nth-child(4) { animation-delay: 1.3s; }
.ld-cue-head { display: flex; gap: 12px; color: var(--term-muted); font-size: 12px; }
.ld-who { color: #4fcf8c; font-weight: 500; }
.ld-who-2 { color: #7fa8f0; }
.ld-cue-text { margin-top: 3px; }
.ld-caret {
  display: inline-block; width: 8px; height: 15px; background: var(--term-ink);
  vertical-align: -2px; margin-left: 2px; animation: blink 1s step-end infinite;
}
.ld-term-foot {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--term-line);
  display: flex; align-items: center; gap: 16px;
}
.ld-term-time { color: var(--term-muted); font-size: 12px; white-space: nowrap; }

/* Эквалайзер: 36 полос, первые 12 зелёные. Высота, длительность и сдвиг у
   каждой свои (формула прототипа: 6+(i*37)%22 px, 1+(i%5)*.18 s, (i*.07)%1 s),
   поэтому правило на полосу. Сами полосы рисует шаблон циклом — так разметка
   не несёт 36 инлайновых стилей. */
.eq { display: flex; align-items: center; gap: 3px; height: 28px; flex: 1; }
.eq i {
  flex: 1; border-radius: 2px; background: #2a3630; transform-origin: center;
  animation-name: eq; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.eq i:nth-child(-n+12) { background: #4fcf8c; }
.eq i:nth-child(1){height:6px;animation-duration:1s;animation-delay:0s}
.eq i:nth-child(2){height:21px;animation-duration:1.18s;animation-delay:.07s}
.eq i:nth-child(3){height:14px;animation-duration:1.36s;animation-delay:.14s}
.eq i:nth-child(4){height:7px;animation-duration:1.54s;animation-delay:.21s}
.eq i:nth-child(5){height:22px;animation-duration:1.72s;animation-delay:.28s}
.eq i:nth-child(6){height:15px;animation-duration:1s;animation-delay:.35s}
.eq i:nth-child(7){height:8px;animation-duration:1.18s;animation-delay:.42s}
.eq i:nth-child(8){height:23px;animation-duration:1.36s;animation-delay:.49s}
.eq i:nth-child(9){height:16px;animation-duration:1.54s;animation-delay:.56s}
.eq i:nth-child(10){height:9px;animation-duration:1.72s;animation-delay:.63s}
.eq i:nth-child(11){height:24px;animation-duration:1s;animation-delay:.7s}
.eq i:nth-child(12){height:17px;animation-duration:1.18s;animation-delay:.77s}
.eq i:nth-child(13){height:10px;animation-duration:1.36s;animation-delay:.84s}
.eq i:nth-child(14){height:25px;animation-duration:1.54s;animation-delay:.91s}
.eq i:nth-child(15){height:18px;animation-duration:1.72s;animation-delay:.98s}
.eq i:nth-child(16){height:11px;animation-duration:1s;animation-delay:.05s}
.eq i:nth-child(17){height:26px;animation-duration:1.18s;animation-delay:.12s}
.eq i:nth-child(18){height:19px;animation-duration:1.36s;animation-delay:.19s}
.eq i:nth-child(19){height:12px;animation-duration:1.54s;animation-delay:.26s}
.eq i:nth-child(20){height:27px;animation-duration:1.72s;animation-delay:.33s}
.eq i:nth-child(21){height:20px;animation-duration:1s;animation-delay:.4s}
.eq i:nth-child(22){height:13px;animation-duration:1.18s;animation-delay:.47s}
.eq i:nth-child(23){height:6px;animation-duration:1.36s;animation-delay:.54s}
.eq i:nth-child(24){height:21px;animation-duration:1.54s;animation-delay:.61s}
.eq i:nth-child(25){height:14px;animation-duration:1.72s;animation-delay:.68s}
.eq i:nth-child(26){height:7px;animation-duration:1s;animation-delay:.75s}
.eq i:nth-child(27){height:22px;animation-duration:1.18s;animation-delay:.82s}
.eq i:nth-child(28){height:15px;animation-duration:1.36s;animation-delay:.89s}
.eq i:nth-child(29){height:8px;animation-duration:1.54s;animation-delay:.96s}
.eq i:nth-child(30){height:23px;animation-duration:1.72s;animation-delay:.03s}
.eq i:nth-child(31){height:16px;animation-duration:1s;animation-delay:.1s}
.eq i:nth-child(32){height:9px;animation-duration:1.18s;animation-delay:.17s}
.eq i:nth-child(33){height:24px;animation-duration:1.36s;animation-delay:.24s}
.eq i:nth-child(34){height:17px;animation-duration:1.54s;animation-delay:.31s}
.eq i:nth-child(35){height:10px;animation-duration:1.72s;animation-delay:.38s}
.eq i:nth-child(36){height:25px;animation-duration:1s;animation-delay:.45s}

/* Общее правило «reduce» гасит анимации длительностью, но eq застыл бы на
   сплющенных 25% — полосам и курсору нужен явный сброс. */
@media (prefers-reduced-motion: reduce) {
  .eq i { animation: none; transform: none; }
  .ld-caret { animation: none; }
}

/* --- полоска фактов --- */

.ld-facts {
  background: var(--bg2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ld-facts-in {
  max-width: 1160px; margin: 0 auto; padding: 18px 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  font: 13px/1.5 var(--mono); color: var(--muted);
}
.ld-fact-k { color: var(--ink); font-weight: 500; }

/* --- секции 01–05: заголовок слева, содержимое справа --- */

.ld-sec { max-width: 1160px; margin: 0 auto; padding: 56px 32px; }
.ld-sec-lead { padding: 88px 32px 40px; }      /* первая после полосы (01, 04) */
.ld-sec-data { padding: 72px 32px; }
.ld-split { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }
.ld-sec-eyebrow { margin: 0 0 12px; }
.ld-h2 {
  margin: 0; font-size: 36px; line-height: 1.1; font-weight: 600;
  letter-spacing: -.025em;
}
.ld-h2-sub { margin-bottom: 16px; }
.ld-sub { margin: 0; color: var(--muted); font-size: 16px; }

/* 01 — три шага в общей рамке: разделители сделаны зазором на фоне --line */
.ld-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.ld-step { background: var(--card); padding: 24px 22px 26px; }
.ld-step-n { font: 500 13px var(--mono); color: var(--accent); margin-bottom: 34px; }
.ld-h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ld-step-p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* 02 — четыре карточки 2×2 */
.ld-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ld-card {
  padding: 22px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card);
}
.ld-tag { font: 500 12px var(--mono); color: var(--muted); margin-bottom: 10px; }
.ld-tag-ac { color: var(--accent); }

/* 03 — тёмная полоса с curl */
.ld-api { background: var(--term); color: var(--term-ink); }
.ld-api-in {
  max-width: 1160px; margin: 0 auto; padding: 80px 32px;
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center;
}
.ld-api-eyebrow { margin: 0 0 12px; color: var(--term-muted); }
.ld-api-sub { margin: 0 0 24px; color: var(--term-muted); font-size: 16px; }
.ld-chips { display: flex; gap: 10px; flex-wrap: wrap; font: 12.5px var(--mono); }
.ld-chip { padding: 5px 10px; border: 1px solid var(--term-line); border-radius: 6px; }
.ld-api-link { display: inline-flex; margin-top: 28px; color: #4fcf8c; font-weight: 500; }
.ld-code {
  margin: 0; padding: 22px 24px; border: 1px solid var(--term-line);
  border-radius: 14px; background: rgba(255, 255, 255, .025);
  font-size: 13px; line-height: 1.7; min-width: 0;
}
.ld-code .k { color: #7fa8f0; }

/* 04 — тарифы */
.ld-price-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; margin-bottom: 32px; flex-wrap: wrap;
}
.ld-price-note { margin: 0; max-width: 30em; font-size: 14px; color: var(--muted); }
.ld-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ld-plan {
  padding: 24px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); display: flex; flex-direction: column; gap: 6px;
}
.ld-plan.is-pick { border-color: var(--accent); }
.ld-plan-tag {
  display: flex; align-items: center; gap: 10px;
  font: 500 12.5px var(--mono); color: var(--muted);
}
.ld-plan-sub { color: var(--accent); }
.ld-plan-price {
  margin-top: 8px; font-size: 34px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.1;
}
.ld-plan-per { font-size: 15px; color: var(--muted); font-weight: 400; }
.ld-plan-rate { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.ld-plan-list {
  border-top: 1px solid var(--line); padding-top: 14px;
  font-size: 14.5px; display: grid; gap: 6px;
}
.ld-plan-list b { font-weight: 600; }

/* «КОМАНДА» — пунктирная плашка (.dashed), но текст в ней обычный, не серый */
.ld-team {
  margin-top: 16px; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.ld-team-tag { font: 500 12.5px var(--mono); color: var(--muted); margin-right: 14px; }
.ld-note { margin: 20px 0 0; font-size: 13px; color: var(--muted); max-width: 70em; }
.ld-note-flush { margin: 0; font-size: 14px; }

/* 05 — шесть карточек 2×3 в общей рамке */
.ld-grid2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.ld-cell { background: var(--card); padding: 22px; }

/* --- CTA --- */

.ld-cta-sec { max-width: 1160px; margin: 0 auto; padding: 24px 32px 96px; }
.ld-cta {
  border-radius: 20px; background: var(--accent); color: var(--accent-ink);
  padding: 56px 48px; display: flex; justify-content: space-between;
  align-items: center; gap: 32px; flex-wrap: wrap;
}
.ld-cta-h2 {
  margin: 0 0 10px; font-size: 40px; line-height: 1.05; font-weight: 600;
  letter-spacing: -.03em;
}
.ld-cta-p { margin: 0; opacity: .85; font-size: 16px; }
.ld-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.ld-cta-btn {
  display: inline-flex; align-items: center; height: 48px; padding: 0 22px;
  border-radius: 10px; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.ld-cta-btn:hover { text-decoration: none; }
.ld-cta-fill { background: var(--accent-ink); color: var(--accent); font-weight: 600; }
.ld-cta-line { border: 1px solid var(--accent-ink); color: var(--accent-ink); }
.ld-cta-btn.is-off { opacity: .7; cursor: default; }

/* --- узкие экраны --- */

@media (max-width: 900px) {
  .ld-hero { grid-template-columns: 1fr; gap: 32px; padding: 40px 16px 32px; }
  .ld-h1 { font-size: 38px; }
  .ld-lead { font-size: 17px; margin-bottom: 24px; }
  .ld-facts-in { grid-template-columns: 1fr 1fr; gap: 12px 24px; padding: 16px; }
  .ld-sec, .ld-sec-lead, .ld-sec-data { padding: 48px 16px; }
  .ld-split { grid-template-columns: 1fr; gap: 24px; }
  .ld-steps, .ld-cards2, .ld-grid2, .ld-plans { grid-template-columns: 1fr; }
  .ld-api-in { grid-template-columns: 1fr; gap: 32px; padding: 48px 16px; }
  .ld-h2, .ld-cta-h2 { font-size: 30px; }
  .ld-cta-sec { padding: 16px 16px 56px; }
  .ld-cta { padding: 32px 24px; }
}

@media (max-width: 560px) {
  .ld-h1 { font-size: 32px; }
  .ld-facts-in { grid-template-columns: 1fr; }
  .ld-term { padding: 18px 16px 20px; font-size: 12.5px; }
  .ld-hero-btns .btn, .ld-cta-btn { width: 100%; justify-content: center; }
  .ld-plan-price { font-size: 30px; }
  .ld-cta-btns { width: 100%; }
}

/* === экран: login === */
/* Вход: карточка 440px с двумя шагами, плашка кода и строка ожидания.
   Центрирование и высоту даёт `.p-login main` (см. «база»). */

.lg-box { width: 100%; max-width: 440px; }
.lg-h1 {
  margin: 0 0 10px; font-size: 30px; font-weight: 600;
  letter-spacing: -.025em; line-height: 1.1;
}
.lg-intro { margin: 0 0 28px; color: var(--muted); }

.lg-steps {
  padding: 20px 22px; border-bottom: 1px solid var(--line);
  display: grid; gap: 14px;
}
.lg-step { display: flex; gap: 14px; align-items: flex-start; }
/* кружок шага тут на два пикселя крупнее общего — так в прототипе входа */
.lg-step .step-num { width: 24px; height: 24px; font-size: 12px; }
.lg-step-b { flex: 1; min-width: 0; }
.lg-step-t { font-weight: 500; margin-bottom: 10px; }

.lg-bots { display: flex; gap: 8px; }
.lg-bot { flex: 1; padding: 0; }

/* плашка кода — кнопка (.dashed .dashed-btn), клик копирует: static/js/login.js.
   Без JS код остаётся читаемым и выделяется мышью целиком (user-select) */
.lg-code {
  width: 100%; height: auto; padding: 18px; color: var(--ink); font-weight: 400;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.lg-code:hover { opacity: 1; }
.lg-code-num { font: 500 36px/1 var(--mono); letter-spacing: .14em; user-select: all; }
.lg-code-hint { font-size: 12.5px; color: var(--muted); }

/* Строка ожидания: слева htmx-фрагмент (_login_state.html), справа таймер.
   Полей у строки нет — их несут половины, иначе красная плашка «истёк» не
   дотянулась бы до краёв карточки. */
.lg-wait { display: flex; align-items: center; gap: 12px; }
.lg-wait #login-state { flex: 1; min-width: 0; }
.lg-wait .waiting { margin: 0; padding: 14px 0 14px 22px; }
.lg-ttl {
  font-size: 13.5px; color: var(--muted); white-space: nowrap;
  padding: 14px 22px 14px 0;
}
.lg-ttl b { font-weight: 400; }

.lg-expired {
  display: flex; justify-content: space-between; gap: 12px; padding: 14px 22px;
  background: var(--err-soft); color: var(--err); font-size: 13.5px;
}
.lg-expired a { color: var(--err); font-weight: 500; }
/* код истёк — «действует ещё» врать уже нечему */
#login-state.lg-expired ~ .lg-ttl { display: none; }

.lg-foot { margin: 18px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

@media (max-width: 560px) {
  .lg-h1 { font-size: 26px; }
  .lg-steps { padding: 16px; }
  .lg-code-num { font-size: 30px; }
  .lg-wait .waiting { padding-left: 16px; }
  .lg-ttl { padding-right: 16px; }
  .lg-expired { padding: 14px 16px; }
}

/* === экран: cabinet === */
/* Главная кабинета: карточка «Новая запись», лента записей, сайдбар.
   Классы: .cab-main · .tab-body · .drop (+ -icon -main -file -pick -hint,
   состояния .is-over .is-set) · .pick (+ .pick-join) · .new-row · .new-note ·
   .feed-head (+ .feed-count) · .feed-row (+ .feed-main .feed-name .feed-err
   .feed-act) · .feed-empty · .eyebrow-caps · .side-head (+ .side-more
   .side-note .side-rows) · .pack-num (+ -of -sub -bar -day) · .keep-row
   (+ .keep-name .keep-hint) · .chan-on · .chan-link.
   `.side-rows` и `.eyebrow-caps` берёт и экран записи — они про сайдбар
   кабинета вообще, а не про эту страницу. */

/* Колонка контента: между приёмом работы и лентой 24px — это два разных
   разговора, в сайдбаре карточки мельче и им хватает 16 (.stack). */
.cab-main { display: grid; gap: 24px; align-content: start; min-width: 0; }

/* --- карточка «Новая запись» --- */

.tab-body { padding: 20px; }
/* без JS показываем обе вкладки подряд (см. <noscript> в index.html) —
   тогда между ними нужна линия */
.tab-body + .tab-body { border-top: 1px solid var(--line); }

/* Drop-зона. <input type=file> лежит поверх на всю площадь и прозрачный:
   так работает нативный перенос файла мышью, а `required` остаётся живым —
   поле, спрятанное `display:none`, браузер не может показать в подсказке
   и молча отменяет отправку формы. */
.drop {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  min-height: 150px; padding: 20px; text-align: center;
  border: 1.5px dashed var(--line); border-radius: 12px;
  background: var(--bg); cursor: pointer;
}
.drop:hover, .drop.is-over { border-color: var(--accent); }
.drop.is-set { border-style: solid; border-color: var(--accent); }
.drop input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: 12px; opacity: 0; cursor: pointer;
}
.drop-icon {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 6px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font: 500 16px var(--mono);
}
.drop-main, .drop-file { font-weight: 500; overflow-wrap: anywhere; }
.drop-pick { color: var(--accent); }
.drop-hint { font: 12.5px/1.45 var(--mono); color: var(--muted); }

/* подпись над полем ссылки на встречу */
.pick { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
.pick-join { display: flex; gap: 12px; }
.pick-join input { flex: 1; min-width: 0; }
.new-row { display: flex; margin-top: 16px; }
.new-note { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }

/* --- лента записей --- */

.feed-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin: 0 0 12px; padding: 0 4px;
}
.feed-head h1 { margin: 0; }
.feed-count { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.feed-row {
  display: grid; grid-template-columns: 20px 1fr auto auto; gap: 16px;
  align-items: center; padding: 14px 20px; border-top: 1px solid var(--line);
}
.feed-row:first-child { border-top: 0; }
.feed-row:hover { background: var(--bg); }
.feed-main { min-width: 0; }
/* имя в одну строку с многоточием: длинное имя файла иначе распирает колонку
   и бейдж со статусом уезжает за край карточки */
.feed-name {
  display: block; color: var(--ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feed-name:hover { color: var(--accent); text-decoration: none; }
.feed-main .meta { margin-top: 2px; }
.feed-err { margin-top: 4px; font-size: 13px; color: var(--err); }
/* колонка действий одной ширины у всех строк: иначе бейджи ступеньками —
   у готовой записи кнопка есть, у соседней нет */
.feed-act { display: flex; justify-content: end; min-width: 104px; }
.feed-empty { padding: 48px 24px; text-align: center; }

/* --- сайдбар --- */

/* `.eyebrow-label` из общего слоя ждёт заглавные в разметке; здесь в разметке
   строчные — эти подписи одновременно текст страницы («Бесплатно осталось»,
   «Кто говорит»), и капитель им делает CSS. */
.eyebrow-caps { text-transform: uppercase; }

.side-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.side-more { font-size: 13px; font-weight: 500; white-space: nowrap; }
.side-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
/* строки «подпись — значение» в карточках сайдбара (пакет, хранение записи) */
.side-rows { display: grid; gap: 10px; font-size: 13.5px; }
.side-rows > div { display: flex; justify-content: space-between; gap: 12px; }

.pack-num { font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.pack-of { font-size: 15px; font-weight: 400; color: var(--muted); }
.pack-sub { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.pack-bar { margin: 14px 0 18px; }
.pack-day { margin-top: 8px; }

.keep-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.keep-row form { margin: 0; display: flex; }
.keep-name { font-weight: 500; }
.keep-hint { font-size: 12.5px; color: var(--muted); }

.chan-on { font: 12px/1.4 var(--mono); color: var(--accent); text-align: right; }
.chan-link { font-size: 13px; font-weight: 500; white-space: nowrap; }

@media (max-width: 560px) {
  .tab-body { padding: 16px; }
  /* кнопка уходит под название, бейдж остаётся справа от него */
  .feed-row { grid-template-columns: 20px 1fr auto; row-gap: 10px; padding: 14px 16px; }
  .feed-row > .badge { grid-column: 3; }
  .feed-act { grid-column: 2 / 4; justify-content: start; min-width: 0; }
}

/* === экран: record === */
/* Страница записи: расшифровка, реплики, «кто говорит», хранение.
   Классы: .rec-back · .rec-top (+ .rec-title .rec-h1 .rec-meta .rec-acts) ·
   .rec-wait · .rec-cues (+ .rec-times .rec-body) · .cue (+ -side -who -time
   -text) · .transcript · .who-list (+ .who-row .who-dot .who-name .who-share
   .who-bar) · .who-chip/.who-cue/.editing (фрагмент переименования) ·
   .sp-1/.sp-2/.sp-3. Подписи карточек сайдбара и строки «подпись — значение»
   общие с кабинетом: .eyebrow-caps, .side-rows. */

.rec-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--muted); margin-bottom: 18px;
}

.rec-top {
  display: flex; align-items: start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 24px;
}
.rec-title { min-width: 0; }
.rec-h1 { margin: 0 0 8px; font-size: 28px; letter-spacing: -.02em; line-height: 1.15; }
.rec-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 13px/1.5 var(--mono); color: var(--muted);
}
.rec-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-acts form { margin: 0; }
/* «идёт расшифровка» — строка с пульсирующей точкой, а не кнопка: она ничего
   не предлагает нажать, она сообщает, что страница обновится сама */
.rec-wait { display: flex; align-items: center; gap: 10px; }

/* --- расшифровка --- */

.rec-cues .card-head { padding: 14px 22px; }
.rec-cues h2 { margin: 0; font-size: 15px; }
.rec-times {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.rec-body { padding: 8px 22px 20px; }

.cue {
  display: grid; grid-template-columns: 132px 1fr; gap: 18px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.cue:first-child { border-top: 0; }
.cue-side { display: flex; flex-direction: column; align-items: start; gap: 4px; min-width: 0; }
/* имя спикера — кнопка-бейдж цвета спикера; стоит только там, где говорящий
   сменился, иначе колонка превращается в столбик повторов одного имени */
.cue-who {
  height: auto; padding: 2px 8px; border-radius: 6px;
  background: var(--sp-soft); color: var(--sp);
  font-weight: 600; font-size: 13.5px; text-align: left; white-space: normal;
}
.cue-who:hover { text-decoration: underline; opacity: 1; }
.cue-time { font: 12px/1.4 var(--mono); color: var(--muted); padding-left: 8px; }
.cue-text { margin: 0; font-size: 16px; line-height: 1.6; }
/* Чекбокс «таймкоды». Класс висит на <body>, а не на карточке: переименование
   спикера возвращает весь #record, и выбор пережил бы не каждую перерисовку. */
.no-times .cue-time { display: none; }

/* нечего показать: текст удалён или расшифровка пустая */
.rec-none { padding: 48px 24px; text-align: center; }

/* файл не разобрался на реплики — показываем как есть */
.transcript {
  white-space: pre-wrap; word-wrap: break-word; margin: 0;
  font: 13px/1.6 var(--mono); background: none; color: inherit;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
}

/* --- кто говорит --- */

/* цвет спикера в одном месте: 1/2/3, дальше по кругу (номер считает шаблон).
   Точка берёт сплошной цвет, бейдж имени — мягкий; оба через одну пару. */
.sp-1 { --sp: var(--accent); --sp-soft: var(--accent-soft); }
.sp-2 { --sp: var(--sp2); --sp-soft: var(--sp2-soft); }
.sp-3 { --sp: var(--sp3); --sp-soft: var(--sp3-soft); }

.who-list { display: grid; gap: 10px; }
.who-row { display: flex; align-items: center; gap: 10px; }
.who-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--sp); }
.who-chip { display: flex; flex: 1; min-width: 0; }
.who-name {
  flex: 1; min-width: 0; height: auto; padding: 0; border: 0; background: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  color: var(--ink); font-weight: 500; font-size: 14.5px; text-align: left;
}
.who-name:hover { color: var(--accent); opacity: 1; text-decoration: none; }
.who-name span:first-child { overflow: hidden; text-overflow: ellipsis; }
.who-share { font: 12px/1.4 var(--mono); color: var(--muted); font-weight: 400; flex: none; }
.who-bar { margin: 16px 0 12px; }
.who-bar > i { background: var(--sp); }

/* поле переименования (_speaker_edit.html) — на месте имени: в сайдбаре
   в строку, над репликой в 132px оно в строку не влезает и переносится */
.editing form { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; margin: 0; }
.editing input[type=text] {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px;
  border-color: var(--accent); font-size: 14px;
}
.editing .btn { height: 32px; padding: 0 10px; font-size: 13px; }
.editing .btn-bare { padding: 0 4px; }
.who-cue.editing { display: block; }
.who-cue.editing form { flex-wrap: wrap; }
.who-cue.editing input[type=text] { flex: none; width: 100%; }

@media (max-width: 700px) {
  .rec-h1 { font-size: 22px; }
  .rec-cues .card-head, .rec-body { padding-left: 16px; padding-right: 16px; }
  /* 132px под имя на телефоне — это половина экрана: имя и таймкод
     переезжают строкой над репликой */
  .cue { grid-template-columns: 1fr; gap: 6px; }
  .cue-side { flex-direction: row; align-items: baseline; gap: 10px; }
  .cue-time { padding-left: 0; }
}

/* === экран: topup === */
/* пополнение: карточки пакетов, оплата, история
   Классы: .topup-main · .page-head · .page-head-h2 · .pkg-grid · .pkg
   (+.pkg-radio/-tag/-note/-price/-sum/-per/-min/-lines/-corp/-corp-a/-foot) ·
   .term (+.term-switch/-opt/-radio/-n/-btn/-input/-unit/-hint) ·
   .pay (+.no-js) · .pay-body/-pick/-fields/-mail/-go/-panel · .hist/.hist-row/
   .hist-min(.is-plus) · .side-topup · .bal-num/-of/-sub/-bar/-rows/-foot/
   -warn/-note · .inv-list/.inv-row */

.topup-main { display: grid; gap: 28px; align-content: start; min-width: 0; }

/* заголовок экрана с подписью справа; 4px по бокам — чтобы h1 стоял в одной
   вертикали с текстом внутри карточек, а не на пиксель левее */
.page-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 16px; margin: 0 4px 14px; flex-wrap: wrap;
}
.page-head h1 { margin: 0; }
.page-head-h2 { margin: 0 4px 12px; }

/* тарифы */
.pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.pkg {
  position: relative; display: grid; gap: 6px; align-content: start;
  padding: 22px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); cursor: pointer;
}
.pkg:hover { border-color: var(--ink); }
/* выбранная карточка: рамка акцентом и мягкое кольцо — единственная тень
   в кабинете, она же и отмечает выбор */
.pkg:has(.pkg-radio:checked) {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Кружок радио рисуем сами (`appearance: none`), а не берём системный:
   в тёмной теме UA заливает невыбранное радио белым, и второй пакет читается
   как выбранный. Элемент остаётся настоящим <input type=radio> — с клавиатуры
   и скринридером он работает как обычно, только фокус подсвечиваем явно.
   Селектор из двух классов: общий слой задаёт размер через `input[type=radio]`,
   а это вес потяжелее одного класса. */
.pkg .pkg-radio {
  position: absolute; top: 18px; right: 18px;
  width: 18px; height: 18px; margin: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--line); border-radius: 50%; background: none;
  display: grid; place-items: center;
}
.pkg .pkg-radio::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: none;
}
.pkg .pkg-radio:checked { border-color: var(--accent); }
.pkg .pkg-radio:checked::after { background: var(--accent); }
.pkg .pkg-radio:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pkg-tag { display: flex; align-items: center; gap: 10px; padding-right: 30px; }
.pkg-note { font: 500 12.5px/1.2 var(--mono); color: var(--accent); }
.pkg-price {
  margin-top: 6px; font-size: 32px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.1;
}
.pkg-per { font-size: 14px; font-weight: 400; color: var(--muted); }
.pkg-min { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
.pkg-lines {
  display: grid; gap: 4px; font-size: 14px;
  border-top: 1px solid var(--line); padding-top: 12px;
}

.pkg-corp {
  margin-top: 14px; padding: 16px 22px; font-size: 14px; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.pkg-corp .eyebrow { margin-right: 12px; }
.pkg-corp-a { font-weight: 500; }
.pkg-foot { margin: 16px 4px 0; font-size: 12.5px; color: var(--muted); }

/* срок подписки: переключатель «Помесячно | На год» и счётчик месяцев.
   Радио спрятано, но не display:none — фокус с клавиатуры должен доходить */
.term { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 4px 16px; }
.term-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.term-opt { position: relative; }
.term-opt .term-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.term-opt > span {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--muted); cursor: pointer;
}
.term-opt:hover > span { color: var(--ink); }
.term-opt .term-radio:checked + span { background: var(--accent-soft); color: var(--accent); }
.term-opt .term-radio:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.term-n { display: inline-flex; align-items: center; gap: 6px; }
.term-btn {
  width: 32px; height: 32px; padding: 0; border: 1px solid var(--line);
  border-radius: 999px; background: none; color: var(--ink);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.term-btn:hover { border-color: var(--ink); opacity: 1; }
.term-input {
  width: 48px; height: 32px; padding: 0; text-align: center;
  border: 1px solid var(--line); border-radius: 8px; background: none;
  color: var(--ink); font-size: 14px; -moz-appearance: textfield;
}
.term-input::-webkit-outer-spin-button,
.term-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.term-unit { font-size: 13.5px; color: var(--muted); min-width: 4.6em; }
/* «счёт — от N месяцев»: под переключателем, цветом предупреждения */
.term-hint { flex-basis: 100%; color: var(--warn); }
.pay-oferta { margin: 16px 0 0; }

/* оплата */
.pay-body { padding: 20px 22px; }
.pay-pick {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px 16px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 10px; background: var(--bg);
  margin-bottom: 18px; font-size: 14px;
}
.pay-pick b { font-weight: 500; }
.pay-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pay-fields .field, .pay-mail { margin-bottom: 0; }
.pay-mail { max-width: 360px; }
.pay-go { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.pay-go .small { flex: 1 1 18em; }
/* галочка бонусов: между плашкой пакета и формами, одна на обе формы */
.pay-bonus {
  display: flex; align-items: flex-start; gap: 10px; margin: -6px 0 18px;
  padding: 12px 16px; border-radius: 10px; border: 1px dashed var(--line);
  font-size: 14px; cursor: pointer;
}
.pay-bonus input { margin-top: 3px; }
.pay-bonus b { font-weight: 500; }
.pay-disc { display: block; margin-top: 4px; color: var(--accent); }
/* сумма в надписи кнопки — отдельный элемент только ради подмены из JS,
   выделять её на фоне остальной надписи не нужно */
.pay-go button b { font-weight: inherit; }
/* Без JS вкладки переключать нечем — тогда показываем обе формы сразу
   и убираем полоску: неработающая вкладка хуже её отсутствия. Класс снимает
   static/js/topup.js первой же строкой. */
.pay.no-js .tabs { display: none; }
.pay.no-js .pay-panel { display: block; }

/* история операций */
.hist { font-size: 14px; }
.hist-row {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 16px;
  align-items: center; padding: 12px 20px; border-top: 1px solid var(--line);
}
.hist-row:first-child { border-top: 0; }
.hist-min { font: 13px/1.45 var(--mono); text-align: right; min-width: 70px; }
.hist-min.is-plus { color: var(--accent); }

/* сайдбар */
.side-topup .eyebrow-label { margin-bottom: 12px; }
.bal-num { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.bal-of { font-size: 15px; font-weight: 400; color: var(--muted); }
.bal-sub { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.bal-bar { margin: 14px 0 18px; }
.bal-rows { display: grid; gap: 10px; font-size: 13.5px; }
.bal-rows > div { display: flex; justify-content: space-between; gap: 12px; }
.bal-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
/* предупреждение о конце периода — плашка, а не карточка: у неё свой фон */
.bal-warn { margin: 0; padding: 18px 20px; border-radius: 14px; }
.bal-warn b { font-weight: 600; }
.bal-note { font-size: 12.5px; color: var(--muted); }

.inv-list { display: grid; gap: 10px; font-size: 13.5px; }
.inv-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-row .badge { padding: 2px 8px; }

/* === экран: invoice === */
/* счёт на оплату: печатная карточка (белая в обеих темах)
   Классы: .inv-layout · .inv-back · .paper (+-head/-eyebrow/-h1/-brand/-mark/
   -req/-req-k/-req-bank/-items/-no/-r/-last/-rub/-total/-total-k/-total-v/
   -vat/-purpose/-fine/-sign/-line) · .side-invoice · .inv-status/-sub ·
   .inv-acts · .inv-cancel · .inv-hint */

.inv-back { display: inline-flex; margin-bottom: 18px; }

/* Счёт — документ, а не поверхность интерфейса: цвета внутри заданы числами,
   а не токенами, чтобы он выглядел одинаково в светлой теме, в тёмной и на
   бумаге. Единственное место в кабинете, где так можно. */
.paper {
  display: block; background: #fff; color: #191a18;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 40px 44px; font-size: 14px;
}
.paper-head {
  display: flex; justify-content: space-between; align-items: start; gap: 24px;
  padding-bottom: 22px; border-bottom: 1px solid #dcdbd4; margin-bottom: 22px;
}
.paper-eyebrow {
  font: 500 12px/1.2 var(--mono); text-transform: uppercase;
  letter-spacing: .06em; color: #6f716c; margin-bottom: 6px;
}
.paper-h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.paper-h1 span { color: #6f716c; font-weight: 400; }
.paper-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; flex: none; }
/* тот же знак, что в шапке. На бумаге он печатается как картинка: <img> лист
   не теряет, в отличие от css-фона — его браузер режет, когда в настройках
   печати выключены фоновые изображения */
.paper-mark { width: 26px; height: 26px; display: block; }

.paper-req { display: grid; grid-template-columns: 130px 1fr; gap: 10px 20px; line-height: 1.5; }
.paper-req-k { color: #6f716c; }
.paper-req-bank { font-family: var(--mono); font-size: 13px; }

.paper-items { margin: 28px 0 18px; font-size: 14px; }
.paper-items th {
  font: 500 12px/1.4 var(--mono); text-transform: uppercase;
  letter-spacing: .05em; color: #6f716c;
  padding: 8px 12px 8px 0; border-bottom: 1px solid #191a18;
}
.paper-items td { padding: 12px 12px 12px 0; border-bottom: 1px solid #dcdbd4; }
/* общий слой снимает линию у последней строки таблицы — в счёте она нужна:
   это край позиций, под ним идёт итог */
.paper-items tbody tr:last-child td { border-bottom: 1px solid #dcdbd4; }
.paper-items .paper-no { width: 32px; }
.paper-items .paper-r { text-align: right; }
.paper-items th.paper-r { white-space: nowrap; }
.paper-items .paper-last { padding-right: 0; }
.paper-rub { white-space: nowrap; }

.paper-total { display: flex; justify-content: end; align-items: baseline; gap: 16px; }
.paper-total-k { color: #6f716c; }
.paper-total-v { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
/* скидка бонусами — строка над итогом, мельче него: итог остаётся главным числом */
.paper-discount { margin-bottom: 4px; }
.paper-discount .paper-total-v { font-size: 16px; font-weight: 500; }
.paper-vat { text-align: right; font-size: 12.5px; color: #6f716c; }
.paper-purpose {
  margin-top: 24px; padding: 14px 16px; border-radius: 10px;
  background: #f4f3ef; font-size: 13px;
}
.paper-purpose b { font-weight: 600; }
.paper-fine { margin: 16px 0 0; font-size: 12.5px; color: #6f716c; }
.paper-sign { margin: 36px 0 0; font-size: 13px; }
.paper-line {
  display: inline-block; width: 220px; border-bottom: 1px solid #191a18;
  vertical-align: -2px; margin-left: 8px;
}

.side-invoice .eyebrow-label { margin-bottom: 12px; }
.inv-status { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.inv-status b { font-weight: 500; }
.inv-status-sub { font-size: 12.5px; color: var(--muted); }
.inv-acts { display: grid; gap: 8px; margin-top: 18px; }
.inv-acts form { margin: 0; }
.inv-cancel { height: 36px; font-size: 13px; }
.inv-hint { font-size: 12.5px; color: var(--muted); }

/* === экран: channels === */
/* Классы: .ch-main · .page-head-col · .ch-lead · .ch-row · .ch-mark(.is-off) ·
   .ch-name · .ch-link (+-head/-body) · .ch-steps/.ch-step/.ch-step-note ·
   .ch-code-box/.ch-code/-v/-hint · .ch-wait/.ch-wait-err · .ch-sub/.ch-foot
   (+.ch-foot-out) · .side-channels · .ch-can · .ch-note */

.ch-main { display: grid; gap: 24px; align-content: start; min-width: 0; }
.page-head-col { padding: 0 4px; }
.page-head-col h1 { margin: 0 0 6px; }
.ch-lead { margin: 0; color: var(--muted); font-size: 14px; max-width: 60em; }

/* список каналов: привязанные и ещё нет — одна полка, а не два раздела */
.ch-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 16px;
  align-items: center; padding: 16px 20px; border-top: 1px solid var(--line);
}
.ch-row:first-child { border-top: 0; }
.ch-row form { margin: 0; }
.ch-mark {
  width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);
  display: grid; place-items: center; font: 500 13px var(--mono); color: var(--ink);
}
.ch-mark.is-off { color: var(--muted); }
.ch-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 500; }
.ch-name .badge { padding: 3px 9px; }
.ch-row .meta { margin-top: 3px; }

/* панель привязки: рамка акцентом — это единственное живое действие экрана */
.ch-link { border-color: var(--accent); }
.ch-link-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 14px;
}
.ch-main .card h2 { margin-bottom: 6px; }
.ch-link-head h2 { margin: 0; }
.ch-link-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ch-steps { display: grid; gap: 10px; align-content: start; font-size: 14px; }
.ch-step { display: flex; gap: 10px; }
.ch-step-note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

.ch-code-box { display: grid; gap: 8px; align-content: start; }
.ch-code {
  display: grid; gap: 4px; justify-items: center; height: auto; width: 100%;
  padding: 16px; border: 1px dashed var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink); font-weight: 400;
}
.ch-code:hover { border-color: var(--accent); opacity: 1; }
.ch-code-v { font: 500 30px/1 var(--mono); letter-spacing: .14em; user-select: all; }
.ch-code-hint { font-size: 12px; color: var(--muted); }
/* «Жду код от бота…» — тот же `.waiting` с точкой-пульсом, но по центру
   колонки с кодом, поэтому точка идёт флекс-элементом, а не отступом */
.ch-wait {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; font-size: 13px;
}
.ch-wait::before { margin-right: 0; }
.ch-wait-err { margin: 0; font-size: 13px; color: var(--err); text-align: center; }

.ch-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
.ch-foot { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.ch-foot-out { margin: 0 4px; }
.side-channels .eyebrow-label { margin-bottom: 12px; }

/* === экран: invite (пригласить друга) — на каркасе каналов ===
   Классы: .ref-row · .ref-cell · .ref-url · .ref-copy · .ref-none */
.ref-cell { min-width: 0; }
.ref-url a { word-break: break-all; }
.ref-copy { white-space: nowrap; }
.ref-none { margin: 16px 20px; }
@media (max-width: 600px) {
  .ref-row { grid-template-columns: 40px 1fr; }
  .ref-row .ref-copy { grid-column: 2; justify-self: start; }
}
.ch-can { display: grid; gap: 8px; font-size: 13.5px; }
.ch-note { font-size: 12.5px; color: var(--muted); }

/* --- узкие экраны: внутренние сетки трёх экранов в одну колонку --- */
@media (max-width: 700px) {
  .pkg-grid, .pay-fields, .ch-link-body { grid-template-columns: 1fr; }
  .pkg { padding: 18px; }
  .pkg-price { font-size: 28px; }
  /* дата уходит на свою строку: 130px + описание + сумма в 390px не встают */
  .hist-row { grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 16px; }
  .hist-row .meta { grid-column: 1 / -1; }
  .paper { padding: 24px 20px; }
  .paper-head { flex-wrap: wrap; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; }
  .paper-h1 { font-size: 22px; }
  .paper-req { grid-template-columns: 1fr; gap: 2px; }
  .paper-req-k { margin-top: 10px; }
  .paper-req-k:first-child { margin-top: 0; }
  .paper-items { font-size: 12.5px; }
  .paper-items th, .paper-items td { padding: 8px 8px 8px 0; }
  .paper-total-v { font-size: 22px; }
  .ch-row { grid-template-columns: 40px 1fr; row-gap: 10px; }
  .ch-row > form, .ch-row > .meta:last-child { grid-column: 2; }
}


/* === экран: api === */
/* API в кабинете: ключ, пример curl, расход по дням.
   Классы: .api-off (+.api-off-note) · .api-head · .api-col · .api-key
   (+.api-key-row, .api-key-foot, .api-rotate) · .api-curl (+.api-curl-head) ·
   .api-usage (+.api-usage-row, .api-usage-head, .api-usage-num,
   .api-usage-min, .api-usage-bar) · .api-side-head · .api-topup ·
   .api-bal (+.api-bal-low) · .api-facts · .api-params */

/* «выключено»: сайдбара нет — показывать в нём пока нечего */
.api-off { max-width: 640px; margin: 48px auto 0; text-align: center; }
.api-off h1 { margin: 0 0 14px; font-size: 32px; line-height: 1.1; letter-spacing: -.025em; }
.api-off > p { margin: 0 0 28px; color: var(--muted); }
.api-off form { margin: 0; }
.api-off-note { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.api-off-note b { color: var(--ink); font-weight: 500; }

/* заголовок экрана и ссылка на публичную доку в одной строке */
.api-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 0 4px;
}
.api-head h1 { margin: 0; }
.api-head a { font-size: 13.5px; font-weight: 500; white-space: nowrap; }

.api-col { display: grid; gap: 24px; align-content: start; min-width: 0; }

/* поле ключа. Маску рисует шаблон, полный ключ лежит в data-атрибуте и
   подставляется js/api.js — на экран он попадает только по кнопке */
.api-key-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.api-key {
  flex: 1; min-width: 240px; height: 42px;
  display: flex; align-items: center; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  font: 14px/1 var(--mono); letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.api-key-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 12px;
  font-size: 12.5px; color: var(--muted);
}
.api-key-foot form { margin: 0; }
/* «перевыпустить ключ» — подчёркнута всегда, при наведении красная
   (`.link.danger` из общего слоя): действие необратимое */
.api-rotate { font-size: 12.5px; text-decoration: underline; }

/* быстрый старт: «экран терминала», тёмный в обеих темах */
.api-curl {
  border-radius: 14px; padding: 20px 22px;
  background: var(--term); color: var(--term-ink);
  font: 13px/1.7 var(--mono);
}
.api-curl-head {
  display: flex; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--term-line);
  color: var(--term-muted); font-size: 12px;
}
.api-curl pre { margin: 0; padding: 0; border-radius: 0; background: none; font: inherit; }

/* расход по дням: не <table>, а grid — ширины колонок держит сетка */
.api-usage { font-size: 14px; }
.api-usage-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 24px;
  align-items: center; padding: 11px 20px; border-top: 1px solid var(--line);
}
.api-usage-head {
  padding: 10px 20px; border-top: 0;
  font: 500 12px/1.2 var(--mono); letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.api-usage-num { min-width: 60px; text-align: right; font-family: var(--mono); }
.api-usage-min {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  min-width: 90px; font-family: var(--mono);
}
/* ширина полосы — доля от максимума за период, её считает шаблон */
.api-usage-bar { height: 6px; border-radius: 3px; background: var(--accent); flex: none; }

/* сайдбар */
.api-side-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.api-side-head form { margin: 0; }
.api-topup { color: var(--accent); font-size: 13px; font-weight: 500; }
.api-topup:hover { color: var(--accent); }
.api-bal { font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.api-bal span { font-size: 15px; font-weight: 400; color: var(--muted); }
.api-bal-low { color: var(--err); }
.api-facts { display: grid; gap: 10px; margin-top: 18px; font-size: 13.5px; }
.api-facts > div { display: flex; justify-content: space-between; gap: 12px; }
.api-facts > div > span + span { font-family: var(--mono); text-align: right; }
.api-params { display: grid; gap: 8px; font-size: 13.5px; }
.api-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }

@media (max-width: 560px) {
  .api-off { margin-top: 24px; }
  .api-off h1 { font-size: 26px; }
  .api-key { min-width: 0; width: 100%; }
  .api-curl { padding: 16px; font-size: 12px; }
  .api-usage-row, .api-usage-head { padding-left: 14px; padding-right: 14px; gap: 12px; }
}

/* === экран: api-docs === */
/* публичная дока: липкое оглавление, секции, таблицы.
   Классы: .doc-toc · .doc-body · .doc-lead · .doc-chips · .doc-steps ·
   .doc-note · .doc-ask (+.doc-ask-links) · .doc-t-fields, .doc-t-misc,
   .doc-t-limits, .doc-t-errors (ширины первых колонок).
   Капитель в <th> не ставим: спецификация её просит, прототип — нет, и общий
   слой уже решил этот вопрос в пользу обычного регистра (см. «код и таблицы»).
   Кириллица капителью в 12px читается хуже, а «Что это» → «ЧТО ЭТО» ничего
   не добавляет. Решение записано в отчёте чипа. */

/* две колонки этой странице задаёт её экран, а не общий слой: `main` один на
   всех, и grid тут нужен только доке. Схлопывание — в media ниже: правило
   мобильной секции стоит в файле выше и само по себе уже не перебьёт */
.p-doc main {
  display: grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start;
}

.doc-toc {
  position: sticky; top: 84px; align-content: start;
  display: grid; gap: 4px; font-size: 13.5px;
}
.doc-toc .eyebrow-label { margin-bottom: 8px; }
.doc-toc a { color: var(--ink); padding: 4px 0; }
.doc-toc a:hover { color: var(--accent); text-decoration: none; }

/* min-width:0 обязателен: без него <pre> с длинной строкой распирает колонку
   grid шире экрана, и вбок едет вся страница, а не сам блок кода */
.doc-body { display: grid; gap: 56px; max-width: 760px; min-width: 0; }
.doc-body > section { min-width: 0; scroll-margin-top: 80px; }
.doc-body h1 { margin: 0 0 16px; font-size: 40px; line-height: 1.05; letter-spacing: -.03em; }
.doc-body h2 { margin: 0 0 14px; font-size: 22px; letter-spacing: -.02em; }
.doc-body h3 { margin: 22px 0 8px; font-size: 15px; letter-spacing: 0; }

.doc-lead { font-size: 17px; color: var(--muted); }
.doc-chips {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 28px; font: 13px var(--mono);
}
.doc-chips span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; }

/* нумерация кружками, а не маркерами списка: номер тут — часть картинки */
.doc-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.doc-steps > li { display: flex; gap: 12px; }
.doc-note { margin-top: 10px; font-size: 13.5px; color: var(--muted); }

.doc-t-fields th:first-child { width: 120px; }
.doc-t-fields th:nth-child(2) { width: 110px; }
.doc-t-misc th:first-child { width: 200px; }
.doc-t-limits td:first-child { width: 260px; color: var(--muted); }
.doc-t-errors th:first-child { width: 70px; }

.doc-ask {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 22px 24px;
}
.doc-ask-links { display: flex; gap: 16px; flex-wrap: wrap; font-weight: 500; }

@media (max-width: 900px) {
  /* оглавление уезжает над текстом и перестаёт быть липким: на узком экране
     оно съело бы половину первого экрана */
  .p-doc main { grid-template-columns: 1fr; gap: 28px; }
  .doc-toc {
    position: static; display: flex; flex-wrap: wrap; gap: 4px 16px;
    padding-bottom: 16px; border-bottom: 1px solid var(--line);
  }
  .doc-toc .eyebrow-label { width: 100%; margin-bottom: 2px; }
  .doc-body { gap: 40px; }
  .doc-body h1 { font-size: 30px; }
  .doc-body h2 { font-size: 20px; }
  /* ширины колонок из макета на 390px не помещаются */
  .doc-t-fields th:first-child, .doc-t-fields th:nth-child(2),
  .doc-t-misc th:first-child, .doc-t-limits td:first-child,
  .doc-t-errors th:first-child { width: auto; }
}

/* === экран: admin === */
/* счета и организации: таблицы на grid, инлайн-правки.
   Классы: .adm-tabs · .adm-head · .adm-scroll · .adm-table (+.adm-inv,
   .adm-org) · .adm-row (+.adm-row-head, .is-off) · .adm-num · .adm-r
   (+.adm-r-muted) · .adm-name · .adm-act (+.adm-in-min, .adm-in-note,
   .adm-in-fix) · .adm-claimed · .adm-low · .adm-issues (+.adm-fix) · .adm-foot

   Заголовки колонок — капителью из CSS, в разметке обычный регистр: так же
   устроен `.eyebrow` в общем слое. В <th> доки капители нет — там решение
   обратное и объяснено в её секции. */

.p-admin main { display: grid; gap: 24px; align-content: start; }
/* в grid отступ баннера сложился бы с gap */
.p-admin main > .banner { margin: 0; }
/* Обязательно: у элемента grid минимальная ширина по умолчанию равна ширине
   его содержимого, и широкая таблица растягивала бы не свой контейнер со
   скроллом, а всю страницу — на 390px кабинет уезжал вбок целиком. */
.p-admin main > * { min-width: 0; }

/* «Счета | Организации» — два маршрута, поэтому вкладки здесь ссылки, а не
   переключатель: страница перезагружается, состояние живёт в адресе */
.adm-tabs { margin: 0; padding: 0; }
.adm-tabs .tab { text-decoration: none; }

.adm-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin: 0 4px 12px;
}
.adm-head h1 { margin: 0; }

/* карточка-таблица шире экрана уезжает внутри себя; страница вбок не едет */
.adm-scroll { overflow-x: auto; }
.adm-table { font-size: 14px; }
.adm-inv { min-width: 1180px; }
.adm-org { min-width: 1080px; }

.adm-row {
  display: grid; gap: 14px; align-items: center;
  padding: 12px 20px; border-top: 1px solid var(--line);
}
.adm-inv .adm-row { grid-template-columns: 120px 1fr 1.2fr 90px 90px 90px 140px 260px; }
.adm-org .adm-row { grid-template-columns: 70px 1.4fr 1fr 110px 90px 100px 340px; }
.adm-row-head {
  padding: 10px 20px; border-top: 0;
  font: 500 11.5px/1.2 var(--mono); letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
/* отменённый счёт и выключенная организация: строка есть, но она уже не работа */
.adm-row.is-off { opacity: .5; }
/* без этого ячейка не сжимается уже своего содержимого и лезет на соседнюю */
.adm-row > * { min-width: 0; }

/* id организации и id платежа — не «инлайн-код в плашке», а просто моноширинный
   текст (так и в прототипе): в колонке 70px плашка выглядит обрубком, а слаг
   вроде `test-integrations` из неё вылезает */
.adm-row code {
  justify-self: start; max-width: 100%; overflow-wrap: anywhere;
  background: none; padding: 0; border-radius: 0; color: var(--muted);
}
.adm-num { font-family: var(--mono); font-weight: 500; }
.adm-r { text-align: right; font-family: var(--mono); }
.adm-r-muted { color: var(--muted); }
.adm-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 500; }
.adm-claimed { margin-top: 4px; font-size: 12px; color: var(--accent); }
/* меньше десяти минут — это уже не «мало», а «завтра встанет» */
.adm-low { color: var(--err); }
.adm-foot { margin: 12px 4px 0; font-size: 12.5px; color: var(--muted); }

/* Колонка действий из макета уже своих кнопок с полями (340px против ~380
   нужных), и в прототипе они просто наезжали на соседнюю колонку. Ширину
   колонки не трогаем — она контракт; вместо этого разрешаем ужаться полю
   комментария: кнопки держат размер, поле забирает остаток. Тогда вёрстка
   сама подстраивается и под другой кегль, и под другую ширину экрана. */
.adm-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.adm-act form { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
/* поля по ширине содержимого: общий слой тянет input на всю строку */
.adm-act input { width: 110px; flex: 0 1 auto; min-width: 0; }
.adm-act .adm-in-min { width: 70px; flex: none; font-family: var(--mono); }
.adm-act .adm-in-note { width: 120px; min-width: 44px; }
.adm-act button { flex: none; }

/* непонятные поступления: рамка предупреждения, но не баннер — это работа */
.adm-issues { border-color: var(--warn); }
.adm-issues-head { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.adm-issues-head h2 { margin: 0 0 4px; }
.adm-issues-head p { margin: 0; font-size: 13px; color: var(--muted); }
.adm-issue-row { grid-template-columns: 130px 1fr auto 1fr auto; }
.adm-fix { display: flex; align-items: center; gap: 8px; }
.adm-fix form { display: flex; align-items: center; gap: 8px; margin: 0; }
.adm-fix input { flex: none; width: 170px; }

@media (max-width: 900px) {
  .adm-head { flex-wrap: wrap; gap: 4px 16px; }
  /* Счета и организации уезжают вбок внутри своей карточки (там сетка из
     макета и ей нужна ширина), а разбор поступления — это несколько полей
     подряд: его дешевле сложить в колонку, чем заставлять скроллить. */
  .adm-issue-row { grid-template-columns: 1fr; gap: 8px; }
  .adm-fix, .adm-fix form { width: 100%; }
  .adm-fix input { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* === экран: oferta === */