@import url("mascot.css");
@import url("guide.css");

/* Lumen — дизайн-система «Тёплое стекло» (docs/DESIGN.md).
   Чёрный / белый / оранжевый — цвета маскота Люминчика. Матовое стекло поверх тёплого свечения.
   Тема — от Telegram (data-theme на <html>), вне Telegram — от системы.
   html.lite — без размытия (слабые телефоны, нет backdrop-filter). */

:root {
  --font: "Onest", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* фон: тёплая бумага и мягкое свечение солнышка */
  --bg: #f6f2ea;
  --blob-1: rgba(255, 149, 0, 0.30);
  --blob-2: rgba(255, 196, 64, 0.24);
  --blob-3: rgba(255, 122, 60, 0.13);
  --blob-4: rgba(255, 186, 110, 0.26);

  /* стекло */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-edge: rgba(255, 255, 255, 0.8);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 10px 30px rgba(60, 38, 8, 0.09);
  --shade: rgba(60, 38, 8, 0.12);
  --blur: blur(24px) saturate(1.6);

  /* текст — тёплый чёрный */
  --text: #16120d;
  --text-2: rgba(22, 18, 13, 0.8);
  --muted: rgba(22, 18, 13, 0.6);
  --faint: rgba(22, 18, 13, 0.38);
  --line: rgba(22, 18, 13, 0.08);
  --line-strong: rgba(22, 18, 13, 0.16);

  /* роли цвета: действие — оранжевый Люминчика */
  --action: #a65200; /* текст и значки действий на светлом (5,2:1) */
  --action-fill: #ff9500; /* заливка кнопок и выбранного — с тёмным текстом (8,6:1) */
  --action-press: #ff7a00;
  --action-ink: #16120d;
  --action-soft: rgba(255, 149, 0, 0.15);
  --action-glow: rgba(255, 149, 0, 0.32);
  --lamp: #ff9500;
  --lamp-ink: #a65200;
  --lamp-soft: rgba(255, 149, 0, 0.16);
  --green: #0b7a41;
  --green-bg: rgba(17, 146, 79, 0.13);
  --red: #c8292c;
  --red-bg: rgba(229, 56, 59, 0.12);
  --on-status: #fff; /* значок на зелёной/красной заливке */
  --star-off: rgba(22, 18, 13, 0.52); /* невыбранная звезда: 3:1 к фону */
  --amber: #7d5f00; /* предупреждение — жёлтый, отличим от оранжевого действия */
  --amber-bg: rgba(255, 204, 0, 0.2);
  --blue: var(--action);
  --blue-bg: var(--action-soft);
  --grey-bg: rgba(22, 18, 13, 0.07);
  --toast-bg: rgba(22, 18, 13, 0.9);
  --scrim: rgba(22, 18, 13, 0.4);

  /* Люминчик: белый всегда; на светлом — тёмный контур, чтобы не терялся */
  --lum-body: #ffffff;
  --lum-edge: #16120d;
  --lum-ink: #16120d;
  --lum-blush: #ff9e3d;
  --lum-sun: #ff9500;

  /* совместимость со старыми именами */
  --surface: var(--glass-strong);
  --surface-2: rgba(255, 255, 255, 0.55);
  --surface-3: rgba(22, 18, 13, 0.08);
  --gold: var(--action);
  --accent-grad: var(--action-fill);
  --on-accent: var(--action-ink);

  --radius: 24px;
  --radius-sm: 16px;
  --gutter: 14px;
  --nav-h: 64px;
  color-scheme: light;
  accent-color: var(--action-fill);
}

/* тёмная: чёрный, белый, оранжевый — как аватарка */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09090a; --blob-1: rgba(255, 140, 0, 0.2); --blob-2: rgba(255, 176, 40, 0.09);
    --blob-3: rgba(255, 96, 24, 0.08); --blob-4: rgba(255, 140, 0, 0.1);
    --glass: rgba(30, 28, 25, 0.55); --glass-strong: rgba(34, 31, 28, 0.84); --glass-edge: rgba(255, 255, 255, 0.09);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07); --glass-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); --shade: rgba(0, 0, 0, 0.4);
    --text: #f7f3ec; --text-2: rgba(247, 243, 236, 0.8); --muted: rgba(247, 243, 236, 0.6); --faint: rgba(247, 243, 236, 0.34);
    --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16);
    --action: #ffa733; --action-fill: #ff9500; --action-press: #ffb03a; --action-ink: #120e09; --action-soft: rgba(255, 149, 0, 0.17); --action-glow: rgba(255, 149, 0, 0.28);
    --lamp: #ffa733; --lamp-ink: #ffb54d; --lamp-soft: rgba(255, 167, 51, 0.18);
    --green: #3fd28a; --green-bg: rgba(63, 210, 138, 0.14); --red: #ff6b6e; --red-bg: rgba(255, 107, 110, 0.14);
    --on-status: #120e09; --star-off: rgba(247, 243, 236, 0.42);
    --amber: #ffd54a; --amber-bg: rgba(255, 213, 74, 0.14); --grey-bg: rgba(255, 255, 255, 0.08);
    --toast-bg: rgba(44, 40, 35, 0.94); --scrim: rgba(0, 0, 0, 0.55); --lum-edge: #ffffff;
    --surface-2: rgba(255, 255, 255, 0.06); --surface-3: rgba(255, 255, 255, 0.1); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #09090a; --blob-1: rgba(255, 140, 0, 0.2); --blob-2: rgba(255, 176, 40, 0.09);
  --blob-3: rgba(255, 96, 24, 0.08); --blob-4: rgba(255, 140, 0, 0.1);
  --glass: rgba(30, 28, 25, 0.55); --glass-strong: rgba(34, 31, 28, 0.84); --glass-edge: rgba(255, 255, 255, 0.09);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07); --glass-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); --shade: rgba(0, 0, 0, 0.4);
  --text: #f7f3ec; --text-2: rgba(247, 243, 236, 0.8); --muted: rgba(247, 243, 236, 0.6); --faint: rgba(247, 243, 236, 0.34);
  --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16);
  --action: #ffa733; --action-fill: #ff9500; --action-press: #ffb03a; --action-ink: #120e09; --action-soft: rgba(255, 149, 0, 0.17); --action-glow: rgba(255, 149, 0, 0.28);
  --lamp: #ffa733; --lamp-ink: #ffb54d; --lamp-soft: rgba(255, 167, 51, 0.18);
  --green: #3fd28a; --green-bg: rgba(63, 210, 138, 0.14); --red: #ff6b6e; --red-bg: rgba(255, 107, 110, 0.14);
  --on-status: #120e09; --star-off: rgba(247, 243, 236, 0.42);
  --amber: #ffd54a; --amber-bg: rgba(255, 213, 74, 0.14); --grey-bg: rgba(255, 255, 255, 0.08);
  --toast-bg: rgba(44, 40, 35, 0.94); --scrim: rgba(0, 0, 0, 0.55); --lum-edge: #ffffff;
  --surface-2: rgba(255, 255, 255, 0.06); --surface-3: rgba(255, 255, 255, 0.1); color-scheme: dark;
}

/* ---------- Основа ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  font-family: var(--font); font-size: 15px; line-height: 1.45; color: var(--text);
  background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}
/* Аврора — один неподвижный слой под всем: стеклу есть что размывать */
body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 32% at 8% 4%, var(--blob-1), transparent 70%),
    radial-gradient(40% 34% at 96% 16%, var(--blob-2), transparent 70%),
    radial-gradient(48% 36% at 22% 62%, var(--blob-3), transparent 70%),
    radial-gradient(44% 34% at 92% 92%, var(--blob-4), transparent 70%);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--action); text-decoration: none; }
svg { display: block; }
svg.chev { width: 18px; height: 18px; flex: none; color: var(--faint); }
svg.tick { width: 20px; height: 20px; flex: none; color: var(--action); }
.row > svg { flex: none; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

.app { max-width: 560px; margin: 0 auto; padding: 14px var(--gutter) calc(var(--nav-h) + 40px + env(safe-area-inset-bottom)); }
.app.no-nav { padding-bottom: 120px; }
.screen { display: contents; }

/* ---------- Стекло ---------- */
.card, .list, .hero, .pcard, .signal, .group, .review-form, .setup, .rundown, .metric, .check, .score-badge, .post {
  background: var(--glass); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), var(--glass-shadow);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
html.lite .card, html.lite .list, html.lite .hero, html.lite .pcard, html.lite .signal, html.lite .review-form,
html.lite .setup, html.lite .rundown, html.lite .metric, html.lite .check, html.lite .score-badge, html.lite .post,
html.lite .nav, html.lite .sticky-cta, html.lite .seg-glass, html.lite .choice, html.lite .slot, html.lite .day,
html.lite .weekdays button, html.lite .input, html.lite .select, html.lite .btn-soft, html.lite .chip {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.lite { --glass: var(--glass-strong); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: var(--glass-strong); }
}

/* ---------- Шапка и заголовки ---------- */
.top { display: flex; align-items: center; gap: 12px; padding: 4px 2px 16px; }
.logo { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), 0 4px 14px var(--shade); }
.logo svg { width: 22px; height: 22px; }
.top h1 { font-size: 22px; line-height: 1.15; margin: 0; letter-spacing: -0.02em; font-weight: 800; }
.top .sub { color: var(--muted); font-size: 13px; margin-top: 1px; }
.top .grow { flex: 1; min-width: 0; }
.page-title { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; margin: 6px 4px 4px; line-height: 1.1; }
.page-sub { color: var(--muted); margin: 0 4px 16px; font-size: 14px; }
.section-title { font-size: 14px; font-weight: 650; color: var(--muted); margin: 22px 8px 8px; }
.section-title:first-child { margin-top: 6px; }

/* ---------- Блоки ---------- */
.card { border-radius: var(--radius); padding: 16px; }
.card + .card, .card + .list, .list + .card, .list + .list { margin-top: 10px; }
.stack > * + * { margin-top: 10px; }
.row { display: flex; align-items: center; gap: 12px; }
.row .grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divider { height: 1px; background: var(--line); margin: 14px -16px; }

