:root {
  /* Светлая тема — основная и по умолчанию. Ни один цвет не задаётся мимо
     токенов: иначе смена темы превращается в отдельную работу. */
  --ground:#FBFCFB; --surface:#FFFFFF; --surface-2:#F3F6F4;
  --ink:#22272B; --muted:#5F6B65; --line:#E3E8E5;
  --brand:#16A085; --brand-soft:#E7F5F1;
  --ok:#15803D; --warn:#B45309; --bad:#B91C1C;
}
/* Тёмная — только по явному выбору человека. Системную настройку не слушаем:
   договорились, что базовый вид один для всех. */
:root[data-theme="dark"] {
  --ground:#051A17; --surface:#0C2A25; --surface-2:#11332C;
  --ink:#E8EDEA; --muted:#8CA099; --line:#1C3B34;
  --brand:#1FBF9C; --brand-soft:#0D2B25;
  --ok:#4ADE80; --warn:#FBBF24; --bad:#F87171;
}

/* Часть блоков писалась под другие имена токенов (--accent/--card/--bg/--text).
   Задаём их псевдонимами один раз: значение подставляется на месте, поэтому
   тему они подхватывают ту же, что и остальные. Без этого кнопка «Открыть
   доступ» на тёмной теме была тёмным текстом по тёмному фону — не видно. */
:root { --accent:var(--brand); --card:var(--surface); --bg:var(--surface-2); --text:var(--ink); }

* { box-sizing:border-box; }
/* display:flex/grid перебивает атрибут hidden — из-за этого скрытые списки
   оставались на экране. Ставим правило один раз и на всё. */
[hidden] { display:none !important; }
body {
  margin:0; min-height:100vh; background:var(--ground); color:var(--ink);
  font-family:"Golos Text","Segoe UI",system-ui,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}
a { color:inherit; }

.top {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 22px; border-bottom:1px solid var(--line); background:var(--surface);
}
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand-word { font-size:21px; font-weight:700; letter-spacing:.01em; }
.brand-word i { font-style:normal; color:var(--brand); }

.theme-btn {
  font:inherit; font-size:13.5px; color:var(--muted); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; padding:7px 13px;
}
.theme-btn:hover { color:var(--ink); }
.theme-btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* Ширину держит сама страница: главной и кабинету тесно в узкой колонке,
   а формам входа она наоборот нужна. */
main { flex:1; width:100%; max-width:1180px; margin:0 auto; padding:40px 22px 72px; }
/* Кабинет — во всю ширину окна, без полей и без центрирования. */
main.main-wide { max-width:none; margin:0; padding:0; }
h1 { font-size:clamp(28px,5vw,38px); line-height:1.15; margin:0 0 12px; text-wrap:balance; }
.lede { color:var(--muted); font-size:18px; margin:0 0 28px; max-width:58ch; }

.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:15px; padding:20px 22px;
}
.card h2 { font-size:17px; margin:0 0 8px; }
.card p { margin:0; color:var(--muted); font-size:15.5px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:13px; }

/* ── Подвал ───────────────────────────────────────────────────────────── */
.foot { border-top:1px solid var(--line); background:var(--surface);
        color:var(--muted); font-size:14px; }
.foot-top { max-width:1240px; margin:0 auto; padding:34px 22px 26px;
            display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:28px; }
.foot-brand .brand { margin-bottom:12px; }
.foot-about { margin:0 0 14px; max-width:30ch; font-size:14px; }
.foot-soc { display:flex; gap:8px; }
.foot-soc a { width:38px; height:38px; border-radius:50%; display:flex;
              align-items:center; justify-content:center; font-size:11px;
              font-weight:700; text-decoration:none; color:var(--text);
              background:var(--surface-2); border:1px solid var(--line); }
.foot-soc a:hover { border-color:var(--accent); color:var(--accent); }
.foot-col, .foot-support { display:flex; flex-direction:column; gap:9px; }
.foot h3 { margin:0 0 2px; font-size:12px; letter-spacing:.1em; font-weight:600;
           text-transform:uppercase; color:var(--muted); }
.foot h3.mt { margin-top:14px; }
.foot-col a, .foot-support a { color:var(--text); text-decoration:none; font-size:14.5px; }
.foot-col a:hover, .foot-support a:hover { color:var(--accent); }
/* Поддержка в рамке — её ищут, когда что-то пошло не так. */
.foot-support { padding:16px 18px; border:1px solid var(--line); border-radius:12px;
                background:var(--bg); }
.foot-note { margin:0; font-size:13px; color:var(--muted); }
.foot-bottom { border-top:1px solid var(--line); }
.foot-bottom { max-width:1240px; margin:0 auto; padding:16px 22px;
               display:flex; align-items:center; justify-content:space-between;
               gap:18px; flex-wrap:wrap; }
