/* Облик D «Пульт» (слоновая кость + киноварь) — слой для /app/beta.

   Что это: перенос утверждённого владельцем макета: структура приложения
   (design-variants/app-structure.css) + палитра варианта D
   (design-variants/variants/d-ivory-vermilion/app.css). Решение владельца 14.10.

   Как подключается: app/site_beta.py, inject_d2_layer(html, "app") — при отдаче
   /app/beta, только если product_info()["product"] == "Magic Master". Файл
   app-beta.html и бренд Echoteka (brands/*) не меняются.

   Тема: html[data-theme="light"] — как у самой беты приложения; синхронизация
   с темой главной беты (magic-master-theme) — скрипт в head, см. site_beta.py.

   Логотип: подмена картинки на рыжие mm-logo-lockup-v-*.png; фильтр hue-rotate
   для логотипа убран.
*/
/* Облик «Пульт» для /app/beta. Общий слой структуры приложения: подмешивается
   стендом раньше палитры варианта (design-variants/variants/<name>/app.css),
   поэтому цвета — только через переменные палитры. Цветовых литералов нет. */

/* ── Переназначение переменных страницы ───────────────────────────
   У страницы свой :root с фиолетовыми значениями (--accent и др.), а палитра
   варианта объявлена на html с меньшей специфичностью, поэтому без этого блока
   эти имена остаются фиолетовыми. html:root сильнее :root и загружается позже.
   Значения берутся только из переменных палитры, литералов здесь нет. */
html:root {
  --accent: var(--ai); --accent-2: var(--ai); --mint: var(--ai);
  --cta2: var(--cta);
  --accent-wash: var(--ai-wash); --accent-wash2: var(--ai-wash);
  --drop-br: var(--ai-line); --drop-bg: var(--surface-2);
  --amber: var(--hot); --red: var(--peak); --green: var(--ok);
  --green-br: var(--ai-line); --pink: var(--hot); --cyan: var(--ai);
  --btn-shadow: var(--cta-shadow);
}

/* ── Фон, текст, шрифты по умолчанию ─────────────────────────────── */
html, body { background: var(--bg); color: var(--text); }
body { font-family: var(--font) !important; }
/* Инлайновые стили страницы задают 'Manrope' и 'JetBrains Mono' прямо в атрибуте,
   поэтому семейство перебивается !important; моно — ниже, с большей специфичностью. */
body * { font-family: var(--font) !important; }
body .mono, body .mtile .v, body .mtile .k, body .beta-tag,
body #balChip, body #mpNote, body [style*="letter-spacing:0.05em"],
body .divider .l, body .rail-h, body .stepper, body .lblrow > span:first-child {
  font-family: var(--font-mono) !important;
}
body h1, body .hero h1, body .studio-verdict {
  font-family: var(--font-display) !important; font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
body .hero h1 { font-size: 24px !important; line-height: 1.12 !important; }
/* Заголовок совета (студия и карточка разбора): display-шрифт облика, вес 600 */
body .rec-h { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; }
body .btn, body .btn * { font-family: var(--font-display) !important; font-weight: 600 !important; }

a { color: var(--accent); }
a:hover { color: var(--cta-hover); }

/* ── Шапка: нижняя линия, бейдж «Бета» — точка-светодиод + моно КАПС ── */
header { border-bottom: 1px solid var(--border); }
.beta-tag {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 0; padding: 0; background: none;
  color: var(--soft); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.beta-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hot); box-shadow: 0 0 6px var(--hot); flex: none;
}
.hdr-right { color: var(--soft); }
.acct-av { background: var(--cta); color: var(--on-cta); }

/* ── Степпер: моно КАПС 12px, активный шаг — текст, остальные — dim ── */
.stepper {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim);
}
.stepper .on { color: var(--text); font-weight: 600; }
.stepper .ok { color: var(--ok); }
.stepper .sep { background: var(--border-2); }

/* На телефоне 390px степпер в 12px не влезает в одну строку: сжимаем, сохраняя КАПС и разрядку */
@media (max-width: 420px) {
  .stepper { font-size: 10.5px; letter-spacing: 0.1em; gap: 6px; }
  .stepper .sep { width: 12px; }
}

/* ── Заголовок-приветствие ───────────────────────────────────────── */
.hero p { color: var(--soft); }

