/* ============================================================
   glass.css — тема «Hushpeak Cinema» (тёмная нейтральная + синий).
   Реализует palette-override из эталона Hushpeak Cinema.html:
   почти-чёрный фон, бело-серый текст, ЕДИНСТВЕННЫЙ акцент — синий
   #0071E3 (действия/CTA), ч/б фотографии, матовое стекло. Без вина,
   без светлой темы, без цветных свечений.
   Грузится после theme.css и ds/ds.css; маппит токены DS на легаси-
   имена компонентов и перестилизовывает классы.
   ============================================================ */

:root {
  /* ── PALETTE OVERRIDE (репойнт токенов DS) ── */
  --brand-primary:        #0071E3;
  --brand-primary-hover:  #0A84FF;
  --brand-primary-press:  #0064C8;
  --brand-on-primary:     #FFFFFF;
  --live:        #0071E3;
  --live-bright: #0A84FF;
  --live-soft:   rgba(0,113,227,0.14);
  --liquid-300:  #3D93EA;
  --liquid-400:  #0071E3;
  --liquid-500:  #0071E3;
  --focus-ring:  #0A84FF;

  /* вино → нейтральные холодные серые / белый */
  --wine-100: #EDF1F6; --wine-200: #FFFFFF; --wine-300: #DCE3EC;
  --wine-400: rgba(255,255,255,0.55); --wine-500: #0071E3;
  --wine-600: rgba(255,255,255,0.22); --wine-700: rgba(255,255,255,0.16);
  --wine-800: rgba(255,255,255,0.10); --wine-900: #15161A; --wine-950: #0C0D10;

  --text-accent:       rgba(255,255,255,0.60);
  --glass-tint-liquid: rgba(255,255,255,0.10);
  --glow-aqua:  0 0 0 0 rgba(0,0,0,0);
  --glow-coral: 0 0 0 0 rgba(0,0,0,0);

  /* графитовая сцена без оксблада */
  --scene-abyss:#08080A; --scene-indigo:#0E0E12; --scene-tide:#0F0F13;
  --scene-twilight:#131318; --scene-aurora:#1A1A1F; --scene-alpenglow:#26262C; --scene-blush:#34343B;

  /* ── МОСТ → легаси-имена компонентов (тёмная тема) ── */
  --page:        #08080A;
  --bg:          #08080A;
  --stage:       #08080A;
  --ink:         var(--mist-50);
  --ink-2:       rgba(255,255,255,0.62);
  --ink-3:       rgba(255,255,255,0.40);
  --black:       #fff;
  --hair:        var(--white-08);
  --hair-strong: var(--white-18);
  --surface:     rgba(255,255,255,0.06);
  --surface-2:   rgba(255,255,255,0.12);

  --blue:         #0071E3;
  --blue-press:   #0064C8;
  --blue-soft:    rgba(0,113,227,0.16);
  --blue-soft-tx: #3D93EA;

  --success:     #F6F5F3;             /* «куплено» — нейтральный белый, без зелёного */
  --success-bg:  rgba(255,255,255,0.10);
  --notify:      #FF5A52;
  --scrim:       rgba(6,5,6,0.62);

  --r-card:  var(--radius-lg);
  --r-modal: var(--radius-xl);
  --r-btn:   var(--radius-pill);
  --r-input: 14px;
  --r-pill:  var(--radius-pill);

  --font:    var(--font-sans);
  --ease:    var(--ease-out);
  --dur:     var(--dur-base);
  --dur-q:   var(--dur-fast);
  --shadow-card:  var(--shadow-md);
  --shadow-pop:   var(--shadow-lg);
  --shadow-modal: var(--shadow-xl);
}

