/* Дизайн-система кабинета. Раздел 7.7 брифа.

   Устройство простое и намеренно скучное: токены → примитивы → компоненты.
   Ни одного цвета в разметке, ни одного размера «на глаз» — всё через шкалу.

   Тёмная тема не инверсия светлой: у неё свои значения. Инверсия даёт серый
   текст на сером фоне и подсветки, которые не читаются. */

/* ─── токены ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --surface-3: #e9ecf1;
  --fg: #101828;
  --fg-2: #475467;
  --muted: #8791a3;
  --line: #e4e7ec;
  --line-strong: #d0d5dd;

  --brand: #4f46e5;
  --brand-fg: #ffffff;
  --brand-soft: #eef2ff;
  --brand-line: #c7d2fe;

  --ok: #067647;
  --ok-soft: #ecfdf3;
  --warn: #b54708;
  --warn-soft: #fffaeb;
  --bad: #b42318;
  --bad-soft: #fef3f2;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);

  --font: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d12;
    --surface: #14171f;
    --surface-2: #1b1f29;
    --surface-3: #232833;
    --fg: #ecedf1;
    --fg-2: #b3bac7;
    --muted: #7d8698;
    --line: #262b36;
    --line-strong: #333a48;

    --brand: #8b8cf9;
    --brand-fg: #12131a;
    --brand-soft: #1b1d33;
    --brand-line: #35376b;

    --ok: #5fd39a;
    --ok-soft: #10231b;
    --warn: #e5b25d;
    --warn-soft: #251d10;
    --bad: #ff9086;
    --bad-soft: #2a1614;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  --bg: #0b0d12;
  --surface: #14171f;
  --surface-2: #1b1f29;
  --surface-3: #232833;
  --fg: #ecedf1;
  --fg-2: #b3bac7;
  --muted: #7d8698;
  --line: #262b36;
  --line-strong: #333a48;
  --brand: #8b8cf9;
  --brand-fg: #12131a;
  --brand-soft: #1b1d33;
  --brand-line: #35376b;
  --ok: #5fd39a;
  --ok-soft: #10231b;
  --warn: #e5b25d;
  --warn-soft: #251d10;
  --bad: #ff9086;
  --bad-soft: #2a1614;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, .5);
}

/* ─── база ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  /* Табличные цифры: разряды в столбце обязаны стоять друг под другом. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 { margin: 0; letter-spacing: -.02em; font-weight: 620; }
h1 { font-size: 28px; line-height: 1.2; letter-spacing: -.028em; }
h2 { font-size: 16px; letter-spacing: -.012em; }
h3 { font-size: 12px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; }
p { margin: 0; }

svg.icon {
  width: 18px; height: 18px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.18em;
}
svg.icon-sm { width: 16px; height: 16px; stroke-width: 1.7; }

.muted { color: var(--muted); }
.dim { color: var(--fg-2); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12px; }
.nowrap { white-space: nowrap; }
.stack { display: grid; gap: var(--s-2); }
.row { display: flex; align-items: center; gap: var(--s-2); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.grow { flex: 1; }

/* ─── каркас страницы ────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: var(--s-2); color: var(--fg); font-weight: 660;
  letter-spacing: -.02em; padding: var(--s-2); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--brand);
  color: var(--brand-fg); display: grid; place-items: center; font-size: 14px; font-weight: 700; }

.menu { display: grid; gap: 2px; }

.menu a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-3);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 500;
}

.menu a svg { color: var(--muted); }
.menu a:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; }
.menu a:hover svg { color: var(--fg-2); }
.menu a.active { background: var(--brand-soft); color: var(--brand); font-weight: 560; }
.menu a.active svg { color: var(--brand); }

.sidebar-foot { margin-top: auto; display: grid; gap: var(--s-3); }

.user-chip {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2); border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 13px;
}

.avatar { width: 28px; height: 28px; border-radius: var(--r-full); background: var(--brand-soft);
  color: var(--brand); display: grid; place-items: center; font-weight: 640; font-size: 12px;
  flex: none; }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
}

.content { padding: var(--s-6); max-width: 1040px; width: 100%; flex: 1 1 auto; }
.page-head { margin-bottom: var(--s-5); display: grid; gap: var(--s-1); }
/* Утилита .spread объявлена выше по файлу, поэтому без этой строки
   display: grid у .page-head побеждает и кнопка уезжает под заголовок. */
.page-head.spread { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; }
/* Без этого длинный подзаголовок распирает первый элемент на всю ширину,
   и кнопка справа переносится на следующую строку. */
.page-head.spread > :first-child { min-width: 0; flex: 1 1 320px; }

/* ─── карточки ───────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}

.card + .card { margin-top: var(--s-4); }
/* Внутри сетки отступ между карточками задаёт gap. Без этой отмены соседние
   карточки в строке получают ещё и margin-top и съезжают вниз на 16 пикселей
   относительно первой — ровно та «кривая вёрстка», которую видно глазом. */