/* ── Зона загрузки: пунктир, квадратная иконка 52px с --cta ───────── */
.drop {
  border: 2px dashed var(--border-2); border-radius: 18px;
  background: var(--surface-2);
}
.drop.hover { background: var(--ai-wash); border-color: var(--ai-line); }
.drop.slim .drop-ic,
.drop-ic {
  width: 52px !important; height: 52px !important; border-radius: 10px;
  background: var(--cta); border: none; flex: none;
}
.drop-ic svg { stroke: var(--on-cta); }

/* ── Карточки = ds-unit ─────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--unit-shadow);
}
/* Карточка совета: метка --ai, подсветка --ai-wash, рамка --ai-line, винты */
.mmcard {
  position: relative;
  background: linear-gradient(var(--ai-wash), var(--ai-wash)), var(--surface);
  border: 1px solid var(--ai-line); border-radius: 18px;
  padding: 18px 18px 16px; box-shadow: var(--unit-shadow);
}
.mmcard::before, .mmcard::after {
  content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--screw);
}
.mmcard::before { top: 9px; left: 9px; }
.mmcard::after { top: 9px; right: 9px; }
.mmcard svg { stroke: var(--ai); }
.mmcard [style*="color:var(--accent-2)"] {
  color: var(--ai) !important; font-family: var(--font-mono) !important;
  font-size: 11px !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.14em;
}
/* «пример» — моно, рамка --border-2, без скругления-таблетки */
.mmcard [style*="border-radius:999px"] {
  font-family: var(--font-mono) !important; font-size: 10px !important;
  border: 1px solid var(--border-2) !important; border-radius: 6px !important;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim) !important;
}
.mmcard [style*="color:var(--text)"] { color: var(--text) !important; }

/* Предупреждение о лимите: обычный шрифт, цвет текста, без оранжевого моно */
#quotaHint {
  font-family: var(--font) !important; font-size: 14px !important;
  color: var(--text) !important; line-height: 1.5 !important;
}
#quotaCard { gap: 12px !important; padding: 16px !important; }

/* Панели ИИ-анализа и «что нашлось» — то же ds-unit, без лишней обводки */
#anRec { padding: 14px 16px; }
#myPresets, #refCard, .tone-note { border-radius: 18px; }
.tone-note { background: var(--ai-wash); border-color: var(--ai-line); color: var(--text); }

/* ── Табло измерений (LUFS, запас, крест, длина) — --lcd в обеих темах ── */
.mtile {
  background: var(--lcd); border: 1px solid var(--lcd-line); border-radius: 10px;
  color: var(--lcd-text);
}
.mtile { padding: 10px 6px; }
.mtile .v { color: var(--hot); font-size: 15px; font-weight: 600; }
.mtile .k {
  color: var(--lcd-dim); text-transform: uppercase; letter-spacing: 0.14em; font-size: 9.5px;
}
.mtile.warn { border-color: var(--hot); background: var(--lcd); }
.mtile.warn .v, .mtile.warn .k { color: var(--peak); }
/* Подписи-метки «ЧТО ПОМОЩНИК ИЗМЕРИТ», «РЕКОМЕНДАЦИЯ», «СТИЛЬ», … */
.divider .l, [style*="letter-spacing:0.05em"] {
  font-size: 10.5px !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: 0.14em !important;
  color: var(--dim) !important;
}
.divider i { background: var(--border); }
.rail-h { letter-spacing: 0.14em; }
.lufsnote { color: var(--dim); }

/* ── Кнопки ─────────────────────────────────────────────────────── */
.btn {
  background: var(--cta); color: var(--on-cta); border-radius: 10px;
  box-shadow: var(--cta-shadow); font-size: 14px; letter-spacing: 0; line-height: 1.25;
  padding: 12px 18px; display: flex; align-items: center; justify-content: center; text-align: center;
}
.btn:hover { background: var(--cta-hover); }
.btn:disabled, .btn[aria-disabled="true"] { box-shadow: none; }
.btn:disabled { background: var(--key); color: var(--dim); }

