/* «Табло»: холодный бумажный лист, чёрные линии на всю ширину, жёсткие углы.

   ДИЗАЙН-КОД. Все значения — только из токенов ниже; новых чисел в правилах
   не заводим. Не хватает ступени — сначала решаем, нужна ли она вообще.
   · Шрифты по ролям: Onest — слова; пиксельный Pixelify — только цифры-показания
     (счётчики, номера шагов, деньги), им не набираем слова; JetBrains Mono —
     домены, IP, ключи, лог.
   · Текст: 7 ступеней (--fs-xs…--fs-2xl). 14 — интерфейс (кнопки, поля, таблицы),
     16 — чтение, 18 — подзаголовки и вводный текст. Крупные показания — --fs-d-*.
   · Отступы: шкала 4 · 8 · 12 · 16 · 24 · 32 · 48 · 72 (--s-1…--s-8).
     Высота любого контрола — --control (44) или --control-sm (32).
   · Цвет только у статусов и одного «живого» пикселя (--signal). Знаки
     провайдеров — чёрная квадратная плашка, знак цвета бумаги.
   · Движение: 3 длительности (--dur-fast 120, --dur 200, --dur-slow 300),
     появление — --ease-out, перемещение по экрану — --ease-in-out. */

/* «1», «2», «5», «7» у Pixelify читаются плохо (флажок единицы оторван, 2 и 5 похожи
   на Z и S, у семёрки скруглённый верх) — подменяем своими (5×7 пикселей, метрики
   Pixelify; производная от Pixelify Sans, OFL 1.1) */
@font-face { font-family: "Raskur Digits"; src: url("/static/fonts/raskur-digits-400.woff2?v=2") format("woff2");
  font-weight: 400; font-display: swap; unicode-range: U+0031, U+0032, U+0035, U+0037; }
@font-face { font-family: "Raskur Digits"; src: url("/static/fonts/raskur-digits-500.woff2?v=2") format("woff2");
  font-weight: 500 700; font-display: swap; unicode-range: U+0031, U+0032, U+0035, U+0037; }

:root {
  color-scheme: light;
  /* ---- цвет ---- */
  --paper: #eef0eb;      /* фон: холодный серо-зелёный, как корпус прибора */
  --paper-2: #e3e6df;    /* панели, шапки таблиц */
  --paper-3: #d6dad1;    /* hover / выбранное */
  --field: #fbfcf9;      /* поля ввода, выпадающий список */
  --ink: #0d0e0c;        /* текст, линии, главная кнопка */
  --text: #23251f;
  --muted: #5d6259;
  --idle: #7a7f75;
  --rule: #0d0e0c;       /* разделители секций — сплошная чёрная линия */
  --line: rgba(13, 14, 12, .16);
  --line-strong: rgba(13, 14, 12, .38);
  --line-on-ink: rgba(238, 240, 235, .4);
  --on-color: #fff;      /* текст на цветной заливке (сигнал, статус) */
  --focus: #1f4fff;      /* только фокус клавиатуры */
  --signal: #ff3b1f;     /* «живой» пиксель и hover главной кнопки */
  --ok: #1e7f39;
  --wait: #a86100;
  --err: #cc2a17;
  --scrim: rgba(13, 14, 12, .55);
  --scrim-0: rgba(13, 14, 12, 0);
  --shadow-pop: 4px 4px 0 rgba(13, 14, 12, .12);
  /* лог — инвертированный блок */
  --con-text: #e9ece5;
  --con-dim: #8e948a;
  --con-ok: #6fdc8c;
  --con-err: #ff8a78;
  --con-warn: #f1b65a;

  /* ---- шрифт ---- */
  --sans: "Onest", "Golos Text", "Segoe UI", Roboto, Arial, sans-serif;
  --pix: "Raskur Digits", "Pixelify Sans", "Onest", ui-monospace, monospace;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px;         /* шапки таблиц, метки, подписи вкладок на телефоне */
  --fs-sm: 13px;         /* подсказки, мета, лог */
  --fs-md: 14px;         /* интерфейс: кнопки, поля, таблицы, вторичный текст */
  --fs-base: 16px;       /* чтение */
  --fs-lg: 18px;         /* h3, вводный текст, пункты лендинга */
  --fs-xl: 22px;         /* h2 */
  --fs-2xl: 34px;        /* h1 и заголовки секций лендинга */
  --fs-num-s: 22px;      /* пиксельные цифры: баланс в шапке, «+» вопросов */
  --fs-num-m: 34px;      /* номера шагов лендинга */
  --fs-num-l: 56px;      /* номера шагов мастера */
  --fs-d-stat: clamp(48px, 6vw, 80px);     /* показания: статистика, баланс */
  --fs-d-meter: clamp(120px, 17vw, 260px); /* главный счётчик */
  --fs-d-hero: clamp(40px, 4.5vw, 62px);   /* заголовки-лозунги лендинга */
  --fs-d-ticker: clamp(24px, 3vw, 40px);   /* бегущая строка */
  --lh-num: .9;          /* пиксельные цифры */
  --lh-display: 1;       /* лозунги */
  --lh-head: 1.15;
  --lh-ui: 1.4;
  --lh-body: 1.55;
  --ls-display: -0.04em;
  --ls-head: -0.02em;
  --ls-caps: .02em;

  /* ---- отступы и размеры ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --gut: var(--s-6);
  --maxw: 1200px;
  --control: 44px;
  --control-sm: 32px;
  --bar: 3px;            /* акцентная полоса: вкладка, сохранённый доступ, предупреждение */
  --mark: 8px;           /* квадратный пиксель статуса */
  --logo-l: 56px;
  --logo-m: 40px;

  /* ---- движение (правила Эмиля Ковальски): сильный ease-out на появление ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 120ms;     /* отклик: hover, нажатие, смена цвета */
  --dur: 200ms;          /* интерфейс: диалог, список, раскрытие, сегменты */
  --dur-slow: 300ms;     /* перемещение и «праздник» */
  interpolate-size: allow-keywords;
}
@media (max-width: 760px) {
  :root { --gut: var(--s-4); --fs-2xl: 28px; --fs-num-l: 40px; --fs-d-meter: clamp(110px, 38vw, 180px); }
}

