/* Дилер Кард, личный кабинет.
 *
 * Рабочий инструмент, а не витрина: плотно, спокойно, без движения.
 * Палитра — из «01-Бренд/Утверждено», чтобы кабинет читался как часть
 * того же продукта, что сайт и приложение.
 *
 * Ни одного внешнего файла: сервер клиентских данных не должен ходить
 * за шрифтами и скриптами на чужие адреса. Шрифты берутся системные,
 * фирменные Inter и JetBrains Mono подхватываются, если установлены
 * у человека.
 *
 * КОНТРАСТ ПОСЧИТАН, а не оценён на глаз: пары «текст на фоне» проверяет
 * check-contrast.py, значения он берёт из этого файла. Два цвета бренда
 * текстом не годятся и здесь для текста не используются:
 *   --accent  #5B5FEF даёт 3.58 на карточке — только заливки и границы;
 *   --dim     #5D677E даёт 3.07 — не текст вовсе, только границы.
 * Для акцентного текста заведён --accent-text: тот же тон 238° и та же
 * насыщенность, но светлее, контраст 5.34.
 */

:root {
  /* поверхности */
  --bg: #0B0F1A;
  --surface: #131A2A;
  --raised: #1B2338;
  --line: #232C42;

  /* текст */
  --ink: #FFFFFF;
  --muted: #8B93A7;
  --dim: #5D677E;

  /* акцент — один на весь кабинет */
  --accent: #5B5FEF;
  --accent-deep: #4144C4;
  --accent-text: #8083F3;

  /* состояния */
  --ok: #16A34A;
  --ok-text: #4ADE80;
  --warn: #D97706;
  --warn-text: #FBBF24;
  --bad: #DC2626;
  --bad-text: #F87171;

  /* Один радиус на весь кабинет. Правило простое: всё скруглено на 8,
     кроме сплошных полос во всю ширину. Смешанные системы скруглений
     читаются как небрежность. */
  --r: 8px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
          'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono',
          Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Числа выравниваются по разрядам: в таблице загрузок глаз сравнивает
   столбцы, а не читает каждое значение отдельно. */
.num, td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; }

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

/* Видимый фокус обязателен: кабинетом пользуются с клавиатуры,
   и «убрать некрасивую рамку» — самый частый способ сломать доступность. */
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Шапка ─────────────────────────────────────────────────────────── */

.top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.top-in {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  height: 60px; display: flex; align-items: center; gap: 28px;
}
.brand { font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }

.tabs { display: flex; gap: 4px; flex: 1; min-width: 0; }
.tabs a {
  color: var(--muted); padding: 7px 12px; border-radius: var(--r);
  white-space: nowrap; font-size: 14px;
}
.tabs a:hover { color: var(--ink); background: var(--raised); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--ink); background: var(--raised); }

.me { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.me .who { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me form { margin: 0; }

/* ── Полотно ───────────────────────────────────────────────────────── */

main { max-width: 1120px; margin: 0 auto; padding: 28px 24px 72px; }

h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 650; margin: 28px 0 10px; }
.lead { color: var(--muted); margin: 0 0 22px; font-size: 14px; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 20px; margin-bottom: 14px;
}
.card.flush { padding: 4px 6px; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* ── Полосы состояния ──────────────────────────────────────────────── */

.note {
  border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--r); background: var(--surface);
  padding: 14px 16px; margin-bottom: 14px;
}
.note .head { font-weight: 600; }
.note p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.note.ok   { border-left-color: var(--ok); }
.note.warn { border-left-color: var(--warn); }
.note.bad  { border-left-color: var(--bad); }
.note.info { border-left-color: var(--accent); }
.note.ok   .head { color: var(--ok-text); }
.note.warn .head { color: var(--warn-text); }
.note.bad  .head { color: var(--bad-text); }

/* ── Кнопки ────────────────────────────────────────────────────────── */

.btn {
  display: inline-block; border: 1px solid transparent; border-radius: var(--r);
  background: var(--accent); color: var(--ink);
  padding: 9px 18px; font: 600 14px/1.2 var(--font);
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--accent-deep); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.quiet {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn.quiet:hover { background: var(--raised); border-color: var(--accent); }
.btn.small { padding: 6px 12px; font-size: 13px; font-weight: 500; }
.btn.wide { width: 100%; text-align: center; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Формы ─────────────────────────────────────────────────────────── */

.field { display: block; margin-bottom: 14px; }
.field > .label {
  display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px;
}
.field input {
  width: 100%; padding: 10px 12px; font: 15px var(--font);
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r);
}
.field input::placeholder { color: var(--muted); }
.field input:focus { border-color: var(--accent); outline: none;
                     box-shadow: 0 0 0 3px rgba(91, 95, 239, .25); }
.field .hint { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.field .bad { display: block; font-size: 13px; color: var(--bad-text); margin-top: 6px; }

/* ── Таблицы ───────────────────────────────────────────────────────── */

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; vertical-align: top; }
th {
  color: var(--muted); font-weight: 600; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
tbody td { border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--raised); }

/* ── Мелочи ────────────────────────────────────────────────────────── */

.muted { color: var(--muted); }
.small { font-size: 13px; }
.pairs { display: grid; grid-template-columns: auto 1fr; gap: 7px 20px; font-size: 14px; }
.pairs dt { color: var(--muted); }
.pairs dd { margin: 0; }

/* Пустой экран — это состояние, а не отсутствие экрана. Человек должен
   понять, что всё в порядке и что делать дальше. */
.empty { padding: 34px 20px; text-align: center; }
.empty .head { font-weight: 600; margin-bottom: 6px; }
.empty p { color: var(--muted); font-size: 14px; margin: 0 auto; max-width: 46ch; }

/* ── Вход ──────────────────────────────────────────────────────────── */

.gate { max-width: 380px; margin: 12vh auto 0; }
.gate .card { padding: 26px; }
.gate h1 { margin-bottom: 2px; }

/* ── Узкий экран ───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .top-in { height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 12px; }
  /* flex: none обязателен. Без него flex: 1 из основного правила даёт
     основу 0 и перебивает width: 100% — вкладки остаются в одной строке
     с названием и уезжают за край экрана. Найдено осмотром 20.08.2026. */
  .tabs { order: 3; width: 100%; flex: none; overflow-x: auto;
          padding-bottom: 2px; }
  .me { margin-left: auto; }
  main { padding: 20px 16px 48px; }
  .card { padding: 14px 16px; }
  .wrap-scroll { overflow-x: auto; }
  .gate { margin-top: 6vh; }
}

/* Кабинет не анимируется по замыслу; сдвиг кнопки при нажатии —
   единственное движение, и оно отключается по просьбе системы. */
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}