/* Вторичные — «аппаратные клавиши» */
.task {
  background: var(--key); border: 1px solid var(--border-2); border-radius: 10px;
  box-shadow: var(--key-shadow); color: var(--text);
}
.task p { color: var(--soft); }
.task.off { box-shadow: none; }
.task .soon { color: var(--dim); }
/* Выбранная клавиша: --key-on, светодиод --hot */
.task.sel, .task[aria-pressed="true"] {
  background: var(--key-on); border-color: var(--key-on); color: var(--key-on-text);
  position: relative;
}
.task.sel p, .task[aria-pressed="true"] p,
.task.sel h3, .task[aria-pressed="true"] h3 { color: var(--key-on-text); }
.task.sel::after, .task[aria-pressed="true"]::after {
  content: ""; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--hot); box-shadow: 0 0 6px var(--hot);
}
/* Кнопка ИИ-анализа — с подсветкой совета, а не фиолетовой заливкой */
#analyzeLink {
  background: var(--ai-wash) !important; border-color: var(--ai-line) !important;
}
#analyzeLink svg { stroke: var(--ai); }
.rate-row .task[aria-pressed="true"] { background: var(--key-on); border-color: var(--key-on); }
.rate-chip {
  background: var(--key); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 8px; box-shadow: var(--key-shadow);
}
.rate-chip[aria-pressed="true"] {
  background: var(--key-on); border-color: var(--key-on); color: var(--key-on-text);
}
.rate textarea { background: var(--surface-2); border-radius: 10px; }
/* Выбор пресета/стиля в настройках: без лишней поверхности */
#tAiClean { border-radius: 10px; }
.cmp-seg { border-radius: 10px; border-color: var(--border-2); }
.cmp-seg button[aria-pressed="true"] { background: var(--key-on); color: var(--key-on-text); box-shadow: none; }
.cmp-play { background: var(--cta); color: var(--on-cta); box-shadow: var(--cta-shadow); }
.cmp-play svg { fill: var(--on-cta); }
.cmp-bar { background: var(--border); }
.cmp-fill { background: var(--hot); }

/* Ссылки и текстовые подписи */
.link-row a, #anTuneLink, #histLink, #smxLinkUpload, #repTxt, #repJson, #contLink, #replaceLink {
  color: var(--accent);
}
.passport > div { background: var(--surface-2); }
.passport .k { color: var(--dim); }
footer { color: var(--dim); }

/* Ошибки и уведомления — цвета состояний, без розового и зелёного литералов */
.banner.err { background: var(--surface-2); border: 1px solid var(--peak); color: var(--text); }
.banner.info { background: var(--surface-2); border: 1px solid var(--ok); color: var(--text); }

/* Ожидание совета (кольцо): табло вместо тёмной пилюли с размытием */
.recring .recpct span {
  background: var(--lcd); color: var(--lcd-text); backdrop-filter: none;
  border: 1px solid var(--lcd-line); border-radius: 8px;
  font-family: var(--font-mono) !important;
}
.wring { border-color: var(--border-2); }

/* Выбранный элемент боковой ленты истории и кнопка «Новый трек» */
.rail-item.on { background: var(--key-on); color: var(--key-on-text); border-color: var(--key-on); }
.rail-item.on .rail-meta { color: var(--key-on-text); }
.rail-new { border-color: var(--border-2); color: var(--accent); border-radius: 10px; }
.rail-new:hover { background: var(--ai-wash); }

/* ── Мобильная ширина: без горизонтальной прокрутки ─────────────── */
.view, .card, .mmcard, .drop { max-width: 100%; }
.mtile { min-width: 0; overflow-wrap: anywhere; }

/* === Логотип главной беты в приложении (одна марка на обе страницы) === */
header img[src*="mm-logo-lockup"] { content: url(/icons/mm-logo-lockup-v-dark.png?v=2); height: 30px; width: auto; }
html[data-theme="light"] header img[src*="mm-logo-lockup"] { content: url(/icons/mm-logo-lockup-v-light.png?v=2); }