/* ================= основа ================= */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
/* телефон: без серо-синей вспышки при тапе (у всех контролов свой :active) */
html { -webkit-tap-highlight-color: transparent; }
/* контролы: без задержки двойного тапа и без выделения подписи долгим нажатием */
button, a, summary, [role="button"], label.pcard, label.pm-card, .seg label, .amt-chip { touch-action: manipulation; }
button, .btn, .btn-line, .tabs a, .subnav a, .seg label, .amt-chip, label.pcard, label.pm-card, summary {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 400 var(--fs-base)/var(--lh-body) var(--sans); min-height: 100vh; min-height: 100svh; overflow-wrap: anywhere;
}
h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 500; letter-spacing: var(--ls-head); line-height: var(--lh-head); text-wrap: balance; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
b, strong { font-weight: 600; color: var(--ink); }
p { margin: 0 0 var(--s-3); }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } }
code, pre, kbd { font-family: var(--mono); }
code { background: var(--paper-2); padding: 1px var(--s-1); font-size: .88em; color: var(--ink); }
pre { margin: 0; white-space: pre-wrap; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--paper); }
[hidden] { display: none !important; }
/* лендинг: текст не выделяется и картинки не перетаскиваются (копирование режет app.js) */
.no-copy body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.no-copy img { -webkit-user-drag: none; }
#view:focus { outline: none; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: var(--s-2); z-index: 100; }
.skip:focus { left: var(--s-2); top: var(--s-2); }
.boot { padding: var(--gut); color: var(--muted); font-family: var(--pix); }
.wrap, .lwrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* текстовые роли */
.muted { color: var(--muted); }
.small { font-size: var(--fs-md); line-height: var(--lh-body); }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; display: inline-block; }
/* подпись к группе контролов вне .field (тариф, сумма, способ оплаты) */
.lbl { display: block; font-size: var(--fs-md); font-weight: 500; color: var(--ink); margin-bottom: var(--s-2); }

/* отступы-утилиты: только ступени шкалы */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-5); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--s-4); }
/* ширины полей формы */
.w-xs { max-width: 200px; }
.w-narrow { max-width: 380px; }
.w-form { max-width: 560px; }
.span-all { grid-column: 1 / -1; }

/* ================= каркас кабинета ================= */
.top { background: var(--paper); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 30; }
.top .wrap { display: flex; align-items: stretch; gap: var(--s-5); min-height: 60px; }
.logo { display: flex; align-items: center; color: var(--ink); text-decoration: none; white-space: nowrap; font-weight: 600; letter-spacing: var(--ls-head); font-size: var(--fs-lg); }
.logo span { font-family: var(--pix); font-weight: 400; margin-left: 2px; }
@media (hover: hover) and (pointer: fine) { .logo:hover { text-decoration: none; } }
.who { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-md); white-space: nowrap; }
.who .bal { font-family: var(--pix); font-size: var(--fs-num-s); color: var(--ink); text-decoration: none; }
.linkbtn {
  font: 500 var(--fs-md)/1 var(--sans); color: var(--err); cursor: pointer; background: transparent;
  border: 1px solid var(--err); padding: 0 var(--s-4); min-height: var(--control-sm);
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .linkbtn:hover { background: var(--err); color: var(--paper); } }
.maint { background: var(--ink); color: var(--paper); padding: var(--s-2) 0; font-size: var(--fs-md); }
.maint .wrap::before { content: "■ "; color: var(--signal); }

main { padding: var(--s-7) 0 var(--s-8); }
.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gut); flex-wrap: wrap; margin-bottom: var(--s-5); }
.page-h p { margin: var(--s-2) 0 0; color: var(--muted); }
/* подзаголовок раздела внутри страницы: «Лог», «Итог», «Пополнить» */
.h-sec { margin: var(--s-6) 0 var(--s-4); }
.foot { border-top: 1px solid var(--rule); padding: var(--s-5) 0; font-size: var(--fs-md); color: var(--muted); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }

/* ---------- вкладки: значок, подпись — подсказкой снизу при наведении ---------- */
.tabs { display: flex; align-items: stretch; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { position: relative; display: flex; align-items: center; padding: 0 var(--s-3); color: var(--muted); text-decoration: none; white-space: nowrap; font-size: var(--fs-md); }
.tabs a[aria-current="page"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .tabs a:hover { color: var(--ink); } }
.tabs .ti { flex: none; }
/* полоска активной вкладки — её собственный ::after (положение задаёт CSS, путь — FLIP в JS) */
.tabs a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar);
  background: var(--ink); transform-origin: 0 0; pointer-events: none;
}
@media (min-width: 761px) {
  .tabs { overflow: visible; }
  /* подсказка не занимает места в ряду: соседи не сдвигаются */
  .tabs .tl {
    position: absolute; top: calc(100% + var(--s-2)); left: 50%; z-index: 30;
    padding: var(--s-1) var(--s-2); background: var(--ink); color: var(--paper);
    font-size: var(--fs-sm); line-height: var(--lh-ui); white-space: nowrap; pointer-events: none;
    opacity: 0; transform: translate(-50%, -4px);
    transition: opacity var(--dur-fast) ease, transform var(--dur) var(--ease-out);
  }
  /* у текущей вкладки подпись стоит в ряду рядом со значком — видно, где ты */
  .tabs a[aria-current="page"] .tl {
    position: static; padding: 0; margin-left: var(--s-2); background: none; color: inherit;
    font-size: inherit; opacity: 1; transform: none; transition: none;
  }
  .tabs a:not([aria-current="page"]):focus-visible .tl { opacity: 1; transform: translate(-50%, 0); }
}
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  /* появляется с паузой — пролёт мышью по значкам ничего не показывает */
  .tabs a:not([aria-current="page"]):hover .tl {
    opacity: 1; transform: translate(-50%, 0);
    transition: opacity var(--dur) ease var(--dur-fast), transform var(--dur) var(--ease-out) var(--dur-fast);
  }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  .tabs a:not([aria-current="page"]) .tl { transform: translate(-50%, 0) !important; }
}

/* ================= кнопки =================
   t-g — главное действие (сплошная чёрная), t-a — «нужно твоё действие» (янтарный пиксель),
   t-r — разрушительное (красная рамка), btn-line — второстепенное. */
.btn, .btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font: 500 var(--fs-md)/var(--lh-ui) var(--sans); padding: var(--s-2) var(--s-5); min-height: var(--control);
  border: 1px solid var(--ink); cursor: pointer; text-decoration: none;
  background: var(--ink); color: var(--paper);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover, .btn.t-g:hover { background: var(--signal); border-color: var(--signal); color: var(--on-color); text-decoration: none; } }
