/* ============================================================
   bayou-obs.css — слой Observer поверх Bayou Lantern (bayou.css).

   Порядок загрузки на страницах: base.css → bayou.css → bayou-obs.css.
   base.css держит СТРУКТУРУ легаси-компонентов (конструктор, кабинет,
   тикеты, отряд), bayou.css — систему «Bayou Lantern» (токены, каркас,
   панели, кнопки). Этот файл:
     1) перемапливает легаси-токены base.css на токены Байу —
        старые компоненты перекрашиваются сами, без правки разметки;
     2) убирает конфликты base.css с каркасом (body-флекс, зерно);
     3) доводит до языка пака то, что не покрыто (типографика контента,
        демо-сцена, конструктор, кабинет, авторизация, документы).
   Разметка страниц и JS-генерируемый DOM сохраняют свои классы и
   data-testid — редизайн не трогает ни логику, ни контракт E2E.
   ============================================================ */

/* ---------- 1. Мост токенов: легаси-имена → Байу ---------- */
:root {
    --ink: var(--text);
    --ink-dim: var(--muted);
    --ink-faint: var(--faint);
    --amber: var(--brass);
    --amber-bright: var(--bright);
    --panel-2: var(--raised);
    --display: var(--serif);
    --radius: 0px; /* строгие прямые углы поверх всего легаси */
}

/* ---------- 2. База под каркас .shell (base.css вел body иначе) ---------- */
body {
    display: block;
    min-height: 0;
    font: 16px/1.5 var(--ui);
    background: var(--bg);
    /* как в лобби (bayou.css body): табличные цифры; легаси base.css иначе гасит */
    font-variant-numeric: lining-nums tabular-nums;
}
/* сцену Байу рисует bayou.css тем же body::before, каким base.css клал
   бумажное зерно, — здесь ничего перекрывать не нужно */

/* заголовки контента — строка, а не капс: base.css даёт заголовкам и кнопкам
   small-caps + uppercase, система «Байу» набирает их обычным начертанием
   (капс остаётся только у микроподписей .lbl/.sec-label/.kicker — так и в паке) */
main h1, main h2, main h3, main h4,
.style-row, .mode-card-name, .chip, .switch-btn,
.btn, .link-card .go, .demo-note, .el-name { font-variant: normal; text-transform: none; }
/* Кнопки — как в лобби: bayou.css не задаёт font-family и letter-spacing,
   и сквозь них протекал легаси из base.css (моно + .12em — аудит №09) */
.btn { font-family: var(--ui); letter-spacing: normal; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; }
a { color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); }