/* Список строк внутри одного стекла */
.list { border-radius: var(--radius); overflow: hidden; }
.cell { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 16px; min-height: 52px; width: 100%; background: none; border: 0; text-align: left; cursor: pointer; }
.cell + .cell::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.cell .label { flex: 1; min-width: 0; }
.cell .value { color: var(--muted); font-size: 14px; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell .chev { color: var(--faint); }
.cell:active { background: var(--surface-2); }
.cell.static { cursor: default; }
.cell.static:active { background: none; }

/* ---------- Кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px;
  border-radius: 99px; border: 0; font-weight: 700; font-size: 15.5px; cursor: pointer; text-decoration: none; transition: opacity .15s, transform .12s; }
.btn:active { transform: scale(0.98); opacity: .9; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--action-fill); color: var(--action-ink); box-shadow: 0 8px 22px var(--action-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: background .18s, transform .12s, box-shadow .18s; }
.btn-primary:active { background: var(--action-press); box-shadow: 0 3px 10px var(--action-glow); opacity: 1; }
.btn-soft { background: var(--glass-strong); color: var(--action); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.btn-ghost { background: transparent; color: var(--action); }
.btn-danger { background: var(--red-bg); color: var(--red); }
.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn-row { display: flex; gap: 8px; }
.btn-row > .btn { flex: 1; }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom)); }
.sticky-cta .btn { max-width: 532px; margin: 0 auto; display: flex; width: 100%; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn.danger { color: var(--red); background: var(--red-bg); }

/* ---------- Статус: точка + слово ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--glass-strong); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.live { color: var(--lamp-ink); background: var(--lamp-soft); }
.pill.live::before { background: var(--lamp); animation: lamp 1.8s ease-in-out infinite; }
.pill.scheduled { color: var(--action); background: var(--action-soft); }
.pill.warn { color: var(--amber); background: var(--amber-bg); }
.pill.bad { color: var(--red); background: var(--red-bg); }
.pill.done { color: var(--muted); background: var(--grey-bg); }
@keyframes lamp { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 149, 0, .55); } 50% { box-shadow: 0 0 0 5px rgba(255, 149, 0, 0); } }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; background: var(--glass-strong); color: var(--text-2); font-size: 13px; font-weight: 600; border: 1px solid var(--glass-edge); }
.chip.ok { color: var(--green); } .chip.no { color: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip svg { width: 14px; height: 14px; flex: none; }

/* ---------- Переключатель вкладок ---------- */
.segmented { display: flex; gap: 2px; padding: 4px; border-radius: 99px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.segmented button { flex: 1; height: 38px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, color .15s; }
.segmented button.on { background: var(--glass-strong); color: var(--text); box-shadow: 0 2px 10px var(--shade); }
.segmented .count { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.segmented button.on .count { color: var(--action); }
.segmented button svg { width: 16px; height: 16px; }

/* ---------- Блок-подсказка (первый шаг) ---------- */
.hero { border-radius: var(--radius); padding: 18px; }
.hero h2 { font-size: 19px; margin: 0 0 4px; letter-spacing: -0.015em; }
.hero p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.steps { display: grid; gap: 10px; margin: 0 0 16px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step .n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; background: var(--action-soft); color: var(--action); }
.step .t { font-size: 14px; color: var(--text-2); padding-top: 2px; }

/* ---------- Эфирная сетка (главная) ---------- */
.rundown { border-radius: var(--radius); padding: 4px 0; overflow: hidden; }
.rd-row { position: relative; display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 13px 16px; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; }
.rd-row + .rd-row::before { content: ""; position: absolute; top: 0; left: 76px; right: 0; height: 1px; background: var(--line); }
.rd-row:active { background: var(--surface-2); }
.rd-time { flex: none; width: 50px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.rd-row.live .rd-time { color: var(--lamp-ink); }
.rd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-title { font-weight: 700; font-size: 15.5px; }
.rd-meta { color: var(--muted); font-size: 13px; }
.rd-row .pill { margin-top: 1px; }
.progress { height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin: 6px 0 2px; }
.progress > i { display: block; height: 100%; background: var(--lamp); border-radius: inherit; }

/* Карточка-строка (покупки, проверки) */
.pcard { display: flex; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 20px; cursor: pointer; width: 100%; text-align: left; color: inherit; transition: transform .12s; }
.pcard:active { transform: scale(0.99); }
.pcard + .pcard { margin-top: 8px; }
.pcard .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pcard .title { font-weight: 700; font-size: 15.5px; }
.pcard .meta { color: var(--muted); font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pcard .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.date-tile { flex: none; width: 54px; border-radius: 16px; background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0; }
.date-tile .d { font-size: 20px; font-weight: 800; line-height: 1; }
.date-tile .m { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.date-tile .h { font-size: 12.5px; font-weight: 700; margin-top: 4px; color: var(--text-2); }
.date-tile.live { background: var(--lamp-soft); } .date-tile.live .d, .date-tile.live .h { color: var(--lamp-ink); }

/* ---------- Пустое состояние ---------- */
.empty { text-align: center; padding: 30px 20px; color: var(--muted); }
.empty .ico { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-strong); color: var(--faint); border: 1px solid var(--glass-edge); }
.empty .ico svg { width: 24px; height: 24px; }
.empty b { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }

/* ---------- Превью поста (как в Telegram) ---------- */
.post { border-radius: 22px; padding: 10px; }
.post .bubble { background: var(--glass-strong); border-radius: 16px; overflow: hidden; }
.post .from { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0; font-weight: 700; font-size: 14px; color: var(--action); }
.post .from .av { width: 22px; height: 22px; border-radius: 50%; background: var(--action-fill); color: var(--action-ink); font-size: 11px; display: grid; place-items: center; font-weight: 800; }
.post .media { display: grid; gap: 2px; margin-top: 8px; grid-template-columns: repeat(var(--cols, 1), 1fr); }
.post .media .m { aspect-ratio: 4 / 3; background: var(--surface-3); display: grid; place-items: center; color: var(--faint); overflow: hidden; }
.post .media .m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post .media .m svg { width: 28px; height: 28px; }
.post .text { padding: 10px 12px 12px; white-space: pre-wrap; word-wrap: break-word; font-size: 15px; line-height: 1.42; }
.post .text a { color: var(--action); }
.post .text blockquote { margin: 4px 0; padding: 2px 10px; border-left: 3px solid var(--action); background: var(--action-soft); border-radius: 0 8px 8px 0; }
.post .text code, .post .text pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--surface-3); border-radius: 6px; padding: 1px 5px; }
.post .text .tg-spoiler, .post .text tg-spoiler { background: var(--surface-3); color: transparent; border-radius: 4px; }
.post .buttons { display: grid; gap: 4px; margin-top: 4px; }
.post .buttons span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; background: var(--glass-strong); color: var(--action); font-weight: 650; font-size: 14px; }
.post .buttons span svg { width: 13px; height: 13px; }

/* ---------- Поля ---------- */
.field { display: block; }
.field + .field { margin-top: 12px; }
.field > .lbl { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 6px 6px; }
.input, .select, textarea.input { width: 100%; height: 50px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--glass-edge); background: var(--glass-strong); outline: none; font-size: 16px; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; box-shadow: var(--glass-hi); }
textarea.input { height: auto; padding: 12px 16px; resize: vertical; line-height: 1.4; }
.input:focus, .select:focus { border-color: var(--action-fill); box-shadow: 0 0 0 4px var(--action-soft); }
.input.error { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 38px; }
.cell .select { width: auto; min-width: 120px; height: 44px; font-size: 14px; padding-right: 34px; border-radius: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hint { font-size: 12.5px; color: var(--muted); margin: 6px 6px 0; }
.err-text { font-size: 12.5px; color: var(--red); margin: 6px 6px 0; }

/* ---------- Выбор (форматы, каналы) ---------- */
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.choice-grid.one { grid-template-columns: 1fr; }
.choice { position: relative; border: 1.5px solid var(--glass-edge); background: var(--glass); border-radius: 20px; padding: 12px 14px; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; min-height: 64px; color: inherit; box-shadow: var(--glass-hi); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.choice:active { transform: scale(0.98); }
.choice .t { font-weight: 750; font-size: 15px; }
.choice .s { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.choice.on { border-color: var(--action-fill); background: var(--glass-strong); box-shadow: 0 0 0 3px var(--action-soft); }
.choice.on::after { content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--action-fill) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316120d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ch-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #16120d; flex: none; font-size: 16px; }

/* Степпер */
.num-stepper { display: flex; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 99px; padding: 3px; }
.num-stepper button { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--glass-strong); font-size: 18px; font-weight: 600; cursor: pointer; display: grid; place-items: center; }
.num-stepper button::after { content: ""; position: absolute; inset: -4px; } /* зона касания 46 px */
.num-stepper button:disabled { opacity: .4; }
.num-stepper .v { min-width: 58px; text-align: center; font-weight: 750; font-size: 14.5px; }

/* Переключатель */
.switch { position: relative; width: 52px; height: 32px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: var(--surface-3); transition: background .18s; cursor: pointer; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .2s ease; }
.switch input:checked + i { background: var(--action-fill); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch.off { opacity: .45; }

/* Сводка перед сохранением */
.summary { border-radius: 20px; padding: 14px 16px; background: var(--action-soft); border: 1px solid var(--glass-edge); }
.summary .line { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text-2); }
.summary .line + .line { margin-top: 8px; }
.summary .line svg { width: 17px; height: 17px; color: var(--action); flex: none; }
.summary b { color: var(--text); }

/* ---------- Карточка размещения ---------- */
.status-hero { text-align: center; padding: 22px 16px 18px; }
.status-hero .ring { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; }
.status-hero .ring svg { width: 26px; height: 26px; }
.status-hero .ring.live { background: var(--lamp-soft); color: var(--lamp-ink); }
.status-hero .ring.scheduled { background: var(--action-soft); color: var(--action); }
.status-hero .ring.warn { background: var(--amber-bg); color: var(--amber); }
.status-hero .ring.bad { background: var(--red-bg); color: var(--red); }
.status-hero .ring.done { background: var(--grey-bg); color: var(--muted); }
.status-hero h2 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.status-hero .when { color: var(--muted); margin-top: 4px; font-size: 14px; }

.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 18px; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.check .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.check .ic svg { width: 13px; height: 13px; }
.check.ok .ic { background: var(--green); color: var(--on-status); }
.check.no .ic { background: var(--red); color: var(--on-status); }
.check.wait .ic { background: var(--surface-3); color: var(--muted); }

.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric { padding: 14px; border-radius: 20px; }
.metric .v { font-size: clamp(20px, 6vw, 26px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
.metric .k { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

/* Хронология */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--line-strong); border-radius: 2px; }
.tl { position: relative; padding: 2px 0 14px; }
.tl:last-child { padding-bottom: 0; }
.tl::before { content: ""; position: absolute; left: -23px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--glass-strong); border: 2px solid var(--line-strong); }
.tl.done::before { background: var(--action-fill); border-color: var(--action-fill); }
.tl.bad::before { background: var(--red); border-color: var(--red); }
.tl .t { font-weight: 650; font-size: 14.5px; }
.tl .s { color: var(--muted); font-size: 13px; }
.tl:not(.done) .t { color: var(--text-2); }

.report-link { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); font-size: 13px; color: var(--text-2); word-break: break-all; }
.report-link svg { width: 18px; height: 18px; color: var(--action); flex: none; }

/* ---------- Нижнее меню: парящая стеклянная капсула ---------- */
.nav { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30; max-width: 536px; margin: 0 auto;
  border-radius: 32px; padding: 6px; background: var(--glass); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), 0 12px 34px var(--shade); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
html.lite .nav { background: var(--glass-strong); }
.nav .in { display: flex; justify-content: space-around; gap: 2px; }
.nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; color: var(--muted); font-size: 11px; font-weight: 700; border-radius: 26px; transition: background .15s, color .15s; }
.nav a svg { width: 22px; height: 22px; }
.nav a.on { color: var(--action); background: var(--glass-strong); box-shadow: 0 2px 10px var(--shade); }

/* ---------- Тост и загрузка ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 30px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; z-index: 50;
  background: var(--toast-bg); color: #fff; padding: 8px 18px 8px 10px; display: flex; align-items: center; gap: 10px; border-radius: 99px; font-size: 14px; font-weight: 650; transition: opacity .2s, transform .25s; max-width: calc(100% - 32px); text-align: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: #b42318; }
.skeleton { border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-edge); height: 88px; animation: breathe 1.4s ease-in-out infinite; }
.skeleton + .skeleton { margin-top: 10px; }
@keyframes breathe { 50% { opacity: .55; } }
.fade-in { animation: none; }

/* ---------- Отчёт (страница для рекламодателя) ---------- */
.report-head { text-align: center; padding: 18px 0 8px; }
.report-head .logo { margin: 0 auto 12px; width: 48px; height: 48px; }
.report-head .logo svg { width: 28px; height: 28px; }
.report-head .k { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.report-head h1 { margin: 6px 0 4px; font-size: 28px; letter-spacing: -0.03em; line-height: 1.15; }
.report-head .s { color: var(--muted); }
.foot { text-align: center; color: var(--muted); font-size: 12.5px; margin: 26px 0 8px; }
.foot a { color: var(--muted); font-weight: 650; }
.lang-switch { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.lang-switch button { border: 0; background: none; color: var(--muted); font-size: 12.5px; font-weight: 650; padding: 5px 10px; border-radius: 99px; cursor: pointer; }
.lang-switch button.on { color: var(--text); background: var(--glass-strong); }

@media (max-width: 360px) {
  .checks, .metrics { grid-template-columns: 1fr; }
  .page-title { font-size: 24px; }
}

/* ---------- Витрина ---------- */
.sc-head h2 { margin: 0; font-size: 21px; letter-spacing: -0.02em; }
.price-card { min-height: 92px; }
.price-card .price, .format-row .price { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.price-card .t { font-size: 13px; color: var(--action); margin-top: 2px; font-weight: 700; }
.section-title .tz { float: right; font-weight: 600; color: var(--muted); }
.day-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: none; scroll-snap-type: x proximity; }
.day-strip::-webkit-scrollbar { display: none; }
.day { flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 0; border-radius: 20px; border: 1px solid var(--glass-edge); background: var(--glass); cursor: pointer; scroll-snap-align: start; color: inherit; box-shadow: var(--glass-hi); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.day .wd { font-size: 11.5px; color: var(--muted); font-weight: 650; text-transform: capitalize; white-space: nowrap; max-width: 62px; overflow: hidden; text-overflow: ellipsis; }
.day .num { font-size: 15px; font-weight: 800; }
.day .n { font-size: 11px; color: var(--green); font-weight: 700; }
.day.on { background: var(--action-fill); border-color: var(--action-fill); color: var(--action-ink); box-shadow: 0 6px 18px var(--action-glow); }
.day.on .wd, .day.on .n { color: rgba(22, 18, 13, .75); }
.time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot { height: 46px; border-radius: 16px; border: 1px solid var(--glass-edge); background: var(--glass); font-weight: 750; font-size: 15px; cursor: pointer; color: inherit; transition: transform .1s; box-shadow: var(--glass-hi); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.slot:active { transform: scale(0.96); }
.slot.on { background: var(--action-fill); color: var(--action-ink); border-color: var(--action-fill); box-shadow: 0 6px 16px var(--action-glow); }
.note { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; background: var(--lamp-soft) !important; }

/* ---------- Покупка и заявка ---------- */
.step-card b { font-size: 16.5px; }
.step-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--action-soft); color: var(--action); }
.step-ico svg { width: 20px; height: 20px; }
.quote { padding: 10px 14px; border-left: 3px solid var(--action); background: var(--surface-2); border-radius: 0 14px 14px 0; white-space: pre-wrap; font-size: 14px; color: var(--text-2); }
.pay-details { padding: 12px 14px; border-radius: 18px; background: var(--surface-2); display: grid; gap: 6px; }
.pay-details .v { font-weight: 750; font-size: 17px; white-space: pre-wrap; word-break: break-word; }
.pay-details .btn { justify-self: start; }
.decision { border-color: var(--action-fill) !important; box-shadow: 0 0 0 3px var(--action-soft), var(--glass-shadow) !important; }

/* ---------- Настройки канала ---------- */
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.weekdays button { height: 42px; border-radius: 50%; aspect-ratio: 1; height: auto; border: 1px solid var(--glass-edge); background: var(--glass-strong); font-weight: 750; font-size: 13px; cursor: pointer; color: inherit; }
.weekdays button.on { background: var(--action-fill); color: var(--action-ink); border-color: var(--action-fill); }
.format-row { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; }

/* ---------- Оценка канала ---------- */
.ring-score { position: relative; flex: none; display: grid; place-items: center; }
.ring-score svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-score .track { fill: none; stroke: var(--surface-3); stroke-width: 10; }
.ring-score .arc { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1); }
.ring-score.good .arc { stroke: var(--green); }
.ring-score.mid .arc { stroke: var(--lamp); }
.ring-score.bad .arc { stroke: var(--red); }
.ring-score .val { position: relative; text-align: center; line-height: 1; }
.ring-score .val b { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.ring-score .val span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.pcard .ring-score .val b, .score-badge .ring-score .val b { font-size: 16px; }
.pcard .ring-score .val span, .score-badge .ring-score .val span { display: none; }
.pcard .ring-score .track, .pcard .ring-score .arc, .score-badge .ring-score .track, .score-badge .ring-score .arc { stroke-width: 12; }
.score-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px 20px; gap: 6px; }
.score-hero .verdict { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; }
.verdict.good { color: var(--green); } .verdict.mid { color: var(--lamp-ink); } .verdict.bad { color: var(--red); }
.cap { display: flex; gap: 8px; align-items: flex-start; text-align: left; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--red-bg); color: var(--red); font-size: 13px; }
.cap svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.bar-row + .bar-row { margin-top: 12px; }
.bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; border-radius: inherit; transition: width .6s ease; }
.bar.good i { background: var(--green); } .bar.mid i { background: var(--lamp); } .bar.bad i { background: var(--red); }
.signal { border-radius: 18px; }
.signal + .signal { margin-top: 8px; }
.signal summary { list-style: none; display: flex; gap: 10px; align-items: center; padding: 12px 14px; cursor: pointer; font-weight: 650; font-size: 14px; }
.signal summary::-webkit-details-marker { display: none; }
.sig-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.sig-ico svg { width: 13px; height: 13px; }
.signal.bad .sig-ico { background: var(--red); color: var(--on-status); }
.signal.warn .sig-ico { background: var(--lamp); color: var(--action-ink); }
.signal.ok .sig-ico { background: var(--green); color: var(--on-status); }
.signal.info .sig-ico, .signal.na .sig-ico { background: var(--surface-3); color: var(--muted); }
.signal .rel { font-size: 11px; color: var(--muted); font-weight: 650; white-space: nowrap; }
.sig-detail { padding: 0 14px 12px 46px; color: var(--text-2); }
.section-title.bad-t { color: var(--red); }
.chart { height: 96px; display: flex; align-items: flex-end; gap: 2px; }
.chart i { flex: 1; background: var(--line-strong); border-radius: 3px 3px 0 0; min-width: 2px; }
.chart i.ad { background: var(--action-fill); }
.legend { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--line-strong); }
.legend.ad i { background: var(--action-fill); }
.tips .tip { display: flex; gap: 10px; font-size: 14px; color: var(--text-2); }
.tips .tip + .tip { margin-top: 10px; }
.tips .tip svg { width: 16px; height: 16px; color: var(--green); flex: none; margin-top: 2px; }
.disclaimer { margin-top: 14px; }
.score-wait { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 20px; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--surface-3); border-top-color: var(--action); animation: spin 0.9s linear infinite; margin-bottom: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.score-badge { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 18px; cursor: pointer; width: 100%; text-align: left; color: inherit; }