.btn.t-g { background: var(--ink); color: var(--paper); }
.btn.t-a { background: transparent; color: var(--ink); }
.btn.t-a::before { content: ""; width: var(--mark); height: var(--mark); background: var(--wait); flex: none; }
@media (hover: hover) and (pointer: fine) { .btn.t-a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } }
.btn.t-r { background: transparent; color: var(--err); border-color: var(--err); }
@media (hover: hover) and (pointer: fine) { .btn.t-r:hover { background: var(--err); border-color: var(--err); color: var(--on-color); } }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .btn-line:hover { border-color: var(--ink); text-decoration: none; } }
.btn[disabled], .btn-line[disabled] { opacity: .35; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .btn[disabled]:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } }
.btn-sm { padding: var(--s-1) var(--s-3); min-height: var(--control-sm); }
.btns { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
/* отклик на нажатие пальцем — там, где у мыши был hover */
.amt-chip:active, label.pcard:active, label.pm-card:active, .subnav a:active, .faq summary:active,
table.grid tbody tr:active { background: var(--paper-2); }
.btn-line:active:not([disabled]) { border-color: var(--ink); }
/* отклик на нажатие: кнопка чуть «проседает» */
.btn:active:not([disabled]), .btn-line:active:not([disabled]), .linkbtn:active { transform: scale(0.97); }

/* ================= поля ================= */
.field { display: block; margin-bottom: var(--s-4); }
.field > .lbl { margin-bottom: var(--s-2); }
.field .hint { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-1); }
.field .hint.err { color: var(--err); }
input[type=text], input[type=password], input[type=email], input[type=number], textarea, select {
  width: 100%; font: 400 var(--fs-md)/var(--lh-ui) var(--mono); color: var(--ink);
  background: var(--field); border: 1px solid var(--line-strong); padding: var(--s-2) var(--s-3); min-height: var(--control);
}
input::placeholder, textarea::placeholder { color: var(--idle); }
@media (hover: hover) and (pointer: fine) { input:hover, textarea:hover, select:hover { border-color: var(--ink); } }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--ink); }
textarea { min-height: 110px; resize: vertical; font-size: var(--fs-sm); }
/* iOS приближает страницу при фокусе на поле мельче 16px и не отдаляет обратно */
@media (pointer: coarse) {
  input[type=text], input[type=password], input[type=email], input[type=number], textarea, select { font-size: var(--fs-base); }
}
select { font-family: var(--sans); }
input[type=file] { font: inherit; font-size: var(--fs-md); max-width: 100%; color: var(--text); }
input[type=file]::file-selector-button {
  font: 500 var(--fs-md) var(--sans); color: var(--ink); background: transparent; border: 1px solid var(--ink);
  padding: 0 var(--s-3); min-height: var(--control-sm); margin-right: var(--s-3); cursor: pointer;
}

/* свои переключатели вместо системных кружков: квадрат, как всё на сайте */
input[type=checkbox], input[type=radio] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 18px; height: 18px; margin: 0 var(--s-3) 0 0; vertical-align: -4px;
  border: 1.5px solid var(--ink); background: var(--paper);
  display: inline-grid; place-content: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
input[type=radio]:checked { background: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); }
input[type=checkbox]:checked { background: var(--ink); }
input[type=checkbox]:checked::after {
  content: ""; width: 9px; height: 5px; border: solid var(--paper);
  border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) { label:hover > input[type=radio]:not(:checked):not(:disabled),
label:hover > input[type=checkbox]:not(:checked):not(:disabled) { background: var(--paper-2); } }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input[type=checkbox]:disabled, input[type=radio]:disabled { border-color: var(--idle); background: var(--paper-2); cursor: not-allowed; }
.check { display: flex; align-items: flex-start; margin-bottom: var(--s-2); cursor: pointer; }
.check input { margin-top: var(--s-1); flex: none; }
.check .mono { font-size: var(--fs-md); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gut); }

/* сегменты: заливка выбранного — ::before метки, переезжает FLIP-ом */
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ink); }
.seg label {
  position: relative; z-index: 0; display: inline-flex; align-items: center;
  min-height: calc(var(--control) - 2px); padding: 0 var(--s-4);
  cursor: pointer; font-size: var(--fs-md); color: var(--ink); transition: color var(--dur) ease;
}
.seg label + label { border-left: 1px solid var(--ink); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { color: var(--paper); }
.seg label:has(input:checked)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink); transform-origin: 0 0; pointer-events: none;
}
.seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -4px; }
.seg label:has(input:disabled) { color: var(--idle); cursor: not-allowed; }

.err { color: var(--err); font-size: var(--fs-md); margin: var(--s-2) 0 0; }
.okline { color: var(--ok); font-size: var(--fs-md); margin: var(--s-2) 0 0; }

/* раскрывашка для редких полей */
details.more { margin: 0 0 var(--s-4); }
details.more > summary { list-style: none; cursor: pointer; font-size: var(--fs-md); color: var(--muted); display: inline-flex; gap: var(--s-2); align-items: center; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; font-family: var(--pix); width: 12px; color: var(--ink); }
details.more[open] > summary::before { content: "−"; }
@media (hover: hover) and (pointer: fine) { details.more > summary:hover { color: var(--ink); } }
details.more[open] > summary { margin-bottom: var(--s-3); }

/* свой выпадающий список (initSelects) */
.dd { position: relative; }
.dd-btn {
  width: 100%; min-height: var(--control); display: flex; align-items: center; gap: var(--s-3); text-align: left;
  font: 400 var(--fs-md)/var(--lh-ui) var(--sans); color: var(--ink); background: var(--field);
  border: 1px solid var(--line-strong); padding: var(--s-2) calc(var(--s-6) + var(--s-2)) var(--s-2) var(--s-3); cursor: pointer; position: relative;
  transition: border-color var(--dur-fast) ease;
}
.dd-btn::after {
  content: ""; position: absolute; right: var(--s-4); top: 50%; width: 7px; height: 7px;
  border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}
.dd.open .dd-btn::after { transform: translateY(-30%) rotate(-135deg); }
.dd.open .dd-btn { border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .dd-btn:hover { border-color: var(--ink); } }
.dd-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--ink); }
.dd-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-ph { color: var(--idle); }
.dd-meta { font: 400 var(--fs-sm) var(--mono); color: var(--muted); flex: none; }
.dd-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + var(--s-1));
  margin: 0; padding: var(--s-1) 0; list-style: none; max-height: 264px; overflow-y: auto;
  background: var(--field); border: 1px solid var(--ink); box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top center;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.dd-list:focus { outline: none; }
.dd.open .dd-list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd-list li {
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--control); padding: 0 var(--s-3) 0 var(--s-6); position: relative;
  font-size: var(--fs-md); color: var(--ink); cursor: pointer;
}
.dd-list li > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-list li.hl { background: var(--paper-3); }
.dd-list li[aria-selected="true"]::before {
  content: ""; position: absolute; left: var(--s-3); top: 50%; width: 9px; height: 5px;
  border: solid var(--ink); border-width: 0 0 2px 2px; transform: translateY(-70%) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .dd-list, .dd.open .dd-list { transform: none; }
  .dd-btn::after { transition: none; }
}

/* ================= сообщения и статусы ================= */
.note { border: 1px solid var(--line-strong); background: var(--paper-2); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-4); font-size: var(--fs-md); }
.note.warn { border-color: var(--wait); }
.note.warn::before { content: "■ "; color: var(--wait); }
.note.bad { border-color: var(--err); color: var(--err); }