html:root{--bg:#141312;--surface:#1d1b19;--surface-flat:#1d1b19;--surface-2:#262321;
--border:#302c29;--border-2:#47413c;--border-soft:#302c29;--line:#47413c;--text:#f3ece2;--soft:#b8ada0;--dim:#998f82;
--accent:#ff7a52;--accent-2:#ff7a52;--accent-wash:rgba(255,90,54,.12);--accent-wash2:rgba(255,90,54,.12);
--cta:#e52900;--cta2:#e52900;--cta-hover:#c92400;--on-cta:#ffffff;--cta-shadow:0 3px 0 #b43a1d;--btn-shadow:0 3px 0 #b43a1d;
--key:#262321;--key-on:#f3ece2;--key-on-text:#141312;--key-shadow:0 2px 0 #0a0908;
--lcd:#0b0a09;--lcd-line:#2a2623;--lcd-text:#f3ece2;--lcd-dim:#857b70;--screw:#3a3531;
--unit-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);--inset-shadow:inset 0 2px 10px rgba(0,0,0,.7);--ai:#ff9a7a;--ai-wash:rgba(255,90,54,.10);--ai-line:rgba(255,122,82,.45);
--ok:#3ddc84;--meter-ok:#3ddc84;--hot:#ffb020;--peak:#ff5a36;--green:#3ddc84;--amber:#ffb020;--red:#ff6b5e;
--drop-br:#47413c;--drop-bg:#262321;
--font:'IBM Plex Sans',system-ui,sans-serif;--font-display:'Unbounded','IBM Plex Sans',sans-serif;--font-mono:'JetBrains Mono',ui-monospace,monospace;}
html:root[data-theme="light"]{--bg:#f4efe6;--surface:#fffcf6;--surface-flat:#fffcf6;--surface-2:#f8f3ea;
--border:#e3dacb;--border-2:#c9bca7;--border-soft:#e3dacb;--line:#c9bca7;--text:#191512;--soft:#554c42;--dim:#665c50;
--accent:#b7300f;--accent-2:#b7300f;--accent-wash:#ffe3d8;--accent-wash2:#ffe3d8;
--cta:#e52900;--cta2:#e52900;--cta-hover:#c92400;--on-cta:#ffffff;--cta-shadow:0 3px 0 #b43a1d;--btn-shadow:0 3px 0 #b43a1d;
--key:#fffdf9;--key-on:#191512;--key-on-text:#fffcf6;--key-shadow:0 2px 0 #ddd2c0;
--lcd:#efe6d7;--lcd-line:#ddcfba;--lcd-text:#191512;--lcd-dim:#75695b;--screw:#d3c7b4;
--unit-shadow:inset 0 1px 0 #fff, 0 24px 50px rgba(70,45,20,.12), 0 2px 0 #ddd2c0;--inset-shadow:inset 0 2px 6px rgba(70,45,20,.15);--ai:#b7300f;--ai-wash:rgba(255,90,54,.07);--ai-line:rgba(183,48,15,.35);
--ok:#1b6e3f;--meter-ok:#2e9b5a;--hot:#c25e00;--peak:#e5381a;--green:#1b6e3f;--amber:#8a4b00;--red:#b3261e;
--drop-br:#c9bca7;--drop-bg:#f8f3ea;
--font:'IBM Plex Sans',system-ui,sans-serif;--font-display:'Unbounded','IBM Plex Sans',sans-serif;--font-mono:'JetBrains Mono',ui-monospace,monospace;}
.ds-beta-badge{color:var(--ds-cta)}.ds-beta-badge::before{background:var(--ds-cta);box-shadow:0 0 8px var(--ds-cta)}
.beta-tag::before{background:var(--cta)!important}
html[data-theme="light"] .mtile{box-shadow:none !important;text-shadow:none!important}

/* Подсказки «?»: рамка попапа ≥3:1 к карточке (WCAG 1.4.11). --border-2 давал 1.2–1.8. */
.hintwrap .hint-pop { border-color: var(--dim); }

/* Ползунки, чекбоксы и радио приложения — цвет облика (системный синий убран). */
input[type="range"],input[type="checkbox"],input[type="radio"]{accent-color:var(--cta)}

/* ═══════════ Экран настроек /app/beta: кнопка запуска ═══════════
   Имена плиток стилей и площадок — правило в app-beta.html (базовый блок, #tStyles/#tTargets).
   Кнопка «Мастерить с настройками» — в потоке панели, сразу после «Своя громкость»; её
   текст в одну строку (14 px, как у кнопки разбора), без переноса. */
#tuneGoBtn { white-space: nowrap; font-size: 14px; }

/* ═══════════ Блокеры проверки функций (design-variants/app-check, раунд 5) ═══════════
   Все правила — только светлая тема (html[data-theme="light"]); тёмная тема не меняется
   (кроме белого текста на киновари, п.3, который общий для обеих тем). */

/* 1. Выбранное в светлой теме — светлое: «выбранная клавиша» не чёрная плашка --key-on.
   Фон #ffe9e1, рамка 1.5px киноварь, текст #191512, светодиод-точка киноварь. */