.grid-2 > .card + .card, .grid-3 > .card + .card { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4); }
.card-tight { padding: var(--s-4); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4);
  align-items: stretch; }
/* Ровно три колонки, а не auto-fit: при трёх элементах авторазмещение в узком
   контейнере даёт два плюс один сиротой — и справа зияет пустота. Ниже 640px
   складываем в одну колонку, там три уже не помещаются честно. */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
  align-items: stretch; }

/* ─── главное число ──────────────────────────────────────────────────────── */
.headline {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}

.headline .label { font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600; }

.headline .price {
  font-size: clamp(32px, 4.4vw, 46px);
  font-weight: 660;
  letter-spacing: -.04em;
  line-height: 1.05;
}

.headline .term { color: var(--fg-2); font-size: 15px; }
.headline .sub { margin-top: var(--s-1); }

.stat { display: grid; gap: 2px; }
.stat .value { font-size: 24px; font-weight: 640; letter-spacing: -.03em; line-height: 1.2; }
.stat .label { font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; }

/* ─── бейджи ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 520; line-height: 1.6;
  padding: 2px 9px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--line);
  white-space: nowrap;
}

.badge.brand { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* ─── кнопки и поля ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font: inherit; font-size: 14px; font-weight: 540;
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg);
  cursor: pointer; transition: background .12s, border-color .12s;
}

.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-fg); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--fg-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--fg); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 540; color: var(--fg-2); }
.field .hint { font-size: 12px; color: var(--muted); }

input[type="text"], input[type="number"], textarea, select {
  font: inherit; font-size: 15px;
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--fg);
  font-variant-numeric: tabular-nums;
}

input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

textarea { min-height: 190px; resize: vertical; line-height: 1.55; }

/* Выбор из вариантов: радио и чекбоксы как карточки, а не как точки. */
.choices { display: grid; gap: var(--s-2); }
/* Ровно две колонки, а не auto-fit: при четырёх вариантах авторазмещение даёт
   то один ряд из четырёх узких карточек, то три плюс одну сиротой — и подписи
   в них рвутся по-разному. Две колонки держат сетку симметричной всегда. */
.choices.inline { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .choices.inline { grid-template-columns: 1fr; } }

.choice {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  cursor: pointer; background: var(--surface);
}

.choice:hover { border-color: var(--brand-line); background: var(--surface-2); }
.choice input { margin: 3px 0 0; accent-color: var(--brand); flex: none; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.choice .t { font-size: 14px; font-weight: 540; }
.choice .d { font-size: 12px; color: var(--muted); line-height: 1.4; }
/* Разная длина подписей растягивает карточки по-разному — выравниваем по ряду. */
.choices.inline .choice { align-items: flex-start; height: 100%; }

/* ─── таблицы ────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 0 calc(var(--s-5) * -1); padding: 0 var(--s-5); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 11px var(--s-3); text-align: left; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
th { font-size: 11px; font-weight: 560; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
tfoot td { font-weight: 620; border-top: 1px solid var(--line-strong); border-bottom: 0; }

/* ─── прочее ─────────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: var(--s-7) var(--s-5); color: var(--muted); }
.empty svg { width: 34px; height: 34px; margin-bottom: var(--s-3); opacity: .5; }

.copybox {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-4); font-size: 14px; line-height: 1.6; white-space: pre-wrap;
}

/* ─── тарифы ─────────────────────────────────────────────────────────────── */
.plan { display: flex; flex-direction: column; gap: var(--s-3); align-items: stretch; }
.plan .badge { align-self: flex-start; }
.plan.current { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.plan-price { font-size: 26px; font-weight: 640; letter-spacing: -.02em; }
.plan-price .muted { font-size: 13px; font-weight: 500; }
.plan-list { list-style: none; display: grid; gap: 6px; font-size: 13px;
  color: var(--fg-2); flex: 1; }
.plan-list li { position: relative; padding-left: 16px; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: 8px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }

/* Полоска расхода квоты. */
.meter { height: 8px; border-radius: var(--r-full); background: var(--surface-3);
  overflow: hidden; display: flex; }
.meter span { display: block; height: 100%; }
.meter .m-model { background: var(--brand); }
.meter .m-gate { background: var(--bad); }

/* ─── вопросы и ответы ───────────────────────────────────────────────────── */
.qa { gap: var(--s-4); margin-top: var(--s-4); }
.qa-item { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.qa-item:first-child { border-top: 0; padding-top: 0; }
.qa-answer { margin: var(--s-3) 0 0 34px; display: grid; gap: var(--s-2); }
.qa-given { margin: 6px 0 0 34px; font-size: 13px; color: var(--fg-2);
  padding: 6px var(--s-3); background: var(--surface-2); border-radius: var(--r-sm); }
.qa-item.done .grow { color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit; font-size: 12px; cursor: pointer;
  padding: 5px 10px; border-radius: var(--r-full);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg-2);
}
.chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ─── вложения ───────────────────────────────────────────────────────────── */
/* Нативный input[type=file] в каждом браузере свой и в тёмной теме читается
   как ошибка вёрстки. Прячем от глаз, но не от клавиатуры: display:none
   выкинул бы поле из обхода по Tab. */
.file-input {
  position: absolute; width: 1px; height: 1px; padding: 0; border: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--s-6) var(--s-4); cursor: pointer; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--brand-soft); }