/* итог проверки сервера */
.verdict { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.verdict p { margin: 0; }
.verdict-ok { color: var(--ok); font-weight: 500; font-size: var(--fs-md); display: flex; align-items: center; gap: var(--s-2); }
.verdict-ok::before { content: ""; width: var(--mark); height: var(--mark); background: var(--ok); flex: none; }
.verdict-warn { border-left: var(--bar) solid var(--wait); background: var(--paper-2); padding: var(--s-3) var(--s-4); font-size: var(--fs-md); color: var(--text); max-width: 72ch; }
.verdict-warn .verdict-h { color: var(--ink); font-weight: 500; margin-bottom: var(--s-1); }

/* статус ноды: квадратный пиксель + подпись */
.pill { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--sans); font-weight: 500; font-size: var(--fs-md); line-height: var(--lh-ui); white-space: nowrap; color: var(--ink); }
.pill::before { content: ""; width: var(--mark); height: var(--mark); background: currentColor; flex: none; }
.pill.ok { color: var(--ok); }
.pill.wait { color: var(--wait); }
.pill.auto { color: var(--ink); }
.pill.auto::before { animation: blink 1s steps(2, start) infinite; }
.pill.err { color: var(--err); }
.pill.idle { color: var(--idle); }
.tag { display: inline-block; border: 1px solid var(--line-strong); padding: 0 var(--s-2); font-size: var(--fs-xs); color: var(--muted); }
@keyframes blink { to { visibility: hidden; } }

/* ================= таблицы ================= */
.tbl-wrap { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow-x: auto; }
/* блоки подряд делят одну линию, а не рисуют две с зазором */
.tbl-wrap + .tbl-wrap { margin-top: 0; border-top: 0; }
/* та же рамка, но с содержимым внутри: пустой список, баланс, ссылка */
.box { padding: var(--s-5); }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--fs-md); line-height: var(--lh-body); }
table.grid td:first-child, table.grid th:first-child { padding-left: 2px; }
table.grid thead th { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); text-transform: lowercase; letter-spacing: var(--ls-caps); }
table.grid tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { table.grid tbody tr:hover { background: var(--paper-2); } }
table.grid b { font-weight: 600; }
table.grid a { font-family: var(--mono); font-size: var(--fs-md); }
.copy-cell code { background: none; padding: 0; word-break: break-all; }
.copy-cell .btn-sm { white-space: nowrap; flex: none; }
/* «ключ — значение» */
.dl { width: 100%; border-collapse: collapse; }
.dl th, .dl td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); vertical-align: top; }
.dl td { font-family: var(--mono); color: var(--ink); }
.dl th { color: var(--muted); font-weight: 400; width: 1%; white-space: nowrap; }
.dl tr:last-child th, .dl tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) {
  table.grid.stack thead { display: none; }
  table.grid.stack, table.grid.stack tbody, table.grid.stack tr, table.grid.stack td { display: block; width: 100%; }
  table.grid.stack tr { border-bottom: 1px solid var(--line); padding: var(--s-2) 0; }
  table.grid.stack tbody tr:last-child { border-bottom: 0; }
  table.grid.stack td { border: 0; padding: var(--s-1) 0; display: flex; gap: var(--s-3); }
  table.grid.stack td::before { content: attr(data-l); flex: 0 0 92px; color: var(--muted); font-size: var(--fs-sm); padding-top: 2px; font-family: var(--sans); }
  table.grid.stack td > * { min-width: 0; }
  table.grid.stack td[data-l=""]::before { display: none; }
  table.grid.stack td.tight, table.grid.stack th.tight { width: 100%; white-space: normal; }
  /* ссылки-домены в таблицах: увеличиваем зону нажатия, не меняя вид */
  table.grid td a { display: inline-block; padding: var(--s-2) 0; margin: calc(-1 * var(--s-2)) 0; }
  td.copy-cell { flex-wrap: wrap; }
  td.copy-cell code { flex: 1 1 100%; }
  .dl th { white-space: normal; width: 38%; }
}

/* DNS-записи на шаге доменов */
.dnsbox { margin-top: var(--s-2); display: grid; gap: var(--s-3); justify-items: start; }
.dnsbox .lbl { margin: 0; }
.dnsbox .hint { margin: 0; font-size: var(--fs-sm); color: var(--muted); max-width: 72ch; }
.dnsbox .tbl-wrap { width: 100%; max-width: 860px; border: 0; }
.dnstbl { width: 100%; border-collapse: collapse; background: var(--field); border: 1px solid var(--line-strong); font-size: var(--fs-md); }
.dnstbl th { text-align: left; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.dnstbl td { padding: var(--s-3); color: var(--ink); vertical-align: top; overflow-wrap: anywhere; }
.dnstbl tr + tr td { border-top: 1px solid var(--line); }
.dnstbl td:first-child { width: 1%; white-space: nowrap; }
.dnstbl .muted { color: var(--muted); }
.dns-ok { color: var(--ok); }
.dns-ok::before { content: "✓ "; }
.dns-bad, .dnsbox .hint.dns-bad { color: var(--err); }
@media (max-width: 760px) {
  /* на телефоне каждая запись — карточкой: «A  имя», ниже значение и кто внесёт */
  .dnstbl thead { display: none; }
  .dnstbl tr { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); padding: var(--s-3); }
  .dnstbl tr + tr { border-top: 1px solid var(--line); }
  .dnstbl td { padding: 0; border: 0 !important; }
  .dnstbl td:nth-child(3), .dnstbl td:nth-child(4) { grid-column: 2; font-size: var(--fs-sm); }
  .dnstbl td:nth-child(4) { color: var(--muted); }
}

/* цепочка: сегменты-ячейки, пройденные залиты */
.chain { display: flex; flex-wrap: wrap; align-items: stretch; font-size: var(--fs-md); border: 1px solid var(--ink); width: max-content; max-width: 100%; }
.chain .n { padding: var(--s-2) var(--s-4); color: var(--muted); font-family: var(--mono); position: relative; }
.chain .a { display: none; }
.chain .n + .a + .n, .chain .a + .n { border-left: 1px solid var(--ink); }
.chain .n.done { background: var(--ink); color: var(--paper); }
.chain .n.on { color: var(--ink); background: var(--paper-3); }
.chain .n.on::after { content: ""; position: absolute; right: 6px; top: 6px; width: 6px; height: 6px; background: var(--signal); animation: blink 1s steps(2, start) infinite; }
@media (max-width: 760px) {
  .chain { font-size: var(--fs-xs); width: 100%; }
  .chain .n { padding: var(--s-1) var(--s-2); flex: 1 1 auto; text-align: center; }
}

/* ================= лендинг ================= */
.l-head { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 30; }
.l-head .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 60px; }
main#view:has(.hero) { padding: 0 0 var(--s-8); }

.hero { border-bottom: 1px solid var(--rule); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.hero-text { padding: var(--s-8) var(--s-7) var(--s-8) 0; border-right: 1px solid var(--rule); }
.hero h1, .final-t { font-size: var(--fs-d-hero); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 500; }
.hero .sub { max-width: 52ch; margin: var(--s-5) 0 0; font-size: var(--fs-lg); color: var(--text); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
/* огромный счётчик живых нод: главная «картинка» страницы */
.meter { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-7) 0 var(--s-7) var(--s-7); min-width: 0; }
.meter-n { font-family: var(--pix); font-size: var(--fs-d-meter); line-height: var(--lh-num); color: var(--ink); letter-spacing: var(--ls-head); }
.meter-l { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); font-size: var(--fs-lg); color: var(--ink); }
.live { width: 14px; height: 14px; background: var(--signal); flex: none; animation: blink 1.1s steps(2, start) infinite; }