/* ---------- Шаги настройки продажи ---------- */
.setup-step { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 16px; border: 1px solid transparent; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
.setup-step .mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12.5px; background: var(--surface-3); color: var(--text-2); }
.setup-step .mark svg { width: 14px; height: 14px; }
.setup-step .t { display: block; font-weight: 650; }
.setup-step .s { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; }
.setup-step.done { opacity: .6; }
.setup-step.done .mark { background: var(--green); color: var(--on-status); }
.setup-step.next { border-color: var(--action-fill); background: var(--glass-strong); box-shadow: 0 0 0 3px var(--action-soft); }
.setup-step.next .mark { background: var(--action-fill); color: var(--action-ink); }
.step-title { display: flex; align-items: center; gap: 8px; }
.step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--action-fill); color: var(--action-ink); font-size: 12px; font-weight: 800; }
.step-n.done { background: var(--green); color: var(--on-status); }
.step-n svg { width: 13px; height: 13px; }
.extra-title { margin-top: 32px; }
.save-state { font-size: 12px; }
.save-state.busy { color: var(--muted); }
.save-state.ok { color: var(--green); }

/* ---------- Честные отзывы ---------- */
.stars { display: inline-flex; gap: 1px; color: var(--star-off); }
.stars span { display: inline-flex; }
.stars svg { width: 15px; height: 15px; }
.stars.lg svg { width: 20px; height: 20px; }
.stars .on { color: var(--lamp); }
.star-pick { display: flex; gap: 6px; margin: 14px 0 10px; }
.star-pick button { border: 1px solid var(--glass-edge); background: var(--glass-strong); color: var(--star-off); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform .12s; }
.star-pick button svg { width: 24px; height: 24px; }
.star-pick button.on { color: var(--lamp); background: var(--lamp-soft); }
.star-pick button:active { transform: scale(.92); }
.review .review-text { margin: 10px 0 8px; white-space: pre-wrap; line-height: 1.45; }
.chips.deal { margin-top: 8px; }
.chips.deal .chip { font-size: 12px; }
.review-reply { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 14px; }
.review-reply b { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.rating-chip { cursor: pointer; color: var(--text); font-size: 13px; font-weight: 700; font-family: inherit; }
.rating-chip svg { color: var(--lamp); }
.rating-sum { display: flex; align-items: center; gap: 14px; }
.rating-sum .big { font-size: 36px; font-weight: 800; letter-spacing: -.03em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Главная ---------- */
.day-title { font-size: 14px; font-weight: 700; color: var(--text-2); margin: 18px 8px 8px; }
.day-title.muted { color: var(--muted); font-weight: 600; }
.rundown.todo .rd-row { align-items: center; }
.todo-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 4px var(--lamp-soft); margin: 0 4px 0 2px; }
.rundown.todo .rd-row + .rd-row::before { left: 44px; }
.rd-row > .chev { align-self: center; }
.new-hint { margin-bottom: 4px; }
.role-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--action-soft); color: var(--action); flex: none; }
.role-ico svg { width: 20px; height: 20px; }
.list .cell b { display: block; font-weight: 700; }
.day-title::first-letter { text-transform: uppercase; }
.rd-head { display: flex; align-items: center; gap: 8px; }
.rd-head .rd-title { flex: 1; min-width: 0; }
.rd-head .pill { height: 22px; padding: 0 8px; font-size: 11.5px; }