.file-input:focus-visible + .dropzone {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.dropzone svg { width: 26px; height: 26px; color: var(--muted); margin-bottom: 2px; }
.dropzone .t { font-size: 14px; font-weight: 540; }
.dropzone .d { font-size: 12px; color: var(--muted); max-width: 46ch; }

.filelist { list-style: none; display: grid; gap: 4px; margin-top: var(--s-3); }
.filelist li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 8px var(--s-3); font-size: 13px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.filelist li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist .bad { color: var(--bad); }

/* ─── ожидание расчёта ───────────────────────────────────────────────────── */
.waiting { display: flex; align-items: center; gap: var(--s-4); }
.waiting-title { font-size: 15px; font-weight: 560; }
.waiting-clock { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
  flex: none; }

.spinner {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 2.5px solid var(--surface-3);
  border-top-color: var(--brand);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Кому анимация мешает — вместо вращения мигание: движение остаётся видимым,
   но не крутится. */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: pulse 1.6s ease-in-out infinite; border-top-color: var(--brand); }
  @keyframes pulse { 50% { opacity: .35; } }
}

.progress { height: 4px; border-radius: var(--r-full); background: var(--surface-3);
  overflow: hidden; margin-top: var(--s-4); }
.progress span { display: block; height: 100%; width: 0;
  background: var(--brand); transition: width .9s linear; }

/* ─── замер и поправка ───────────────────────────────────────────────────── */
/* Строка «поле плюс кнопка»: кнопка выравнивается по НИЗУ поля, а не по центру
   блока. Иначе при разном числе полей в двух формах кнопки стоят на разной
   высоте, и сетка выглядит съехавшей. */
.measure { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.measure-row { display: flex; gap: var(--s-3); align-items: flex-end; flex-wrap: wrap; }
.measure-row .field { min-width: 180px; }
.measure-row .field.grow { flex: 1 1 260px; }
.measure-row .btn { flex: none; }
.measure .hint { margin: 0; }
.measure .rule { height: 1px; background: var(--line); margin: var(--s-4) 0 var(--s-2); }

.scope { list-style: none; display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.scope li { position: relative; padding: 6px 0 6px 18px; font-size: 14px; line-height: 1.45; }
.scope li::before { content: ""; position: absolute; left: 4px; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.scope .mult { color: var(--muted); white-space: nowrap; margin-left: 6px; }

.note { border-left: 3px solid var(--warn); background: var(--warn-soft); color: var(--warn);
  padding: var(--s-3) var(--s-4); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 13px; }

.footer { padding: var(--s-5) var(--s-6); color: var(--muted); font-size: 12px;
  border-top: 1px solid var(--line); }

/* ─── вход и лендинг ─────────────────────────────────────────────────────── */
.centered {
  min-height: 100vh;
  display: grid;
  place-content: safe center;
  justify-items: center;
  padding: var(--s-6) var(--s-4);
}
.auth-card { width: 100%; max-width: 420px; }

.code {
  font-family: var(--mono); font-size: 34px; font-weight: 700; letter-spacing: .22em;
  text-align: center; padding: var(--s-4); background: var(--surface-2);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--fg);
}

/* Номера рисуются через ::before, поэтому браузерный отступ списка под родные
   маркеры — сорок пикселей пустоты слева. Сбрасываем вместе с маркерами. */
.steps { display: grid; gap: var(--s-3); counter-reset: step;
  margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 14px;
  color: var(--fg-2); }
.steps li::before {
  counter-increment: step; content: counter(step);
  width: 22px; height: 22px; border-radius: var(--r-full); flex: none;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; font-size: 12px; font-weight: 640;
}

@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* ─── адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row; align-items: center;
    border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; gap: var(--s-3);
  }
  .menu { grid-auto-flow: column; gap: var(--s-1); }
  .menu a span { display: none; }
  .sidebar-foot { margin: 0 0 0 auto; grid-auto-flow: column; align-items: center; }
  .user-chip .who { display: none; }
  .content, .topbar { padding: var(--s-4); }
  .table-wrap { margin: 0 calc(var(--s-4) * -1); padding: 0 var(--s-4); }
}