/* ── тёмная сцена ── */
html { background: #08080A; }
body {
  background-color: #0A0A0B;
  background-image:
    radial-gradient(120% 90% at 50% -12%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, #121317 0%, #0B0B0D 58%, #060607 100%);
  background-attachment: fixed;
  color: var(--mist-50);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
#root, .app-root { background: transparent; min-height: 100vh; }
#boot { background: #0A0A0B !important; color: rgba(255,255,255,0.4) !important; }

/* фотографии — ч/б (логотипы-SVG исключены) */
#root img:not([src$=".svg"]) { filter: grayscale(1) contrast(1.05) brightness(0.98); }

/* ── стеклянные поверхности (тёмное стекло) ── */
.glass {
  background: var(--glass-regular);
  -webkit-backdrop-filter: var(--glass-filter-md); backdrop-filter: var(--glass-filter-md);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-specular), var(--shadow-md);
}
.glass-strong { background: var(--glass-frost); }
.panel {
  background: var(--glass-regular);
  -webkit-backdrop-filter: var(--glass-filter-md); backdrop-filter: var(--glass-filter-md);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-specular);
}
.glass-bar {
  background: rgba(15,15,17,0.55);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--white-08);
}

/* ── карточка видео (постер-фото + текст под ним, без рамки-коробки) ── */
.v-card { cursor: pointer; display: flex; flex-direction: column; background: transparent; border: none; box-shadow: none; border-radius: 0; transition: transform var(--dur-base) var(--ease-liquid); }
.v-card:hover { transform: translateY(-3px); }
.v-poster {
  position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(155deg, var(--scene-aurora), var(--scene-abyss));
  border: 1px solid var(--white-08);
}
.v-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(0deg, rgba(8,6,7,0.55) 0%, rgba(8,6,7,0) 50%); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.v-card:hover .v-overlay { opacity: 1; }
.v-play {
  width: 56px; height: 56px; border-radius: 50%; padding-left: 3px;
  display: flex; align-items: center; justify-content: center; color: var(--mist-50);
  background: var(--glass-frost); -webkit-backdrop-filter: var(--glass-filter-lg); backdrop-filter: var(--glass-filter-lg);
  border: 1px solid var(--glass-edge-bright); box-shadow: var(--glass-specular), var(--shadow-md);
}
.v-badge {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(11,8,9,0.5); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--white-18); box-shadow: var(--glass-specular);
  color: var(--mist-50); font: var(--type-mono); font-size: 11.5px; padding: 5px 11px; border-radius: var(--radius-pill);
}
.v-info { padding: 16px 2px 0; background: transparent; color: var(--mist-50); }

/* ── кнопки (капсулы) ── */
.btn { border-radius: var(--radius-pill); letter-spacing: var(--tracking-snug); }
.btn--blue { background: #0071E3; color: #fff; box-shadow: var(--shadow-sm); }
.btn--blue:hover { background: #0A84FF; }
.btn--soft {
  background: var(--glass-regular); color: var(--mist-50);
  -webkit-backdrop-filter: var(--glass-filter-sm); backdrop-filter: var(--glass-filter-sm);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-specular);
}
.btn--soft:hover { background: var(--glass-thick); }

/* ── поля ── */
.fld, .inp, .otp-box {
  background: var(--glass-regular);
  -webkit-backdrop-filter: var(--glass-filter-sm); backdrop-filter: var(--glass-filter-sm);
  border: 1px solid var(--glass-edge);
  color: var(--mist-50);
}
.fld::placeholder, .inp::placeholder { color: var(--text-muted); }
.fld:focus, .fld.is-focus, .inp:focus, .otp-box:focus {
  background: var(--glass-thick); border-color: #0071E3; box-shadow: 0 0 0 4px rgba(0,113,227,0.22);
}
.otp-box.filled { border-color: var(--white-18); background: var(--glass-thick); }

/* ── пилюли/статусы ── */
.pill--success { color: var(--mist-50); background: rgba(255,255,255,0.10); border: 1px solid var(--white-18); }
.pill--blue    { color: #3D93EA; background: rgba(0,113,227,0.16); border: 1px solid rgba(0,113,227,0.30); }

.eyebrow { color: var(--text-accent); }
.wordmark { color: var(--mist-50); }
.scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }