/* Токены скопированы из DatOneLoadAnalyzer/src/styles/tokens.css: кабинет должен читаться
   как часть продукта. Тёмная тема по умолчанию, светлая - явный выбор (как в расширении и
   в админке), выбор живёт в localStorage. */
:root, :root[data-theme="dark"] {
  --bg: #05070a; --surface: #0d1417; --surface-2: #111a1e; --surface-3: #162025;
  --border: #1c2a2e; --border-strong: #24373a;
  --text: #d9e6e3; --text-secondary: #9bb0ac; --text-muted: #5f7d7a; --text-faint: #3d5450;
  --accent: #2de2c8; --accent-strong: #22c7b0; --accent-bg: rgba(45,226,200,.12);
  --accent-border: rgba(45,226,200,.35); --accent-ink: #05070a;
  --success: #34d399; --success-bg: rgba(52,211,153,.12);
  --warning: #ffb238; --warning-bg: rgba(255,178,56,.12);
  --danger: #ff2e88; --danger-bg: rgba(255,46,136,.12);
  --shadow: 0 8px 24px rgba(0,0,0,.45);
  --grid-line: rgba(25,221,213,.025); --glow: rgba(21,231,221,.06);
  /* Серии статистики. Не акцент кабинета: три величины стоят рядом, и каждая пара обязана
     различаться в дейтеранопии - бирюза с розовым давала ΔE 2.1 и была заменена на синий. */
  --s-match: #7683e8; --s-calls: #17a892; --s-mails: #c07a29;
}
:root[data-theme="light"] {
  --bg: #f3fbfb; --surface: #ffffff; --surface-2: #f2fafa; --surface-3: #eaf6f6;
  --border: rgba(0,126,133,.16); --border-strong: rgba(0,171,178,.42);
  --text: #102b30; --text-secondary: #4b6367; --text-muted: #71898d; --text-faint: #a8bcbe;
  --accent: #00aeb4; --accent-strong: #007d84; --accent-bg: rgba(0,174,180,.12);
  --accent-border: rgba(0,166,174,.35); --accent-ink: #ffffff;
  --success: #0f9d68; --success-bg: rgba(15,157,104,.12);
  --warning: #b45309; --warning-bg: rgba(180,83,9,.1);
  --danger: #dc5368; --danger-bg: rgba(220,83,104,.12);
  --shadow: 0 16px 40px rgba(38,92,97,.14);
  --grid-line: rgba(0,144,150,.035); --glow: rgba(0,174,180,.1);
  --s-match: #5560c8; --s-calls: #00959c; --s-mails: #b4651b;
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font-size: 14px; line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at 68% -10%, var(--glow), transparent 36%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 34px,
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* Нижние 64px раньше были воздухом в конце страницы; теперь его даёт футер (.page-foot и
   его собственный отступ снизу), и оставлять оба - это ровно тот разрыв, из-за которого
   футер выглядит отвалившимся от контента. */
.shell { max-width: 1060px; margin: 0 auto; padding: 26px 20px 24px; }

/* Футер страницы. Живёт снаружи .shell-ов (они прячутся по очереди), поэтому виден и на
   входе, и на регистрации компании, и в самом кабинете - как раз там, где владельцу может
   понадобиться адрес поддержки.
   page-foot, а не foot: .foot здесь уже занят строкой «Отправить код ещё раз · Изменить
   email» внутри карточки входа, и общее имя раскидало бы её флексом по всей ширине. */
.page-foot {
  max-width: 1060px; margin: 0 auto; padding: 0 20px 36px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  color: var(--text-faint); font-size: 12.5px;
}
.page-foot a {
  color: var(--text-muted); text-decoration: none;
  border-bottom: 1px solid var(--border-strong); padding-bottom: 1px;
}
.page-foot a:hover { color: var(--accent); border-bottom-color: var(--accent-border); }

.topbar { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; }
.brand-mark { width: 38px; height: 38px; flex: none; border: 1px solid var(--accent-border);
  border-radius: 10px; background: var(--surface); color: var(--accent); display: grid; place-items: center; }
.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-text .app { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.brand-text .co { font-size: 12px; color: var(--text-muted); }
.topbar .spacer { flex: 1 1 auto; }
.who { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 13px 5px 6px; background: var(--surface); font-size: 12.5px; }
.who .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent-strong); font-size: 10.5px; font-weight: 700; }
.icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-secondary); cursor: pointer; display: grid;
  place-items: center; font-size: 14px; }
.icon-btn:hover { border-color: var(--accent-border); color: var(--text); }

.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.tab-btn { border: 0; background: transparent; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .12em; font-size: 11px; font-weight: 700; padding: 10px 2px 12px; cursor: pointer;
  position: relative; font-family: inherit; }
.tab-btn[aria-selected="true"] { color: var(--text); }
.tab-btn[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0;
  bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.tab-btn:hover:not([aria-selected="true"]) { color: var(--text-secondary); }

.panel { display: none; }
.panel.on { display: block; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-secondary); font-weight: 700; }
.card-head .note { font-size: 12px; color: var(--text-muted); }

.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); font-weight: 700; }
.stat .v { font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat .v small { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }

.meter { margin-top: 16px; }
.meter-track { height: 8px; border-radius: 999px; background: var(--surface-3);
  border: 1px solid var(--border); overflow: hidden; display: flex; }
.meter-fill { background: linear-gradient(90deg, var(--accent-strong), var(--accent)); transition: width .3s ease; }
.meter-pending { background: var(--accent-bg); transition: width .3s ease; }
.meter-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 9px; font-size: 11.5px; color: var(--text-muted); }
.meter-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }

/* Статистика. Цвета серий - не акцент кабинета: три величины стоят рядом и должны
   различаться и в дейтеранопии, и на печати; шаги проверены отдельно под тёмную и светлую
   поверхность (не осветлены друг из друга). */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.stat-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
  padding: 13px 15px 8px; display: flex; flex-direction: column; gap: 3px; }
.stat-card .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint);
  font-weight: 700; display: flex; align-items: center; gap: 7px; }
.stat-card .k i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.stat-card .v { font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-card .sub { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-height: 16px; }
.spark { display: block; width: 100%; height: 40px; margin-top: 4px; overflow: visible; }
.former td { opacity: .72; }
.former td:first-child::after { content: "место отозвано"; display: block; font-size: 10.5px;
  color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
tr:last-child td { border-bottom: 0; }
/* Действия строки - в одну линию: «Письмо ещё раз» и «Отозвать» друг под другом читались
   как две разные строки таблицы. Таблица и так скроллится по горизонтали (.table-wrap). */
td.row-actions { text-align: right; white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.active { background: var(--success-bg); color: var(--success); }
.pill.invited { background: var(--warning-bg); color: var(--warning); }
.pill.off { background: var(--danger-bg); color: var(--danger); }

.btn { min-height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-secondary); font-family: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; transition: .18s ease; }
.btn:hover:not(:disabled) { border-color: var(--accent-border); color: var(--text); }
.btn.primary { border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: var(--accent-ink); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.06); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--text-muted); padding: 0 8px; }
.btn.quiet:hover:not(:disabled) { color: var(--danger); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.danger:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); }

/* Подтверждение. Одно окно на оба действия: разное у них только заголовок и список
   последствий, а список - это и есть весь смысл окна. «Отмена» стоит первой и получает
   фокус: окно всплывает по клику, и Enter по привычке не должен ничего отзывать. */
dialog.ask { border: 1px solid var(--border-strong); border-radius: 14px; padding: 0;
  background: var(--surface); color: var(--text); max-width: 440px; width: calc(100% - 32px);
  box-shadow: var(--shadow); }
dialog.ask::backdrop { background: rgba(2, 8, 10, .62); }
.ask-body { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.ask-body h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ask-sub { margin: 0; font-size: 12.5px; color: var(--text-muted); word-break: break-all; }
.ask-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ask-list li { display: flex; gap: 9px; align-items: baseline; font-size: 13px; color: var(--text-secondary); }
.ask-list li::before { content: "✕"; color: var(--danger); font-size: 11px; flex: none; }
.ask-list li.kept::before { content: "✓"; color: var(--success); }
.ask-acts { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px;
  border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 13px 13px; }
.btn:focus-visible, .tab-btn:focus-visible, input:focus-visible, .seg button:focus-visible,
.plan:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input[type="email"], input[type="text"], input[type="number"] {
  min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font-family: inherit; font-size: 13px; }
input::placeholder { color: var(--text-faint); }

.invite-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.invite-row input { flex: 1 1 240px; }
.hint { font-size: 12px; color: var(--text-muted); margin-top: 9px; }
.hint.warn { color: var(--warning); }
.hint.bad { color: var(--danger); }

.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px;
  background: var(--surface); gap: 2px; }
/* 10px по бокам, не 13: «Ежемесячно» шире «Помесячно» на 29px, и в узком окне переключатель
   переставал помещаться рядом со счётчиком мест - вся строка уезжала вниз. */
.seg button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 11.5px;
  font-weight: 700; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent-strong); }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.plan { text-align: left; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
  padding: 14px 15px; cursor: pointer; font-family: inherit; color: inherit; transition: .18s ease;
  display: flex; flex-direction: column; gap: 4px; }
.plan:hover { border-color: var(--border-strong); }
.plan[aria-pressed="true"] { border-color: var(--accent-border); background: var(--accent-bg); }
.plan .lanes { font-size: 13.5px; font-weight: 700; }
.plan .price { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.plan .per { font-size: 11.5px; color: var(--text-muted); }
.plan .price s { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-left: 7px; }
.plan .yearly { font-size: 11.5px; font-weight: 600; color: var(--accent-strong); }
/* С 28.09.2026 карточка тарифа - не переключатель, а счётчик мест этого тарифа: компания берёт
   смесь Pro и Ultra. Подсвечена карточка, в которой есть места. */
.plan .plan-stepper { margin-top: 8px; align-self: flex-start; }
.seat-total { font-size: 19px; font-weight: 700; padding: 8px 0; }
.plan-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--border-strong); }
.plan-tag.ultra { border-color: var(--accent-border); color: var(--accent-strong); }
#invite-plan { min-height: 38px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); padding: 0 8px; }

/* Разные отступы по осям: 20px между полями в строке, но 16px когда узкое окно поставило их
   друг под друга - иначе стопка выглядит не строкой, свернувшейся по ширине, а двумя
   самостоятельными блоками. */
.config-row { display: flex; flex-wrap: wrap; gap: 16px 20px; margin-top: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-secondary); font-size: 17px; font-family: inherit; cursor: pointer; line-height: 1; }
.stepper button:hover { border-color: var(--accent-border); color: var(--text); }
.stepper input { width: 74px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Родные стрелки type=number прячем: у счётчика уже есть свои «−» и «+», а браузерные
   всплывают поверх цифры при наведении и выглядят третьей парой кнопок. */
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input { -moz-appearance: textfield; appearance: textfield; }

.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; }
.rung { border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; background: var(--surface-2);
  display: flex; flex-direction: column; gap: 2px; transition: .18s ease; }
.rung .range { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); font-weight: 700; }
.rung .off { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.rung.on { border-color: var(--accent-border); background: var(--accent-bg); }
.rung.on .off, .rung.on .range { color: var(--accent-strong); }

.breakdown { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 4px; }
.line { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.line .lbl { flex: 1 1 auto; font-size: 13px; color: var(--text-secondary); }
.line .lbl em { font-style: normal; color: var(--text-muted); font-size: 12px; }
.line .amt { font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.line.off .amt { color: var(--accent-strong); }
.line.total { border-bottom: 0; padding-top: 14px; }
.line.total .lbl { font-size: 14px; color: var(--text); font-weight: 700; }
.line.total .amt { font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.line.per { border-bottom: 0; padding-top: 0; }
.line.per .lbl, .line.per .amt { color: var(--text-muted); font-size: 12.5px; font-weight: 600; }

.math-note { margin-top: 14px; border: 1px solid var(--accent-border); background: var(--accent-bg);
  border-radius: 10px; padding: 11px 13px; font-size: 12.5px; color: var(--text-secondary); }
.math-note b { color: var(--text); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }

.card-on-file { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.card-on-file .spacer { flex: 1 1 auto; }

.gate { max-width: 460px; margin: 60px auto 0; padding: 28px 26px 22px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.gate .brand-mark { margin: 0 auto 14px; }
.gate h1 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.01em; text-align: center; }
.gate p.sub { margin: 0 0 20px; font-size: 13px; color: var(--text-muted); text-align: center; }
.gate label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); margin: 14px 0 7px; }
.gate input { width: 100%; }
.gate .btn { width: 100%; margin-top: 16px; }
.gate .foot { margin: 14px 0 0; font-size: 12px; color: var(--text-muted); text-align: center; }
.gate .link { background: none; border: 0; color: var(--accent-strong); font: inherit; font-size: 12px; cursor: pointer; padding: 0; }

/* ---- страница создания компании (не .gate: см. company.html) ---------------- */
.signup-head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; }
.signup-head h1 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.signup-head .sub { margin: 3px 0 0; font-size: 13px; color: var(--text-muted); }
/* Правая колонка уже левой и держит ширину: в ней столбик сумм, и «плавающая» колонка
   заставляла бы цифры прыгать при каждом изменении числа мест. */
.cfg { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.cfg > .card { display: flex; flex-direction: column; gap: 0; }
.cfg-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px; }
.cfg-label + .plan-grid, .cfg-label + .ladder { margin-bottom: 4px; }
.cfg .card > input + .cfg-label,
.cfg .card > .plan-grid + .cfg-label { margin-top: 20px; }
.cfg .card > .config-row + .cfg-label { margin-top: 20px; }
.cfg .card > input { width: 100%; }
/* Счёт прилипает к верху на широком экране: владелец крутит число мест внизу левой колонки,
   а смотрит при этом на сумму. На узком .cfg уже стал одной колонкой, и липкость там мешала. */
.cfg-total { position: sticky; top: 20px; }
.cfg-total .breakdown { margin-top: 12px; }
.cfg-total .btn.wide { width: 100%; justify-content: center; margin-top: 16px; }
.cfg-total .hint { margin-top: 10px; }
@media (max-width: 860px) {
  .cfg { grid-template-columns: 1fr; }
  .cfg-total { position: static; }
}

/* ---- подтверждение после создания ---------------------------------------- */
.banner { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--accent-border);
  background: var(--accent-bg); border-radius: 12px; padding: 13px 15px; margin-bottom: 18px; }
.banner .ic { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--accent);
  color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.banner-text { flex: 1 1 auto; min-width: 0; }
.banner-text b { font-size: 13.5px; }
.banner-text p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-secondary); }
.banner-x { border: 0; background: none; color: var(--text-muted); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 2px; font-family: inherit; }
.banner-x:hover { color: var(--text); }