/* бегущая строка: названия — гротеском (пиксельный шрифт только для цифр) */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; border-bottom: 1px solid var(--rule); }
.ticker-in { display: flex; width: max-content; animation: tick 38s linear infinite; padding: var(--s-4) 0; }
.ticker-in span { font: 500 var(--fs-d-ticker)/var(--lh-display) var(--sans); letter-spacing: var(--ls-display); padding: 0 var(--s-6); white-space: nowrap; }
.ticker-in i { font-style: normal; width: var(--s-3); height: var(--s-3); background: var(--signal); align-self: center; flex: none; font-size: 0; }
@keyframes tick { to { transform: translateX(-50%); } }
/* крутит GSAP (тормозит под курсором); CSS-анимация — запасная */
.gsap-on .ticker-in { animation: none; }

.lsec { margin: var(--s-8) auto 0; }
/* переход по якорю («Как это работает»): заголовок встаёт под липкой шапкой, а не под неё */
.lsec { scroll-margin-top: calc(60px + var(--s-5)); }
.lsec:focus { outline: none; }
.lsec h2 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); font-size: var(--fs-2xl); letter-spacing: var(--ls-display); padding-bottom: var(--s-3); margin-bottom: var(--s-5); border-bottom: 1px solid var(--rule); }
.lsec h2 .cnt { font-family: var(--pix); font-weight: 400; font-size: .9em; letter-spacing: 0; color: var(--muted); }

.statsbar { width: 100%; border-collapse: collapse; }
.statsbar td { width: 33.33%; padding: var(--s-4) var(--s-5) var(--s-4) 0; vertical-align: top; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.statsbar td + td { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.statsbar b, .big-num { display: block; font-family: var(--pix); font-size: var(--fs-d-stat); font-weight: 400; line-height: var(--lh-num); color: var(--ink); }
.statsbar span { display: block; font-size: var(--fs-md); color: var(--muted); margin-top: var(--s-2); }

/* провайдеры: знак + название */
.provs { list-style: none; margin: calc(-1 * var(--s-5)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.provs li { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); min-width: 0; font-size: var(--fs-lg); font-weight: 500; color: var(--ink); }
.provs li:first-child { padding-left: 0; }
.provs li + li { border-left: 1px solid var(--line); }
.provs img { width: var(--logo-l); height: var(--logo-l); flex: none; }

/* «что понадобится» */
.needs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.needs li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5) var(--s-6); min-width: 0; align-content: start; }
.needs li:first-child { padding-left: 0; }
.needs li + li { border-left: 1px solid var(--line); }
.needs svg { color: var(--ink); width: 24px; height: 24px; }
.needs b { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); letter-spacing: var(--ls-head); }
.needs span { grid-column: 1 / -1; font-size: var(--fs-md); color: var(--muted); line-height: var(--lh-body); }

/* «как это работает»: шаги на линии времени */
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.how li { position: relative; padding: 0 var(--s-6) 0 0; min-width: 0; }
.how-top { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.how-n { flex: none; display: grid; place-items: center; width: var(--logo-l); height: var(--logo-l); background: var(--ink); color: var(--paper);
  font: 400 var(--fs-num-m)/1 var(--pix); }
.how li:last-child .how-n { background: var(--signal); }
/* линия к следующему шагу, над ней — сколько длится шаг */
.how-link { position: relative; flex: 1; height: 1px; background: var(--rule); margin-right: calc(-1 * var(--s-6)); }
.how-time { position: absolute; left: 50%; bottom: var(--s-2); transform: translateX(-50%); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-sm); color: var(--ink); }
.how h3 { font-weight: 600; margin-bottom: var(--s-2); }
.how p { margin: 0; font-size: var(--fs-md); color: var(--muted); line-height: var(--lh-body); max-width: 34ch; }

/* вопросы */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-4) 0; color: var(--ink); font-size: var(--fs-lg); font-weight: 500; display: flex; gap: var(--s-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; font-family: var(--pix); font-size: var(--fs-num-s); line-height: 1; width: var(--s-4); flex: none; }
.faq details[open] > summary::before { content: "−"; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { text-decoration: underline; text-underline-offset: 4px; } }
.faq details > p { margin: 0; padding: 0 0 var(--s-4) var(--s-6); max-width: 72ch; }
/* ответ раскрывается по высоте; где ::details-content нет — мгновенно */
.faq details::details-content {
  block-size: 0; opacity: 0; overflow: clip;
  transition: block-size var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), content-visibility var(--dur) allow-discrete;
}
.faq details[open]::details-content { block-size: auto; opacity: 1; }

/* финальный призыв — инвертированный блок */
.final { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: var(--s-7); }
.final-t { color: var(--paper); margin-bottom: var(--s-3); }
.final p { color: var(--paper-3); }
.final .btns { margin-top: var(--s-5); }
.final .btn.t-g { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .final .btn.t-g:hover { background: var(--signal); border-color: var(--signal); color: var(--on-color); } }
.final .btn-line { color: var(--paper); border-color: var(--line-on-ink); }
@media (hover: hover) and (pointer: fine) { .final .btn-line:hover { border-color: var(--paper); } }
.lfoot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); font-size: var(--fs-md); color: var(--muted); }
.lfoot a { color: var(--muted); }

/* ================= мастер ================= */
.sec { display: grid; grid-template-columns: 96px 1fr; border-top: 1px solid var(--rule); padding: var(--s-5) 0 var(--s-6); }
.sec:last-of-type { border-bottom: 1px solid var(--rule); }
.sec > .no { font-family: var(--pix); font-size: var(--fs-num-l); line-height: var(--lh-num); color: var(--idle); }
.sec.done > .no { color: var(--ink); }
.sec h2 { margin-bottom: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.sec .body { max-width: 780px; min-width: 0; }
.sec .body.wide { max-width: none; }
.sum { border: 1px solid var(--ink); background: var(--paper-2); padding: var(--s-1) var(--s-4); margin-bottom: var(--s-5); }
.price { font-family: var(--pix); color: var(--ink); }

/* выбор CDN: плитки со знаками */
.pcards { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-4); min-width: 0; cursor: pointer; color: var(--ink);
  transition: background-color var(--dur-fast) ease; }
.pcard + .pcard { border-left: 1px solid var(--line); }
.pcard input { position: absolute; opacity: 0; pointer-events: none; }
.pcard img { width: var(--logo-m); height: var(--logo-m); flex: none; }
.pcard .pc-name { font-weight: 600; font-size: var(--fs-base); line-height: var(--lh-head); }
.pcard .pc-price { font-size: var(--fs-md); color: var(--muted); }
/* выбранная: внутренняя рамка цвета текста + сигнальный квадрат в углу */
.pcard:has(input:checked) { background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--ink); }
.pcard:has(input:checked)::after { content: ""; position: absolute; top: var(--s-3); right: var(--s-3);
  width: var(--mark); height: var(--mark); background: var(--signal); }