/* ---------- Витрина: шапка, факты, как купить, форматы-строки ---------- */
.sc-head { padding: 4px 4px 12px; }
.sc-head .ch-avatar { width: 52px; height: 52px; font-size: 21px; }
.sc-about { margin: 12px 0 0; color: var(--text-2); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-radius: var(--radius); padding: 12px 4px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.facts div { text-align: center; padding: 0 4px; min-width: 0; }
.facts div + div { border-left: 1px solid var(--line); }
.facts b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.facts span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.25; margin-top: 2px; }
.howto { display: grid; gap: 8px; }
.howto div { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text-2); }
.howto i { font-style: normal; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; background: var(--action-soft); color: var(--action); }
.rules { margin-top: 14px; }
.opt .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; transition: border .15s; }
.opt.on .radio { border: 7px solid var(--action-fill); }
.opt .label b { font-weight: 700; }
.opt-price { font-weight: 800; white-space: nowrap; }
.opt.on { background: var(--glass-strong); }
.time-grid { margin-top: 4px; }

.countdown { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--lamp-ink); }
.pay-sum { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.page-sub { line-height: 1.35; }
.metrics + .section-title, .checks + .section-title { margin-top: 22px; }
.metric .mh { font-size: 12px; color: var(--muted); margin-top: 2px; }
.req-line { font-weight: 700; font-size: 16px; margin-top: 10px; }
.decision .post { box-shadow: none; }
.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
.facts div + div { border-left: 0; }
.facts div:nth-child(even) { border-left: 1px solid var(--line); }
.facts b { font-size: 20px; }
.cell .value { white-space: normal; text-overflow: clip; }
.opt .label b { font-size: 14.5px; line-height: 1.3; }
.opt-price { font-size: 14.5px; }

details.more { border-radius: var(--radius); padding: 14px 16px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
details.more summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font-weight: 700; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary span:first-child::after { content: " ▾"; color: var(--muted); }
details.more[open] summary span:first-child::after { content: " ▴"; }
details.more .list { box-shadow: none; }

/* ---------- Новая структура: «что сейчас», цифры, шкала шагов, «ждёт вас» ---------- */
.mode-switch { display: flex; padding: 4px; border-radius: 99px; margin: 0 0 14px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.mode-switch button { flex: 1; border: 0; background: none; padding: 8px 0; border-radius: 99px; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; }
.mode-switch button.on { background: var(--glass-strong); color: var(--text); box-shadow: 0 2px 8px var(--shade); }
.screen-head { margin: 2px 4px 14px; }
.screen-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin: 0; line-height: 1.1; }
.screen-head .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.now-card { border-radius: var(--radius); padding: 16px; background: var(--glass-strong); border: 1.5px solid var(--action-fill); box-shadow: 0 0 0 4px var(--action-soft), var(--glass-shadow); }
.now-card > b { font-size: 18px; display: block; letter-spacing: -.01em; }
.now-card > p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
.now-card.info { border-color: var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); }
.now-card.bad { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.now-card.live { border-color: var(--lamp); box-shadow: 0 0 0 4px var(--lamp-soft); }
.now-card .btn-row, .now-card .stack { margin-top: 12px; }
.facts3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin-top: 10px; border-radius: var(--radius); padding: 12px 0; text-align: center; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.facts3 div + div { border-left: 1px solid var(--line); }
.facts3 b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.facts3 span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tracker { border-radius: var(--radius); padding: 16px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.st { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.st:last-child { padding-bottom: 0; }
.st::before { content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; background: var(--line-strong); border-radius: 2px; }
.st:last-child::before { display: none; }
.st.done::before { background: var(--green); }
.st > i { width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--glass-strong); border: 2px solid var(--line-strong); z-index: 1; display: grid; place-items: center; color: #fff; font-style: normal; }
.st.done > i { background: var(--green); border-color: var(--green); }
.st.done > i::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--on-status); border-bottom: 2px solid var(--on-status); transform: rotate(-45deg) translate(1px, -1px); }
.st.now > i { border-color: var(--action-fill); box-shadow: 0 0 0 4px var(--action-soft); }
.st.bad > i { background: var(--red); border-color: var(--red); }
.st b { display: block; font-size: 14.5px; }
.st span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.st.now b { color: var(--action); } .st.todo b { color: var(--muted); font-weight: 600; } .st.bad b { color: var(--red); }
.alert-row { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 13px 14px; border-radius: 20px; cursor: pointer; color: inherit; font: inherit; background: var(--glass-strong); border: 1px solid rgba(255, 149, 0, .45); box-shadow: 0 0 0 3px var(--lamp-soft), var(--glass-shadow); }
.alert-row + .alert-row { margin-top: 8px; }
.alert-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lamp); flex: none; }
.alert-row b { display: block; font-size: 15px; }
.alert-row .grow span { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.alert-row .go { color: var(--action); font-weight: 750; font-size: 14px; white-space: nowrap; }
.more-link { display: block; width: 100%; margin-top: 12px; padding: 12px; border: 0; background: none; color: var(--action); font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; text-align: center; }
.section-link { display: flex; align-items: center; gap: 12px; }
.row-step { font-size: 12.5px; font-weight: 700; color: var(--action); white-space: nowrap; }
.welcome-card { text-align: center; padding: 28px 20px; }
.welcome-card .big-ico { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--action-soft); color: var(--action); }
.welcome-card .big-ico svg { width: 30px; height: 30px; }
.welcome-card h2 { margin: 0 0 6px; font-size: 21px; }
.welcome-card p { margin: 0 0 18px; color: var(--muted); }
.wizard-steps { display: flex; gap: 6px; margin: 4px 2px 14px; }
.wizard-steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--line-strong); }
.wizard-steps i.on { background: var(--action-fill); }
.wizard-back { border: 0; background: none; color: var(--action); font: inherit; font-weight: 650; padding: 0 2px 8px; cursor: pointer; }

/* ---------- Одно главное действие ---------- */
/* в Telegram действие — его нижняя кнопка, своя закреплённая не нужна */
html.tg-native .sticky-cta { display: none; }
.app:not(.no-nav) .sticky-cta { bottom: calc(var(--nav-h) + 6px + env(safe-area-inset-bottom)); padding-bottom: 8px; }
.app:not(.no-nav):has(.sticky-cta) { padding-bottom: calc(var(--nav-h) + 110px + env(safe-area-inset-bottom)); }
html.tg-native .app:not(.no-nav):has(.sticky-cta) { padding-bottom: calc(var(--nav-h) + 40px + env(safe-area-inset-bottom)); }
.more-link.open { opacity: .75; }
.more-box { margin-top: 2px; }
.more-box > :first-child { margin-top: 0; }
.now-card .tips { margin-top: 10px; }
.now-card .pay-box { margin-top: 12px; padding: 12px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-edge); }
.now-card .pay-box .row + .row { margin-top: 10px; }
.now-card .pay-box .v { font-weight: 700; font-size: 15px; word-break: break-word; white-space: pre-wrap; }
.now-card .countdown { font-variant-numeric: tabular-nums; color: var(--lamp-ink); }
.stepper { display: flex; gap: 6px; margin: 2px 2px 14px; }
.stepper i { flex: 1; height: 4px; border-radius: 4px; background: var(--line-strong); }
.stepper i.on { background: var(--action-fill); }
.sc-line { color: var(--muted); font-size: 13.5px; margin: 0 4px 10px; }
.mini3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.mini3 > div { padding: 10px 12px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.mini3 b { display: block; font-size: 17px; font-weight: 800; }
.mini3 span { display: block; font-size: 12px; color: var(--muted); }
html.lite .mini3 > div, html.lite .tracker, html.lite .facts3, html.lite .mode-switch { -webkit-backdrop-filter: none; backdrop-filter: none; }
.sum-list .cell .value { text-align: right; }
.ch-row .label .small { margin-top: 1px; }
.ch-row .warn { color: var(--lamp-ink); } .ch-row .ok { color: var(--green); } .ch-row .bad { color: var(--red); }
.edit-word { color: var(--action); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.sec-hint { color: var(--muted); font-size: 13.5px; margin: -6px 4px 12px; }
.setup-row .step-n { flex: none; }
.setup-row .step-n svg { width: 13px; height: 13px; }
.setup-row .step-n.done { background: var(--green); color: var(--on-status); }
.setup-row.done .label b { color: var(--muted); font-weight: 600; }
.title-row { display: flex; align-items: baseline; justify-content: space-between; }
.title-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--action); cursor: pointer; }