/* ---- «Тариф» одной строкой ----------------------------------------------- */
.fold { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.fold-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 17px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; flex-wrap: wrap; }
.fold-head:hover { background: var(--surface-2); }
/* Шире и темнее, чем просится: на 11px «▸» в светлой теме читается точкой, а не стрелкой,
   и строка выглядит некликабельной. Фиксированная ширина - чтобы заголовок не дёргался
   при повороте. */
.fold-head .chev { color: var(--text-secondary); font-size: 13px; width: 12px;
  display: inline-block; text-align: center; transition: transform .18s ease; }
.fold-head[aria-expanded="true"] .chev { transform: rotate(90deg); }
.fold-title { font-size: 15px; font-weight: 700; }
.fold-amt { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; }
.fold-body { border-top: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; gap: 16px; }
/* Карточки внутри раскрытой строки — уже внутри рамки, вторая рамка вокруг них выглядела бы
   коробкой в коробке. */
.fold-body > .card { border: 0; background: none; padding: 0; }
.fold-body > .card + .card { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 0; }
/* Строка «Карта и счета» - вторая строка вкладки «Подписка». Не карточка: рядом со свёрнутым
   тарифом карточка выглядела бы разделом, а это такая же одна строка, только без раскрытия. */
.strip { display: flex; align-items: center; gap: 12px; padding: 14px 17px; flex-wrap: wrap; }
.strip-title { font-size: 14px; font-weight: 700; }
.strip-note { font-size: 12.5px; color: var(--text-muted); }
.strip .btn { margin-left: auto; }
.panel > .fold + .fold { margin-top: 12px; }
.panel > .fold + .hint { margin-top: 10px; }

.msg { border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin-top: 14px; }
.msg.bad { background: var(--danger-bg); color: var(--danger); }
.msg.good { background: var(--success-bg); color: var(--success); }
.hidden { display: none !important; }

@media (max-width: 620px) { .ladder { grid-template-columns: repeat(2, 1fr); } .tabs { gap: 18px; } }

/* ---- переключатель языка (собирается в /static/i18n.js) --------------------
   Кнопка того же размера, что и переключатель темы рядом, но с кодом языка: без него глобус
   не говорит, какой язык сейчас включён, а это единственное, ради чего на него смотрят. */
.lang-wrap { position: relative; display: inline-flex; }
.lang-badge { width: auto; gap: 6px; padding: 0 9px; }
.lang-badge .lang-code { font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.gate-lang { display: flex; justify-content: flex-end; margin: -6px -4px 2px 0; }
.lang-popover {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 172px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow);
}
.lang-option {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 0; border-radius: 8px; padding: 8px 10px; background: transparent; cursor: pointer;
  color: var(--text-secondary); font: inherit; font-size: 13px; text-align: left;
}
.lang-option:hover { background: var(--surface-2); color: var(--text); }
.lang-option.on { color: var(--text); background: var(--accent-bg); }
.lang-option-code { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--text-faint); }
.lang-option.on .lang-option-code { color: var(--accent-strong); }
.lang-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }