/* Панель Lerti. Дизайн-система «Спокойный минимализм» (тема default):
   светлая база, много воздуха, один акцент, крупные моно-числа.
   Приёмы взяты из rollypay: фон #F4F5F7 + белые карточки, одна тень,
   микро-бейджи «● Секция». */

:root {
  --accent: #225aea;
  --accent-hover: #1b49c4;
  --accent-tint-1: #eaf0ff;
  --on-accent: #fff;

  --ink: #0e1116;
  --ink-2: #3a3d45;
  /* Серые текста — не светлее 4,5:1 к фону карточки и плашек (WCAG AA): прежние
     #8b8e97 и #b8bac2 давали 3,3 и 1,9 — подписи и пояснения читались с трудом.
     Ступень «пояснение» держится размером шрифта, а не бледностью. */
  --muted: #686c75;

  --bg: #f4f5f7;
  --surface: #fff;
  --surface-3: #f0f1f4;
  --border: #ececf2;
  --border-2: #e4e6ec;

  --success: #16a34a;
  --success-bg: #e7f6ed;
  --danger: #e5484d;
  --danger-bg: #fdecec;
  --warning: #e8a317;
  --warning-bg: #fcf3e1;
  /* Те же цвета для текста на их светлых плашках и мелкого текста на белом:
     яркие --success/--danger/--warning дают там 2,9–3,9:1, нужно 4,5. */
  --success-ink: #166534;
  --danger-ink: #b42318;
  --warning-ink: #8a5a00;

  --shadow-sm: 0 1px 3px rgba(14, 17, 22, 0.1);
  --shadow-md: 0 4px 12px rgba(14, 17, 22, 0.08);
  --focus-ring: 0 0 0 3px rgba(34, 90, 234, 0.14);

  --radius: 14px;
  --radius-sm: 10px;
}

* {
  box-sizing: border-box;
}

/* Скрытое — скрыто, даже если у элемента свой display. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Ссылки — цветом акцента, а не синим браузера: на открытых страницах их много. */
a {
  color: var(--accent);
  text-underline-offset: 2px;
}

.sub a {
  color: inherit;
}

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

/* ——— шапка ——— */

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sub {
  color: var(--muted);
  font-size: 13px;
}

/* Микро-бейдж секции: «● Очередь» */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

section {
  margin-bottom: 36px;
}

/* ——— карточки ——— */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card + .card {
  margin-top: 12px;
}