::selection { background: #c5a07144; }

/* тонкие скроллбары в духе панели */
* { scrollbar-width: thin; scrollbar-color: #3d443b #101512; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #3d443b; border: 2px solid #101512; }
*::-webkit-scrollbar-track { background: #101512; }

/* hidden должен побеждать любые display компонентов (урок хаба/лобби) */
[hidden] { display: none !important; }

/* ---------- 3. Каркас: добор к bayou.css ---------- */
.skip {
    position: fixed;
    left: 8px;
    top: -80px;
    z-index: 99;
    background: var(--brass);
    color: var(--bg);
    padding: 12px;
}
.skip:focus { top: 8px; }

/* иконки навигации вставляются app.js в элементы [data-ico] — размер как в
   лобби (bayou.css .icon 20px): свои размеры здесь делали сайдбары разными */
.navlink .icon, .bottom-nav .icon { flex: 0 0 auto; width: 20px; height: 20px; }
.navlink .icon svg, .bottom-nav .icon svg { width: 100%; height: 100%; display: block; }

/* нав-колокольчик уведомлений в топбаре */
.nav-bell .iconbtn { position: relative; }
/* отступ справа в топбаре — как в лобби (bayou.css .top-right gap 18px) */

/* переключатель языка — компактные кнопки в топбаре, как в лобби
   (bayou-add.css: ui-monospace 12px; класс .mono из легаси снят с разметки) */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.lang-btn {
    background: none;
    border: 0;
    padding: 4px 3px;
    color: var(--faint);
    letter-spacing: .08em;
    cursor: pointer;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.active { color: var(--bright); }
.lang-btn.active::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 2px;
    background: var(--brass);
}
.lang-sep { color: var(--line-strong); }

/* контентная колонка: контейнер легаси держит ширину внутри .content */
.content .container { max-width: 1160px; margin: 0 auto; padding: 0; width: 100%; }

/* подвал платформы: строка реквизитов легаси-футера переехала внутрь .footer */
.footer { flex-wrap: wrap; }
.footer .footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer .foot-req { flex-basis: 100%; font-size: 11px; }
.footer a:hover { color: var(--bright); }

/* аккаунт-блок сайдбара (заполняет app.js) — размеры как в лобби: аватар и
   подпись наследуются от bayou.css (46/44px, small 13px), имя обрезается
   в многоточие, «Выйти» не сжимается и уходит вправо. Разница «отступов
   снизу в блоке логина» была из-за дубля class="account" на обёртке
   #nav-auth: обёртка теперь без класса, отступ один — как в лобби. */
.account-id { min-width: 0; }
.account-id .account-name {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-id small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-exit { margin-left: auto; flex-shrink: 0; }
a.account { border: 1px solid transparent; }
a.account:hover .account-name { color: var(--bright); }

/* ---------- модальные окна (мобильное меню строит app.js) ---------- */
body.modal-open { overflow: hidden; }
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: #050703c9;
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    padding: 18px;
}
.modal-card {
    width: 650px;
    max-width: min(90vw, 760px);
    max-height: 88vh;
    overflow: auto;
    border: 1px solid var(--brass);
    border-radius: 4px;
    background: linear-gradient(140deg, #253024, #0c1715);
    box-shadow: inset 0 0 0 4px #152018, 0 25px 100px #000b;
    padding: 0;
}
.modal-card h2 {
    font-size: 24px;
    padding: 22px 26px;
    border-bottom: 1px solid var(--line);
    margin: 0;
}
.modal-card .modal-x {
    float: right;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 18px;
}
.modal-card .modal-x:hover { color: var(--bright); }
.modal-card section h3 { font-size: 21px; margin-bottom: 10px; }
.modal-card .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-card .btn { min-height: 38px; padding: 6px 12px; }

/* ---------- тосты (app.js toast, разметка легаси) ---------- */
.toast-wrap {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    max-width: 90vw;
    pointer-events: none;
}
.toast {
    background: #343324f2;
    color: var(--text);
    border: 1px solid var(--brass);
    box-shadow: inset 0 0 0 2px #221f14, 0 8px 30px #000a;
    padding: 14px 22px;
    font-size: 14px;
    border-radius: var(--r);
    animation: obs-toast-in .2s ease-out;
}
.toast.toast-error { border-color: var(--blood); color: var(--blood); }
.toast.toast-success { border-color: var(--olive); }
@keyframes obs-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 4. Типографика контента (легаси-классы) ---------- */
.kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .17em;
    color: var(--brass);
    margin: 0 0 10px;
    font-family: var(--ui);
}
.lead { color: var(--muted); font-size: 16px; max-width: 70ch; }
.hint { color: var(--faint); font-size: 13px; margin: 6px 0 0; }
.small { font-size: 13px; }
.dim { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--mono, 'JetBrains Mono', Consolas, monospace); font-size: .92em; }
.lbl {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--faint);
    margin-bottom: 4px;
}
.sec-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--brass);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    font-family: var(--ui);
}
.save-note { font-size: 12px; margin: 8px 0 0; }
.save-note.err, .form-error { color: var(--blood); }
.save-note.ok { color: var(--olive); }
.form-error {
    border: 1px solid #a4443a66;
    background: #a4443a14;
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 14px;
}
.form-error[hidden] { display: none !important; }
.form-ok { color: var(--olive); }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- 5. Контролы: доведение легаси до языка пака ---------- */
.btn-sm { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.btn-block { width: 100%; margin-top: 4px; }
.btn-danger { border-color: #a4443a99; color: #d49a8c; }
.btn-danger:hover { border-color: var(--blood); color: var(--blood); }
.btn-del { color: var(--muted); }
.btn-del:hover { border-color: #a4443a99; color: #d49a8c; }

.badge-amber { border-color: var(--brass); color: var(--bright); }
.badge-lock { color: var(--faint); border-style: dashed; }
.badge-lock svg { width: 12px; height: 12px; }
.badge-card { border-color: var(--line-strong); }

.input,
select.input,
textarea.input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    background: #0d1313c9;
    border: 1px solid #a78a5d9c;
    color: var(--text);
    font: 14px/1.4 var(--ui);
    border-radius: var(--r);
    transition: border-color .15s;
}
.input:focus { outline: none; border-color: var(--bright); }
.input::placeholder { color: #8b867466; }
select.input { appearance: auto; }
textarea.input { resize: vertical; }
.input-num { width: 84px; flex: 0 0 auto; }
input[type="color"] {
    width: 52px;
    height: 36px;
    padding: 2px;
    background: #0d1313;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
}
input[type="range"] { accent-color: var(--brass); width: 100%; }

.field-label { font-size: 13px; color: var(--muted); }
.field-mt { margin-top: 14px; }
.check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}
.check input { accent-color: var(--brass); width: 16px; height: 16px; }
.check .el-name { flex: 1; }

/* ---------- 6. Секции контента ---------- */
.section { margin-top: 34px; }
.section > h2 { font-size: 26px; margin: 0 0 8px; }
.rule {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 34px 0;
    color: var(--brass);
}
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rule span { font-size: 10px; }

/* страница-заголовок без арта (когда head-art не задан) — как в паке */
.page-head { position: relative; }
.page-head h1 { font-size: clamp(30px, 3vw, 42px); letter-spacing: -.02em; line-height: 1.12; margin: 0; }
.page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* шаги «01/02/03» */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step {
    border: 1px solid var(--line);
    background: linear-gradient(150deg, #131b16f2, #0c1210f2);
    padding: 18px 20px 20px;
    border-radius: 1px;
    box-shadow: inset 0 0 0 3px #0e1512;
}
.step-num {
    font-family: var(--mono, 'JetBrains Mono', Consolas, monospace);
    font-size: 13px;
    color: var(--brass);
    letter-spacing: .1em;
}
.step h3 { font-size: 19px; margin: 10px 0 6px; }
.step p { color: var(--muted); font-size: 14px; margin: 0; }

/* сетки карточек и галерейные ссылки */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.link-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--line);
    background: linear-gradient(150deg, #131b16f2, #0c1210f2);
    padding: 20px;
    border-radius: 1px;
    box-shadow: inset 0 0 0 3px #0e1512;
    transition: border-color .15s;
}
.link-card:hover { border-color: var(--brass); }
.link-card h3 { font-size: 20px; margin: 0; }
/* живое превью стиля в карточке (главная, раздел «Стили»): фиксированная
   высота — сетка не прыгает, пока демо грузится; виджет ужмёт fitStage */
.link-card .link-card-stage { height: 150px; padding: 12px; margin: 0 0 4px; }
.link-card .go {
    margin-top: auto;
    padding-top: 8px;
    font-size: 13px;
    color: var(--bright);
    border-top: 1px solid var(--line);
}
.link-card .badge { align-self: flex-start; }

/* --- лайтбокс галереи: крупное превью по клику на сцену карточки --- */
.card-stage[data-zoom] { cursor: zoom-in; }
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: #050703c9;
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    padding: 24px;
}
.gallery-lightbox-card { width: min(1240px, 94vw); }
.lightbox-stage { min-height: 220px; padding: 24px; }

/* галочки-списки */
.tick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tick-list li { padding-left: 22px; position: relative; color: var(--muted); font-size: 14px; }
.tick-list li::before { content: "◆"; position: absolute; left: 0; top: 1px; font-size: 9px; color: var(--brass); }
.feature-list { margin-top: 14px; }

/* FAQ: вопросы складываются в details (пак), ответ — под summary */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
details.faq-item { padding: 0; }
details.faq-item > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 18px;
    cursor: pointer;
    font-family: var(--serif);
    font-size: 18px;
}
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::before {
    content: "▶";
    font-size: 9px;
    color: var(--brass);
    transition: transform .15s;
}
details.faq-item[open] > summary::before { transform: rotate(90deg); }
details.faq-item > summary:hover { color: var(--bright); }
details.faq-item > p { padding: 0 18px 16px 39px; margin: 0; color: var(--muted); }
/* ло-фи: без поддержки details h3/p остаются обычной панелью */
.faq-item h2, .faq-item h3 { margin: 0; font-size: 19px; }
.faq-item p { color: var(--muted); }
/* панели контактов (section.panel.faq-item): ровный воздух между заголовком,
   текстом и действием — 12px после заголовка, 10px между абзацами
   (аудит 2026-10, замечание 13) */