/* ── Отчёт о загрузке ──────────────────────────────────────────────── */
/* Самый важный экран кабинета — тот, где файл отклонён. Поэтому место
   ошибки, её суть и способ исправить разнесены по колонкам, а не слиты
   в одну строку: глаз ищет строку файла, а не читает предложение. */

.errs td { vertical-align: top; }
.errs .where { white-space: nowrap; color: var(--muted); font-size: 13px;
               font-variant-numeric: tabular-nums; }
.errs .what { font-weight: 500; }
.errs .how { color: var(--muted); font-size: 13px; }
.errs .rawcode { font-family: var(--mono); font-size: 11px;
                 color: var(--muted); display: block; margin-top: 3px; }

/* Ход проверки. Не крутящийся кружок: этапы перечислены, пройденные
   отмечены. Пока обработчик не сообщает свой шаг, показываются
   состояния, которые известны на самом деле. */
.stages { list-style: none; padding: 0; margin: 14px 0 0; }
.stages li { padding: 7px 0 7px 26px; position: relative; color: var(--muted);
             font-size: 14px; border-bottom: 1px solid var(--line); }
.stages li:last-child { border-bottom: 0; }
.stages li[data-state="done"] { color: var(--ink); }
.stages li[data-state="done"]::before { content: "✓"; color: var(--ok-text); }
.stages li[data-state="now"] { color: var(--ink); font-weight: 600; }
.stages li[data-state="now"]::before { content: "→"; color: var(--accent-text); }
.stages li[data-state="wait"]::before { content: "·"; }
.stages li::before { position: absolute; left: 6px; }

.rowbar { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rowbar h2 { margin: 0; flex: 1; }

/* ── Описание формата ──────────────────────────────────────────────── */
/* Длинный документ на 130 строк таблиц. Читается подряд, поэтому шире
   строка и крупнее межстрочный интервал, чем в рабочих экранах. */

.spec { line-height: 1.6; }
.spec h1, .spec h2, .spec h3 { margin: 26px 0 10px; }
.spec h1 { font-size: 19px; }
.spec h2 { font-size: 17px; }
.spec h3 { font-size: 15px; }
.spec > :first-child { margin-top: 0; }
.spec p { max-width: 72ch; }
.spec hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.spec code { font-family: var(--mono); font-size: 13px;
             background: var(--bg); border: 1px solid var(--line);
             border-radius: 4px; padding: 1px 5px; }
.spec table { margin: 12px 0 20px; font-size: 13px; }
.spec th, .spec td { padding: 7px 10px; }
.spec .wrap-scroll { overflow-x: auto; }

/* ── Метки состояния и мелочи экранов владельца ────────────────────── */

.метка {
  display: inline-block; padding: 2px 8px; border-radius: var(--r);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line);
}
.метка.ok   { color: var(--ok-text);   border-color: var(--ok); }
.метка.warn { color: var(--warn-text); border-color: var(--warn); }
.метка.bad  { color: var(--bad-text);  border-color: var(--bad); }
.метка.info { color: var(--muted); }

.просрочка { color: var(--bad-text); }
.mono { font-family: var(--mono); font-size: 12px; }

/* Выпадающий список — теми же правилами, что поля ввода: иначе
   на тёмном фоне он приходит белым от системы и выпадает из вида. */
.field select {
  width: 100%; padding: 10px 12px; font: 15px var(--font);
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r);
}
.field select:focus { border-color: var(--accent); outline: none;
                      box-shadow: 0 0 0 3px rgba(91, 95, 239, .25); }

/* Форма в строке таблицы: выбор роли и кнопка рядом, не столбиком. */
.встрок { display: flex; gap: 6px; align-items: center; margin: 0; }
.встрок select {
  padding: 5px 8px; font: 13px var(--font); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r);
}
/* Временный пароль показывается один раз — его должно быть легко
   выделить и скопировать, поэтому крупнее и с разрядкой. */
.парольчик { font-size: 17px; letter-spacing: .06em; user-select: all; }

/* Заблокированный остаётся в списке, но приглушён: он в системе есть,
   работать не может. Убирать его строку нельзя — вместе с ней исчезнет
   и понимание, кто это был. */
tr.погашен td { opacity: .55; }
tr.погашен .метка { opacity: 1; }
.действия { display: flex; flex-direction: column; gap: 6px; }