.pad {
  padding: 20px 22px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* ——— цифры ——— */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.stat {
  padding: 22px;
  background: var(--surface);
}

.stat .num {
  color: var(--ink);
  font-size: 30px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stat .cap {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.stat.accent .num {
  color: var(--accent);
}

/* ——— решения ——— */

.decision {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

.decision:last-child {
  border-bottom: 0;
}

.decision .head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 4px;
}

.kind {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.kind.pause,
.kind.bid_down {
  color: var(--danger-ink);
  background: var(--danger-bg);
}

.kind.bid_up,
.kind.resume {
  color: var(--success-ink);
  background: var(--success-bg);
}

.kind.spawn_creative {
  color: var(--warning-ink);
  background: var(--warning-bg);
}

.kind.cleanup {
  color: var(--muted);
  background: var(--surface-3);
}

.change {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.reason {
  color: var(--ink-2);
}

.meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

/* ——— кнопки ——— */

.btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

button,
a.button {
  padding: 8px 15px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

button:hover,
a.button:hover {
  background: var(--surface-3);
}

/* Ссылка в виде кнопки: на открытых страницах это переход, а не действие. */
a.button {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
}

button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

button.primary,
a.button.primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

button.primary:hover,
a.button.primary:hover {
  background: var(--accent-hover);
}

button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ——— режим ——— */

.modes {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}

.modes button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
}

.modes button.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ——— поля ввода ——— */

.field {
  padding: 10px 13px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  width: 100%;
}

.field:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* ——— списки ——— */

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list li {
  padding: 11px 22px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 14px;
}

.list li:last-child {
  border-bottom: 0;
}

.list .when {
  margin-right: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.empty {
  padding: 26px 22px;
  color: var(--muted);
  text-align: center;
}

/* ——— кабинеты ——— */

.account {
  display: block;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.account:last-child {
  border-bottom: 0;
}

.account:hover {
  background: var(--surface-3);
}

.account .name {
  color: var(--ink);
  font-weight: 500;
}

.tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.back {
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13.5px;
}

.back:hover {
  background: none;
  color: var(--accent);
}

.err {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger-ink);
  font-size: 14px;
}

@media (max-width: 620px) {
  .wrap {
    padding: 28px 16px 64px;
  }

  .row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ——— после клика ——— */

.setup {
  margin-top: 12px;
}

.setup summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 500;
}

/* Источники по ключу API: строка на источник, форма — по раскрытию. */
.sources {
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

.source {
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.setup .source summary {
  font-weight: 400;
}

.source .state {
  color: var(--muted);
  font-size: 13px;
  margin-left: 6px;
}

.source .state.ok {
  color: var(--success-ink);
}

.source .state.bad {
  color: var(--danger-ink);
}

.steps {
  margin: 14px 0 0;
  padding-left: 20px;
}

/* Только сами шаги: вложенные списки (итог проверки) отступов не наследуют. */
.steps > li {
  margin-bottom: 16px;
}

.steps > li:last-child {
  margin-bottom: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 10px;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.lbl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 12.5px;
}

/* Поле внутри подписи не должно брать её мелкий кегль. */
.lbl .field {
  font-size: 15px;
}

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

.checks {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.checks:empty {
  display: none;
}

.checks li {
  position: relative;
  padding: 3px 0 3px 18px;
  color: var(--ink-2);
}

.checks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
}

.checks li.warn::before {
  background: var(--warning);
}

.snippet {
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: 13px/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--ink);
  word-break: break-all;
  user-select: all;
}

code {
  font: 13px ui-monospace, 'SF Mono', Menlo, monospace;
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: 6px;
  color: var(--ink);
}

/* ——— бесплатная проверка объявления ——— */

.wrap.narrow {
  max-width: 760px;
}

.lead {
  margin: -16px 0 24px;
  color: var(--ink-2);
}

.check-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.check-form .modes {
  align-self: flex-start;
}

.lbl-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.count {
  font-variant-numeric: tabular-nums;
}

.count.over {
  color: var(--danger-ink);
}

textarea.field {
  min-height: 84px;
  resize: vertical;
  line-height: 1.5;
}

.checks li.bad::before {
  background: var(--danger);
}

/* Список-карточка разделов проверки: свой отступ, иначе пункты липнут к краю. */
.card.checks {
  margin: 0;
  padding: 14px 22px;
}

.stat .num.good {
  color: var(--success);
}

.stat .num.mid {
  color: var(--warning);
}

.stat .num.low {
  color: var(--danger);
}

.stats.result {
  grid-template-columns: minmax(120px, 1fr) 2fr;
}

@media (max-width: 560px) {
  .stats.result {
    grid-template-columns: 1fr;
  }
}

.verdict-text {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
}

.fixes {
  margin: 0;
  padding-left: 40px;
}

.fixes li {
  margin: 6px 0;
}

.cta {
  margin-top: 28px;
}

.cta-title {
  color: var(--ink);
  font-weight: 500;
}

a.primary-link {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

a.primary-link:hover {
  background: var(--accent-hover);
}

/* ——— юридические документы ——— */

.legal article h2 {
  margin: 22px 0 8px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.legal article h2:first-child {
  margin-top: 0;
}

.legal article p {
  margin: 0 0 10px;
}

.legal mark {
  padding: 0 3px;
  border-radius: 4px;
  background: var(--warning-bg);
  color: var(--ink);
}

.legal .meta a,
.consents a {
  color: var(--accent);
}

.consents {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
}

.consents label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.consents input {
  margin-top: 3px;
}

.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 13.5px;
  cursor: pointer;
}

.footer-links {
  margin-top: 16px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--accent);
}

button.danger {
  border-color: transparent;
  background: var(--danger-bg);
  color: var(--danger-ink);
}

button.danger:hover {
  background: var(--danger);
  color: var(--on-accent);
}

.danger-zone summary {
  color: var(--ink-2);
}

/* ——— тарифы ——— */

.plan-card {
  margin-bottom: 12px;
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
}

.plan.suggested {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.plan-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-weight: 500;
}

.plan.suggested .tag {
  background: var(--accent-tint-1);
  color: var(--accent);
}

.plan-price {
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.plan-price span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}

.plan-limits {
  flex: 1;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.plan button {
  margin-top: 8px;
}

.plan-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.plan.current .plan-note {
  color: var(--success-ink);
}

.plans-foot {
  margin-top: 12px;
}

/* ——— ключи API ——— */

.list.keys {
  margin-top: 14px;
  border-top: 1px solid var(--border);
}

.list.keys li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 11px 0;
}

.list.keys .when {
  margin-right: 0;
  font-size: 13px;
}

.list.keys .linkish {
  margin-left: 10px;
}

/* ——— спросить агента ——— */

.ask-form {
  display: flex;
  gap: 10px;
}

.ask-form .field {
  flex: 1;
  min-width: 0;
}

.ask-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
}

.ask-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.ask-q {
  align-self: flex-end;
  max-width: 85%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint-1);
  color: var(--ink);
}

.ask-a {
  max-width: 92%;
  color: var(--ink-2);
  white-space: pre-wrap;
}

.ask-a.meta {
  margin-top: 0;
}

.ask-err {
  color: var(--danger-ink);
}

/* Предупреждение наверху кабинета: кто-то ещё меняет кампанию. */
.notice {
  margin-top: 12px;
  border-color: var(--warning-bg);
  background: var(--warning-bg);
  color: var(--ink);
  font-size: 14px;
}

/* ——— правила ——— */

.rule-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.rule-cond {
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  gap: 8px;
  margin: 6px 0;
}

@media (max-width: 620px) {
  .rule-cond {
    grid-template-columns: 1fr 64px;
  }

  .rule-cond input {
    grid-column: 1 / -1;
  }
}

.rule-form [name="days"],
.rule-form [name="percent"] {
  max-width: 160px;
}

/* ——— запуск с нуля ——— */

.draft-group {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.draft-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.serp {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.serp.blocked {
  opacity: 0.6;
}

.serp-title {
  color: var(--accent);
  font-size: 16px;
  line-height: 1.35;
}

.serp-url {
  color: var(--success);
  font-size: 13px;
}

.serp-text {
  color: var(--ink-2);
  font-size: 14px;
}

/* ——— чек-лист настройки ——— */

.onboarding {
  margin-bottom: 12px;
}

.progress {
  height: 6px;
  margin: 14px 0 4px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

/* ——— заявка на подключение ——— */

.modes.choices {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
}

/* Ловушка для ботов: в вёрстке есть, глазу и клавиатуре — нет. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.owner-entry {
  margin-top: 20px;
}

/* ——— заявки с сайта (экран владельца) ——— */

.lead-row {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}

.lead-row:last-child {
  border-bottom: 0;
}

.lead-row .name a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.lead-comment {
  color: var(--ink-2);
  white-space: pre-wrap;
}

/* ——— кошельки для рекламы ——— */

.wallet h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.wallet p {
  margin: 0;
  color: var(--ink-2);
}

.wallet-how {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 14px;
}

a.ghost-link {
  display: inline-block;
  margin: 12px 8px 0 0;
  padding: 8px 15px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}

a.ghost-link:hover {
  background: var(--surface-3);
}