section.panel.faq-item > h2 { margin-bottom: 12px; }
section.panel.faq-item > * + * { margin-top: 10px; }

/* тарифы: карточки прайса пака на легаси-классах */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--line);
    background: linear-gradient(155deg, #141d17f5, #0b110ef7);
    padding: 22px;
    border-radius: 1px;
    box-shadow: inset 0 0 0 3px #0e1512;
}
.plan-current {
    border-color: #ff8b3eb3;
    box-shadow: inset 0 0 0 3px #1d130c, 0 0 34px #ff8b3e17;
}
/* рекомендованный тариф (не текущий) — та же огневая рамка, бейдж «Рекомендуем» */
.plan-recommended {
    border-color: #ff8b3e80;
    box-shadow: inset 0 0 0 3px #171009, 0 0 26px #ff8b3e10;
}
.plan-recommended .badge-amber { border-color: #ff8b3e99; color: #ffb08a; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-head h3 { font-size: 22px; margin: 0; }
.plan-price {
    font-family: var(--serif);
    font-size: 38px;
    color: var(--bright);
    line-height: 1.1;
}
.plan-price .per { font-family: var(--ui); font-size: 13px; color: var(--faint); }
.plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.plan-features li { padding-left: 16px; position: relative; color: var(--muted); font-size: 14px; }
.plan-features li::before { content: "•"; position: absolute; left: 2px; color: var(--brass); }
.plan .btn { margin-top: auto; }

/* силуэты форм-факторов на главной.
   Аудит QA 10.10.2026 (п.1/W1): дорожки 1fr имеют auto-минимум по контенту,
   и превью «Баннер 1150×130» распирало третью дорожку (документ 1769px).
   minmax(0,…) разрешает дорожке сжиматься — fitStage масштабирует виджет. */
.layout-sils { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.sil-wrap { border: 1px solid var(--line); background: #0c1210; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.sil { border: 1px dashed var(--line-strong); background: #111a15; }
.sil-square { width: 130px; height: 80px; }
.sil-vertical { width: 64px; height: 108px; }
.sil-bar { width: 200px; height: 24px; }
.sil-cap { font-size: 12px; color: var(--faint); }
.sil-stage { max-width: 100%; }

/* ---------- 7. Демо-сцена (главная, галерея, кабинет) ---------- */
.desk {
    border: 1px solid #a88e6c8a;
    background: linear-gradient(155deg, #141d17f5, #0b110ef7);
    box-shadow: inset 0 0 0 3px #10170f, 0 15px 45px #0006;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.desk-cap {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--brass);
}
.desk-cap .faint { text-transform: none; letter-spacing: 0; }
.desk-stage { min-height: 240px; }
.desk-switch { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.desk-pbg { display: flex; align-items: center; gap: 10px; }
.switch-btn {
    min-height: 34px;
    padding: 5px 12px;
    background: #0d1313c9;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    border-radius: var(--r);
}
.switch-btn:hover { color: var(--text); }
.switch-btn.active { border-color: var(--brass); color: var(--bright); background: #1c2420; }

.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stage-bar-label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); }
.seg button, .seg .switch-btn { border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.seg button:last-child { border-right: 0; }
.pbg-bar { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.pbg-dots { display: inline-flex; gap: 6px; }
.pbg-dots button { width: 22px; height: 22px; border: 1px solid var(--line-strong); background: #0d1313; cursor: pointer; padding: 0; }
.pbg-dots button.active { border-color: var(--brass); }

.preview-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
}
/* шахматка прозрачности — спокойнее, чем в base.css */
.preview-stage.checker {
    background:
        conic-gradient(#101814 0 25%, #0b110d 0 50%, #101814 0 75%, #0b110d 0) 0 0 / 22px 22px;
}

/* ---------- 8. Конструктор виджета ---------- */
.ctor { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ctor-panel { padding: 18px; position: sticky; top: 84px; max-height: calc(100vh - 108px); overflow: auto; }
.ctor-sec { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ctor-sec:first-child { padding-top: 0; }
.ctor-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.ctor-main { display: flex; flex-direction: column; gap: 12px; }
.ctor-stage { min-height: 300px; }
.ctor-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.save-status { font-size: 12px; color: var(--muted); }
.save-status.err { color: var(--blood); }
.save-status.ok { color: var(--olive); }
.del-confirm {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border: 1px solid #a4443a66;
    background: #a4443a10;
    padding: 10px 12px;
    font-size: 14px;
}
.pub-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border: 1px solid var(--brass);
    background: #131b16;
    padding: 10px 12px;
}
.pub-url { font-size: 13px; color: var(--bright); overflow-wrap: anywhere; }
.pub-hint { font-size: 13px; color: var(--muted); margin: 0; }
.obs-size { margin-top: 6px; }

/* список стилей (левой колонки) */
.style-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 7px 10px;
    margin-bottom: 6px;
    background: #0d1313c9;
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    border-radius: var(--r);
}
.style-row:hover { border-color: var(--brass); }
.style-row.active { border-color: var(--bright); background: #1a231d; }
.style-row.locked { color: var(--faint); cursor: help; }
.style-row.locked .style-row-name { opacity: .7; }
.style-row .badge { flex: 0 0 auto; }

/* чекбоксы элементов */
.el-group {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--faint);
    margin: 12px 0 6px;
}
.el-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    border-bottom: 1px solid #2a2419;
}
.el-row:last-child { border-bottom: 0; }
.el-row.off .el-name { color: var(--faint); }
.el-row.locked .el-name { color: var(--faint); }
.el-name { font-size: 14px; }
.el-toggle { flex: 1; justify-content: flex-start; }
.icon-btn {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    border-radius: var(--r);
}
.icon-btn:hover { border-color: var(--brass); color: var(--bright); }
.icon-btn svg { width: 13px; height: 13px; }

/* режим данных: карточки-радио.
   Аудит QA 10.10.2026 (W3): base.css кладёт радио абсолютом в зарезервированный
   padding-left:32px, а этот слой переопределял паддинг — точка оказывалась
   поверх текста. Индикатор — отдельной flex-колонкой, без наложений. */
.mode-group { display: flex; flex-direction: column; gap: 8px; }
.mode-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid var(--line);
    background: #0d1313c9;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: var(--r);
}
.mode-card:hover { border-color: var(--brass); }
.mode-card:has(input:checked) { border-color: var(--bright); background: #1a231d; }
.mode-card input {
    /* bayou.css даёт ВСЕМ input width:100% (+min-height:44px) — чекбоксу
       размер возвращён явно, радио нет; фиксируем и его */
    position: static;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 3px 0 0;
    accent-color: var(--brass);
}
.mode-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mode-card-name { font-size: 14px; }
.mode-card-desc { font-size: 12px; color: var(--faint); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }

/* ---------- 9. Кабинет ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.dash-grid .val { font-size: 15px; }

.session-list { display: flex; flex-direction: column; margin-top: 10px; }
.session-row {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    flex-wrap: wrap;
    min-height: 46px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}
.session-row:last-child { border-bottom: 0; }
.session-who { display: inline-flex; align-items: center; gap: 8px; }
.session-id { font-size: 12px; }
.session-nums { font-size: 13px; }
.session-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.session-taken { font-size: 11px; color: var(--faint); }
.session-empty { margin: 8px 0 0; }

.widgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 14px; }
.widget-card { gap: 10px; }
.wc-preview { height: 130px; }
.wc-preview-in { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.wc-head { margin: 0; }
.wc-head h3 { font-size: 18px; margin: 0; }
.wc-meta { font-size: 12px; color: var(--faint); margin: 0; }
.wc-link-row { display: flex; align-items: center; gap: 8px; }
.wc-link { font-size: 12px; color: var(--bright); overflow-wrap: anywhere; }
.wc-views { font-size: 11px; color: var(--faint); margin: 0; }
.wc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.wc-q { color: var(--blood); }

.squad-list { display: flex; flex-direction: column; margin-top: 8px; }
.squad-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    min-height: 46px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}
.squad-row:last-child { border-bottom: none; }
.squad-name { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.squad-style { font-size: 12px; color: var(--muted); }
.squad-row-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.squad-q { font-size: 12px; }
.squad-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 2px 0 6px; }
.squad-locked { display: inline-flex; align-items: center; gap: 8px; }
.squad-form-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 14px; }
.squad-form-grid .field { margin-bottom: 0; }
.squad-form-grid .squad-cell-id { flex: 2 1 260px; min-width: 0; }
.squad-form-grid .squad-cell-style { flex: 1 1 160px; min-width: 0; }
.squad-form-btns { display: flex; gap: 8px; padding-bottom: 1px; flex-wrap: wrap; }

/* ---------- 10. Тикеты поддержки ---------- */
.ticket-list { display: flex; flex-direction: column; margin-top: 8px; }
.ticket { border-bottom: 1px solid var(--line); padding: 6px 0; }
.ticket:last-child { border-bottom: none; }
.ticket-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 34px; }
.ticket-head-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    margin: -4px -6px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ticket-head-btn:hover .ticket-subject { color: var(--bright); }
.ticket-subject { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-cat { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.ticket-date { font-size: 12px; color: var(--muted); flex: 0 0 auto; margin-left: auto; }
.ticket-body { padding: 10px 0 6px; display: flex; flex-direction: column; gap: 8px; }
.ticket-msg {
    border: 1px solid var(--line);
    border-left: 2px solid var(--line-strong);
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #0d131288;
}
.ticket-msg-support { border-left-color: var(--brass); }
.ticket-msg-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 11px;
    color: var(--faint);
    margin-bottom: 4px;
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.ticket-msg-head .who { color: var(--text); letter-spacing: .08em; text-transform: uppercase; }
.ticket-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ticket-reply-row { display: flex; gap: 8px; align-items: flex-start; }
.ticket-reply-row textarea { flex: 1 1 auto; min-height: 60px; }

/* ---------- 11. Авторизация, оплата, документы ---------- */
.auth { max-width: 460px; margin: 18px auto 0; }
.auth .panel {
    background: linear-gradient(155deg, #16201af7, #0b110ef7);
    box-shadow: inset 0 0 0 3px #10170f, 0 18px 50px #0006;
    padding: 26px;
}
.auth-foot { color: var(--muted); font-size: 14px; margin-top: 14px; }
.auth-foot a { color: var(--bright); }

.inv-amount { font-family: var(--serif); font-size: 40px; color: var(--bright); margin: 6px 0; }
.demo-note {
    border: 1px solid #c5a07166;
    border-left: 2px solid var(--brass);
    background: #c5a0710d;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--muted);
    margin: 10px 0;
}
.success-mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--olive);
    color: var(--olive);
    margin-bottom: 12px;
}

.verify-code {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 22px;
    letter-spacing: .35em;
    text-align: center;
}
.verify-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.doc { max-width: 76ch; }
/* длинный юридический текст — на стабильной тёмной подложке, а не поверх
   сцены (аудит-рекомендация 2026-10; оглавление — отдельно, если понадобится) */
.doc {
    background: linear-gradient(155deg, #10171bf2, #0b110ef7);
    border: 1px solid var(--line);
    box-shadow: inset 0 0 0 3px #0e1512;
    padding: 26px 30px 34px;
}
.doc h2 { font-size: 22px; margin: 26px 0 10px; }
.doc p, .doc li { color: var(--muted); font-size: 15px; line-height: 1.65; }
.doc-date { font-size: 12px; color: var(--faint); margin: 6px 0 0; }

/* ---------- 11а. Аудит v2 2026-10-07: иерархия рамок, разделители ---------- */

/* Разделитель секций — ОДИН мотив: линия ◆ линия.
   bayou.css задаёт .rule{height:1px;background} + плавающий ромб ::after
   (position:absolute, left:50%, top:-10px) — поверх flex-версии это давало
   «длинную линию, ромб у правого края и короткую черту выше неё». */
.rule { height: auto; background: none; }
.rule::after { position: static; }

/* Двойная рамка — только у ключевых блоков (.desk героя, модалка, авторизация).
   Обычным карточкам одна тонкая граница: контент не должен проигрывать
   оболочке по визуальному весу (аудит v2: «слишком много обрамлений»). */
.panel::after { content: none; }
.step, .link-card, .plan { box-shadow: none; }
/* внутренняя тёмная кайма кнопок (inset 2px из bayou.css) — вторая рамка,
   рядом с границей карточки она спорит с контентом */
.btn { box-shadow: none; }

/* тарифы: строка преимуществ без собственного разделителя поверх рамки
   карточки (legacy base.css давал каждой строке border-bottom + padding 7px) */
.plan-features li { padding: 0 0 0 16px; border-bottom: 0; }

/* «Помощь»: 5 шагов в сетке 3+2 оставляли дыру под несуществующий 6-й шаг.
   База — 6 дорожек: три карточки по 2, две по 3 — второй ряд без пустой ячейки
   (на ≤860px .step{grid-column:auto} в медиаблоке ниже). minmax(0,…) — чтобы
   длинные слова карточек не распирали дорожки (аудит QA 10.10.2026, п.3/W2). */
.steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.step { grid-column: span 2; }
.step:nth-child(n+4) { grid-column: span 3; }

/* «Что умеет виджет»: живые превью форматов вместо пустых схем-контуров.
   Сцены под fitStage: высоты подобраны под рекомендованные пропорции. */
.sil-wrap { gap: 10px; padding: 12px; }
.sil-stage { width: 100%; }
.sil-stage-square { height: 170px; }
.sil-stage-vertical { height: 210px; }
.sil-stage-bar { height: 120px; }

/* «Ещё восемь»: карточка коллекции — три миниатюры разных стилей.
   Сетка 2+1: нижняя ячейка во всю ширину несёт самый контрастный стиль,
   иначе миниатюры мельчают до нечитаемых тёмных пятен (аудит v3) */
.thumb-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; height: 100%; }
.thumb-cell { display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 0; min-height: 0; }
.thumb-cell:nth-child(3) { grid-column: 1 / -1; }

/* метки тарифов на карточках стилей — на одном уровне: бейдж прижат к низу
   карточки, а не «прыгает» вслед за абзацем разной длины */
.link-card .badge { margin-top: auto; }
.link-card .go { margin-top: 8px; }

/* FAQ — одна система со строками-разделителями (как в лобби): без вложенных
   рамок; вопрос + стрелка; раскрытый ответ — на тонированном фоне.
   Кликабельная область — вся строка summary. */
.faq-list { gap: 0; border-top: 1px solid var(--line); }
details.faq-item { border-bottom: 1px solid var(--line); background: transparent; }
details.faq-item[open] { background: #131b1680; }
details.faq-item > summary { padding: 14px 10px; }
details.faq-item > p { padding: 0 10px 16px 31px; }

/* галерея: баннер — широкие колонки 1–2 (длинный виджет читается), квадраты —
   прежняя плотная сетка; min() охраняет узкие экраны */
#gallery-grid[data-layout="bar"] { grid-template-columns: repeat(auto-fill, minmax(min(540px, 100%), 1fr)); }

/* лайтбокс галереи: подпись «реальный масштаб» под превью */
.lightbox-cap { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }

/* пути меню в инструкциях помощи — отдельная моно-плашка, не текст в абзаце.
   Аудит QA 10.10.2026 (п.6): nowrap не давал плашке переноситься, и на мобильных
   она вылезала за край на 50–65px — теперь переносится по любому символу. */
.path {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 13px;
    color: var(--bright);
    background: #0d1313c9;
    border: 1px solid var(--line);
    padding: 2px 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.help-ol { margin: 12px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--muted); font-size: 15px; }
.help-ol li::marker { color: var(--brass); font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

/* контакты: две колонки (каналы+поддержка | реквизиты) вместо трёх полос */
/* аудит v3: колонки «Контактов» одной высоты — «Реквизиты» тянутся до общего
   низа, строка с офертой/политикой прижата к подвалу карточки */
.contacts-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.contacts-grid > .panel { display: flex; flex-direction: column; }
.contacts-grid > .panel > .small:last-child { margin-top: auto; }
.contact-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 2px; }

/* ---------- 12. Мобильная ветка (каркас уже сворчен в bayou.css) ---------- */
@media (max-width: 760px) {
    /* колонок — сколько видимых пунктов (со скрытыми «Напарниками» их три,
       а не четыре; тот же фикс, что в лобби bayou-add.css) */
    .bottom-nav { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
}
@media (max-width: 1100px) {
    .ctor { grid-template-columns: 260px minmax(0, 1fr); }
    .ctor-right { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 860px) {
    /* Аудит QA 10.10.2026 (п.3/W2): одного .steps{1fr} мало — span-правила
       шестидорожечной сетки (.step:nth-child(n+4) — специфичнее, чем .step)
       оставались, и авто-размещение строило неявные колонки: «Пять шагов»
       разваливались в три колонки с уходом за экран. Сбрасываем ОБА селектора
       (с запасом специфичности .steps .step:…) и гасим минимум неявных дорожек. */
    .steps { grid-template-columns: minmax(0, 1fr); grid-auto-columns: minmax(0, 1fr); }
    .steps .step, .steps .step:nth-child(n + 4) { grid-column: auto; }
    .plans { grid-template-columns: 1fr; }
    .layout-sils { grid-template-columns: minmax(0, 1fr); }
    .hero { grid-template-columns: 1fr; }
    .dash-grid { grid-template-columns: 1fr 1fr; }
    .contacts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .ctor { grid-template-columns: 1fr; }
    .ctor-panel { position: static; max-height: none; }
    .dash-grid { grid-template-columns: 1fr; }
    .content .container { padding: 0 2px; }
}

/* ---------- 13. Аудит QA 10.10.2026 ---------- */

/* п.8: список «◆ Данные с тех же серверов…» прилипал к кнопкам hero-блока */
.hero-trust { margin-top: 18px; }

/* страховка от п.1/п.3/п.6: ничто внутри контентной колонки не должно
   растягивать документ по горизонтали (clip не создаёт скролл-контейнер,
   position:sticky панелей конструктора продолжает работать) */
.content { overflow-x: clip; }

/* W4: ряд кнопок «Фон превью» (сегмент .seg в конструкторе) не переносился и
   уходил за экран: flex-элемент не сжимается ниже контента — разрешаем и ему,
   и контейнеру точек перенос, ограничиваем ширину */
.seg { flex-wrap: wrap; max-width: 100%; }
.desk-pbg { flex-wrap: wrap; }

/* п.15 (реаудиты 2–3): тап-зоны — честные 44×44 самими кнопками.
   RU/EN — 44×44 целиком (узкие 28×44 промахивались в разделитель «|»).
   Бургер — 44×44 + запрет flex-усадки в тесном топбаре. Точки фона —
   прозрачная кнопка 44×44, цветной круг 26px рисует ::before (визуал
   прежний); заливки из base.css перекрываем здесь же с запасом
   специфичности. */
.lang-btn { min-height: 44px; min-width: 44px; padding: 4px 6px; }
.mobile-menu, .top-right .iconbtn { flex: 0 0 44px; }
.pbg-dots { gap: 4px; }
.pbg-dots .pbg-dot {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.pbg-dots .pbg-dot::before {
    content: "";
    width: 26px;
    height: 26px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: #0d1313;
    transition: border-color .15s;
}
.pbg-dots .pbg-dot[data-pbg="checker"]::before {
    background: repeating-conic-gradient(#1e1a13 0% 25%, #16130e 0% 50%) 0 0 / 8px 8px;
}
.pbg-dots .pbg-dot[data-pbg="game_day"]::before { background: url('/assets/img/bg-day.webp') center / cover no-repeat; }
.pbg-dots .pbg-dot[data-pbg="game_night"]::before { background: url('/assets/img/bg-night.webp') center / cover no-repeat; }
.pbg-dots .pbg-dot[data-pbg="white"]::before { background: #ffffff; }
.pbg-dots .pbg-dot[data-pbg="gray"]::before { background: #767676; }
.pbg-dots .pbg-dot[data-pbg="black"]::before { background: #0d0d0c; }
.pbg-dots .pbg-dot:hover::before { border-color: var(--brass); }
.pbg-dots .pbg-dot.active { outline: 0; }
.pbg-dots .pbg-dot.active::before { outline: 2px solid var(--brass); outline-offset: 2px; }

/* п.14: подвал на мобильных — неровный перенос ссылок и большие зазоры */
@media (max-width: 760px) {
    .footer { row-gap: 8px; }
    .footer .footer-links { gap: 6px 14px; justify-content: center; }
    .footer .foot-req { margin-top: 6px; text-align: center; }
}

/* п.18: хлебная крошка на мобильных обрезалась до «Как пользоваться …» —
   прячем промежуточные уровни (раздел/слэш), остаётся текущая страница */
@media (max-width: 640px) {
    .breadcrumb span { display: none; }
    .breadcrumb b { white-space: normal; }
}

/* Логотип: звезда по левому краю пунктов меню (не по центру колонки — оттого
   локап «криво» стоял относительно иконок). ✦ в Inter сидит выше оптического
   центра em-бокса, поэтому глиф центрируется гридом и чуть опущен.
   Кегль подобран так, чтобы «OBSERVER» не обрезался в колонке 200px.
   Тот же локап, что в лобби (bayou-add.css). */
.brand {
    justify-content: flex-start;
    align-items: center;
    padding: 2px 12px 22px;
    gap: 10px;
    min-width: 0;
}
.brand .mark {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    font-size: 18px;
    line-height: 1;
    transform: translateY(1px);
}
.brand > span {
    min-width: 0;
    text-align: left;
}
.brand strong {
    display: block;
    font-size: 16px;
    letter-spacing: 0.06em;
    text-align: left;
    line-height: 1.05;
    white-space: nowrap;
}
.brand small {
    display: block;
    text-align: left;
    letter-spacing: 0.1em;
    line-height: 1.15;
    margin-top: 1px;
    white-space: nowrap;
}
@media (max-width: 1250px) {
    .brand { padding-left: 8px; padding-right: 4px; gap: 8px; }
    .brand strong { font-size: 14px; letter-spacing: 0.04em; }
    .brand small { letter-spacing: 0.06em; font-size: 9px; }
}

/* Футер у нижнего края колонки: короткая страница — у низа окна, длинная —
   после контента. Между последним блоком и чертой всегда есть воздух.
   border-top сел бы на контент (margin-top:auto и фикс-отступ не складываются),
   поэтому черта рисуется на 56px ниже верхнего края, а верх футера прозрачный. */
.shell > div {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
.shell > div > main.content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 0;
    /* нижний padding контента оказывался под футером и отрывал его от низа окна */
    padding-bottom: 0;
}
.footer {
    --foot-air: 56px;
    margin-top: auto;
    border-top: 0;
    padding-top: calc(var(--foot-air) + 20px);
    background-color: transparent;
    background-image:
        linear-gradient(#b4915d44, #b4915d44),
        linear-gradient(#070d10a3, #070d10a3);
    background-size: 100% 1px, 100% calc(100% - var(--foot-air));
    background-position: 0 var(--foot-air), 0 calc(var(--foot-air) + 1px);
    background-repeat: no-repeat;
    background-origin: border-box;
}
@media (max-width: 760px) {
    .footer { --foot-air: 40px; }
}