.foot-legal { display:flex; gap:22px; flex-wrap:wrap; }
.foot-legal a { color:var(--muted); text-decoration:none; font-size:13.5px; }
.foot-legal a:hover { color:var(--accent); }
.foot-copy { font-size:13.5px; }
@media (max-width: 980px) {
  .foot-top { grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px) {
  .foot-top { grid-template-columns:1fr; }
}

/* Полоска про cookie */
.cookie-bar { position:fixed; left:0; right:0; bottom:0; z-index:80;
              display:flex; align-items:center; justify-content:space-between;
              gap:18px; flex-wrap:wrap; padding:14px 22px;
              background:var(--surface); border-top:1px solid var(--line);
              color:var(--text); font-size:14px;
              box-shadow:0 -10px 30px rgba(0,0,0,.16); }
.cookie-bar[hidden] { display:none; }
.cookie-actions { display:flex; gap:10px; align-items:center; }
.cookie-bar .btn { margin-top:0; }

/* Документы */
.legal { max-width:74ch; }
.legal h2 { font-size:18px; margin:26px 0 8px; }
.legal p, .legal li { color:var(--muted); }
.legal b { color:var(--text); }
.legal ul { padding-left:20px; display:flex; flex-direction:column; gap:6px; }

/* ── Кабинет: две колонки, меню слева ─────────────────────────────────── */
.top-right { display:flex; align-items:center; gap:14px; }
.top-link { color:var(--muted); text-decoration:none; font-size:14px; }
.top-link:hover { color:var(--text); }
.top-cta { background:var(--accent); color:#06231f; padding:6px 12px; border-radius:8px; font-weight:600; }
.top-shop { display:inline-flex; align-items:center; gap:7px; padding:6px 12px;
            border:1px solid var(--line); border-radius:9px; color:var(--text);
            font-weight:600; font-size:14px; text-decoration:none; }
.top-shop:hover { border-color:var(--accent); color:var(--accent); }
.top-shop .ic { width:16px; height:16px; }

.card-narrow { max-width:400px; margin:48px auto; padding:28px; background:var(--card);
               border:1px solid var(--line); border-radius:16px; }
.card-wide { max-width:760px; margin:32px auto; padding:28px; background:var(--card);
             border:1px solid var(--line); border-radius:16px; }
.card-narrow h1, .card-wide h1 { margin:0 0 10px; font-size:24px; }
label { display:block; margin:14px 0 0; font-size:14px; color:var(--muted); }
label input { display:block; width:100%; margin-top:6px; padding:10px 12px;
              border:1px solid var(--line); border-radius:10px; background:var(--bg);
              color:var(--text); font-size:15px; box-sizing:border-box; }
.hint { display:block; margin-top:6px; font-size:12px; color:var(--muted); }
.btn { display:inline-block; margin-top:16px; padding:10px 18px; border-radius:10px;
       border:1px solid var(--line); background:var(--card); color:var(--text);
       font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#06231f; }
.msg { margin-top:14px; padding:10px 14px; border-radius:10px; font-size:14px;
       background:var(--bg); border:1px solid var(--line); }
.msg-ok { border-color:#16a34a; color:#16a34a; }
.msg-bad { border-color:#dc2626; color:#dc2626; }
.msg-warn { border-color:#d97706; color:#b45309; }
.mp { margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.mp-head { display:flex; align-items:center; gap:10px; }
.mp-head h2 { margin:0; font-size:18px; }
.tag { font-size:12px; padding:2px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.tag-on { border-color:#16a34a; color:#16a34a; }

.work { display:grid; grid-template-columns:268px minmax(0,1fr); gap:12px;
        max-width:none; margin:0; padding:12px; align-items:start; }
.side { background:var(--card); border:1px solid var(--line); border-radius:14px;
        padding:12px; height:fit-content; }
.side-switch { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
.sw { display:flex; align-items:center; justify-content:center; gap:7px;
      padding:8px; border-radius:9px; font-size:13px; font-weight:700;
      text-decoration:none; color:var(--muted); background:var(--bg); }
/* Марки площадок — их собственные, а не наши кружки: узнаётся с одного взгляда.
   Размер задаём в CSS: атрибутов width/height мало, картинки квадратные
   не по пикселям, а по рисунку. */
.mp-ico { display:block; flex:none; border-radius:5px; object-fit:cover; }
.sw .mp-ico { width:18px; height:18px; }
.mods-cols h3 .mp-ico { width:20px; height:20px; }
.chan-group .mp-ico { width:28px; height:28px; }
.sw.on { background:#2563eb; color:#fff; }
.sw.on.wb { background:#7c3aed; }
.side-nav { display:flex; flex-direction:column; gap:2px; }
.side-item { padding:9px 11px; border-radius:9px; font-size:14px; color:var(--text);
             text-decoration:none; }
.side-item:hover { background:var(--bg); }
.side-item.on { background:var(--accent); color:#06231f; font-weight:600; }
.side-cta { margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
            display:flex; flex-direction:column; gap:4px; }
.side-cta b { font-size:14px; }
.side-cta span { font-size:12.5px; color:var(--muted); }
.side-cta .btn { margin-top:8px; text-align:center; font-size:13.5px; padding:9px 10px; }
.side-foot { margin-top:12px; border-top:1px solid var(--line); padding-top:12px;
             color:var(--muted); font-size:13px; }
.pane { background:var(--card); border:1px solid var(--line); border-radius:14px;
        padding:22px; min-height:calc(100vh - 160px); }
.pane-head h1 { margin:0 0 4px; font-size:22px; }
.stub { margin-top:18px; padding:18px; border:1px dashed var(--line); border-radius:12px; }
@media (max-width: 820px) { .work { grid-template-columns:1fr; } }

/* ── Замок на разделе для гостя ──────────────────────────────────────── */
.peek { position:relative; margin-top:16px; border:1px solid var(--line);
        border-radius:14px; overflow:hidden; min-height:320px; }
.peek-skeleton { padding:22px; display:flex; flex-direction:column; gap:14px;
                 filter:blur(3px); opacity:.5; }
.sk { background:linear-gradient(90deg, var(--line), var(--bg), var(--line));
      border-radius:8px; }
.sk-row { height:16px; }
.sk-row.short { width:55%; }
.sk-block { height:120px; }
.peek-lock { position:absolute; inset:0; display:flex; flex-direction:column;
             align-items:center; justify-content:center; text-align:center;
             gap:8px; padding:26px; background:color-mix(in srgb, var(--card) 82%, transparent); }
.lock-icon { width:44px; height:44px; border-radius:50%; display:flex;
             align-items:center; justify-content:center; background:var(--bg);
             border:1px solid var(--line); color:var(--muted); }
.peek-lock h2 { margin:6px 0 0; font-size:19px; }
.peek-lock p { margin:0; max-width:46ch; color:var(--muted); font-size:14px; }
.lock-actions { display:flex; gap:10px; margin-top:6px; }
.lock-actions .btn { margin-top:0; }

/* ── Главная страница ─────────────────────────────────────────────────── */
.land { max-width:1120px; margin:0 auto; padding:0 16px 60px;
        display:flex; flex-direction:column; gap:52px; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:36px; align-items:center; padding-top:34px; }
.hero-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.chip-mp { font-weight:700; letter-spacing:.02em; }
.chip-mp .oz { color:#3b82f6; }
.chip-mp .wb { color:#a855f7; }
.hero h1 { margin:0 0 14px; font-size:clamp(30px,3.8vw,46px); line-height:1.1;
           letter-spacing:-0.02em; text-wrap:balance; }
.hero h1 i { font-style:normal; color:var(--accent); }
.lede { margin:0; color:var(--muted); font-size:17px; max-width:52ch; }
.hero-actions { display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.hero-actions .btn { margin-top:0; }
.hero .hint { margin-top:10px; }
.hero-shot { border:1px solid var(--line); border-radius:16px; overflow:hidden;
             background:#070d0c; line-height:0; }
.hero-shot img { width:100%; height:auto; display:block; }
.lede-2 { margin-top:12px; }
.lede-2 b { color:var(--text); }
.shot-side { display:flex; flex-direction:column; gap:4px; }
.shot-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:6px; }
.shot-switch span { text-align:center; padding:5px; border-radius:7px; font-size:11px;
                    font-weight:700; background:var(--bg); color:var(--muted); }
.shot-switch .on { background:#2563eb; color:#fff; }
.shot-item { padding:6px 8px; border-radius:7px; font-size:12px; color:var(--muted); }
.shot-item.on { background:var(--accent); color:#06231f; font-weight:600; }
.shot-pane { display:flex; flex-direction:column; gap:12px; padding:14px;
             background:var(--bg); border-radius:12px; filter:blur(2px); opacity:.55; }

/* ── Умный дежурный ───────────────────────────────────────────────────── */
.duty { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
        gap:32px; align-items:start; padding:24px; border:1px solid var(--line);
        border-radius:16px; background:var(--card); }
.duty h2 { margin:0 0 8px; font-size:24px; }
.duty .muted { margin:0; max-width:56ch; }
.duty-how { list-style:none; margin:20px 0 0; padding:0; display:flex;
            flex-direction:column; gap:14px; }
.duty-how li { display:flex; gap:12px; align-items:flex-start; }
.duty-how > li > .ic { width:36px; height:36px; padding:8px; border-radius:11px;
                       background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }
.duty-how b { display:block; font-size:15px; margin-bottom:2px; }
.duty-how span { color:var(--muted); font-size:14px; }
.duty-chans { display:flex; flex-direction:column; gap:12px; }
.chan-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
              padding:12px 14px; border:1px solid var(--line); border-radius:12px;
              background:var(--bg); }
.chan-group span { font-size:13px; padding:4px 10px; border-radius:999px;
                   border:1px solid var(--line); color:var(--text); }
.chan-name { font-size:13px; font-weight:700; color:var(--muted);
             text-transform:uppercase; letter-spacing:.08em; }
.chan-group .mp-ico { width:26px; height:26px; }
/* Экономия — не «средняя по клиентам», а та же арифметика, что в калькуляторе. */
.duty-save { margin-top:6px; padding:18px 20px; border-radius:14px;
             border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
             background:linear-gradient(160deg,
                 color-mix(in srgb, var(--accent) 14%, transparent), var(--bg)); }
.save-cap { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.save-num { display:block; margin:2px 0 6px; font-size:34px; font-weight:800;
            letter-spacing:-.02em; color:var(--accent); line-height:1; }
.save-sub { display:block; font-size:13px; color:var(--muted); }
.save-link { display:inline-block; margin-top:10px; font-size:13.5px; font-weight:600;
             color:var(--accent); text-decoration:none; }
.save-link:hover { text-decoration:underline; }
@media (max-width: 820px) {
  .duty { grid-template-columns:1fr; }
  .duty-how li { grid-template-columns:1fr; gap:2px; }
}

.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
            background:var(--line); border:1px solid var(--line); border-radius:14px;
            overflow:hidden; }
.benefit { background:var(--card); padding:18px 20px; display:flex; gap:13px;
           align-items:flex-start; }
.benefit > .ic { width:38px; height:38px; padding:9px; border-radius:12px;
                 background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }
.benefit b { display:block; font-size:16px; margin-bottom:4px; }
.benefit span { color:var(--muted); font-size:14px; }

.mods-land h2 { margin:0 0 18px; font-size:24px; }
.mods-cols { display:grid; grid-template-columns:1fr 1fr; gap:28px 40px; }
.mods-cols h3 { display:flex; align-items:center; gap:9px; margin:0 0 10px;
                font-size:13px; letter-spacing:.1em; text-transform:uppercase;
                color:var(--muted); font-weight:600; }
.mods-cols h3.mt { margin-top:24px; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.oz { background:#2563eb; }
.dot.wb { background:#7c3aed; }
.dot.fin { background:#b0730c; }
.mods-cols ul { list-style:none; margin:0; padding:0; display:flex;
                flex-direction:column; gap:2px; }
.mods-cols a { display:grid; grid-template-columns:12.5em 1fr; gap:12px;
               padding:8px 10px; border-radius:9px; text-decoration:none;
               color:var(--text); align-items:baseline; }
.mods-cols a:hover { background:var(--card); }
.mods-cols a span { color:var(--muted); font-size:14px; }

/* ── Дежурный (автопилот) ─────────────────────────────────────────────── */
/* Живёт вверху сайдбара: включённая смена видна на любой странице кабинета. */
.ap-slot { position:relative; margin:0 0 10px; }
.ap-toggle { width:100%; display:flex; align-items:center; gap:8px; padding:10px 12px;
             border:1px solid var(--line); border-radius:10px; background:var(--bg);
             color:var(--text); font:inherit; font-size:13.5px; font-weight:700;
             cursor:pointer; text-align:left; }
.ap-toggle:hover { border-color:var(--accent); }
.ap-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ap-toggle.on { background:var(--accent); border-color:var(--accent); color:#06231f;
                box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.ap-ico { font-size:17px; line-height:1; }
.ap-toggle #apText { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-arrow { font-size:11px; opacity:.7; }

.ap-menu { position:absolute; left:0; top:100%; margin-top:6px; width:320px; z-index:60;
           display:flex; flex-direction:column; gap:8px; padding:14px;
           background:var(--card); border:1px solid var(--line); border-radius:12px;
           box-shadow:0 18px 40px rgba(0,0,0,.28); }
.ap-menu[hidden] { display:none; }
.ap-label { font-size:13px; font-weight:600; color:var(--muted); }
.ap-note { font-size:12px; color:var(--muted); }
.ap-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ap-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.ap-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.ap-btn { padding:7px 8px; border:1px solid var(--line); border-radius:8px;
          background:var(--bg); color:var(--text); font:inherit; font-size:12.5px;
          cursor:pointer; }
.ap-btn:hover { border-color:var(--accent); }
.ap-btn.on { border-color:var(--accent); color:var(--accent); font-weight:600; }
.ap-btn-go { font-weight:700; background:var(--brand-soft); }
.ap-btn-warn { font-weight:600; color:var(--warn); }
.ap-btn-stop { color:var(--bad); font-weight:700; }
.ap-input { width:100%; padding:6px 9px; border:1px solid var(--line); border-radius:8px;
            background:var(--bg); color:var(--text); font:inherit; font-size:12.5px; }
.ap-sep { border-top:1px solid var(--line); padding-top:12px; margin-top:4px;
          display:flex; flex-direction:column; gap:8px; }
.ap-check { display:flex; align-items:center; gap:8px; margin:0; font-size:13.5px;
            color:var(--text); cursor:pointer; }
.ap-check input { width:16px; height:16px; }
.ap-hours { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.ap-num { width:52px; padding:4px 6px; border:1px solid var(--line); border-radius:7px;
          background:var(--bg); color:var(--text); font:inherit; font-size:13px;
          text-align:center; }
.ap-week { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.ap-week label { margin:0; cursor:pointer; }
.ap-week input { position:absolute; opacity:0; pointer-events:none; }
.ap-week span { display:block; padding:5px 0; text-align:center; font-size:11.5px;
                border-radius:7px; background:var(--bg); border:1px solid var(--line);
                color:var(--muted); }
.ap-week input:checked + span { background:var(--accent); border-color:var(--accent);
                                color:#06231f; font-weight:700; }
.ap-week input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.ap-rules { font-size:12.5px; color:var(--muted); gap:5px; }
.ap-rules b { color:var(--text); }
.ap-log { display:block; text-align:center; margin-top:4px; padding:8px; border-radius:9px;
          background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); font-weight:600;
          font-size:13px; text-decoration:none; }

/* Страница дежурного — только состояние и объяснение. */
.ap-page { display:flex; flex-direction:column; align-items:flex-start; gap:2px;
           margin-top:16px; }
.ap-page .btn { margin-top:14px; }
.ap-where { margin:8px 0 0; font-size:14px; max-width:60ch; }
.ap-page h2 { margin:26px 0 10px; font-size:18px; }
.ap-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
            gap:12px; max-width:900px; }
.ap-steps li { display:grid; grid-template-columns:9em 1fr; gap:12px; align-items:baseline; }
.ap-steps span { color:var(--muted); font-size:14px; }
@media (max-width: 980px) {
  .ap-menu { width:min(320px, calc(100vw - 40px)); }
  .ap-steps li { grid-template-columns:1fr; gap:2px; }
}

/* Журнал: таблица широкая, но горизонтально едет она сама, а не страница. */
.log-table { margin-top:16px; overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.log-table table { width:100%; border-collapse:collapse; font-size:14px; }
.log-table th, .log-table td { padding:9px 12px; text-align:left; vertical-align:top;
                               border-bottom:1px solid var(--line); }
.log-table th { font-size:12px; text-transform:uppercase; letter-spacing:.06em;
                color:var(--muted); font-weight:600; }
.log-table tr:last-child td { border-bottom:0; }
.log-table .nowrap { white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Подарок — не абзац, а знак: цифра, подпись, и всё. */
.gift-pill { display:inline-flex; align-items:center; gap:9px; margin:14px 0 0;
             padding:9px 16px 9px 12px; border-radius:999px;
             background:var(--brand-soft); border:1px solid var(--accent);
             font-size:14.5px; }
.gift-pill b { color:var(--text); }
.gift-pill i { font-style:normal; color:var(--muted); font-size:13px; }
.gift-ico { font-size:18px; line-height:1; }
.final .gift-pill { margin:16px auto 0; }

.gift-banner { display:flex; align-items:center; gap:14px; margin:0 0 20px;
               padding:16px 20px; border-radius:14px; border:1px solid var(--accent);
               background:linear-gradient(90deg,
                   color-mix(in srgb, var(--accent) 16%, transparent), var(--brand-soft)); }
.gift-banner .gift-ico { font-size:26px; }
.gift-num { font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:1;
            color:var(--accent); font-variant-numeric:tabular-nums; }
.gift-txt { display:flex; flex-direction:column; line-height:1.25; }
.gift-txt b { font-size:16px; }
.gift-txt i { font-style:normal; font-size:13.5px; color:var(--muted); }
.gift-banner .btn { margin:0 0 0 auto; }
@media (max-width: 620px) {
  .gift-banner { flex-wrap:wrap; }
  .gift-banner .btn { margin:6px 0 0; }
}

/* ── Витрина отзыва ───────────────────────────────────────────────────── */
.demo { display:flex; flex-direction:column; align-items:center; text-align:center; }
.demo-tag { padding:5px 14px; border-radius:999px; background:var(--brand-soft);
            color:var(--accent); font-size:13px; font-weight:600; }
.demo h2 { margin:14px 0 8px; font-size:clamp(24px,3vw,34px); letter-spacing:-.02em;
           text-wrap:balance; }
.demo h2 i { font-style:normal; color:var(--accent); }
.demo-lede { margin:0 0 26px; max-width:62ch; }

.demo-grid { display:grid; grid-template-columns:250px minmax(0,1fr) 320px; gap:20px;
             width:100%; align-items:start; text-align:left; }
.demo-side { display:flex; flex-direction:column; gap:12px; }
.demo-feat { display:flex; gap:12px; align-items:flex-start; padding:14px 16px;
             border:1px solid var(--line); border-radius:14px; background:var(--card); }
.demo-feat > .ic { width:34px; height:34px; padding:8px; border-radius:11px;
                   background:color-mix(in srgb, var(--accent) 16%, transparent);
                   color:var(--accent); }
.demo-feat b { display:block; font-size:14.5px; margin-bottom:2px; }
.demo-feat span { color:var(--muted); font-size:13px; }

.demo-card { padding:22px; border:1px solid var(--accent); border-radius:18px;
             background:var(--card); display:flex; flex-direction:column; gap:16px;
             box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent),
                        0 20px 50px rgba(0,0,0,.22); }
.demo-field { display:flex; flex-direction:column; gap:8px; }
.demo-label { margin:0; font-size:14px; font-weight:600; color:var(--text); }
.stars { display:flex; gap:6px; }
.star { width:34px; height:34px; padding:0; border:0; background:none; cursor:pointer;
        font-size:26px; line-height:1; color:var(--line); }
.star.on { color:#f5a623; }
.star:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.demo-card textarea { width:100%; padding:12px 14px; border:1px solid var(--line);
                      border-radius:12px; background:var(--bg); color:var(--text);
                      font:inherit; font-size:15px; resize:vertical; }
.demo-card textarea:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.demo-count { align-self:flex-end; font-size:12px; color:var(--muted);
              font-variant-numeric:tabular-nums; }
.demo-go { display:flex; align-items:center; justify-content:center; gap:10px;
           margin-top:0; width:100%; font-size:15px; padding:13px 18px; }
.demo-go .ic { width:18px; height:18px; }
.demo-go-label { white-space:nowrap; }
.demo-go i { font-style:normal; }
.demo-go[disabled] { opacity:.75; cursor:default; }
/* Крутилка в кнопке — чтобы клик не выглядел «ничего не произошло». */
.demo-go.busy .ic { display:none; }
.demo-go.busy::before { content:""; width:17px; height:17px; border-radius:50%;
                        border:2px solid rgba(6,35,31,.35); border-top-color:#06231f;
                        animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .demo-go.busy::before { animation:none; }
  .sk-line { animation:none; }
}

/* Бегущие полоски в карточке ответа, пока модель пишет. */
.demo-answer.demo-wait { gap:9px; }
.sk-line { display:block; height:13px; border-radius:7px;
           background:linear-gradient(90deg, var(--line), var(--surface), var(--line));
           background-size:200% 100%; animation:shimmer 1.2s ease-in-out infinite; }
.sk-line.short { width:60%; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.demo-left { text-align:center; font-size:13.5px; color:var(--muted); }

.demo-out { position:relative; padding:18px 20px; border:1px solid var(--line);
            border-radius:18px; background:var(--surface-2); }
.demo-out-head { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.demo-out-head .ic { width:30px; height:30px; padding:6px; border-radius:9px;
                     background:color-mix(in srgb, var(--accent) 16%, transparent);
                     color:var(--accent); }
.demo-out-name { display:flex; flex-direction:column; gap:1px; flex:1; }
.demo-out-head b { font-size:15px; }
.demo-stars { font-size:13px; letter-spacing:1px; color:#f5a623; line-height:1; }
.demo-badge { padding:3px 10px; border-radius:999px; border:1px solid var(--line);
              font-size:11.5px; color:var(--muted); }
.demo-badge.on { border-color:var(--accent); color:var(--accent); font-weight:600; }
.demo-answer { display:flex; flex-direction:column; gap:10px;
                transition:opacity .3s ease; }
.demo-answer.fade { opacity:0; }
.demo-answer p { margin:0; font-size:14.5px; line-height:1.5; }
.demo-answer.demo-err p { color:var(--bad); }
.demo-out-foot { display:flex; align-items:center; gap:7px; margin-top:14px;
                 padding-top:12px; border-top:1px solid var(--line);
                 font-size:13px; color:var(--muted); }
.demo-out-foot .ic { width:16px; height:16px; color:var(--accent); }
.demo-mps { display:flex; gap:12px; justify-content:center; margin-top:18px; }
.demo-mps .mp-ico { width:54px; height:54px; border-radius:15px; }

.demo-bottom { display:grid; grid-template-columns:repeat(4,1fr); gap:18px 24px;
               width:100%; margin-top:26px; padding-top:22px;
               border-top:1px solid var(--line); text-align:left; }
.demo-b { display:flex; gap:11px; align-items:flex-start; }
.demo-b > .ic { width:30px; height:30px; color:var(--accent); }
.demo-b b { display:block; font-size:15px; }
.demo-b span { color:var(--muted); font-size:13.5px; }

@media (max-width: 1100px) {
  .demo-grid { grid-template-columns:1fr; }
  .demo-bottom { grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px) { .demo-bottom { grid-template-columns:1fr; } }


.gift-pill { display:inline-flex; align-items:center; gap:9px; margin:14px 0 0;
             padding:9px 16px 9px 12px; border-radius:999px;
             background:var(--brand-soft); border:1px solid var(--accent);
             font-size:14.5px; }
.gift-pill b { color:var(--text); }
.gift-pill i { font-style:normal; color:var(--muted); font-size:13px; }
.gift-ico { font-size:18px; line-height:1; }
.final .gift-pill { margin:16px auto 0; }

.gift-banner { display:flex; align-items:center; gap:14px; margin:0 0 20px;
               padding:16px 20px; border-radius:14px; border:1px solid var(--accent);
               background:linear-gradient(90deg,
                   color-mix(in srgb, var(--accent) 16%, transparent), var(--brand-soft)); }
.gift-banner .gift-ico { font-size:26px; }
.gift-num { font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:1;
            color:var(--accent); font-variant-numeric:tabular-nums; }
.gift-txt { display:flex; flex-direction:column; line-height:1.25; }
.gift-txt b { font-size:16px; }
.gift-txt i { font-style:normal; font-size:13.5px; color:var(--muted); }
.gift-banner .btn { margin:0 0 0 auto; }
@media (max-width: 620px) {
  .gift-banner { flex-wrap:wrap; }
  .gift-banner .btn { margin:6px 0 0; }
}

/* ── Цены: пакеты ответов ─────────────────────────────────────────────── */
.plans-land h2 { margin:0 0 8px; font-size:26px; letter-spacing:-.02em; }
.plans-land h2 i { font-style:normal; color:var(--accent); }
.plans-lede { margin:0 0 22px; max-width:74ch; }
.plans-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px;
              align-items:start; }
.plans-left { display:flex; flex-direction:column; gap:16px; }

.packs { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; align-items:stretch; }
.pack { position:relative; display:flex; flex-direction:column; align-items:center;
        text-align:center; gap:3px; padding:22px 14px 16px;
        border:1px solid var(--line); border-radius:16px; background:var(--card); }
.pack-hot { border-color:var(--accent);
            box-shadow:0 0 0 1px var(--accent), 0 14px 34px rgba(0,0,0,.16); }
.pack-flag { position:absolute; top:-12px; left:50%; transform:translateX(-50%);
             display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
             padding:4px 12px; border-radius:999px; background:var(--accent);
             color:#06231f; font-size:11.5px; font-weight:700; }
.pack-flag .ic { width:13px; height:13px; }
.pack-ico { display:flex; align-items:center; justify-content:center;
            width:42px; height:42px; margin-bottom:8px; border-radius:13px;
            background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }
.pack-ico .ic { width:22px; height:22px; }
.pack-count { font-size:25px; font-weight:700; letter-spacing:-.02em; line-height:1.1;
              font-variant-numeric:tabular-nums; }
.pack-word { font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
             color:var(--muted); }
.pack-price { margin-top:12px; font-size:20px; font-weight:700;
              font-variant-numeric:tabular-nums; }
.pack-per { font-size:13px; color:var(--accent); font-weight:600; }
.pack-note { margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
             width:100%; font-size:13px; color:var(--muted); flex:1; }
.pack .btn { margin-top:12px; width:100%; text-align:center; font-size:13px; padding:9px 8px; }

/* Иконка в кружке — общий приём для всей витрины */
.ic { display:inline-flex; width:20px; height:20px; flex:none; }
.ic svg { width:100%; height:100%; }

.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:18px 26px;
         padding:18px 20px; border:1px solid var(--line); border-radius:16px;
         background:var(--card); }
.fact { display:flex; gap:12px; align-items:flex-start; }
.fact > .ic { width:36px; height:36px; padding:8px; border-radius:11px;
              background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }
.fact b { display:block; font-size:14.5px; margin-bottom:2px; }
.fact span { color:var(--muted); font-size:13.5px; }

/* Спидометр и расчёт по своему магазину */
.calc { display:flex; flex-direction:column; gap:14px; padding:20px;
        border:1px solid var(--line); border-radius:16px; background:var(--card); }
.calc h3 { margin:0; font-size:18px; }
.calc-lede { margin:0; font-size:13.5px; color:var(--muted); }
.calc-field { display:flex; flex-direction:column; gap:6px; margin:0;
              font-size:13px; color:var(--muted); }
.calc-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.calc-head b { font-size:19px; color:var(--text); font-variant-numeric:tabular-nums; }
.calc-scale { display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted);
              font-variant-numeric:tabular-nums; }
/* Ползунок рисуем сами: системный в тёмной теме почти не виден. */
.slider { -webkit-appearance:none; appearance:none; width:100%; height:22px;
          background:transparent; cursor:pointer; }
.slider::-webkit-slider-runnable-track { height:6px; border-radius:999px;
          background:linear-gradient(90deg, var(--accent) var(--fill,30%),
                                     var(--line) var(--fill,30%)); }
.slider::-moz-range-track { height:6px; border-radius:999px; background:var(--line); }
.slider::-moz-range-progress { height:6px; border-radius:999px; background:var(--accent); }
.slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
          width:20px; height:20px; margin-top:-7px; border-radius:50%;
          background:var(--accent); border:3px solid var(--card);
          box-shadow:0 0 0 1px var(--accent); }
.slider::-moz-range-thumb { width:20px; height:20px; border-radius:50%;
          background:var(--accent); border:3px solid var(--card);
          box-shadow:0 0 0 1px var(--accent); }
.slider:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:999px; }

.gauge { position:relative; padding:4px 0 2px; text-align:center; }
.gauge svg { width:100%; height:auto; display:block; overflow:visible; }
.gauge-track { fill:none; stroke:var(--line); stroke-width:11; stroke-linecap:round; }
.gauge-arc { fill:none; stroke:url(#gaugeGrad); stroke-width:11; stroke-linecap:round;
             transition:stroke-dashoffset .5s ease; }
.gauge-needle { stroke:var(--accent); stroke-width:3; stroke-linecap:round;
                transition:transform .5s ease; }
.gauge-pin { fill:var(--accent); }
.gauge-min, .gauge-max { fill:var(--muted); font-size:9px; }
.gauge-max { text-anchor:end; }
.gauge-val { position:absolute; left:0; right:0; top:52%; display:flex;
             align-items:baseline; justify-content:center; gap:2px; pointer-events:none; }
.gauge-val b { font-size:38px; font-weight:800; letter-spacing:-.03em; color:var(--accent);
               font-variant-numeric:tabular-nums; line-height:1; }
.gauge-val i { font-style:normal; font-size:18px; font-weight:700; color:var(--accent); }
.gauge-cap { margin-top:4px; font-size:13px; color:var(--muted); }

.calc-rows { display:flex; flex-direction:column; gap:12px; }
.calc-row { display:flex; gap:11px; align-items:flex-start; }
.calc-row > .ic { width:32px; height:32px; padding:7px; border-radius:10px;
                  background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }
.calc-row b { display:block; font-size:15px; font-variant-numeric:tabular-nums; }
.calc-row span { font-size:12.5px; color:var(--muted); }
/* Подарок широкой полосой — под сеткой цен, во всю ширину раздела. */
.gift-wide { display:flex; align-items:center; gap:18px; margin-top:16px;
             padding:20px 26px; border-radius:16px;
             border:1px solid var(--accent);
             background:linear-gradient(90deg,
                 color-mix(in srgb, var(--accent) 20%, transparent) 0%,
                 var(--brand-soft) 55%, var(--card) 100%); }
.gift-wide-ico { display:flex; align-items:center; justify-content:center;
                 width:52px; height:52px; flex:none; border-radius:16px;
                 background:var(--accent); color:#06231f; }
.gift-wide-ico .ic { width:28px; height:28px; }
.gift-wide-num { font-size:46px; font-weight:800; line-height:1; letter-spacing:-.03em;
                 color:var(--accent); font-variant-numeric:tabular-nums; }
.gift-wide-txt { display:flex; flex-direction:column; gap:2px; }
.gift-wide-txt b { font-size:20px; letter-spacing:-.01em; }
.gift-wide-txt i { font-style:normal; font-size:14px; color:var(--muted); }
.gift-wide-cta { margin:0 0 0 auto; flex:none; }
@media (max-width: 820px) {
  .gift-wide { flex-wrap:wrap; gap:12px; padding:18px; }
  .gift-wide-cta { margin:6px 0 0; width:100%; text-align:center; }
}
.calc-cta { margin-top:0; text-align:center; }

@media (max-width: 1100px) {
  .plans-grid { grid-template-columns:1fr; }
  .packs { grid-template-columns:repeat(3,1fr); }
  .facts { grid-template-columns:1fr; }
}
@media (max-width: 820px) { .packs { grid-template-columns:1fr; } }

/* ── Полоса подключения ───────────────────────────────────────────────── */
.connect-band { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:28px;
                align-items:center; padding:26px 30px; border-radius:18px;
                border:1px solid var(--line); background:var(--card); }
.cb-art { display:flex; align-items:center; gap:10px; }
.cb-art .mp-ico { width:78px; height:78px; border-radius:20px; }
.cb-link { display:flex; align-items:center; justify-content:center; width:34px; height:34px;
           border-radius:50%; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }
.cb-text h2 { margin:0 0 4px; font-size:24px; letter-spacing:-.02em; }
.cb-text p { margin:0 0 10px; font-size:14.5px; }
.cb-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.chip { display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
        border-radius:999px; border:1px solid var(--line); background:var(--bg);
        font-size:13.5px; }
.chip .ic { width:15px; height:15px; color:var(--accent); }
.cb-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cb-actions .btn { margin-top:0; }
.cb-gift { display:flex; align-items:center; gap:9px; }
.cb-gift > .ic { width:30px; height:30px; padding:6px; border-radius:9px;
                 background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }
.cb-gift b { display:block; font-size:14.5px; }
.cb-gift i { font-style:normal; font-size:13px; color:var(--muted); }
.cb-badge { display:flex; flex-direction:column; align-items:center; gap:2px;
            padding:18px 22px; border-radius:16px; background:var(--bg);
            border:1px solid var(--line); text-align:center; }
.cb-bolt { display:flex; align-items:center; justify-content:center; width:46px; height:46px;
           margin-bottom:6px; border-radius:50%; color:var(--accent);
           border:2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.cb-bolt .ic { width:24px; height:24px; }
.cb-badge b { font-size:18px; }
.cb-badge span:last-child { font-size:12.5px; color:var(--muted); max-width:16ch; }
@media (max-width: 1000px) {
  .connect-band { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .cb-actions { justify-content:center; }
  .cb-chips { justify-content:center; }
}

.final { text-align:center; }
.final h2 { margin:0 0 6px; font-size:24px; }

@media (max-width: 900px) {
  .hero, .mods-cols, .benefits, .rules-land { grid-template-columns:1fr; }
  .mods-cols a { grid-template-columns:1fr; gap:2px; }
}

/* ── Логотип и шрифт заголовков ───────────────────────────────────────── */
/* Начертание берём от самого логотипа, чтобы заголовки и марка читались
   как одно целое: раньше шрифт визуально «прыгал». */
h1, h2, h3, .word, .cta, .btn { font-family: Montserrat, "Golos Text", system-ui, sans-serif; }
h1, h2 { letter-spacing:-0.02em; }

.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img { height:30px; width:auto; display:block; }
/* По умолчанию светлая тема — значит и логотип по умолчанию тёмный. */
.brand .logo-light { display:block; }
.brand .logo-dark { display:none; }
:root[data-theme="dark"] .brand .logo-light { display:none; }
:root[data-theme="dark"] .brand .logo-dark { display:block; }

/* ── Блог ─────────────────────────────────────────────────────────────── */
.blog { max-width:820px; }
.blog h1 { margin-bottom:8px; }
.blog .lede { margin-bottom:26px; }
.blog-list { display:flex; flex-direction:column; gap:12px; }
.blog-card { display:flex; flex-direction:column; gap:4px; padding:18px 20px;
             border:1px solid var(--line); border-radius:14px; background:var(--card);
             text-decoration:none; color:var(--text); }
.blog-card:hover { border-color:var(--accent); }
.blog-card b { font-size:18px; }
.blog-date { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.blog-lead { color:var(--muted); font-size:14.5px; }
.blog-post .lede { margin:14px 0 22px; }
.back-link { display:inline-block; margin-bottom:12px; font-size:14px;
             color:var(--muted); text-decoration:none; }
.back-link:hover { color:var(--accent); }

/* Меню «Продукт» в шапке */
.menu { position:relative; }
.menu-btn { font:inherit; font-size:14px; color:var(--muted); background:none;
            border:0; cursor:pointer; padding:0; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { color:var(--text); }
.menu-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.menu-drop { position:absolute; right:0; top:calc(100% + 10px); z-index:70;
             min-width:250px; display:flex; flex-direction:column; padding:8px;
             background:var(--card); border:1px solid var(--line); border-radius:12px;
             box-shadow:0 18px 40px rgba(0,0,0,.3); }
.menu-drop[hidden] { display:none; }
.menu-drop a { padding:9px 11px; border-radius:9px; font-size:14.5px;
               color:var(--text); text-decoration:none; }
.menu-drop a:hover { background:var(--bg); color:var(--accent); }
.menu-all { margin-top:4px; border-top:1px solid var(--line); border-radius:0 0 9px 9px;
            color:var(--accent) !important; font-weight:600; }

/* Что доступно по ключу */
.caps { margin-top:14px; }
.caps-list { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.caps-list[hidden] { display:none; }
.cap { display:flex; align-items:baseline; gap:10px; padding:9px 12px; border-radius:10px;
       border:1px solid var(--line); background:var(--bg); font-size:14px; }
.cap b { min-width:9em; }
.cap span { color:var(--muted); font-size:13.5px; }
.cap-ok { border-color:color-mix(in srgb, var(--ok) 55%, transparent); }
.cap-ok b { color:var(--ok); }
.cap-no { border-color:color-mix(in srgb, var(--warn) 55%, transparent); }
.cap-no b { color:var(--warn); }

/* Подключение магазинов: смена ключа — обычное действие, а не переподключение */
.mp-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.mp-actions .btn { margin-top:10px; }
.mp-form[hidden] { display:none; }
.btn-danger { color:var(--bad); border-color:color-mix(in srgb, var(--bad) 45%, transparent); }
.btn-danger:hover { border-color:var(--bad); }

/* Экран импорта данных: строка на категорию, свой бегунок и своя причина */
.imp { margin:16px 0 22px; padding:18px 20px; border:1px solid var(--accent);
       border-radius:14px; background:var(--bg); }
.imp[hidden] { display:none; }
.imp-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
            margin-bottom:14px; }
.imp-head b { font-size:15px; }
.imp-head span { font-size:13px; color:var(--muted); }
.imp-steps { display:flex; flex-direction:column; gap:12px; }
.imp-step { display:flex; flex-direction:column; gap:5px; }
.imp-line { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.imp-line b { font-size:14px; }
.imp-num { font-size:14px; font-weight:700; color:var(--accent);
           font-variant-numeric:tabular-nums; }
.imp-bar { height:7px; border-radius:999px; background:var(--line); overflow:hidden; }
.imp-bar span { display:block; height:100%; width:0; border-radius:999px;
                background:linear-gradient(90deg, #8a9a3a, var(--accent));
                transition:width .4s ease; }
.imp-note { font-size:12.5px; color:var(--muted); }
.imp-step.is-wait .imp-num { color:var(--muted); }
.imp-step.is-ok .imp-num { color:var(--ok); }
.imp-step.is-ok .imp-bar span { background:var(--ok); }
.imp-step.is-fail .imp-num { color:var(--warn); }
.imp-step.is-fail .imp-bar span { background:color-mix(in srgb, var(--warn) 55%, transparent); }
.imp-step.is-fail .imp-note { color:var(--warn); }

/* Данные разделов */
.upd { margin:14px 0 4px; font-size:13.5px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;
         margin-top:16px; }
.card-num { display:flex; flex-direction:column; gap:6px; padding:16px 18px;
            border:1px solid var(--line); border-radius:14px; background:var(--bg); }
.card-num span { font-size:13px; color:var(--muted); }
.card-num b { font-size:26px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.threads { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.thread { padding:14px 16px; border:1px solid var(--line); border-radius:12px;
          background:var(--bg); }
.thread-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.thread-head b { font-size:14px; }
.thread-stars { color:#f5a623; font-size:13px; letter-spacing:1px; }
.thread-date { margin-left:auto; font-size:12.5px; color:var(--muted);
               font-variant-numeric:tabular-nums; }
.thread p { margin:0; font-size:14.5px; line-height:1.5; }

/* Связь: полоса площадки и четыре колонки — как в нашем дашборде */
.band { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
        margin:18px 0 10px; padding:10px 14px; border-radius:12px;
        background:var(--bg); border:1px solid var(--line); }
.band-oz { border-left:4px solid #2563eb; }
.band-wb { border-left:4px solid #7c3aed; }
.band-name { font-size:17px; font-weight:800; letter-spacing:-.01em; }
.band-oz .band-name { color:#3b82f6; }
.band-wb .band-name { color:#a855f7; }
.band-nums { font-size:13.5px; color:var(--muted); }
.band-nums b { color:var(--text); font-variant-numeric:tabular-nums; }
.band-act { margin-left:auto; display:flex; align-items:center; gap:10px; }
.band-act .btn { margin-top:0; font-size:13px; padding:7px 12px; }
.band-upd { font-size:12.5px; color:var(--muted); }

.cols-home .cl-body { max-height:52vh; }
.cols { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
@media (max-width: 1100px) { .cols { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .cols { grid-template-columns:1fr; } }

.cl { display:flex; flex-direction:column; min-height:0; border:1px solid var(--line);
      border-radius:12px; background:var(--card); overflow:hidden; }
.cl-head { display:flex; align-items:center; gap:8px; padding:9px 12px;
           border-bottom:1px solid var(--line); font-size:13.5px; font-weight:700; }
.cl-oz .cl-head { background:color-mix(in srgb, #2563eb 12%, transparent); color:#60a5fa; }
.cl-wb .cl-head { background:color-mix(in srgb, #7c3aed 12%, transparent); color:#c084fc; }
.cl-msg .cl-head { background:var(--brand-soft); color:var(--accent); }
.cl-n { font-style:normal; font-size:12px; padding:1px 7px; border-radius:999px;
        background:var(--card); color:var(--muted); font-variant-numeric:tabular-nums; }
.cl-head a { margin-left:auto; font-size:12px; font-weight:600; text-decoration:none;
             color:inherit; opacity:.85; }
.cl-body { max-height:46vh; overflow-y:auto; }
.cl-item { display:block; padding:9px 12px; border-bottom:1px solid var(--line);
           text-decoration:none; color:var(--text); }
.cl-item:last-child { border-bottom:0; }
.cl-item:hover { background:var(--bg); }
.cl-item.is-new { border-left:3px solid #2563eb; background:color-mix(in srgb, #2563eb 8%, transparent); }
.cl-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:3px; }
.cl-top b { font-size:13.5px; }
.cl-text { font-size:12.5px; color:var(--muted); line-height:1.45;
           display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
           overflow:hidden; }
.cl-meta { margin-top:3px; font-size:11px; color:var(--muted);
           font-variant-numeric:tabular-nums; }
.cl-empty { padding:34px 14px; text-align:center; font-size:13px; color:var(--muted); }
.pill { font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:5px;
        background:var(--surface-2); color:var(--muted); }
.pill-new { background:#2563eb; color:#fff; }
.pill-good { background:color-mix(in srgb, var(--ok) 22%, transparent); color:var(--ok); }
.pill-ok { background:color-mix(in srgb, var(--warn) 22%, transparent); color:var(--warn); }
.pill-mid { background:color-mix(in srgb, #38bdf8 22%, transparent); color:#38bdf8; }
.pill-bad { background:color-mix(in srgb, var(--bad) 22%, transparent); color:var(--bad); }

.sys-box { margin-top:16px; border:1px solid var(--line); border-radius:12px;
           background:var(--card); }
.sys-box summary { padding:11px 14px; cursor:pointer; font-size:13.5px; font-weight:600; }
.sys-box .cl-body { max-height:50vh; border-top:1px solid var(--line); }

/* Внутри чатов: покупатели отдельно, служебные письма площадки отдельно */
.chan-switch { display:flex; gap:6px; margin-bottom:12px; }
.sw-btn { display:inline-flex; align-items:center; gap:7px; padding:7px 12px;
          border:1px solid var(--line); border-radius:9px; background:var(--card);
          color:var(--muted); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.sw-btn.on { border-color:var(--accent); color:var(--accent); }
.sw-btn span { font-size:12px; padding:1px 7px; border-radius:999px;
               background:var(--bg); font-variant-numeric:tabular-nums; }

/* Экран чата */
.chat-pane { display:flex; flex-direction:column; }
.chat-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
            padding-bottom:12px; border-bottom:1px solid var(--line); }
.chat-top h1 { margin:0; font-size:20px; }
.chat-top .back-link { margin:0; }
.chat-balance { font-size:13px; color:var(--muted); }
.chat-balance b { color:var(--accent); }
.chat-top .btn { margin:0 0 0 auto; font-size:13px; padding:7px 12px; }
.chat-box { flex:1; min-height:340px; max-height:calc(100vh - 380px); overflow-y:auto;
            padding:16px 4px; display:flex; flex-direction:column; gap:10px; }
.chat-load { margin:auto; color:var(--muted); font-size:14px; }
.bub { max-width:72%; padding:10px 14px; border-radius:14px; background:var(--bg);
       border:1px solid var(--line); }
.bub.mine { align-self:flex-end; background:var(--brand-soft);
            border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.bub-who { display:flex; gap:8px; align-items:baseline; font-size:12px; font-weight:700;
           color:var(--muted); margin-bottom:4px; }
.bub-who span { font-weight:400; font-size:11.5px; }
.bub-text { font-size:14.5px; line-height:1.5; white-space:pre-wrap; }
.chat-editor { border-top:1px solid var(--line); padding-top:12px;
               display:flex; flex-direction:column; gap:8px; }
.chat-tools { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.chat-tools .btn { margin:0; display:inline-flex; align-items:center; gap:7px; }
.chat-tools .ic { width:16px; height:16px; }
.chat-hint { font-size:13px; }
.chat-editor textarea { width:100%; padding:12px 14px; border:1px solid var(--line);
                        border-radius:12px; background:var(--bg); color:var(--text);
                        font:inherit; font-size:15px; resize:vertical; }
.chat-send { display:flex; align-items:center; gap:12px; }
.chat-send .btn { margin:0; }