.pcard:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -4px; }
.pcard.off { cursor: not-allowed; }
.pcard.off img, .pcard.off .pc-name { opacity: .45; }
@media (hover: hover) and (pointer: fine) {
  .pcard:not(.off):not(:has(input:checked)):hover { background: var(--paper-2); }
}

/* ================= страница ноды ================= */
.stepper { display: flex; flex-wrap: wrap; border: 1px solid var(--ink); margin-bottom: var(--s-4); }
.stepper span { padding: var(--s-2) var(--s-4); font-size: var(--fs-md); color: var(--idle); }
.stepper span + span { border-left: 1px solid var(--ink); }
.stepper span.cur { color: var(--paper); background: var(--ink); }
.stepper span.past { color: var(--ink); }
.panel { border: 1px solid var(--ink); background: var(--paper-2); padding: var(--s-5); margin: var(--s-5) 0; }
.panel h3 { margin-bottom: var(--s-3); }
.danger { margin-top: var(--s-7); border: 1px solid var(--err); padding: var(--s-5); }
.danger h3 { color: var(--err); margin-bottom: var(--s-3); }
/* лог: инвертированный блок, моно */
.console { background: var(--ink); color: var(--con-text); font: 400 var(--fs-sm)/var(--lh-body) var(--mono); height: 380px; overflow: auto; padding: var(--s-3) var(--s-4); }
.console .ln { white-space: pre-wrap; display: block; }
.console .t { color: var(--con-dim); }
.console .ln.done { color: var(--con-ok); }
.console .ln.error { color: var(--con-err); }
.console .ln.warn, .console .ln.wait { color: var(--con-warn); }
.console .cur { animation: blink 1.1s steps(2, start) infinite; color: var(--signal); }

/* ================= админка ================= */
/* разделы и фильтры — ссылками (их можно открыть в новой вкладке), видом как сегмент */
.subnav { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ink); margin-bottom: var(--s-5); }
.subnav a { display: inline-flex; align-items: center; min-height: calc(var(--control) - 2px); padding: 0 var(--s-4);
  font-size: var(--fs-md); color: var(--ink); text-decoration: none; transition: background var(--dur-fast); }
.subnav a + a { border-left: 1px solid var(--ink); }
@media (hover: hover) and (pointer: fine) { .subnav a:hover { background: var(--paper-2); } }
.subnav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.adm-tools { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-start; justify-content: space-between; }
.adm-tools .subnav { margin-bottom: var(--s-4); }
.adm-search { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); flex: 1; max-width: 520px; }
.adm-search input { flex: 1; min-width: 0; }
.adm-err { display: block; margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--err); font-family: var(--sans); }
.adm-sub { display: block; font-size: var(--fs-sm); color: var(--muted); }
.adm-bal { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: var(--s-3); align-items: end; max-width: 820px; }
.bal-secs > section { padding: var(--s-6) 0; }
.bal-secs > section + section { border-top: 1px solid var(--rule); }
.bal-secs .h-sec { margin-top: 0; }
.topup-row { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: var(--s-7); }
/* табло от линии до линии: компенсируем отступы секции */
.board { position: relative; margin: calc(-1 * var(--s-6)) 0; min-height: 0; overflow: hidden; }
.board canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 1000px) {
  .topup-row { grid-template-columns: minmax(0, 1fr); }
  .board { display: none; }
}
.key-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: end; max-width: 640px; }
.key-form .field { margin-bottom: 0; }
.adm-bal .field { margin-bottom: 0; }
.statsbar.cols4 td { width: 25%; }
/* короткие колонки (№, счётчики, CDN, юзер, дата) — в одну строку; переносится только длинный текст */
table.grid th.tight, table.grid td.tight { white-space: nowrap; width: 1%; overflow-wrap: normal; }
/* тех. работы: «весь бот» — заметным блоком, CDN — плитками со знаком */
.maint-all { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  border: 1px solid var(--ink); padding: var(--s-5); }
.maint-all h2 { margin-bottom: var(--s-1); }
.maint-all.closed { box-shadow: inset var(--bar) 0 0 var(--err); background: var(--paper-2); }
.maint-act { display: flex; align-items: center; gap: var(--s-4); }
.maint-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.maint-cdn { display: grid; gap: var(--s-2); justify-items: start; padding: var(--s-4); }
.maint-cdn + .maint-cdn { border-left: 1px solid var(--line); }
.maint-cdn img { width: var(--logo-m); height: var(--logo-m); }
.maint-cdn b { font-size: var(--fs-base); }
.maint-cdn .btn-sm { margin-top: var(--s-1); }
.maint-cdn.closed { background: var(--paper-2); box-shadow: inset 0 var(--bar) 0 var(--err); }
@media (max-width: 760px) {
  .adm-search { max-width: none; flex-basis: 100%; }
  .adm-bal { grid-template-columns: 1fr; }
  .key-form { grid-template-columns: 1fr; }
  .key-form .btn-line { width: 100%; }
  .maint-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maint-cdn:nth-child(3) { border-left: 0; }
  .maint-cdn:nth-child(n+3) { border-top: 1px solid var(--line); }
  /* разделы — сеткой 2×2 с тонкими линиями, а не рваным переносом */
  .subnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink); width: 100%; }
  .subnav a { background: var(--paper); justify-content: center; }
  .subnav a + a { border-left: 0; }
  .subnav a[aria-current="page"] { background: var(--ink); }
  /* четыре показателя — 2×2: в ряд на телефон не помещаются */
  .statsbar.compact.cols4 tr { display: grid; grid-template-columns: 1fr 1fr; }
  .statsbar.compact.cols4 td { display: block; width: auto; border-left: 0 !important; padding-left: 0 !important; }
  .statsbar.compact.cols4 td:nth-child(even) { border-left: 1px solid var(--line) !important; padding-left: var(--s-3) !important; }
  .statsbar.compact.cols4 td:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ================= баланс ================= */
.bal-now { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s-5) 0; }
.topup { max-width: 640px; }
/* сумма — главное поле страницы: пиксельные цифры, как все деньги на сайте */
.amt-field { display: flex; align-items: center; border: 1px solid var(--ink); background: var(--field); min-height: 72px; padding: 0 var(--s-4); }
.amt-field span { font: 400 var(--fs-num-m)/1 var(--pix); color: var(--muted); margin-right: var(--s-2); }
.amt-field input { border: 0; background: transparent; padding: 0; min-height: 0; font: 400 var(--fs-num-m)/1 var(--pix); color: var(--ink); }
.amt-field input:focus-visible { outline: none; }
.amt-field:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.amt-field:has(input.bad) { border-color: var(--err); }
/* готовые суммы: подставляют значение в поле, подпись — на сколько хватит */
.amt-presets { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); border-top: 0; }
.amt-chip { display: grid; gap: 2px; justify-items: start; padding: var(--s-2) var(--s-4); min-height: var(--control);
  background: transparent; border: 0; color: var(--ink); cursor: pointer; text-align: left; font: inherit;
  transition: background var(--dur-fast), color var(--dur-fast); }
