/* Сайт АЛИ МОНТАЖ — вид и темы как в приложении АЛИ МОНТАЖ («Кинозал», её выбор 06.10.2026). 22.10.2026, её слово:
   «как в приложении… то же самое нужно сделать на сайте».
   Значения — ровно из kinozal.css приложения (/t016/ui-kinozal-fix-20261006/kinozal.css, разделы 1, 3, 6, 9, 11):
   «Свет» (тёмная / светлая) и «Цвет интерфейса» (оранжевый / розовый / синий / зелёный). Файлы оформления приложения сюда
   НЕ подключаются (их правила для голых тегов и совпавшие классы .brand, .toast ломают сайт) — перенесены знаки и приёмы.
   Подключается ПОСЛЕ app.css. Атрибуты data-theme и data-palette на <html> ставит /site/tema.js до первой отрисовки.
   Без Google Fonts и без встроенных стилей (CSP default-src 'self').
   Знаки: --acc — кольцо выбора и рамки (в приложении --kz-acc), --acc-text — акцентный текст и ссылки (--kz-acc-text),
   --solid — сплошной цвет кнопки и тени (--kz-solid), --grad — градиент кнопки (--kz-grad), --acc-hi — акцент на всегда
   тёмной карточке «Вы сказали / В ролике» (как --acc тёмной темы, светлая тема его не меняет). */

