/* ─── Личный кабинет «Онлайнприём» ────────────────────────────────────
   Палитра, шрифт и пластика взяты у лендинга onlinepriem.ru: кабинет живёт
   на соседнем поддомене и обязан выглядеть тем же продуктом, а не чужой
   админкой. Значения — токенами, чтобы менять тему в одном месте. */
@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light;

  /* Акцент — синий лендинга */
  --blue: #0066ff;
  --blue-strong: #0057e0;
  --blue-light: #3d8bff;
  --blue-ring: rgb(0 102 255 / 18%);

  /* Текст */
  --text: #12203a;
  --text-muted: #48597a;
  --text-soft: #7a8cae;

  /* Поверхности и границы */
  --bg: #f7f9fe;
  --surface: #fff;
  --surface-tint: #f2f6ff;
  --surface-accent: #eef4ff;
  --border: #e5ecfa;
  --border-strong: #dbe6fa;
  --border-accent: #cfe0ff;

  /* Статусы */
  --ok: #0e9f6e;
  --ok-bg: #e7f7f0;
  --warn: #a15c07;
  --warn-bg: #fff5e5;
  --danger: #d1293d;
  --danger-bg: #fdecee;

  /* Отступы */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;

  /* Скругления */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Тени — синеватые, как на лендинге */
  --shadow-sm: 0 2px 12px rgb(18 64 152 / 5%);
  --shadow-md: 0 10px 30px rgb(18 64 152 / 8%);
  --shadow-cta: 0 8px 22px rgb(0 102 255 / 26%);

  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

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

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar .inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s3) var(--s5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.brand:hover { text-decoration: none; }

/* Знак: тот же градиентный квадрат, что в шапке лендинга */
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  font-size: 17px;
  flex: none;
}
.brand-sub {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-soft);
  border-left: 1px solid var(--border-strong);
  padding-left: 10px;
  margin-left: 2px;
}

.usernav {
  display: flex;
  flex-wrap: wrap;   /* у владельца четыре ссылки — на телефоне в строку не лезут */
  align-items: center;
  gap: var(--s4);
  font-size: 14px;
}
.usernav .who { color: var(--text-muted); font-weight: 600; }
.usernav a { color: var(--text-muted); font-weight: 600; }
.usernav a:hover { color: var(--blue); text-decoration: none; }

/* ─── Каркас страницы ─────────────────────────────────────────────── */

.page {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s8) var(--s5);
}
.page--narrow { max-width: 620px; }

/* Страницы входа и регистрации: узкая колонка на подложке в точку —
   тот же приём, что на первом экране лендинга. */
.page--auth {
  max-width: 460px;
  padding-top: 56px;
}
body.auth {
  background:
    radial-gradient(#dce8ff 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(180deg, #f3f7ff, var(--bg) 420px);
}

.footer {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s8);
  color: var(--text-soft);
  font-size: 13px;
}

/* ─── Заголовки ───────────────────────────────────────────────────── */

h1 {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }

.page-head { margin-bottom: var(--s6); }
.page-head h1 { margin-bottom: 6px; }
.page-head .sub { color: var(--text-muted); font-size: 15px; }

.section-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: var(--s6) 0 var(--s3);
}

/* ─── Панели ──────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s8);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--s5); }
.card--flush { padding: 0; overflow: hidden; }
.card__head {
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

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

.field { margin-bottom: var(--s5); }
.field:last-of-type { margin-bottom: 0; }

label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}

input[type=text], input[type=email], input[type=password],
textarea, select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-ring);
}
textarea { resize: vertical; min-height: 92px; }
select {
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8cae' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.hint { color: var(--text-soft); font-size: 13px; margin-top: 6px; }
.hint--ok { color: var(--ok); font-weight: 600; }
.hint--bad { color: var(--danger); font-weight: 600; }

/* Поле адреса: суффикс домена прямо в рамке, чтобы врач видел итог целиком */
.input-suffix {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
  background: var(--surface);
}
.input-suffix:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-ring);
}
.input-suffix input {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.input-suffix input:focus { box-shadow: none; }
.input-suffix .suffix {
  display: grid;
  place-items: center;
  padding: 0 14px;
  background: var(--surface-tint);
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

/* Согласие и прочие галочки */
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
}
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--blue); flex: none; }

/* Ловушка для ботов: не видна человеку, но доступна автозаполнению */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

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

.btn, button[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 12px 24px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover, button[type=submit]:hover {
  background: var(--blue-strong);
  text-decoration: none;
  color: #fff;
  transform: translateY(-1px);
}
.btn:active, button[type=submit]:active { transform: none; }
.btn--wide { width: 100%; }

.btn--ghost, button.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border-accent);
  box-shadow: none;
}
.btn--ghost:hover, button.btn--ghost:hover {
  background: var(--surface-tint);
  color: var(--text);
  border-color: var(--blue);
}

.btn--sm, button.btn--sm {
  padding: 7px 14px;
  font-size: 13px;
  border-radius: var(--r-sm);
  box-shadow: none;
}

/* Текстовая кнопка — для действий в таблице */
/* button.linklike — не для красоты: у button[type=submit] выше (0,1,1)
   специфичность, чем у одного класса (0,1,0), и с редизайна 26.08 каждая
   «ссылочная» кнопка («Выйти», «Обработана», «Спам») рисовалась синей
   плашкой. Правило стоит ниже, поэтому при равной специфичности побеждает —
   но только в свойствах, которые задаёт само: на наведении поэтому повторён
   цвет, иначе button[type=submit]:hover перекрасил бы текст в белый. */
.linklike, button.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
}
.linklike:hover, button.linklike:hover { text-decoration: underline; background: none; transform: none; box-shadow: none; color: var(--blue); }
.linklike.danger, .linklike.danger:hover { color: var(--danger); }
.inline { display: inline; }

/* Сообщение из формы заявки: длинная ссылка без пробелов иначе растягивает
   колонку на всю таблицу и уводит кнопки за край. Только для сообщения:
   anywhere сжимает и минимальную ширину ячейки, и в таблице с автоширинами
   имя, почта и телефон рвались бы посреди слова. */
.wrap-anywhere { overflow-wrap: anywhere; }

.actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }

/* ─── Сообщения ───────────────────────────────────────────────────── */

.alert {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  margin-bottom: var(--s5);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
}
.alert-error { background: var(--danger-bg); color: #8f1d2c; border-color: #f7ccd2; }
.alert-success { background: var(--ok-bg); color: #0a6a49; border-color: #bfe8d6; }

/* Плашка «подтвердите почту» — спокойная, не цвета ошибки: она просит, а не
   сообщает о сбое, и висит на каждой странице, пока адрес не подтверждён.
   Кнопка повтора уезжает под текст на узком экране (flex-wrap). */
.notice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s5);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-tint);
  font-size: 14px;
}

/* ─── Значки состояния ────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--surface-tint);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }
.badge--accent { background: var(--surface-accent); color: var(--blue); }

.dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: currentColor; flex: none; }

/* ─── Тарифы в визарде ────────────────────────────────────────────── */

.plans { display: grid; gap: var(--s3); }

.plan {
  display: block;
  position: relative;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  cursor: pointer;
  background: var(--surface);
  font-weight: 400;
  margin: 0;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.plan:hover { border-color: var(--border-accent); }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
/* Выбранный тариф. Два селектора вместо одного: :has() поддерживают не все
   браузеры, и класс plan--on ставит скрипт визарда — иначе в старом браузере
   выбор ничем не отмечен. */
.plan:has(input:checked),
.plan--on {
  border-color: var(--blue);
  background: var(--surface-accent);
  box-shadow: 0 0 0 4px var(--blue-ring);
}
.plan__title { font-weight: 700; font-size: 16px; }
/* block: у строчного span отступ сверху не действует. */
.plan__note { display: block; color: var(--text-soft); font-size: 13px; margin-top: 4px; }

/* ─── Период и тариф (0.9.0) ──────────────────────────────────────── */

/* Сегментный переключатель периода: две таблетки на всю ширину. Выбор
   отмечают два селектора — :has() и класс seg--on от скрипта — по той же
   причине, что у .plan--on выше. */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 var(--s5);
  padding: 4px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-tint);
}
.segmented label {
  position: relative;
  display: block;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  text-align: center;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-muted);
  cursor: pointer;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked),