/* ---------- Тариф ---------- */
.plan-card { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 16px; border-radius: var(--radius); background: var(--glass); border: 1.5px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.plan-card.on { border-color: var(--action-fill); box-shadow: 0 0 0 4px var(--action-soft), var(--glass-shadow); background: var(--glass-strong); }
.plan-card.owned { cursor: default; border-color: var(--green); }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan-head b { font-size: 17px; }
.plan-price { font-weight: 800; white-space: nowrap; }
.plan-card.owned .plan-price { color: var(--green); }
.badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: var(--action-ink); background: var(--action-fill); vertical-align: 2px; }
.perks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.perks li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.perks li svg { width: 16px; height: 16px; color: var(--green); flex: none; margin-top: 2px; }
.plan-sub { margin-top: 10px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--action); cursor: pointer; }
.usage { margin-top: 12px; font-size: 14px; }
.usage .progress { margin-top: 6px; }
.progress.full i { background: var(--red); }
html.lite .plan-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
.usage .progress > i { background: var(--action-fill); }
.usage .progress.full > i { background: var(--red); }

/* ---------- Плитки модулей ---------- */
.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } /* длинная подпись не растягивает плитку за край */
.tile { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 14px 16px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.tile .grow { min-width: 0; }
.tile .grow b { display: block; font-size: 16px; }
.tile .grow span { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile.soon { cursor: default; opacity: .6; }
.tile-ico { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--action-soft); color: var(--action); }
.tile-ico svg { width: 22px; height: 22px; }
.tile-ico.sm { width: 34px; height: 34px; border-radius: 50%; margin-right: 2px; }
.tile-ico.sm svg { width: 18px; height: 18px; }
.tile-num { text-align: right; flex: none; }
.tile .grow { flex: 1; }
/* Деньги месяца — первая строка главной, вход в «Доходы» */
.money-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 14px 16px; margin: 4px 0 2px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.money-row .grow { flex: 1; min-width: 0; }
.money-row .k { display: block; font-size: 13px; color: var(--muted); }
.money-row .v { display: block; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.money-row .go { color: var(--action); font-weight: 700; font-size: 14px; white-space: nowrap; }
.tile-num b { display: block; font-size: 18px; font-weight: 800; }
.tile-num small { display: block; font-size: 11.5px; color: var(--muted); }
html.lite .tile { -webkit-backdrop-filter: none; backdrop-filter: none; }
.warn { color: var(--lamp-ink); }

/* ---------- Конкурсы ---------- */
.chip-btn { border: 1px solid var(--glass-edge); background: var(--glass-strong); color: var(--action); font: inherit; font-weight: 700; font-size: 13.5px; padding: 7px 12px; border-radius: 99px; cursor: pointer; }
.post-preview { font-size: 14.5px; }
.post-preview p { margin: 6px 0 0; white-space: pre-wrap; }
.pv-button { margin-top: 12px; text-align: center; padding: 9px; border-radius: 12px; background: var(--action-soft); color: var(--action); font-weight: 700; font-size: 14px; }
.winners { margin: 10px 0 0; padding-left: 22px; font-weight: 600; }
.winners li + li { margin-top: 4px; }
.kv { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.kv code { font-family: ui-monospace, Consolas, monospace; color: var(--text); word-break: break-all; text-align: right; }

/* ---------- Доступ: пробный, промокод ---------- */
.trial-card { border: 1.5px solid var(--green); }
.old-price { margin-right: 6px; color: var(--muted); font-weight: 500; text-decoration: line-through; font-size: 13px; }
.off-row { opacity: .75; }
.small.ok { color: var(--green); font-weight: 600; }

/* ---------- Страница автора ---------- */
.author-head { text-align: center; margin: 4px 0 14px; }
.author-head .avatar, .author-head > div:first-child { margin: 0 auto 8px; }
.author-head h1 { font-size: 24px; margin: 6px 0 2px; letter-spacing: -.02em; }
.offer-card { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.offer-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.offer-foot b { margin-left: auto; }
.product-cover { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius); margin-bottom: 12px; }
.product-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--action-soft); color: var(--action); margin: 4px 0 12px 4px; }
.product-ico svg { width: 30px; height: 30px; }

/* Доходы: столбики по месяцам */
.bars { display: flex; gap: 6px; align-items: flex-end; height: 160px; }
.mbar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--muted); min-width: 0; }
.mbar i { width: 100%; max-width: 34px; border-radius: 8px; background: var(--action-soft); transition: background 0.2s; }
.mbar.on i { background: var(--action-fill); }
.mbar small { font-size: 11px; white-space: nowrap; }
.mbar span { font-size: 11px; }
.mbar.on span, .mbar.on small { color: var(--text); font-weight: 600; }