.amt-chip + .amt-chip { border-left: 1px solid var(--ink); }
.amt-chip b { font: 400 var(--fs-xl)/1 var(--pix); color: inherit; }
.amt-chip span { font-size: var(--fs-sm); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .amt-chip:hover { background: var(--paper-2); } }
.amt-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.amt-chip[aria-pressed="true"] span { color: var(--paper-3); }
.amt-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
/* способ оплаты — плитки, как выбор CDN: что это, через кого, сколько заплатишь */
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pm-card { position: relative; display: grid; gap: var(--s-1); padding: var(--s-4); cursor: pointer; color: var(--ink);
  transition: background-color var(--dur-fast) ease; }
.pm-card + .pm-card { border-left: 1px solid var(--line); }
.pm-card input { position: absolute; opacity: 0; pointer-events: none; }
.pm-name { font-weight: 600; font-size: var(--fs-base); }
.pm-via { font-size: var(--fs-sm); color: var(--muted); }
.pm-sum { margin-top: var(--s-2); font: 400 var(--fs-xl)/1 var(--pix); }
.pm-card:has(input:checked) { background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--ink); }
.pm-card:has(input:checked)::after { content: ""; position: absolute; top: var(--s-3); right: var(--s-3);
  width: var(--mark); height: var(--mark); background: var(--signal); }
.pm-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
  .pm-card:not(:has(input:checked)):hover { background: var(--paper-2); }
}
@media (max-width: 760px) {
  .pay-methods { grid-template-columns: 1fr; }
  .pm-card + .pm-card { border-left: 0; border-top: 1px solid var(--line); }
}

/* ================= рефералы ================= */
/* ссылка — главное действие страницы: поле и кнопка склеены в одну строку */
.ref-link { border-top: 1px solid var(--rule); padding: var(--s-5) 0; }
/* ссылка — не поле ввода, а одна кнопка «скопировать»: серый фон панелей (белый
   у нас значит «сюда вписывают»), справа — чёрная часть с действием */