.segmented label.seg--on {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.segmented small { display: block; font-size: 12px; font-weight: 600; opacity: .85; }
/* Видимый фокус с клавиатуры: сами radio прозрачны (opacity: 0), и без
   рамки на подписи не видно, где стоишь, — а этот выбор умножает сумму
   в десять раз. Рамка — только по :focus-visible, чтобы щелчок мышью её
   не рисовал; где :has нет, остаётся прежний :focus-within (рамка и от
   мыши — лучше, чем никакой с клавиатуры). */
.segmented label:has(input:focus-visible),
.plan:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
@supports not selector(:has(a)) {
  .segmented label:focus-within, .plan:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
}

.plan__audience { display: block; margin-top: 2px; font-size: 14px; color: var(--text-muted); }
.plan__amount { display: block; margin-top: var(--s3); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.plan__per-month { display: block; margin-top: 2px; font-size: 13px; color: var(--text-muted); }
/* Цена только выбранного периода: две цены рядом и создали путаницу. */
/* Основной путь — чистый CSS по отмеченной кнопке периода; data-period
   ниже ставит скрипт для браузеров без :has(). Оба правила прячут, а не
   показывают, поэтому не спорят друг с другом. */
form:has(#period input[value="year"]:checked) .plan__price--month,
form:has(#period input[value="month"]:checked) .plan__price--year { display: none; }
.tariff[data-period="month"] .plan__price--year,
.tariff[data-period="year"] .plan__price--month { display: none; }
.plan__features { display: grid; gap: 6px; margin-top: var(--s4); font-size: 14px; }
/* Флекс с галочкой отдельным элементом: перенесённая на телефоне строка
   встаёт под текст, а не под галочку. */
.plan__features > span { display: flex; gap: 8px; align-items: baseline; }
.plan__features > span::before { content: "✓"; font-weight: 800; color: var(--ok); flex: none; }
.plan__prefix { display: block; margin-top: var(--s4); font-size: 13px; font-weight: 700; color: var(--text-muted); }
.plan__prefix + .plan__features { margin-top: 6px; }

.order-total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.order-total__key { font-size: 14px; color: var(--text-muted); }
.order-total__val { font-size: 18px; font-weight: 800; }
.order-total__val small { font-size: 13px; font-weight: 500; color: var(--text-muted); }

/* Условия под кнопкой оплаты («Мой кабинет»). */
.terms { margin-top: var(--s3); font-size: 13px; color: var(--text-soft); }

/* ─── Сводка кабинета ─────────────────────────────────────────────── */

.summary { display: grid; gap: var(--s3); margin-top: var(--s5); }
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.summary__row:last-child { border-bottom: 0; padding-bottom: 0; }
.summary__key { color: var(--text-muted); font-size: 14px; }
.summary__val { font-weight: 600; text-align: right; }

.note {
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  color: var(--text-muted);
  font-size: 14px;
  margin-top: var(--s5);
}

/* ─── Таблица парка ───────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; }

table.fleet { width: 100%; border-collapse: collapse; font-size: 14px; }
table.fleet th {
  text-align: left;
  padding: var(--s3) var(--s5);
  background: var(--surface-tint);
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
table.fleet td {
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.fleet tr:last-child td { border-bottom: 0; }
table.fleet tbody tr:hover { background: #fbfcff; }

/* Разряды в сумме разделены обычным пробелом: на узком экране «19 000 ₽»
   рвётся между строк и читается как две разные суммы. */
table.fleet td.amount { white-space: nowrap; }

.domain { font-weight: 700; font-size: 14.5px; }
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--text-soft);
}
.cell-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.stack { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }

.empty {
  padding: var(--s10) var(--s5);
  text-align: center;
  color: var(--text-muted);
}

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

.muted { color: var(--text-muted); font-size: 14px; }
.danger { color: var(--danger); }
.center { text-align: center; }
/* Строка под карточкой на страницах входа («Нет аккаунта?», «Вспомнили?»):
   класс вместо инлайн-стиля — страницы без style= (правило CSP). */
.below-card { margin-top: 20px; }

/* ─── Агент и страница сервера ────────────────────────────────────── */

.facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 4px 0 0; padding: 0; }
.facts li { list-style: none; color: var(--text-soft); font-size: 12.5px; }
/* Красное — то, по чему открыта проблема; серое — «не удалось проверить».
   Разными их делает §7 спеки: сбой замера проблему не открывает, и красный
   тут гонял бы владельца чинить исправное. */
.fact--bad { color: var(--danger); font-weight: 600; }
.fact--unknown { font-style: italic; }

.problems { margin: var(--s3) 0 0; padding-left: var(--s5); }
.problems li { margin-bottom: var(--s2); font-size: 14px; }

/* Хвост журнала обновления и команда подключения: моноширинный блок с
   переносами. Без переносов длинная строка команды растягивает страницу по
   горизонтали на всю свою длину. */
.log {
  margin: var(--s2) 0 0;
  padding: var(--s3);
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

/* ─── Узкие экраны ────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .page { padding: var(--s6) var(--s4); }
  .card { padding: var(--s6) var(--s5); border-radius: var(--r-md); }
  h1 { font-size: 23px; }
  .brand-sub { display: none; }
  .topbar .inner { padding: var(--s3) var(--s4); }
  .usernav .who { display: none; }
  table.fleet th, table.fleet td { padding: var(--s3); }
}

/* ─── Страница «Почта» (0.10.0) ───────────────────────────────────── */
/* Значения DKIM длинные и без пробелов: без переноса они растягивают таблицу. */
.code-wrap { word-break: break-all; }
.card__foot { padding: 0 var(--s5) var(--s5); }

/* ─── Автопродление (0.12.0) ──────────────────────────────────────── */
/* Галочка над кнопкой оплаты и её условия: без отступа галочка липнет к
   строкам карточки выше, а абзацы текста согласия — друг к другу. */
.check--autorenew { margin-top: var(--s5); }
.consent-text p + p { margin-top: var(--s2); }