/* Выбор нескольких значений чипсами (дни напоминаний и т.п.) */
.opt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-chip { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.opt-chip.on { background: var(--action-fill); color: var(--action-ink); border-color: var(--action-fill); }

/* Цель сбора: полоса «Собрано X из Y» */
.goal { margin-top: 10px; }
.goal .progress { height: 8px; margin: 8px 0 4px; }
.goal-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.goal-row b { color: var(--text); }
/* Старая цена при промокоде */
.code-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
/* Цена со скидкой: старая — над новой, не съедает место у описания */
.price-stack { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.price-stack .old-price { font-size: 12px; margin: 0; }

/* ---------- Доступность: касание ≥ 44 px, ошибки у поля, переключатели ---------- */
.btn-sm { min-height: 44px; }
.icon-btn { width: 44px; height: 44px; }
.chip-btn, .opt-chip { min-height: 44px; display: inline-flex; align-items: center; }
.segmented button { height: 44px; }
.mode-switch button { min-height: 44px; }
.link-btn, .title-link, .wizard-back { min-height: 44px; display: inline-flex; align-items: center; }
.lang-switch button { min-height: 44px; }
/* узкий экран: кружок уже 44 px — тянется в «таблетку» той же ширины */
.weekdays { gap: 4px; }
.weekdays button { min-height: 44px; border-radius: 99px; }
.switch i { box-shadow: inset 0 0 0 1px var(--line-strong); }
.switch input:focus-visible + i { outline: 2px solid var(--action); outline-offset: 2px; }
.cell:has(> .switch), .cell:has(> label.switch) { cursor: pointer; }
.input { border-color: var(--line-strong); }
.input::placeholder, textarea.input::placeholder { color: var(--muted); opacity: 1; }
.input.error, .select.error { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.err-text { font-size: 13px; color: var(--red); font-weight: 600; margin: 6px 6px 0; }
/* длинные названия без пробелов не вылезают за край */
.screen-head h1, .cell .label b, .rd-title, .alert-row b, .page-title, .now-card b { overflow-wrap: anywhere; }
/* выбор из трёх вариантов в браузере (в Telegram — его окно) */
.dialog-wrap { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--scrim); padding: 20px; }
.dialog { width: 100%; max-width: 340px; padding: 18px 16px 14px; border-radius: 22px; background: var(--surface); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); }
.dialog p { margin: 0 4px 14px; font-weight: 650; }
.dialog .btn { width: 100%; margin-top: 8px; }
/* иконка перед текстом (вместо emoji) */
.with-ico { display: inline-flex; align-items: center; gap: 6px; }
.with-ico > svg { width: 16px; height: 16px; flex: none; color: var(--action); }
svg.own-ico { display: inline-block; width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; color: var(--muted); }

/* длинные названия каналов в шапках (h1 со своими стилями) не вылезают за край */
h1 { overflow-wrap: anywhere; }

/* знак Lumen: белый Люминчик на чёрном круге (как аватарка бота) */
.logo { background: #0b0a09; border-color: transparent; }
.logo .lum { --lum-edge: #fff; }

/* пустое состояние и ошибка — Люминчик вместо значка */
.empty > .lum { display: block; margin: 0 auto 10px; }
.empty .btn { margin-top: 14px; }

/* «Сейчас: …» — Люминчик в углу; настроение по смыслу карточки */
.now-card { position: relative; }
.now-card.with-lum { padding-right: 76px; }
.now-card > .lum { position: absolute; top: 10px; right: 10px; }
.now-card.with-lum > :not(b):not(p):not(.lum) { margin-right: -60px; }
/* без текста под заголовком кнопки начинаются ниже Люминчика (56 px от 10 px сверху) */
.now-card.with-lum > b:not(:has(+ p)) { min-height: 50px; }

/* загрузка дольше полсекунды — Люминчик думает над скелетом */
.lum-wait { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0 14px; color: var(--muted); font-size: 13.5px; animation: lum-in .3s cubic-bezier(.16, 1, .3, 1); }
@keyframes lum-in { from { opacity: 0; transform: translateY(6px); } }

/* тост: маленький Люминчик слева */
.toast .lum { --lum-edge: #fff; }
.toast > span:last-child { text-align: left; }
.logo .lum svg, .report-head .logo .lum svg { width: 100%; height: 100%; }
.score-hero { position: relative; }
.lum.corner { position: absolute; top: 10px; right: 10px; }
.welcome-card > .lum { display: block; margin: -6px auto 8px; }
/* главная: Люминчик играет с солнышком рядом с заголовком */
.screen-head.with-lum { display: flex; align-items: center; gap: 10px; margin-top: -4px; margin-bottom: 8px; }
.screen-head.with-lum .grow { flex: 1; min-width: 0; }
.status-hero > .lum { display: block; margin: -4px auto 6px; }
.btn-soft { border-color: var(--line); }
.mbar i { background: var(--surface-3); }
.mbar.on i { background: var(--action-fill); }

/* ---------- Гайд внутри Mini App (screens/guide.js, общие части — guide.css) ---------- */
.g-tabs { display: flex; gap: 8px; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; }
.g-tabs::-webkit-scrollbar { display: none; }
.g-tabs button { flex: none; display: flex; flex-direction: column; align-items: flex-start; text-align: left; cursor: pointer; font: inherit; color: inherit;
  padding: 8px 14px; min-height: 50px; border-radius: 18px; border: 1.5px solid var(--glass-edge); background: var(--glass-strong); box-shadow: var(--glass-hi); }
.g-tabs b { font-size: 14px; } .g-tabs span { font-size: 11.5px; color: var(--muted); }
.g-tabs button.on { border-color: var(--action-fill); box-shadow: 0 0 0 3px var(--action-soft); }
.g-app { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.g-app .g-phone { --ph: clamp(280px, 48svh, 560px); aspect-ratio: auto; width: 100%; height: var(--ph); border-radius: 30px; padding: 7px; }
.g-app .g-screen { border-radius: 24px; }
.g-who { display: flex; gap: 10px; align-items: flex-start; }
.g-who > .lum { margin-top: 2px; }
.g-bubble { flex: 1; min-width: 0; padding: 12px 14px 14px; border-radius: 8px 20px 20px 20px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); }
.g-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 24px; }
.g-count { font-size: 13px; font-weight: 700; color: var(--action); }
.g-prev { border: 0; background: none; color: var(--action); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; min-height: 44px; margin: -10px -6px; padding: 0 6px; }
.g-prev[hidden] { display: none; }
.g-bubble h2 { font-size: 19px; line-height: 1.2; margin: 2px 0 4px; letter-spacing: -.015em; overflow-wrap: anywhere; }
.g-bubble p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.45; }
.g-extra:not(:empty) { display: grid; gap: 8px; margin-top: 12px; }
/* приглашение в гайд на главной */
.guide-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 12px 14px; margin: 0 0 12px;
  border-radius: var(--radius); background: var(--glass-strong); border: 1.5px solid var(--action-fill); box-shadow: 0 0 0 3px var(--action-soft), var(--glass-shadow); }
.guide-card .grow { flex: 1; min-width: 0; }
.guide-card b { display: block; font-size: 15.5px; }
.guide-card span.s { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.screen-head.with-lum > .lum { cursor: pointer; }

/* ---------- Тарифы (как в Aurora: срок → карточки → сравнение) ---------- */
.value-card { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; font-size: 14.5px; color: var(--text-2); }
.value-card > svg { width: 22px; height: 22px; flex: none; color: var(--action); margin-top: 1px; }
.period { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.period button { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 52px; justify-content: center; border: 0; border-radius: 16px; background: none; font: inherit; color: var(--muted); cursor: pointer; }
.period button b { font-size: 14.5px; color: inherit; }
.period button small { font-size: 12px; font-weight: 700; color: var(--green); min-height: 15px; }
.period button.on { background: var(--action-fill); color: var(--action-ink); box-shadow: 0 6px 16px var(--action-glow); }
.period button.on small { color: var(--action-ink); }
.cur-switch { margin-top: 10px; max-width: 200px; }
.tiers { display: grid; gap: 12px; margin-top: 14px; }
.tier { border-radius: var(--radius); padding: 16px; background: var(--glass); border: 1.5px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
html.lite .tier, html.lite .period { -webkit-backdrop-filter: none; backdrop-filter: none; }
.tier.best { border-color: var(--action-fill); box-shadow: 0 0 0 4px var(--action-soft), var(--glass-shadow); background: var(--glass-strong); }
.t-head { display: flex; align-items: center; gap: 8px; }
.t-name { font-size: 20px; letter-spacing: -.02em; flex: 1; min-width: 0; }
.tier .badge { margin: 0; }
.t-on { font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-bg); border-radius: 99px; padding: 2px 8px; }
.t-tag { color: var(--muted); font-size: 14px; margin-top: 2px; }
.t-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.t-price b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.t-price span { color: var(--muted); font-size: 14px; }
.t-price s { color: var(--faint); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-decoration-thickness: 2px; }
.t-price s + b { font-size: 21px; color: var(--lamp-ink); }
.t-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.t-inc { font-weight: 700; font-size: 14px; margin-top: 12px; }
.tier .perks { margin-top: 6px; }
.tier .btn { margin-top: 14px; }
.cmp .cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px 88px; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cmp .cmp-head { border-top: 0; padding-top: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cmp .cmp-group { font-weight: 700; font-size: 13.5px; margin: 12px 0 2px; color: var(--text); }
.cmp .cmp-group:first-of-type { margin-top: 6px; }
.cmp .v { text-align: center; font-weight: 650; }
.cmp .v.pro { color: var(--action); }
.cmp .v > span { font-size: 20px; line-height: 1; }
.cmp .cmp-head .v.pro { color: var(--action); }

/* ---------- «Ещё» ---------- */
.set-card { display: grid; gap: 10px; }
.set-row b { display: block; font-size: 15px; }
.set-card .divider { margin: 4px -16px; }
.lang-seg button { font-size: 13.5px; padding: 0 6px; }
.set-foot { display: flex; gap: 12px; align-items: center; margin: 22px 6px 0; }

/* ---------- Отзывы о канале (владелец) ---------- */
.review-item { margin-bottom: 12px; }
.review-item .review { margin-bottom: 0; }
.review-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; padding: 2px 6px 0; }
.review-actions .more-link, .review-actions .link-btn { width: auto; margin: 0; padding: 12px 0; min-height: 44px; text-align: left; }
.review-actions .more-box { flex-basis: 100%; order: 3; }

/* ---------- Шаблоны рекламодателя (шаг «Пост») ---------- */
.tpl-list .cell.tpl { gap: 6px; padding-right: 8px; }
.tpl-use { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tpl-use .label { min-width: 0; }
.tpl-use .label b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.3; }
.tpl-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-2); }
.tpl-del { width: 44px; height: 44px; background: transparent; }
.tpl-saved { display: flex; align-items: center; gap: 6px; margin: 10px 6px 0; }
.tpl-saved svg { width: 16px; height: 16px; color: var(--green, #2e9e5b); }

/* ---------- Пакеты каналов ---------- */
.pkg-card { padding: 14px 16px; }
.pkg-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pkg-head b { display: block; font-size: 16px; }
.pkg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pkg-chips .chip { padding: 4px 10px; border-radius: 99px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.pkg-pick .cell.pick { gap: 12px; }
.pkg-pick .cell.pick:disabled { opacity: .5; cursor: default; }
.pkg-pick .check-box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line-strong, var(--line)); display: grid; place-items: center; flex: none; margin-left: auto; color: var(--action-ink); }
.pkg-pick .cell.pick.on .check-box { background: var(--action-fill); border-color: var(--action-fill); }
.pkg-pick .check-box svg { width: 16px; height: 16px; }
.pkg-price .t-price { margin-top: 4px; }
.pkg-price .badge { margin: 0; }
.pkg-note { margin-top: 12px; }
.pkg-note .pkg-chans { margin-top: 10px; box-shadow: none; }
.pkg-note .pkg-chans .cell.on { background: var(--surface-2); }
.pkg-card .btn-row { display: flex; gap: 8px; align-items: center; }
.pkg-card .btn-row .btn { flex: 1; }
.pkg-card .btn-row .icon-btn { width: 44px; height: 44px; }

/* ---------- Точное время публикации ---------- */
.sched-mode button { font-size: 14px; }
.time-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.time-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px 0 14px; border-radius: 12px; border: 0; background: var(--action-fill); color: var(--action-ink); font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; }
.time-chip svg { width: 15px; height: 15px; opacity: .8; }
.add-time { gap: 8px; }
.add-time .input { flex: 1; }
.add-time .btn { flex: none; }
.opt-chips.suggest { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }

/* аватар канала: фото поверх буквы (не загрузилось — видна буква) */
.ch-avatar { position: relative; overflow: hidden; }
.ch-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Уточнение оценки канала ---------- */
.refine-note { display: flex; align-items: center; gap: 12px; margin-top: 12px; width: 100%; text-align: left; font: inherit; color: inherit; }
.refine-note > svg { width: 22px; height: 22px; flex: none; color: var(--action); }
.refine-note.go { cursor: pointer; border: 1px solid var(--lamp, var(--action-fill)); }
.refine-note b { display: block; }

/* ---------- Отчёт оценки: подписчики по дням ---------- */
.subs-card .big-num { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.g-chips { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.g-chip { display: flex; gap: 6px; align-items: baseline; font-size: 12.5px; color: var(--muted); }
.g-chip b { font-size: 14px; color: var(--text); }
.g-chip.up b, .subs-table .d.up { color: var(--green, #2e9e5b); }
.g-chip.down b, .subs-table .d.down { color: var(--red, #e5484d); }
.subs-chart { margin-top: 12px; height: 110px; }
.subs-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.subs-chart .area { fill: var(--lamp-soft, rgba(255, 149, 0, .18)); }
.subs-chart .ln { fill: none; stroke: var(--action-fill, #ff9500); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.subs-table { margin-top: 12px; border-top: 1px solid var(--line); }
.subs-table .row { padding: 7px 0; border-bottom: 1px solid var(--line); gap: 12px; font-size: 14px; }
.subs-table .d { min-width: 60px; text-align: right; font-weight: 700; font-size: 13px; color: var(--muted); }
.chart.hours { height: 70px; }
.ch-line .ch-avatar { margin-right: 10px; }

/* ---------- Функции Pro: замок и «Доступно в Pro» ---------- */
.pro-chip { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 2px 7px 2px 5px; border-radius: 99px; background: var(--action-soft); color: var(--action); font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: 2px; white-space: nowrap; }
.pro-chip svg { width: 11px; height: 11px; stroke-width: 2.4; }
.switch.locked i { background: var(--surface-3); opacity: .55; }
.switch.locked i::after { content: ""; }
.pro-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pro-card-head .pro-chip { margin-left: 0; }
.pro-card p { margin: 8px 0 0; }
.cmp .v svg { width: 16px; height: 16px; vertical-align: -3px; }
.cmp .v.muted { color: var(--muted, #8a8a8a); opacity: .7; }
.tile-ico.ok { background: var(--green-bg); color: var(--green); }
.earned-row { margin-top: 12px; }
.earned-row .v { color: var(--green); }
.earned-hero { text-align: left; }
.opt-price.ok { color: var(--green); }
.earned-sum { font-size: 32px; font-weight: 800; letter-spacing: -.01em; margin: 2px 0 6px; color: var(--green); }

/* ---------- Оформление канала (функция Pro): цвет и фон витрины, страниц и отчёта ---------- */
:root[data-brand="orange"] { --bg: #f6f2ea; --blob-1: rgba(255, 149, 0, 0.30); --blob-2: rgba(255, 186, 89, 0.26); --blob-3: rgba(204, 119, 0, 0.13); --blob-4: rgba(255, 186, 89, 0.24); --action: #a65200; --action-fill: #ff9500; --action-press: #ff7a00; --action-ink: #16120d; --action-soft: rgba(255, 149, 0, 0.15); --action-glow: rgba(255, 149, 0, 0.32); --lamp: #ff9500; --lamp-ink: #a65200; --lamp-soft: rgba(255, 149, 0, 0.18); }
:root[data-brand="orange"][data-theme="dark"] { --bg: #09090a; --blob-1: rgba(255, 149, 0, 0.20); --blob-2: rgba(255, 186, 89, 0.09); --blob-3: rgba(204, 119, 0, 0.08); --blob-4: rgba(255, 149, 0, 0.10); --action: #ffa733; --action-fill: #ff9500; --action-press: #ff7a00; --action-ink: #16120d; --action-soft: rgba(255, 149, 0, 0.17); --action-glow: rgba(255, 149, 0, 0.28); --lamp: #ff9500; --lamp-ink: #ffa733; --lamp-soft: rgba(255, 149, 0, 0.18); }
@media (prefers-color-scheme: dark) { :root[data-brand="orange"]:not([data-theme="light"]) { --bg: #09090a; --blob-1: rgba(255, 149, 0, 0.20); --blob-2: rgba(255, 186, 89, 0.09); --blob-3: rgba(204, 119, 0, 0.08); --blob-4: rgba(255, 149, 0, 0.10); --action: #ffa733; --action-fill: #ff9500; --action-press: #ff7a00; --action-ink: #16120d; --action-soft: rgba(255, 149, 0, 0.17); --action-glow: rgba(255, 149, 0, 0.28); --lamp: #ffa733; --lamp-ink: #ffa733; --lamp-soft: rgba(255, 149, 0, 0.18); } }
:root[data-brand="blue"] { --bg: #f1f4f9; --blob-1: rgba(76, 157, 255, 0.30); --blob-2: rgba(139, 191, 255, 0.26); --blob-3: rgba(61, 126, 204, 0.13); --blob-4: rgba(139, 191, 255, 0.24); --action: #1d5fbf; --action-fill: #4c9dff; --action-press: #3b8af0; --action-ink: #08121f; --action-soft: rgba(76, 157, 255, 0.15); --action-glow: rgba(76, 157, 255, 0.32); --lamp: #4c9dff; --lamp-ink: #1d5fbf; --lamp-soft: rgba(76, 157, 255, 0.18); }
:root[data-brand="blue"][data-theme="dark"] { --bg: #08090d; --blob-1: rgba(76, 157, 255, 0.20); --blob-2: rgba(139, 191, 255, 0.09); --blob-3: rgba(61, 126, 204, 0.08); --blob-4: rgba(76, 157, 255, 0.10); --action: #7ab6ff; --action-fill: #4c9dff; --action-press: #3b8af0; --action-ink: #08121f; --action-soft: rgba(76, 157, 255, 0.17); --action-glow: rgba(76, 157, 255, 0.28); --lamp: #4c9dff; --lamp-ink: #7ab6ff; --lamp-soft: rgba(76, 157, 255, 0.18); }
@media (prefers-color-scheme: dark) { :root[data-brand="blue"]:not([data-theme="light"]) { --bg: #08090d; --blob-1: rgba(76, 157, 255, 0.20); --blob-2: rgba(139, 191, 255, 0.09); --blob-3: rgba(61, 126, 204, 0.08); --blob-4: rgba(76, 157, 255, 0.10); --action: #7ab6ff; --action-fill: #4c9dff; --action-press: #3b8af0; --action-ink: #08121f; --action-soft: rgba(76, 157, 255, 0.17); --action-glow: rgba(76, 157, 255, 0.28); --lamp: #7ab6ff; --lamp-ink: #7ab6ff; --lamp-soft: rgba(76, 157, 255, 0.18); } }
:root[data-brand="green"] { --bg: #f0f6f2; --blob-1: rgba(52, 199, 123, 0.30); --blob-2: rgba(123, 219, 169, 0.26); --blob-3: rgba(42, 159, 98, 0.13); --blob-4: rgba(123, 219, 169, 0.24); --action: #0f7a45; --action-fill: #34c77b; --action-press: #29b26b; --action-ink: #062012; --action-soft: rgba(52, 199, 123, 0.15); --action-glow: rgba(52, 199, 123, 0.32); --lamp: #34c77b; --lamp-ink: #0f7a45; --lamp-soft: rgba(52, 199, 123, 0.18); }
:root[data-brand="green"][data-theme="dark"] { --bg: #080a09; --blob-1: rgba(52, 199, 123, 0.20); --blob-2: rgba(123, 219, 169, 0.09); --blob-3: rgba(42, 159, 98, 0.08); --blob-4: rgba(52, 199, 123, 0.10); --action: #5fe0a0; --action-fill: #34c77b; --action-press: #29b26b; --action-ink: #062012; --action-soft: rgba(52, 199, 123, 0.17); --action-glow: rgba(52, 199, 123, 0.28); --lamp: #34c77b; --lamp-ink: #5fe0a0; --lamp-soft: rgba(52, 199, 123, 0.18); }
@media (prefers-color-scheme: dark) { :root[data-brand="green"]:not([data-theme="light"]) { --bg: #080a09; --blob-1: rgba(52, 199, 123, 0.20); --blob-2: rgba(123, 219, 169, 0.09); --blob-3: rgba(42, 159, 98, 0.08); --blob-4: rgba(52, 199, 123, 0.10); --action: #5fe0a0; --action-fill: #34c77b; --action-press: #29b26b; --action-ink: #062012; --action-soft: rgba(52, 199, 123, 0.17); --action-glow: rgba(52, 199, 123, 0.28); --lamp: #5fe0a0; --lamp-ink: #5fe0a0; --lamp-soft: rgba(52, 199, 123, 0.18); } }
:root[data-brand="purple"] { --bg: #f4f2f9; --blob-1: rgba(169, 139, 255, 0.30); --blob-2: rgba(199, 180, 255, 0.26); --blob-3: rgba(135, 111, 204, 0.13); --blob-4: rgba(199, 180, 255, 0.24); --action: #6440d0; --action-fill: #a98bff; --action-press: #9877f5; --action-ink: #160d2b; --action-soft: rgba(169, 139, 255, 0.15); --action-glow: rgba(169, 139, 255, 0.32); --lamp: #a98bff; --lamp-ink: #6440d0; --lamp-soft: rgba(169, 139, 255, 0.18); }
:root[data-brand="purple"][data-theme="dark"] { --bg: #0a090d; --blob-1: rgba(169, 139, 255, 0.20); --blob-2: rgba(199, 180, 255, 0.09); --blob-3: rgba(135, 111, 204, 0.08); --blob-4: rgba(169, 139, 255, 0.10); --action: #c3adff; --action-fill: #a98bff; --action-press: #9877f5; --action-ink: #160d2b; --action-soft: rgba(169, 139, 255, 0.17); --action-glow: rgba(169, 139, 255, 0.28); --lamp: #a98bff; --lamp-ink: #c3adff; --lamp-soft: rgba(169, 139, 255, 0.18); }
@media (prefers-color-scheme: dark) { :root[data-brand="purple"]:not([data-theme="light"]) { --bg: #0a090d; --blob-1: rgba(169, 139, 255, 0.20); --blob-2: rgba(199, 180, 255, 0.09); --blob-3: rgba(135, 111, 204, 0.08); --blob-4: rgba(169, 139, 255, 0.10); --action: #c3adff; --action-fill: #a98bff; --action-press: #9877f5; --action-ink: #160d2b; --action-soft: rgba(169, 139, 255, 0.17); --action-glow: rgba(169, 139, 255, 0.28); --lamp: #c3adff; --lamp-ink: #c3adff; --lamp-soft: rgba(169, 139, 255, 0.18); } }
:root[data-brand="pink"] { --bg: #f9f1f4; --blob-1: rgba(255, 126, 182, 0.30); --blob-2: rgba(255, 171, 208, 0.26); --blob-3: rgba(204, 101, 146, 0.13); --blob-4: rgba(255, 171, 208, 0.24); --action: #b8285f; --action-fill: #ff7eb6; --action-press: #f66aa6; --action-ink: #2b0a18; --action-soft: rgba(255, 126, 182, 0.15); --action-glow: rgba(255, 126, 182, 0.32); --lamp: #ff7eb6; --lamp-ink: #b8285f; --lamp-soft: rgba(255, 126, 182, 0.18); }
:root[data-brand="pink"][data-theme="dark"] { --bg: #0c090a; --blob-1: rgba(255, 126, 182, 0.20); --blob-2: rgba(255, 171, 208, 0.09); --blob-3: rgba(204, 101, 146, 0.08); --blob-4: rgba(255, 126, 182, 0.10); --action: #ff9cc8; --action-fill: #ff7eb6; --action-press: #f66aa6; --action-ink: #2b0a18; --action-soft: rgba(255, 126, 182, 0.17); --action-glow: rgba(255, 126, 182, 0.28); --lamp: #ff7eb6; --lamp-ink: #ff9cc8; --lamp-soft: rgba(255, 126, 182, 0.18); }
@media (prefers-color-scheme: dark) { :root[data-brand="pink"]:not([data-theme="light"]) { --bg: #0c090a; --blob-1: rgba(255, 126, 182, 0.20); --blob-2: rgba(255, 171, 208, 0.09); --blob-3: rgba(204, 101, 146, 0.08); --blob-4: rgba(255, 126, 182, 0.10); --action: #ff9cc8; --action-fill: #ff7eb6; --action-press: #f66aa6; --action-ink: #2b0a18; --action-soft: rgba(255, 126, 182, 0.17); --action-glow: rgba(255, 126, 182, 0.28); --lamp: #ff9cc8; --lamp-ink: #ff9cc8; --lamp-soft: rgba(255, 126, 182, 0.18); } }
:root[data-brand="red"] { --bg: #f9f2f0; --blob-1: rgba(255, 107, 94, 0.30); --blob-2: rgba(255, 159, 150, 0.26); --blob-3: rgba(204, 86, 75, 0.13); --blob-4: rgba(255, 159, 150, 0.24); --action: #bd3426; --action-fill: #ff6b5e; --action-press: #f5584b; --action-ink: #2a0906; --action-soft: rgba(255, 107, 94, 0.15); --action-glow: rgba(255, 107, 94, 0.32); --lamp: #ff6b5e; --lamp-ink: #bd3426; --lamp-soft: rgba(255, 107, 94, 0.18); }
:root[data-brand="red"][data-theme="dark"] { --bg: #0c0909; --blob-1: rgba(255, 107, 94, 0.20); --blob-2: rgba(255, 159, 150, 0.09); --blob-3: rgba(204, 86, 75, 0.08); --blob-4: rgba(255, 107, 94, 0.10); --action: #ff8f85; --action-fill: #ff6b5e; --action-press: #f5584b; --action-ink: #2a0906; --action-soft: rgba(255, 107, 94, 0.17); --action-glow: rgba(255, 107, 94, 0.28); --lamp: #ff6b5e; --lamp-ink: #ff8f85; --lamp-soft: rgba(255, 107, 94, 0.18); }
@media (prefers-color-scheme: dark) { :root[data-brand="red"]:not([data-theme="light"]) { --bg: #0c0909; --blob-1: rgba(255, 107, 94, 0.20); --blob-2: rgba(255, 159, 150, 0.09); --blob-3: rgba(204, 86, 75, 0.08); --blob-4: rgba(255, 107, 94, 0.10); --action: #ff8f85; --action-fill: #ff6b5e; --action-press: #f5584b; --action-ink: #2a0906; --action-soft: rgba(255, 107, 94, 0.17); --action-glow: rgba(255, 107, 94, 0.28); --lamp: #ff8f85; --lamp-ink: #ff8f85; --lamp-soft: rgba(255, 107, 94, 0.18); } }
:root[data-brand="teal"] { --bg: #eff6f6; --blob-1: rgba(46, 197, 201, 0.30); --blob-2: rgba(119, 217, 220, 0.26); --blob-3: rgba(37, 158, 161, 0.13); --blob-4: rgba(119, 217, 220, 0.24); --action: #0f767a; --action-fill: #2ec5c9; --action-press: #22b2b6; --action-ink: #04201f; --action-soft: rgba(46, 197, 201, 0.15); --action-glow: rgba(46, 197, 201, 0.32); --lamp: #2ec5c9; --lamp-ink: #0f767a; --lamp-soft: rgba(46, 197, 201, 0.18); }
:root[data-brand="teal"][data-theme="dark"] { --bg: #080b0b; --blob-1: rgba(46, 197, 201, 0.20); --blob-2: rgba(119, 217, 220, 0.09); --blob-3: rgba(37, 158, 161, 0.08); --blob-4: rgba(46, 197, 201, 0.10); --action: #5fe3e6; --action-fill: #2ec5c9; --action-press: #22b2b6; --action-ink: #04201f; --action-soft: rgba(46, 197, 201, 0.17); --action-glow: rgba(46, 197, 201, 0.28); --lamp: #2ec5c9; --lamp-ink: #5fe3e6; --lamp-soft: rgba(46, 197, 201, 0.18); }
@media (prefers-color-scheme: dark) { :root[data-brand="teal"]:not([data-theme="light"]) { --bg: #080b0b; --blob-1: rgba(46, 197, 201, 0.20); --blob-2: rgba(119, 217, 220, 0.09); --blob-3: rgba(37, 158, 161, 0.08); --blob-4: rgba(46, 197, 201, 0.10); --action: #5fe3e6; --action-fill: #2ec5c9; --action-press: #22b2b6; --action-ink: #04201f; --action-soft: rgba(46, 197, 201, 0.17); --action-glow: rgba(46, 197, 201, 0.28); --lamp: #5fe3e6; --lamp-ink: #5fe3e6; --lamp-soft: rgba(46, 197, 201, 0.18); } }
:root[data-brand="gold"] { --bg: #f7f4e8; --blob-1: rgba(245, 197, 66, 0.30); --blob-2: rgba(248, 217, 132, 0.26); --blob-3: rgba(196, 158, 53, 0.13); --blob-4: rgba(248, 217, 132, 0.24); --action: #7d6000; --action-fill: #f5c542; --action-press: #e8b62f; --action-ink: #241b02; --action-soft: rgba(245, 197, 66, 0.15); --action-glow: rgba(245, 197, 66, 0.32); --lamp: #f5c542; --lamp-ink: #7d6000; --lamp-soft: rgba(245, 197, 66, 0.18); }
:root[data-brand="gold"][data-theme="dark"] { --bg: #0b0a07; --blob-1: rgba(245, 197, 66, 0.20); --blob-2: rgba(248, 217, 132, 0.09); --blob-3: rgba(196, 158, 53, 0.08); --blob-4: rgba(245, 197, 66, 0.10); --action: #ffd866; --action-fill: #f5c542; --action-press: #e8b62f; --action-ink: #241b02; --action-soft: rgba(245, 197, 66, 0.17); --action-glow: rgba(245, 197, 66, 0.28); --lamp: #f5c542; --lamp-ink: #ffd866; --lamp-soft: rgba(245, 197, 66, 0.18); }
@media (prefers-color-scheme: dark) { :root[data-brand="gold"]:not([data-theme="light"]) { --bg: #0b0a07; --blob-1: rgba(245, 197, 66, 0.20); --blob-2: rgba(248, 217, 132, 0.09); --blob-3: rgba(196, 158, 53, 0.08); --blob-4: rgba(245, 197, 66, 0.10); --action: #ffd866; --action-fill: #f5c542; --action-press: #e8b62f; --action-ink: #241b02; --action-soft: rgba(245, 197, 66, 0.17); --action-glow: rgba(245, 197, 66, 0.28); --lamp: #ffd866; --lamp-ink: #ffd866; --lamp-soft: rgba(245, 197, 66, 0.18); } }
/* стиль фона: свечение (по умолчанию), мягкий градиент, чистый, точки, линии */
:root[data-bg="soft"] body::before { background: linear-gradient(180deg, var(--blob-1) 0%, var(--blob-4) 28%, transparent 62%); }
:root[data-bg="plain"] body::before { background: none; }
:root[data-bg="dots"] body::before { background: radial-gradient(circle, var(--blob-1) 1.3px, transparent 1.7px) 0 0 / 18px 18px; }
:root[data-bg="lines"] body::before { background: repeating-linear-gradient(135deg, var(--blob-1) 0 1px, transparent 1px 16px); }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; justify-items: center; }
.swatch { width: 52px; height: 52px; border-radius: 50%; border: 3px solid transparent; display: grid; place-items: center; color: #16120d; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.swatch.on { border-color: var(--text); }
.swatch svg { width: 22px; height: 22px; stroke-width: 3; }
.bg-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.bg-opt { border-radius: 14px; border: 2px solid var(--line-strong); padding: 0; overflow: hidden; background: var(--glass-strong); text-align: center; }
.bg-opt.on { border-color: var(--action-fill); box-shadow: 0 0 0 3px var(--action-soft); }
.bg-opt i { display: block; height: 58px; background-color: var(--bg); }
.bg-opt span { display: block; padding: 6px 4px 8px; font-size: 13px; font-weight: 600; }
.bg-opt i.glow { background-image: radial-gradient(60% 60% at 15% 10%, var(--blob-1), transparent 70%), radial-gradient(60% 60% at 90% 90%, var(--blob-4), transparent 70%); }
.bg-opt i.soft { background-image: linear-gradient(180deg, var(--blob-1), transparent 85%); }
.bg-opt i.dots { background-image: radial-gradient(circle, var(--blob-1) 1.3px, transparent 1.7px); background-size: 12px 12px; }
.bg-opt i.lines { background-image: repeating-linear-gradient(135deg, var(--blob-1) 0 1px, transparent 1px 10px); }
/* ещё фоны: сетка, волны, закат, мозаика, круги */
:root[data-bg="grid"] body::before { background: linear-gradient(var(--blob-1) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--blob-1) 1px, transparent 1px) 0 0 / 22px 22px; }
:root[data-bg="waves"] body::before { background: radial-gradient(circle at 50% 0, transparent 46%, var(--blob-1) 48%, transparent 52%) 0 0 / 44px 22px; }
:root[data-bg="sunset"] body::before { background: radial-gradient(120% 55% at 50% 100%, var(--blob-1), transparent 70%), radial-gradient(70% 35% at 50% 100%, var(--blob-4), transparent 70%); }
:root[data-bg="mesh"] body::before { background: radial-gradient(50% 40% at 0% 0%, var(--blob-1), transparent 70%), radial-gradient(50% 40% at 100% 0%, var(--blob-4), transparent 70%), radial-gradient(55% 45% at 100% 55%, var(--blob-2), transparent 70%), radial-gradient(55% 45% at 0% 70%, var(--blob-1), transparent 70%), radial-gradient(60% 45% at 60% 100%, var(--blob-4), transparent 70%); }
:root[data-bg="rings"] body::before { background: repeating-radial-gradient(circle at 88% 6%, var(--blob-1) 0 1px, transparent 1.5px 26px); }
.bg-opt i.grid { background-image: linear-gradient(var(--blob-1) 1px, transparent 1px), linear-gradient(90deg, var(--blob-1) 1px, transparent 1px); background-size: 12px 12px; }
.bg-opt i.waves { background-image: radial-gradient(circle at 50% 0, transparent 46%, var(--blob-1) 48%, transparent 52%); background-size: 24px 12px; }
.bg-opt i.sunset { background-image: radial-gradient(120% 70% at 50% 100%, var(--blob-1), transparent 75%); }
.bg-opt i.mesh { background-image: radial-gradient(60% 60% at 0 0, var(--blob-1), transparent 70%), radial-gradient(60% 60% at 100% 30%, var(--blob-2), transparent 70%), radial-gradient(60% 60% at 30% 100%, var(--blob-4), transparent 70%); }
.bg-opt i.rings { background-image: repeating-radial-gradient(circle at 90% 0, var(--blob-1) 0 1px, transparent 1.5px 12px); }
/* скругления и шрифт заголовков */
:root[data-radius="sharp"] { --radius: 10px; --radius-sm: 7px; }
:root[data-font="serif"] h1, :root[data-font="serif"] h2 { font-family: "Lora", Georgia, serif; letter-spacing: -0.01em; }
:root[data-font="rounded"] h1, :root[data-font="rounded"] h2 { font-family: "Nunito", var(--font); letter-spacing: -0.01em; }
.opt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-pair button { border-radius: 14px; border: 2px solid var(--line-strong); background: var(--glass-strong); padding: 12px 8px; font-weight: 650; }
.opt-pair button.on { border-color: var(--action-fill); box-shadow: 0 0 0 3px var(--action-soft); }
.opt-pair.three { grid-template-columns: repeat(3, 1fr); }
.opt-pair .serif { font-family: "Lora", Georgia, serif; }
.opt-pair .rounded { font-family: "Nunito", var(--font); }
/* горящее время на витрине */
.slot.hot { border-color: var(--action-fill); background: var(--action-soft); display: grid; gap: 1px; justify-items: center; }
.hot-tag { font-size: 11px; font-weight: 700; color: var(--action); }
.hot-note { margin: 10px 2px 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--action-soft); color: var(--text); font-size: 14px; font-weight: 600; }