/* base.css — общая внешность AdsPoster: цвета, карточки, поля, кнопки, тумблеры.
 *
 * 🔴 ОДИН источник правды для окна программы и для страницы в Telegram. До
 * этого файла они расходились неизбежно: правишь цвет кнопки в `style.css` —
 * в телефоне остаётся старый, и человек видит два разных приложения вместо
 * одного. Здесь лежит только то, что нужно ОБОИМ; всё, что бывает лишь в окне
 * (боковое меню, сетка на две колонки, вкладки, таблицы профилей), остаётся в
 * `style.css`, а всё мобильное — в `miniapp.html`.
 *
 * Правило простое: компонент попадает сюда, когда он понадобился второй раз.
 * Складывать сюда всё подряд «на будущее» — верный способ получить свалку,
 * которую никто не решится тронуть.
 *
 * Значения не переписаны «по мотивам», а перенесены дословно из `style.css`:
 * это тот же интерфейс, а не похожий на него.
 */

:root{
  --bg:#0A0B0F; --surface:#0F1118; --card:#14161F; --card-2:#1A1D28; --card-3:#20242F;
  --border:rgba(255,255,255,.065); --border-str:rgba(255,255,255,.11);
  /* 🔴 `--faint` подняли с #565B6A. Замерено 09.08.2026: на карточке он давал
     контраст 2.66 при пороге 3.0 для второстепенного текста — то есть не
     дотягивал даже до послабленного. А им написано ВСЁ объясняющее: подсказки
     под полями, подписи шагов мастера, пустые состояния, версия в подвале.
     При масштабе 80 % и на ноутбучной матрице такой текст просто перестают
     читать. Стало 3.44. `--muted` порог проходил и раньше (5.59), поднят до
     6.34 заодно — цвета соседние, и разъезжаться им незачем. */
  --text:#EDEEF3; --muted:#9499A8; --faint:#666C7C;
  --brand:#7C5CFF; --good:#3ECF8E; --bad:#F26A6A; --warn:#F5B544;
  /* `--mode` — цвет текущего раздела. В окне он переключается по вкладкам,
     в телефоне остаётся фирменным фиолетовым. */
  --mode:#7C5CFF; --mode-2:#A78BFA;
  --mode-glow:rgba(124,92,255,.30); --mode-soft:rgba(124,92,255,.12);
  --radius:14px;
  --font:-apple-system,"Segoe UI Variable","Segoe UI",system-ui,sans-serif;
}

/* ── карточка ───────────────────────────────────────────────────────────── */
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:17px 18px; }
.card-h{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.card-h .n{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  font-size:12px; font-weight:700; background:var(--mode-soft); color:var(--mode-2); flex:none; }
.card-h h4{ font-size:14.5px; font-weight:600; letter-spacing:-.01em; }
.card-h .hint{ font-size:11.5px; color:var(--faint); margin-left:auto; }

/* ── заголовки и подписи ────────────────────────────────────────────────── */
.h1{ font-size:23px; font-weight:660; letter-spacing:-.03em; }
.sub{ color:var(--muted); font-size:13.5px; margin-top:3px; }
.lbl{ font-size:12px; color:var(--muted); font-weight:550; margin-bottom:7px;
  display:block; letter-spacing:.005em; }
.hint{ font-size:11.5px; color:var(--faint); }

/* ── поля ───────────────────────────────────────────────────────────────── */
.field{ margin-bottom:13px; }
.field:last-child{ margin-bottom:0; }
.inp{ display:flex; align-items:center; gap:10px; background:var(--surface);
  border:1px solid var(--border); border-radius:8px; padding:10px 12px;
  font-size:13px; color:var(--text); transition:.15s; }
.inp:focus-within{ border-color:var(--mode); box-shadow:0 0 0 3px var(--mode-soft); }
.inp input,.inp textarea,.inp select{ background:none; border:none; outline:none;
  color:var(--text); font-family:var(--font); font-size:13px; width:100%; resize:none; }
.inp .pre{ color:var(--faint); font-size:13px; }
/* 🔴 Подсказка в поле должна ЧИТАТЬСЯ как подсказка. Без своего цвета пример
   «nick:Password1:…» выглядел как уже введённая строка, и человек искал,
   откуда она взялась, вместо того чтобы вставить свою. */
.inp input::placeholder, .inp textarea::placeholder{ color:var(--faint); opacity:.75; }
/* 🔴 Списки рисуем СВОИМ CSS, а не средствами системы.

   На Windows окно программы держит WebView2 (тот же Chromium), и `select`
   выглядит как задумано. На Linux окно держит WebKitGTK, а он отдаёт `select`
   РОДНОМУ виджету GTK: посреди тёмного окна появляются белые прямоугольники,
   а текст в них почти не читается. Найдено на сервере 23.08.2026, когда
   программу впервые открыли на Linux.

   `appearance:none` забирает отрисовку себе. `option` красим ОТДЕЛЬНО:
   выпадающий список рисует система, и цвет от родителя он не наследует —
   без этой строки раскрытый список остаётся белым. */
/* 🔴 Вес селектора ВАЖЕН: выше стоит `.inp select{ background:none }`,
   и он сбрасывает фон вместе со стрелкой. Поэтому перечисляем оба
   случая явно, а не полагаемся на порядок правил. */
select, .inp select{
  -webkit-appearance:none; appearance:none;
  background-color:transparent; color:var(--text);
  /* 🔴 Стрелку рисуем САМИ. `appearance:none` убирает не только фон, но и
     значок раскрытия — без него список неотличим от простого текста, и
     непонятно, что по нему можно щёлкнуть. Рисуем галочку фоном: своя
     разметка тут не нужна, а вид одинаков на обеих системах. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239499A8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 2px center;
  padding-right:18px;
}
/* Выпадающий список рисует система, и цвет от родителя он НЕ наследует —
   без этой строки раскрытый список остаётся белым. */
select option, .inp select option{
  background-color:var(--card-2); color:var(--text); }
/* Одиночные списки вне рамки `.inp` остались бы совсем без границ. */
select.mini-sel{ padding-right:20px; }

.inp.select{ justify-content:space-between; cursor:pointer; }
.inp.select .cv{ color:var(--faint); }

/* ── кнопки ─────────────────────────────────────────────────────────────── */
.btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--card); border:1px solid var(--border); color:var(--text);
  padding:8px 13px; border-radius:8px; font-size:12.5px; font-weight:550;
  cursor:pointer; font-family:var(--font); transition:.15s; }
.btn-ghost:hover{ background:var(--card-2); border-color:var(--border-str); }
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--mode); border:none; color:#fff; padding:10px 16px; border-radius:8px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font);
  box-shadow:0 4px 16px -4px var(--mode-glow); transition:.15s; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost:disabled,.btn-primary:disabled{ opacity:.45; cursor:default; }
.danger-ghost{ border-color:rgba(242,106,106,.3); color:#E9A9A9; }
.danger-ghost:hover{ background:rgba(242,106,106,.1); }

/* ── строка с тумблером ─────────────────────────────────────────────────── */
.tg-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 13px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; }
.tg-row + .tg-row{ margin-top:9px; }
.tg-row .t-t{ font-size:13px; font-weight:530; }
.tg-row .t-d{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.tg{ width:40px; height:23px; border-radius:20px; background:var(--card-3);
  position:relative; cursor:pointer; flex:none; transition:.18s; }
.tg::after{ content:""; position:absolute; top:2.5px; left:2.5px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:.18s; }
.tg.on{ background:var(--mode); }
.tg.on::after{ transform:translateX(17px); }

/* ── переключатель разделов ─────────────────────────────────────────────── */
.seg-sm{ display:inline-flex; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:3px; gap:2px; }
.seg-sm button{ border:none; background:none; color:var(--muted); font-family:var(--font);
  font-size:12px; font-weight:550; padding:7px 13px; border-radius:8px; cursor:pointer;
  transition:.14s; }
.seg-sm button.on{ background:var(--mode); color:#fff; box-shadow:0 2px 10px -3px var(--mode-glow); }
.seg-sm.wide{ display:flex; }
.seg-sm.wide button{ flex:1; }

/* ── метки состояний ────────────────────────────────────────────────────── */
.chip{ font-size:11.5px; color:var(--muted); background:var(--surface);
  border:1px solid var(--border); padding:4px 10px; border-radius:20px;
  cursor:pointer; transition:.15s; }
.chip:hover,.chip.on{ color:var(--text); border-color:var(--border-str); background:var(--card-2); }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--good); flex:none;
  box-shadow:0 0 0 3px rgba(62,207,142,.18); }