/* ---------- 1. Тёмная (умолчание, как у приложения) + розовый ---------- */
:root {
  --bg: #201C1F; --surface: #302A2E; --surface-2: #3C3238; --sheet: #2A2428; --line: #4A3F46;
  --text: #FAF6F8; --muted: #CBBFC5;
  --acc: #F52380; --acc-text: #FF94C2; --solid: #F52380; --acc-hi: #F52380;
  --grad: linear-gradient(120deg, #F57E1E 0%, #F52380 100%);
  --grad-text: var(--grad);
  --ok: #5FD49A; --on-ok: #10251A; --bad: #FF8A8F;
  --warn: #F2B84B; --warn-bg: #3A2F1C; --warn-ink: #F6E2BC;
  --mark: #F3E650;
  --input-bg: #191518; --scrim: rgba(12, 9, 11, .72); --shadow: rgba(0, 0, 0, .6);
  color-scheme: dark;
}
/* ---------- 2. Светлая ---------- */
:root[data-theme="light"] {
  --bg: #FFFFFF; --surface: #FAF8F9; --surface-2: #F1ECEF; --sheet: #FFFFFF; --line: #E7E1E4;
  --text: #292528; --muted: #71686D; --acc-text: #C90D60;
  --ok: #13784C; --on-ok: #FFFFFF; --bad: #C4203A;
  --warn: #9A5F00; --warn-bg: #FFF3DC; --warn-ink: #5C3A00;
  --input-bg: #FFFFFF; --scrim: rgba(41, 37, 40, .42); --shadow: rgba(41, 37, 40, .18);
  color-scheme: light;
}
/* ---------- 3. «Цвет интерфейса» (kinozal.css:38–43). Синий и зелёный градиенты уходят в почти чёрный — надпись-градиент
   на фоне у них сплошным акцентным цветом (--grad-text), иначе её конец не виден ---------- */
:root[data-palette="orange"] { --acc: #F57E1E; --acc-text: #FFB77E; --solid: #F57E1E; --acc-hi: #F57E1E; --grad: linear-gradient(120deg, #F52380 0%, #F57E1E 100%); }
:root[data-palette="blue"] { --acc: #A8BAFF; --acc-text: #A8BAFF; --solid: #1744D9; --acc-hi: #A8BAFF; --grad: linear-gradient(110deg, #1744D9 0%, #001B9A 40%, #050920 100%); --grad-text: linear-gradient(var(--acc-text), var(--acc-text)); }
:root[data-palette="green"] { --acc: #A6DF78; --acc-text: #A6DF78; --solid: #56B305; --acc-hi: #A6DF78; --grad: linear-gradient(110deg, #56B305 0%, #2B6B1C 44%, #082A18 100%); --grad-text: linear-gradient(var(--acc-text), var(--acc-text)); }
:root[data-theme="light"][data-palette="orange"] { --acc-text: #A54406; }
:root[data-theme="light"][data-palette="blue"] { --acc: #001B9A; --acc-text: #001B9A; }
:root[data-theme="light"][data-palette="green"] { --acc: #56B305; --acc-text: #357100; }

/* «Вы сказали / В ролике» — это кадр ролика: в светлой теме остаётся тёмным (жёлтое слово на белом не читается) */
:root[data-theme="light"] .card.said {
  --surface: #201C1F; --line: #4A3F46; --text: #FAF6F8; --muted: #CBBFC5;
  background: var(--surface); border-color: var(--line); color: var(--text);
}

/* ---------- 4. Шапка: солнце / луна и палитра справа, как .header-actions приложения (кнопки 40×40) ---------- */
.bar-end { display: flex; align-items: center; gap: 2px; min-width: 0; }
.bar-end .who { margin-left: 8px; }
.vid-icon {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 12px; background: none; color: var(--text);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
@media (hover: hover) { .vid-icon:hover { color: var(--acc-text); } }   /* на телефоне цвет после касания не залипает */
.vid-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* тёмная — солнце («включить светлую»), светлая — луна (app-v2.js applyAppearance) */
.vid-icon .moon { display: none; }
:root[data-theme="light"] .vid-icon .sun { display: none; }
:root[data-theme="light"] .vid-icon .moon { display: block; }
.brand b { white-space: nowrap; }
/* телефон: название в одну строку рядом с солнцем, палитрой и «Войти» / «Профиль» (на 375 px с «Профиль» — запас 4 px) */
@media (max-width: 420px) {
  .bar { gap: 6px; }
  .brand { gap: 8px; }
  .logo { width: 30px; height: 30px; border-radius: 9px; }
  .brand b { font-size: 13px; letter-spacing: .02em; }
  .vid-icon { width: 34px; height: 34px; }
  .bar-end { gap: 0; }
  .bar-end .who { margin-left: 2px; padding: 0 10px; gap: 5px; font-size: 13px; }
  .bar-end .who svg { width: 15px; height: 15px; }
}
/* 360 px (частый Android) */
@media (max-width: 374px) {
  .brand { gap: 6px; }
  .logo { width: 26px; height: 26px; border-radius: 8px; }
  .logo svg { width: 12px; height: 12px; }
  .brand b { font-size: 12px; }
}
/* самые узкие телефоны (320 px): у «Войти» / «Профиль» остаётся значок, слово — для чтеца экрана */
@media (max-width: 349px) {
  .bar-end .who { padding: 0; width: 40px; justify-content: center; }
  .bar-end .who span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- 5. Нижние вкладки: выбранная — цветом текста, жирнее и полоской градиента 16×3 (kinozal.css § 6) ---------- */
.tab::after { content: ""; width: 16px; height: 3px; border-radius: 2px; background: transparent; }
.tab[aria-current="page"] { color: var(--text); font-weight: 600; }
.tab[aria-current="page"] svg { stroke: currentColor; }
.tab[aria-current="page"]::after { background: var(--grad); }

/* ---------- 6. Окно «Как вам нравится» (kinozal.css § 9 и «Как вам нравится»; без «Настроек матового стекла») ---------- */
.vid-sheet {
  width: min(460px, calc(100% - 22px)); max-width: calc(100% - 22px); max-height: calc(100dvh - 28px); overflow: auto;
  padding: 23px; border: 0; border-radius: 24px; background: var(--sheet); color: var(--text); box-shadow: none;
  overscroll-behavior: contain;
}
.vid-sheet::backdrop { background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vid-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.vid-head .vid-icon { width: 36px; height: 36px; margin: -4px -6px 0 0; }
.vid-eyebrow { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .06em; color: var(--muted); font-weight: 500; }
.vid-sheet h2 { font-size: 21px; line-height: 1.15; }
.vid-sheet h3 { font: 600 14px/1.3 var(--body); letter-spacing: 0; margin: 22px 0 11px; }
.vid-desc { color: var(--muted); font-size: 14px; line-height: 1.6; }
.vid-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vid-seg button, .vid-pals button {
  border: 0; border-radius: 14px; background: var(--surface); color: var(--text); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px transparent;
}
.vid-seg button { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 9px; font: 600 15px/1.2 var(--body); }
.vid-seg svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vid-seg button[aria-pressed="true"], .vid-pals button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--acc); }
.vid-pals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vid-pals button { position: relative; padding: 12px; display: flex; flex-direction: column; gap: 5px; text-align: left; min-width: 0; }
.vid-pals b { font-size: 14px; font-weight: 600; }
.vid-pals small { color: var(--muted); font-size: 12px; font-weight: 500; }
.vid-pals svg {
  display: none; position: absolute; right: 20px; top: 24px; width: 16px; height: 16px;
  fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.vid-pals button[aria-pressed="true"] svg { display: block; }
.vid-sw { display: block; height: 43px; width: 100%; border-radius: 8px; margin-bottom: 4px; }
.vid-sw.orange { background: linear-gradient(120deg, #F52380, #F57E1E); }
.vid-sw.pink { background: linear-gradient(120deg, #F57E1E, #F52380); }
.vid-sw.blue { background: linear-gradient(110deg, #1744D9, #001B9A 40%, #050920); }
.vid-sw.green { background: linear-gradient(110deg, #56B305, #2B6B1C 44%, #082A18); }
.vid-sheet .btn { margin-top: 24px; }
.vid-sheet .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 7. Профиль: строка «Оформление» (как .menu-row приложения, kinozal.css § 11) ---------- */
.menu-row {
  display: grid; grid-template-columns: 22px 1fr 18px; align-items: center; gap: 12px; width: 100%; min-height: 60px;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); color: var(--text);
}
.menu-row svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-row .menu-icon { width: 22px; height: 22px; color: var(--acc-text); }
.menu-row .menu-go { width: 18px; height: 18px; color: var(--muted); }
.menu-row span { display: grid; gap: 2px; min-width: 0; }
.menu-row b { font-size: 15.5px; font-weight: 600; }
.menu-row small { color: var(--muted); font-size: 13px; }