html[data-theme="light"] .task.sel,
html[data-theme="light"] .task[aria-pressed="true"],
html[data-theme="light"] .rate-row .task[aria-pressed="true"],
html[data-theme="light"] .rate-chip[aria-pressed="true"],
html[data-theme="light"] .rail-item.on,
html[data-theme="light"] .cmp-seg button[aria-pressed="true"]{
  background: #ffe9e1; border: 1.5px solid #ff5a36; color: #191512; box-shadow: none;
}
html[data-theme="light"] .task.sel p, html[data-theme="light"] .task[aria-pressed="true"] p,
html[data-theme="light"] .task.sel h3, html[data-theme="light"] .task[aria-pressed="true"] h3{color:#191512}
html[data-theme="light"] .task.sel p, html[data-theme="light"] .task[aria-pressed="true"] p{color:#554c42}
html[data-theme="light"] .rail-item.on .rail-meta{color:#554c42}
html[data-theme="light"] .task.sel::after, html[data-theme="light"] .task[aria-pressed="true"]::after{
  background:#ff5a36; box-shadow:0 0 6px #ff5a36;
}

/* 2. Пакеты пополнения (#tpPacks > button.task): светлые карточки D; «популярный» — выбранный стиль. */
html[data-theme="light"] #tpPacks > button.task{background:#fffcf6;border:1px solid #e3dacb;color:#191512;box-shadow:0 2px 0 #ddd2c0}
html[data-theme="light"] #tpPacks > button.task.sel{background:#ffe9e1;border:1.5px solid #ff5a36;color:#191512}
html[data-theme="light"] #tpPacks > button.task p{color:#554c42}
html[data-theme="light"] #tpPacks > button.task [style*="--ok"],
html[data-theme="light"] #tpPacks > button.task p[style*="ok"]{color:#1b6e3f}
/* 2a. 16.10: экран пополнения плоский — без теней; главная кнопка — киноварь .btn (белый текст, пункт 3). */
#tpPacks > button.task, #tpPayMain, #tpPayAlt, #tpGoBtn { box-shadow: none; }
#tpPayAlt { border-color: var(--border-2); background: none; color: var(--text); }

/* 3. 16.10 (решение владельца, вариант C): белый текст на тёмной киновари #e52900 (4.52:1, AA) — в обеих темах.
   Инлайн-стили color:#fff у #dlBtn и #tpGoBtn перекрыты !important. */
#dlBtn, #tpGoBtn, a.btn:not([aria-disabled="true"]), button.btn:not(:disabled){color:var(--on-cta) !important}

/* 4. Значения анализа (#cTiles, #anMetrics): оранжевый #c25e00 на бежевом плитки 3.47:1.
   Числа — тёмный текст, подписи — приглушённый; янтарь остаётся только для пометок. */
html[data-theme="light"] #cTiles span.v, html[data-theme="light"] #anMetrics span.v{color:#191512}
html[data-theme="light"] #cTiles span.k, html[data-theme="light"] #anMetrics span.k{color:#5f5448}

/* 5. Ссылки при наведении/фокусе: a:hover давал --cta-hover #f2461f (3.2:1 на бежевом) —
   после клика мышь остаётся над ссылкой («Войти», «EN/RU», «⚡60», «Предложить улучшение», FLAC).
   В покое ссылки уже #b7300f (5.3:1); при наведении — темнее киновари. */
html[data-theme="light"] a:hover, html[data-theme="light"] a:focus-visible{color:#8f2a0c}
html[data-theme="light"] .altfmt-a{color:#b7300f}

/* Карточка результата: логотип облика D на экране (экспорт картинки рисуется отдельно, SHARE_LOGO). */
img[data-mm-logo] { content: url(/icons/mm-logo-lockup-v-dark.png?v=2); }
html[data-theme="light"] img[data-mm-logo] { content: url(/icons/mm-logo-lockup-v-light.png?v=2); }

/* Тёмная тема: выбранный пакет — светлая клавиша, зелёный «+1 в подарок» на ней был 1.5:1. */
html:not([data-theme="light"]) #tpPacks > button.task.sel p[style*="green"],
html:not([data-theme="light"]) #tpPacks > button.task.sel [style*="--ok"] { color: #1b6e3f !important; }

/* ── Карточка результата/шаринга (.mmcard, 14.10 вечер): владелец — «слишком ядовито,
   сделай полегче, по-воздушнее»; QR слился — обводка значков (.mmcard svg) красила
   и квадраты QR. Фон — светлая панель без заливки акцентом, тонкая рамка,
   столбики громкости приглушённые, QR — чёрный на белом. ── */
#rCard.mmcard, #shCard.mmcard {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(70,45,20,.07), 0 1px 0 rgba(255,255,255,.6) inset;
}
html:not([data-theme="light"]) #rCard.mmcard, html:not([data-theme="light"]) #shCard.mmcard {
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.mmcard svg[viewBox="0 0 33 33"], .mmcard svg[viewBox="0 0 33 33"] * { stroke: none !important; }
.mmcard svg[viewBox="0 0 33 33"] { border: 1px solid var(--border); }
.mmcard svg[viewBox="0 0 330 46"] rect { stroke: none !important; }
.mmcard svg[viewBox="0 0 330 46"] rect[fill="var(--accent)"] { fill: #f2a48d; }
.mmcard svg[viewBox="0 0 330 46"] rect[fill="var(--accent-2)"] { fill: #ff7a52; }
html:not([data-theme="light"]) .mmcard svg[viewBox="0 0 330 46"] rect[fill="var(--accent)"] { fill: #8a4030; }
html:not([data-theme="light"]) .mmcard svg[viewBox="0 0 330 46"] rect[fill="var(--accent-2)"] { fill: #ff7a52; }

/* ── ПЛОСКИЙ облик (решение владельца 14.10 вечер): теней нет совсем, блоки — тонкой рамкой. ── */
html:root, html:root[data-theme="light"] {
  --cta-shadow: none; --btn-shadow: none; --key-shadow: none; --unit-shadow: none; --inset-shadow: none;
}
body *, body *::before, body *::after { box-shadow: none !important; text-shadow: none !important; }
.card, .mmcard, #rCard.mmcard, #shCard.mmcard { border: 1px solid var(--border) !important; }
:focus-visible { outline: 2px solid #ff5a36 !important; outline-offset: 2px; }

/* Паритет с /app: мультипревью и «Ещё модули». Облик D — плоско: тонкая рамка,
   без теней (общее правило body * выше), светлая тема — токены, без тёмных плашек. */
.task:disabled { opacity: .45; cursor: default; }
.mlt-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.more-row { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.more-lbl { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pro-sel { min-height: 44px; box-sizing: border-box; width: 100%; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 14px/1 'Manrope', system-ui, sans-serif; }
/* ── Приглашение друга под результатом (только вошедшим, app-beta.html refOfferInit):
   тонкая рамка блока, кнопка — «клавиша» облика, без теней (плоский облик). ── */
.ref-beta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
  background: var(--surface);
}
.ref-beta[hidden] { display: none; }
.ref-beta .ref-h { font-size: 14px; font-weight: 700; color: var(--text); }
.ref-beta .ref-sub { font-size: 12.5px; color: var(--soft); margin-top: 2px; }
.ref-beta input {
  flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text);
  font-size: 13px;
}
.ref-beta button {
  min-height: 44px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--key); color: var(--text);
  font-size: 13px; font-weight: 600;
}
.ref-beta button:hover { background: var(--ai-wash); }

/* ── Кнопка «Установить» в шапке (появляется, только если браузер разрешил установку):
   тонкая рамка, без теней, как «клавиша» облика. ── */
.pwa-btn {
  min-height: 28px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-2); background: transparent; color: var(--text);
  font-size: 11px; font-weight: 700; align-items: center;
}
.pwa-btn[hidden] { display: none; }
.pwa-btn:hover { background: var(--ai-wash); }

/* ── Вопросы и ответы под страницей (блок «Частые вопросы», app-beta.html FAQ_ON):
   тонкие линии между вопросами, без карточек и теней. ── */
.faq-beta { max-width: 760px; margin: 28px auto 0; padding: 0 16px; }
.faq-beta[hidden] { display: none; }
.faq-beta .faq-h { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.faq-beta details { border-top: 1px solid var(--border); }
.faq-beta details:last-of-type { border-bottom: 1px solid var(--border); }
.faq-beta summary {
  cursor: pointer; color: var(--text); font-size: 14px; font-weight: 600;
  min-height: 44px; display: flex; align-items: center; list-style: none;
}
.faq-beta summary::-webkit-details-marker { display: none; }
.faq-beta summary::after { content: "+"; margin-left: auto; padding-left: 12px; color: var(--dim); font-size: 18px; }
.faq-beta details[open] summary::after { content: "−"; }
.faq-beta p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--soft); }

/* Узкий экран: в шапке только значок, иначе надпись «Установить» в две строки
   выталкивает «Старый дизайн» за край (390 px). Подпись — в title. */
.pwa-btn { white-space: nowrap; }
@media (max-width: 480px) {
  .pwa-btn { font-size: 0; padding: 4px 8px; }
  .pwa-btn::before { content: "⬇"; font-size: 12px; }
}