.dot.err{ background:var(--bad); box-shadow:0 0 0 3px rgba(242,106,106,.18); }

/* ── подсказка-плашка ───────────────────────────────────────────────────── */
.note{ display:flex; gap:10px; padding:12px 14px; background:rgba(124,92,255,.07);
  border:1px solid rgba(124,92,255,.2); border-radius:12px; font-size:12.5px;
  color:#C6BBFF; margin-top:16px; }
.note.warn{ background:rgba(245,181,68,.08); border-color:rgba(245,181,68,.25); color:#F0D9A8; }
.note.bad{ background:rgba(242,106,106,.08); border-color:rgba(242,106,106,.25); color:#E9A9A9; }
/* Значок слева. Цвет не задан намеренно: он берётся у самой плашки, поэтому
   у жёлтой предупреждающей значок жёлтый, у красной — красный, сам собой.
   `margin-top` — чтобы значок сел на первую строку текста, а не на середину
   плашки: строк в подсказке бывает и пять. */
.note > span:first-child > .ico{ width:16px; height:16px; margin-top:1px; }

/* ── сетки ──────────────────────────────────────────────────────────────── */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

/* 🔴 Числовое поле НЕ растягивается на всю колонку. «Дней прогрева» и
   «Заходов в день» держат одну-две цифры, а занимали по 900 px каждое: курсор
   стоял у левого края посреди пустоты, и связь подписи с числом рвалась.
   Ширины хватает на пять знаков — больше туда и не вводят.

   Правило снимается на узком окне: там колонка сама не шире этого предела,
   а `max-width` мешал бы полю занять её целиком. */
@media (min-width:900px){
  .field:has(> .inp:not(.pair) > input[type=number]) > .inp{ max-width:220px; }
  .grid2 .field:has(> .inp:not(.pair) > input[type=number]) > .inp,
  .grid3 .field:has(> .inp:not(.pair) > input[type=number]) > .inp{ max-width:190px; }
  /* Пара «от — до» шире одиночного числа: в ней два поля и разделитель. */
  .field:has(> .inp.pair) > .inp{ max-width:230px; }
}

/* ── полоса хода работы ─────────────────────────────────────────────────── */
.track{ position:relative; height:6px; background:var(--card-3); border-radius:4px; }
.fill{ position:absolute; height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--mode),var(--mode-2)); }

/* ── когда движение мешает ──────────────────────────────────────────────────
 * Системная настройка Windows «Показывать анимацию» выключена — значит
 * человек её выключил намеренно: у кого-то от движения кружится голова,
 * кому-то оно мешает следить за текстом. Гасим здесь, в общем файле, чтобы не
 * пришлось вспоминать про это в каждом новом переходе.
 * 🔴 Не `animation:none`, а почти нулевая длительность: события `animationend`
 * при этом всё равно приходят, и код, который на них когда-нибудь завяжется,
 * не зависнет молча в ожидании.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── ПОЯСНЯЙ ────────────────────────────────────────────────────────────── */
/* Подсказка новичку под описанием настройки. Три части и все нужны:
   чем грозит, замер (если есть), что поставить.

   🔴 Отделена слева полосой, а не рамкой. Рамка сделала бы из подсказки
   отдельную карточку, и строка настройки распалась бы надвое; полоса
   читается как продолжение того же абзаца. */
.explain{ margin-top:8px; padding-left:10px; border-left:2px solid var(--mode);
  display:flex; flex-direction:column; gap:3px; }
.explain span{ font-size:11.5px; line-height:1.45; }
.ex-risk{ color:var(--muted); }
/* Замер — единственное здесь, что можно проверить. Своим цветом и цифрами
   в один ряд: глаз ищет число. */
.ex-fact{ color:var(--faint); font-variant-numeric:tabular-nums; }
/* Что поставить — ради чего человек и читал. Ярче остального. */
.ex-do{ color:var(--text); font-weight:550; }