.ref-url {
  display: flex; align-items: stretch; width: 100%; min-height: var(--control); padding: 0;
  border: 1px solid var(--ink); background: var(--paper-2); color: var(--ink);
  font: inherit; text-align: left; cursor: copy;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.ref-url-t { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 var(--s-4);
  font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.ref-url-act { flex: none; display: flex; align-items: center; padding: 0 var(--s-5);
  background: var(--ink); color: var(--paper); font-weight: 500; font-size: var(--fs-md);
  transition: background var(--dur-fast), color var(--dur-fast); }
@media (hover: hover) and (pointer: fine) { .ref-url:hover { background: var(--paper-3); } }
@media (hover: hover) and (pointer: fine) { .ref-url:hover .ref-url-act { background: var(--signal); color: var(--on-color); } }
.ref-url:active { transform: scale(0.99); }
.ref-url:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* «доступно к переводу»: сумма слева, действие справа */
.ref-pay { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding: var(--s-5) 0; }
.ref-pay .lbl { font-weight: 400; color: var(--muted); }
.ref-pay-act { display: grid; justify-items: end; gap: var(--s-2); }
.ref-pay-act p { margin: 0; text-align: right; }
.ref-pay-act p:empty { display: none; }
.statsbar.compact b { font-size: var(--fs-num-m); }
@media (max-width: 760px) {
  .ref-url { flex-direction: column; }
  .ref-url-t { min-height: var(--control); padding: var(--s-2) var(--s-3); white-space: normal; overflow-wrap: anywhere; }
  .ref-url-act { justify-content: center; min-height: var(--control); }
  .ref-pay { align-items: stretch; }
  .ref-pay-act { justify-items: stretch; }
  .ref-pay-act p { text-align: left; }
  /* три показателя — в один ряд, а не столбиком на весь экран */
  .statsbar.compact { display: table; }
  .statsbar.compact tbody { display: table-row-group; }
  .statsbar.compact tr { display: table-row; border: 0; }
  .statsbar.compact td { display: table-cell; width: 33.33%; border-top: 1px solid var(--rule);
    padding: var(--s-3) var(--s-2) var(--s-3) 0 !important; }
  .statsbar.compact td + td { border-left: 1px solid var(--line) !important; padding-left: var(--s-3) !important; }
  .statsbar.compact b { font-size: var(--fs-num-s); }
  .statsbar.compact span { font-size: var(--fs-sm); }
}

/* ================= доступы: карточки ================= */
.acc-group { margin-top: var(--s-6); }
.acc-group h2 { font-size: var(--fs-md); font-weight: 500; color: var(--muted); letter-spacing: 0; margin-bottom: var(--s-3); }
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--line); }
.acc-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; background: var(--paper); }
.acc-card.open { background: var(--paper-2); }
.acc-card.open .cols { grid-template-columns: 1fr; }
.acc-card.saved { box-shadow: inset var(--bar) 0 0 var(--ok); }
.acc-head { display: flex; align-items: center; gap: var(--s-3); }
.acc-head img, .acc-ic { width: var(--logo-m); height: var(--logo-m); flex: none; }
.acc-ic { display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 500 var(--fs-md)/1 var(--pix); letter-spacing: var(--ls-caps); }
.acc-t { flex: 1; min-width: 0; }
.acc-t h3 { font-weight: 600; }
.acc-sub { margin: 2px 0 0; font-size: var(--fs-md); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-sub .mono { font-size: var(--fs-sm); }
/* статус доступа: залитая плашка с галочкой — видна с первого взгляда */
.acc-badge { display: inline-flex; align-items: center; gap: var(--s-1); flex: none; align-self: flex-start;
  font: 500 var(--fs-sm)/1 var(--sans); padding: var(--s-2); color: var(--muted); border: 1px dashed var(--line-strong); }
.acc-badge.on { color: var(--on-color); background: var(--ok); border: 1px solid var(--ok); }
.acc-badge.on::before { content: ""; width: 9px; height: 5px; border: solid var(--on-color); border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }
.acc-what { margin: 0; font-size: var(--fs-md); color: var(--muted); }
.acc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.acc-msg:empty { display: none; }
.acc-body { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.acc-body .btns { margin-top: var(--s-2); }
.acc-howto { margin: 0; }

/* ================= диалог ================= */
dialog { border: 1px solid var(--ink); background: var(--paper); color: var(--text); padding: 0; max-width: min(540px, calc(100vw - 32px)); width: 100%; font: inherit; }
dialog .dh { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--ink); }
dialog .db { padding: var(--s-4) var(--s-5); }
dialog .df { padding: 0 var(--s-5) var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ================= движение =================
   Только там, где оно что-то объясняет: отклик на нажатие (у кнопок), появление
   диалога, раскрытие шага мастера и ответа, запуск ноды. Навигацию, таблицы и
   лог не двигаем. */

/* диалог: проявляется из 96% и так же уходит; фон затемняется плавно */
dialog {
  opacity: 0; transform: scale(0.96);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
              overlay var(--dur) allow-discrete, display var(--dur) allow-discrete;
}
dialog[open] { opacity: 1; transform: none; }
@starting-style { dialog[open] { opacity: 0; transform: scale(0.96); } }
dialog::backdrop {
  background: var(--scrim-0);
  transition: background-color var(--dur) var(--ease-out), overlay var(--dur) allow-discrete, display var(--dur) allow-discrete;
}
dialog[open]::backdrop { background: var(--scrim); }
@starting-style { dialog[open]::backdrop { background: var(--scrim-0); } }

/* мастер: следующий шаг после проверки въезжает, а не выпрыгивает */
.sec { transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
@starting-style { .sec { opacity: 0; transform: translateY(8px); } }

/* смена вкладки: новая страница подменяет старую, уже собранной, и чуть
   проявляется; старая, если данные идут дольше 150 мс, приглушается (is-waiting).
   Проявление не с нуля — иначе на первых кадрах мелькнул бы пустой фон. */
#page { transition: opacity var(--dur) var(--ease-out); }
@starting-style { #page { opacity: .5; } }
#page.is-waiting { opacity: .5; pointer-events: none; }

/* нода заработала на глазах: сегменты цепочки закрашиваются по очереди,
   панель «Нода работает» мягко появляется. Единственный «праздник» на сайте. */
@keyframes seg-fill { from { background: transparent; color: var(--muted); } }
.chain.celebrate .n.done { animation: seg-fill var(--dur-slow) var(--ease-out) both; }
.chain.celebrate .n:nth-child(3) { animation-delay: 60ms; }
.chain.celebrate .n:nth-child(5) { animation-delay: 120ms; }
.chain.celebrate .n:nth-child(7) { animation-delay: 180ms; }
.chain.celebrate .n:nth-child(9) { animation-delay: 240ms; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.panel.enter { animation: panel-in var(--dur-slow) var(--ease-out) 260ms both; }

@media (prefers-reduced-motion: reduce) {
  .chain .n.on::after, .pill.auto::before, .live, .console .cur { animation: none !important; }
  .ticker-in { animation: none; flex-wrap: wrap; width: auto; }
  .btn:active:not([disabled]), .btn-line:active:not([disabled]), .linkbtn:active { transform: none; }
  dialog, dialog[open] { transform: none; }
  @starting-style { dialog[open] { transform: none; } .sec { transform: none; } }
  .seg label { transition: none; }
  .chain.celebrate .n.done { animation-duration: 1ms; }
  @keyframes panel-in-soft { from { opacity: 0; } }
  .panel.enter { animation-name: panel-in-soft; }
}

/* ================= адаптив ================= */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-text { border-right: 0; border-bottom: 1px solid var(--rule); padding: var(--s-7) 0; }
  .meter { padding: var(--s-6) 0; }
}
@media (max-width: 980px) {
  .needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .needs li:nth-child(3) { padding-left: 0; border-left: 0; }
  .needs li:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: var(--s-5); }
}
@media (max-width: 900px) {
  .provs { grid-template-columns: repeat(2, 1fr); }
  .provs li:nth-child(3) { padding-left: 0; border-left: 0; }
  .provs li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .pcards { grid-template-columns: repeat(2, 1fr); }
  .pcard:nth-child(3) { border-left: 0; }
  .pcard:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  /* шапка: вкладки — отдельным рядом на всю ширину, подпись под значком */
  .top .wrap { flex-wrap: wrap; gap: 0 var(--s-2); }
  .logo { min-height: 52px; }
  .who { margin-left: auto; min-height: 52px; }
  /* ряд вкладок — во всю ширину экрана (без полей): подписям хватает места */
  .tabs { order: 3; flex: 1 0 calc(100% + 2 * var(--gut)); margin: 0 calc(-1 * var(--gut)); border-top: 1px solid var(--line); overflow: visible; }
  .tabs a { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: var(--s-1); padding: var(--s-2) 2px; min-height: 54px; }
  .tabs .tl, .tabs a[aria-current="page"] .tl, .tabs a:focus-visible .tl {
    opacity: 1; margin-left: 0; font-size: var(--fs-xs); line-height: var(--lh-ui); transition: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 100%;
  }
  .tabs .tl-x { display: none; }
  main { padding-top: var(--s-5); }

  .lsec { margin-top: var(--s-7); }
  .hero .sub { font-size: var(--fs-base); }
  .hero-cta { margin-top: var(--s-5); }
  .statsbar, .statsbar tbody, .statsbar tr { display: block; }
  .statsbar td { display: block; width: 100%; border-left: 0 !important; padding: var(--s-4) 0 !important; border-top: 0; }
  .statsbar tr { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .statsbar td + td { border-top: 1px solid var(--line); }
  .provs li, .provs li:first-child { flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) var(--s-3); font-size: var(--fs-base); }
  .provs li:nth-child(odd) { padding-left: 0; }
  .provs img { width: var(--logo-m); height: var(--logo-m); }
  .needs { grid-template-columns: 1fr; }
  .needs li, .needs li:first-child { padding: var(--s-5) 0; border-left: 0 !important; }
  .needs li + li { border-top: 1px solid var(--line); }
  .how { grid-template-columns: 1fr; }
  .how li { padding: 0 0 var(--s-6) var(--s-8); }
  .how-top { position: absolute; left: 0; top: 0; bottom: 0; flex-direction: column; align-items: center; margin: 0; gap: 0; }
  .how-link { position: static; width: 1px; height: auto; flex: 1; margin: 0; }
  /* линия вертикальная — время у линии, под текстом шага */
  .how li:not(:last-child) { padding-bottom: var(--s-7); }
  .how-time { left: var(--s-8); bottom: var(--s-5); transform: none; }
  .how h3 { padding-top: var(--s-3); }
  .how p { max-width: none; }
  .final { padding: var(--s-5) var(--s-4); }
  .lfoot a, .foot a { display: inline-block; padding: var(--s-2) 0; }

  .sec { grid-template-columns: 1fr; gap: var(--s-2); }
  .cols { grid-template-columns: 1fr; }
  .panel, .danger { padding: var(--s-4); }
  .console { height: 320px; padding: var(--s-2) var(--s-3); }
  .page-h { align-items: flex-start; }
  .acc-grid { grid-template-columns: 1fr; }
  .acc-card { padding: var(--s-4); }
  .acc-sub { white-space: normal; }
  /* ссылки в «ключ — значение» (соседние ноды и т.п.): зона нажатия выше, вид тот же */
  .dl td a { display: inline-block; padding: var(--s-2) 0; margin: calc(-1 * var(--s-2)) 0; }
  /* кнопки диалога — во всю ширину, по ним проще попасть пальцем */
  dialog .df .btn, dialog .df .btn-line { flex: 1 1 100%; }
  /* чекбоксы — вся строка 44px, а не только квадратик */
  .check { min-height: var(--control); align-items: flex-start; padding-top: var(--s-2); margin-bottom: var(--s-1); }
}
@media (max-width: 400px) {
  .who .who-name { display: none; }
  /* 320–400: обе смысловые строки заголовка помещаются целиком — шрифт по ширине экрана */
  .hero h1 { font-size: 10vw; }
}