/*! ===========================================================================
    СЕАНС — дизайн-система UkrFlix. Хвиля A: фундамент.
    Повна заміна ukrflix.css, а не дельта.

    Принцип §4.1: інтерфейс нейтрально-темний, ЄДИНЕ джерело кольору на
    екрані — аура від контенту. Тому тут немає бренд-градієнта: усе, що
    раніше було фіолетово-рожевим, тепер бере --aura-1 / --aura-2, які
    JS заповнює з dominant_color активного тайтла.
    =========================================================================== */

/* ── Токени ─────────────────────────────────────────────────────────────── */

:root {
    /* Поверхні */
    --bg:            #08080a;
    --surface:       #131316;
    --surface-2:     #1c1c21;
    --surface-3:     #26262c;

    /* Текст */
    --fg:            #f6f6f8;
    --fg-2:          #a6a6ae;
    /* §9: ≥4.5:1 і на --bg, і на --surface (панелі, аркуші, меню).
       Оригінальний #6e6e77 давав 3.96 на фоні й не проходив узагалі;
       #7c7c86 не дотягував 0.01 на поверхнях. #7e7e88 = 4.9 / 4.6. */
    --fg-3:          #7e7e88;

    /* Обводки */
    --line:          rgba(255, 255, 255, .08);
    --line-2:        rgba(255, 255, 255, .16);

    /* Аура — заповнюється з xfields активного тайтла (див. seans.js) */
    --aura-1:        #2a2a33;
    --aura-2:        #16161c;
    --aura-glow:     rgba(255, 255, 255, .10);
    --aura-strength: .55;

    /* Акцент = аура. Ніякого окремого бренд-кольору (§4.1, «від контенту») */
    --accent:        var(--aura-1);
    --accent-fg:     var(--fg);

    /* Службові кольори лишаються, бо несуть сенс, а не бренд */
    --rating:        #f5c518;
    --ok:            #4ade80;
    --warn:          #fbbf24;
    --danger:        #f87171;

    /* Форма */
    --r-sm: 6px;
    --r:    8px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* Тіні — лише на підняття (§4.3) */
    --shadow:    0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .8);

    /* Простір */
    --container: 1560px;
    --pad: 48px;
    --header-h: 72px;

    /* Типографіка */
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Manrope', var(--font);

    /* Motion (§4.5) */
    --e:     cubic-bezier(.2, 0, 0, 1);
    --e-out: cubic-bezier(.16, 1, .3, 1);
    --t1: 140ms;
    --t2: 220ms;
    --t3: 420ms;
    --t4: 700ms;
    --motion: 1;

    /* Атмосфера */
    --grain: .045;
    --vignette: .55;
}

:root[data-density="compact"] { --pad: 32px; }
:root[data-motion="calm"]     { --motion: .5; }
:root[data-motion="off"]      { --motion: 0; }

@media (prefers-reduced-motion: reduce) { :root { --motion: 0; } }

@media (max-width: 1100px) { :root { --pad: 24px; --header-h: 64px; } }
@media (max-width: 560px)  { :root { --pad: 16px; } }

/* TV / 10-foot (§10) */
:root[data-tv="1"] {
    --pad: 80px;
    --aura-strength: .35;
    font-size: 20px;
}

/* ── Скидання ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    padding: 0 0 90px;
    min-height: 100vh;
    font: 400 16px/1.55 var(--font);
    color: var(--fg);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Кіношар знімає фон з body, щоб проступила аура (z-index:-1) */
.uf-cine body { background: transparent; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.12;
}
h1 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
h2 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); }
h3 { font-size: 1.125rem; letter-spacing: -.02em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

::selection { background: var(--fg); color: var(--bg); }

/* Числа — табличні всюди, де вони йдуть колонкою (§4.2) */
.num, td, .rating, time { font-variant-numeric: tabular-nums; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: fixed; top: 8px; left: 8px; z-index: 300;
    padding: 10px 18px; border-radius: var(--r);
    background: var(--surface-2); border: 1px solid var(--line-2);
    transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ── Аура й атмосфера ───────────────────────────────────────────────────── */

.uf-aura {
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none;
    opacity: var(--aura-strength);
    contain: strict;
}
.uf-aura__gl { position: absolute; inset: 0; width: 100%; height: 100%; }

.uf-aura__css {
    position: absolute; inset: -20%;
    background:
        radial-gradient(60% 55% at 22% 28%, var(--aura-1) 0%, transparent 62%),
        radial-gradient(55% 60% at 78% 68%, var(--aura-2) 0%, transparent 65%);
    filter: blur(60px) saturate(1.15);
    transition: background var(--t4) var(--e);
    animation: ufBreathe calc(18s / max(var(--motion), .001)) ease-in-out infinite;
}
.uf-aura[data-gl="1"] .uf-aura__css { opacity: .35; }

@keyframes ufBreathe {
    0%, 100% { transform: scale(1) translate3d(0, 0, 0); }
    50%      { transform: scale(1.08) translate3d(1.5%, -1.5%, 0); }
}

.uf-aura__cursor {
    position: absolute; width: 54vmax; height: 54vmax; left: 0; top: 0;
    margin: -27vmax 0 0 -27vmax;
    background: radial-gradient(circle, var(--aura-glow) 0%, transparent 60%);
    transform: translate3d(var(--uf-cx, 50vw), var(--uf-cy, 40vh), 0);
    will-change: transform;
}
:root[data-cursorlight="off"] .uf-aura__cursor { display: none; }

.uf-atmos { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.uf-atmos::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(120% 100% at 50% 45%, transparent 42%, rgba(0, 0, 0, var(--vignette)) 100%);
}
:root[data-vignette="off"] .uf-atmos::before { display: none; }

.uf-atmos__grain {
    position: absolute; inset: -100%;
    opacity: var(--grain);
    background-image: var(--uf-grain-src);
    background-size: 180px 180px;
    animation: ufGrain calc(.8s / max(var(--motion), .001)) steps(6) infinite;
}
:root[data-grain="off"] .uf-atmos__grain { display: none; }

@keyframes ufGrain {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(-6%, 4%, 0); }
    50%  { transform: translate3d(4%, -5%, 0); }
    75%  { transform: translate3d(-3%, -3%, 0); }
    100% { transform: translate3d(5%, 3%, 0); }
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.wrap {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
}

.page { position: relative; z-index: 2; padding-top: calc(var(--header-h) + 32px); }
/* Сторінки, що починаються кадром: кадр іде під прозору шапку */
.page--flush { padding-top: 0; }
.section { padding: 40px 0; }
.section__head {
    display: flex; align-items: baseline; gap: 16px;
    margin-bottom: 20px;
}
.section__title { flex: 0 1 auto; }
.section__more { margin-left: auto; color: var(--fg-3); font-size: .875rem; }
.section__more:hover { color: var(--fg); }

.stack   { display: grid; gap: 16px; }
.stack-8 { display: grid; gap: 8px; }

/* Grid-елемент за замовчуванням має min-width:auto, тому колонка
   розтягується під max-content вкладеної стрічки й ламає сторінку
   горизонтальним скролом. Обнуляємо всюди, де всередині може бути .reel. */
.stack > *, .stack-8 > *, .fs-body > *, .fs-grid > *, .grid > * { min-width: 0; }

.row-x   { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── Шапка ──────────────────────────────────────────────────────────────── */

.hdr {
    position: fixed; inset: 0 0 auto 0; z-index: 60;
    height: var(--header-h);
    display: flex; align-items: center;
    transition: background var(--t3) var(--e), border-color var(--t3) var(--e);
    border-bottom: 1px solid transparent;
}
.hdr[data-stuck="1"] {
    background: rgba(8, 8, 10, .72);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    border-bottom-color: var(--line);
}
.hdr__in {
    width: 100%; max-width: var(--container); margin: 0 auto;
    padding: 0 var(--pad);
    display: flex; align-items: center; gap: 28px;
}

.logo {
    font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
    letter-spacing: -.04em; white-space: nowrap;
}
.logo b { font-weight: 800; }
.logo i { font-style: normal; color: var(--fg-3); }

.nav { display: flex; gap: 4px; }
.nav__link {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: var(--r-pill);
    font-size: .9375rem; color: var(--fg-2);
    transition: color var(--t2) var(--e), background var(--t2) var(--e);
}
.nav__link:hover { color: var(--fg); background: rgba(255, 255, 255, .06); }
.nav__link.is-active { color: var(--fg); }
.nav__link svg { width: 17px; height: 17px; flex: 0 0 auto; }

.hdr__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.icon-btn {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    color: var(--fg-2);
    transition: color var(--t2) var(--e), background var(--t2) var(--e), border-color var(--t2) var(--e);
}
.icon-btn:hover { color: var(--fg); background: rgba(255, 255, 255, .07); border-color: var(--line-2); }
.icon-btn svg { width: 19px; height: 19px; }

/* §9: на тач-пристроях будь-яка ціль ≥ 44px. На миші 40px достатньо
   і компактніше, тому розводимо по типу вказівника, а не по ширині. */
@media (pointer: coarse) {
    .icon-btn { width: 44px; height: 44px; }
    .btn--sm, .chip { min-height: 44px; }
}

@media (max-width: 1100px) {
    .nav { display: none; }
}

/* Мобільна нижня навігація */
.mnav {
    position: fixed; inset: auto 0 0 0; z-index: 70;
    display: none;
    background: rgba(8, 8, 10, .9);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.mnav__item {
    flex: 1; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: .6875rem; color: var(--fg-3);
    transition: color var(--t2) var(--e);
}
.mnav__item.is-active, .mnav__item:hover { color: var(--fg); }
.mnav__item svg { width: 21px; height: 21px; }

@media (max-width: 1100px) { .mnav { display: flex; } }

/* ── Кнопки ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 44px; padding: 12px 24px;
    border-radius: var(--r-pill);
    font-weight: 600; font-size: .9375rem;
    background: var(--fg); color: var(--bg);
    border: 1px solid transparent;
    transition: transform var(--t2) var(--e-out), opacity var(--t2) var(--e), background var(--t2) var(--e);
}
.btn:hover { transform: translateY(calc(-2px * var(--motion))); }
.btn:disabled, .btn.is-disabled { opacity: .4; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }

.btn--ghost {
    background: transparent; color: var(--fg-2);
    border-color: var(--line-2);
}
.btn--ghost:hover { color: var(--fg); border-color: var(--fg-3); background: rgba(255, 255, 255, .04); }

/* Акцентна кнопка бере колір аури — єдиний кольоровий елемент UI */
.btn--aura {
    background: var(--aura-1); color: var(--fg);
    box-shadow: 0 8px 30px -8px var(--aura-1);
}
.btn--sm { min-height: 36px; padding: 8px 16px; font-size: .875rem; }
.btn--wide { width: 100%; }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 7px 16px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    color: var(--fg-2); font-size: .875rem;
    transition: color var(--t2) var(--e), border-color var(--t2) var(--e), background var(--t2) var(--e);
}
.chip:hover { color: var(--fg); border-color: var(--fg-3); }
.chip[aria-pressed="true"], .chip.is-active {
    background: var(--fg); color: var(--bg); border-color: var(--fg);
}

/* ── Форми ──────────────────────────────────────────────────────────────── */

.field { display: grid; gap: 6px; }
.field__label { font-size: .8125rem; color: var(--fg-3); }

.input, input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="number"], textarea, select {
    width: 100%; min-height: 44px;
    padding: 11px 16px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    color: var(--fg);
    transition: border-color var(--t2) var(--e), background var(--t2) var(--e);
}
.input:focus, input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--fg-3);
    background: var(--surface-2);
}
input::placeholder, textarea::placeholder { color: var(--fg-3); }
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.field__hint { font-size: .8125rem; color: var(--fg-3); }
.field__err  { font-size: .8125rem; color: var(--danger); }

/* ── Картка тайтла ──────────────────────────────────────────────────────── */

.card {
    position: relative;
    display: block;
    border-radius: var(--r);
    transition: transform var(--t3) var(--e-out);
}
.card__art {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color var(--t2) var(--e), box-shadow var(--t3) var(--e);
}
.card__art img { width: 100%; height: 100%; object-fit: cover; }

/* Гарантований scrim під підписом — контраст не залежить від постера (§9) */
.card__art::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .35) 30%, transparent 58%);
    opacity: 0; transition: opacity var(--t2) var(--e);
}
.card:hover .card__art::after, .card:focus-visible .card__art::after { opacity: 1; }

.card__title {
    margin-top: 10px;
    font-size: .9375rem; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.card__meta {
    margin-top: 4px;
    display: flex; align-items: center; gap: 8px;
    font-size: .8125rem; color: var(--fg-3);
}
.card__rating { color: var(--rating); font-weight: 600; }

.card__badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    padding: 4px 10px; border-radius: var(--r-pill);
    font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: rgba(8, 8, 10, .78);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--line-2);
}

@media (hover: hover) {
    .reel:hover .card { opacity: .5; }           /* depth-of-field на неактивних */
    .reel .card:hover { opacity: 1; }
    .card:hover { transform: translateY(calc(-8px * var(--motion))) scale(calc(1 + .02 * var(--motion))); }
    .card:hover .card__art {
        border-color: rgba(255, 255, 255, .28);
        /* Підсвітка кольором самого фільму — картка «світиться» своєю аурою */
        box-shadow: var(--shadow-lg), 0 12px 40px -12px var(--aura-1);
    }
}
.card:focus-visible { opacity: 1 !important; }

/* ── Стрічка ────────────────────────────────────────────────────────────── */

.reel {
    display: flex; gap: 16px;
    overflow-x: auto; overflow-y: hidden;
    padding: 4px 0 8px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;      /* кіношар знімає, див. нижче */
    -webkit-overflow-scrolling: touch;
}
.reel::-webkit-scrollbar { display: none; }
.reel > * {
    flex: 0 0 auto;
    width: clamp(150px, 15vw, 190px);
    scroll-snap-align: start;
}

/* Під кіношаром керує інерція з seans.js */
.uf-cine .reel { scroll-snap-type: none; scroll-behavior: auto; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.uf-cine .reel > * { scroll-snap-align: none; }
.uf-cine .reel a, .uf-cine .reel img { -webkit-user-drag: none; }

.reel-wrap { position: relative; }
.reel-arrow {
    position: absolute; top: calc(50% - 40px); z-index: 3;
    width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: var(--r-pill);
    background: rgba(8, 8, 10, .8);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--line-2);
    opacity: 0; transition: opacity var(--t2) var(--e);
}
.reel-wrap:hover .reel-arrow { opacity: 1; }
.reel-arrow:focus-visible { opacity: 1; }
.reel-arrow--prev { left: calc(var(--pad) * -1 + 8px); }
.reel-arrow--next { right: calc(var(--pad) * -1 + 8px); }
.reel-arrow[hidden] { display: none; }
@media (max-width: 1100px) { .reel-arrow { display: none; } }

/* ── Сітка ──────────────────────────────────────────────────────────────── */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 28px 16px;
}
@media (min-width: 900px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ── Панель / поверхня ──────────────────────────────────────────────────── */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px;
}
.panel--flat { background: transparent; border-color: var(--line); }
.panel__title { margin-bottom: 16px; }

.divider { height: 1px; background: var(--line); border: 0; margin: 24px 0; }

/* ── Системні стани (§5.10) ─────────────────────────────────────────────── */

.skel { position: relative; overflow: hidden; background: var(--surface); border-radius: var(--r); }
.skel::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .06) 50%, transparent 80%);
    animation: ufShimmer 1.3s infinite;
}
@keyframes ufShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skel--card { aspect-ratio: 2 / 3; }

.empty, .error-state {
    display: grid; gap: 12px; justify-items: center; text-align: center;
    padding: 64px 24px; color: var(--fg-2);
}
.empty__title { color: var(--fg); }

.notice {
    padding: 14px 18px; border-radius: var(--r);
    border: 1px solid var(--line-2); background: var(--surface);
    color: var(--fg-2); font-size: .9375rem;
}
.notice--err  { border-color: rgba(248, 113, 113, .4); color: var(--danger); }
.notice--ok   { border-color: rgba(74, 222, 128, .4);  color: var(--ok); }

/* ── Пагінація ──────────────────────────────────────────────────────────── */

.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 40px 0; }
.pager a, .pager span {
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px; border-radius: var(--r);
    border: 1px solid var(--line); color: var(--fg-2); font-size: .9375rem;
    transition: color var(--t2) var(--e), border-color var(--t2) var(--e);
}
.pager a:hover { color: var(--fg); border-color: var(--line-2); }
.pager span.is-current { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ── Підвал ─────────────────────────────────────────────────────────────── */

.ftr {
    position: relative; z-index: 2;
    margin-top: 80px; padding: 48px 0 40px;
    border-top: 1px solid var(--line);
    color: var(--fg-3); font-size: .875rem;
}
.ftr__grid {
    display: grid; gap: 32px;
    grid-template-columns: 1.4fr repeat(3, 1fr);
}
@media (max-width: 900px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr__grid { grid-template-columns: 1fr; } }

.ftr__col-title {
    font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--fg-3); margin-bottom: 14px;
}
.ftr__links { display: grid; gap: 9px; }
.ftr__links a { color: var(--fg-2); }
.ftr__links a:hover { color: var(--fg); }
.ftr__bottom {
    margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}

/* ── Оверлеї: пошук, меню, куратор ──────────────────────────────────────
   Усі лежать прямо в <body>, поза шапкою з backdrop-filter.            */

.ovl { position: fixed; inset: 0; z-index: 120; display: grid; }
.ovl[hidden] { display: none; }
.ovl__scrim {
    position: absolute; inset: 0;
    background: rgba(5, 5, 7, .78);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    animation: ufFade var(--t2) var(--e);
}
.ovl__body { position: relative; z-index: 1; }
@keyframes ufFade { from { opacity: 0; } }

.ovl--search { place-items: start center; padding: min(18vh, 160px) var(--pad) var(--pad); }
.ovl--search .ovl__body { width: min(760px, 100%); display: grid; gap: 16px; }

.search-box {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 8px 8px 18px;
    background: var(--surface); border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
}
.search-box__icon { width: 20px; height: 20px; color: var(--fg-3); flex: 0 0 auto; }
.search-box input {
    flex: 1; min-height: 44px; padding: 0; border: 0; background: none;
    font-size: 1.0625rem;
}
.search-box input:focus { outline: none; background: none; }
.search-foot { display: flex; align-items: center; gap: 12px; color: var(--fg-3); font-size: .875rem; }
.search-foot a:hover { color: var(--fg); }
.search-foot .chip { margin-left: auto; }

/* Аркуш: жанри й меню профілю. Desktop — по центру, mobile — знизу */
.ovl--sheet { place-items: center; padding: var(--pad); }
.sheet {
    width: min(680px, 100%);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 24px;
    display: grid; gap: 20px;
    max-height: 84vh; overflow: auto;
}
/* Поява — тільки коли рух дозволено. Базовий стан аркуша завжди «на місці»,
   тож навіть якщо анімація не програється, він лишається доступним. */
@media (prefers-reduced-motion: no-preference) {
    .sheet { animation: ufSheetIn var(--t3) var(--e-out); }
}
.sheet--menu { width: min(420px, 100%); }
.sheet__head { display: flex; align-items: center; gap: 16px; }
.sheet__head .icon-btn { margin-left: auto; }
.sheet__grid { display: flex; flex-wrap: wrap; gap: 8px; }
@keyframes ufSheetIn { from { opacity: 0; transform: translateY(calc(16px * var(--motion))); } }

@media (max-width: 640px) {
    .ovl--sheet { place-items: end stretch; padding: 0; }
    .sheet {
        width: 100%; max-height: 88vh;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
    }
    @keyframes ufSheetIn { from { transform: translateY(100%); } }
}

.user-trigger { width: 40px; height: 40px; overflow: hidden; padding: 0; }
.user-trigger__ava { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.user-card { display: flex; align-items: center; gap: 12px; }
.user-card__ava { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.user-card small { display: block; color: var(--fg-3); font-size: .8125rem; }

.menu { display: grid; gap: 2px; }
.menu__item {
    display: flex; align-items: center; gap: 12px;
    min-height: 46px; padding: 10px 14px;
    border-radius: var(--r); color: var(--fg-2);
    transition: color var(--t2) var(--e), background var(--t2) var(--e);
}
.menu__item:hover { color: var(--fg); background: var(--surface-2); }
.menu__item svg { width: 18px; height: 18px; flex: 0 0 auto; }
.menu__item--danger:hover { color: var(--danger); }
.menu__count { margin-left: auto; color: var(--fg-3); font-size: .8125rem; }

/* ── Головна: інтро сеансу ──────────────────────────────────────────────── */

.seans-head { padding: 48px 0 24px; display: grid; gap: 20px; }
.seans-head__kicker {
    margin: 0; font-size: .75rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--fg-3);
}
.seans-head__title {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2rem, 6vw, 4.25rem); line-height: .98; letter-spacing: -.04em;
}

/* ── Куратор ────────────────────────────────────────────────────────────── */

.ovl--full { place-items: center; padding: var(--pad); }
.curator { width: min(720px, 100%); display: grid; gap: 22px; }
.curator__kicker {
    margin: 0; font-size: .75rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--fg-3);
}
.curator__q {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(1.75rem, 5vw, 3.25rem); line-height: 1.04; letter-spacing: -.03em;
}
.curator__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.curator__steps { display: flex; gap: 6px; margin-left: auto; }
.curator__steps i { width: 22px; height: 3px; border-radius: 2px; background: var(--line-2); }
.curator__steps i[data-on="1"] { background: var(--fg); }

/* ── Студія ─────────────────────────────────────────────────────────────── */

.studio {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 130;
    width: min(400px, 100%);
    display: flex; flex-direction: column;
    background: rgba(14, 14, 17, .96);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border-left: 1px solid var(--line);
    transform: translateX(101%);
    transition: transform var(--t3) var(--e-out);
    visibility: hidden;
}
.studio[data-open="1"] { transform: none; visibility: visible; }
.studio__head {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 24px; border-bottom: 1px solid var(--line);
}
.studio__head .icon-btn { margin-left: auto; }
.studio__body { flex: 1; overflow-y: auto; padding: 4px 24px 28px; }
.studio__group { padding: 20px 0; border-bottom: 1px solid var(--line); }
.studio__group:last-child { border-bottom: 0; }
.studio__label {
    margin: 0 0 12px; font-size: .75rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--fg-3);
}
.studio__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; min-height: 44px; padding: 8px 0;
}
.studio__row small { display: block; color: var(--fg-3); font-size: .78rem; }

.studio input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 140px; height: 3px; padding: 0; min-height: 0;
    background: var(--line-2); border: 0; border-radius: 2px;
}
.studio input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px;
    border-radius: 50%; background: var(--fg); cursor: pointer;
}
.studio input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--fg);
}

.sw {
    position: relative; width: 46px; height: 26px; flex: 0 0 auto;
    border-radius: var(--r-pill);
    background: var(--surface-2); border: 1px solid var(--line-2);
    transition: background var(--t2) var(--e);
}
.sw::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--fg-3);
    transition: transform var(--t2) var(--e-out), background var(--t2) var(--e);
}
.sw[aria-checked="true"] { background: var(--fg); border-color: var(--fg); }
.sw[aria-checked="true"]::after { transform: translateX(20px); background: var(--bg); }

/* ── Тост ───────────────────────────────────────────────────────────────── */

.toast {
    position: fixed; left: 50%; bottom: 100px; z-index: 200;
    max-width: calc(100vw - 32px);
    padding: 13px 22px; border-radius: var(--r-pill);
    background: var(--surface-2); border: 1px solid var(--line-2);
    font-size: .875rem; text-align: center;
    transform: translate(-50%, 200%);
    transition: transform var(--t3) var(--e-out);
}
.toast[data-on="1"] { transform: translate(-50%, 0); }

/* ── Хлібні крихти ──────────────────────────────────────────────────────── */

.crumbs { padding: 0 0 24px; color: var(--fg-3); font-size: .8125rem; }
.crumbs a { color: var(--fg-3); }
.crumbs a:hover { color: var(--fg); }

/* ── Сторінка тайтла ────────────────────────────────────────────────────── */

.fs { position: relative; }

.fs-hero { position: relative; padding-block: 32px 40px; }
.fs-hero__bg {
    position: absolute; inset: -32px 0 0;
    background-size: cover; background-position: center 20%;
    filter: blur(44px) saturate(1.1);
    opacity: .26;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}
.fs-hero__in {
    position: relative;
    display: grid; gap: 32px;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    align-items: start;
}
.fs-hero__in > * { min-width: 0; }

.fs-hero__poster {
    width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}
.fs-hero__info { display: grid; gap: 14px; }
.fs-hero__title { font-size: clamp(1.875rem, 4.4vw, 3.25rem); }
.fs-hero__orig { margin: 0; color: var(--fg-3); font-size: 1rem; }
.fs-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--fg-2); }
.fs-hero__imdb { color: var(--rating); font-weight: 700; }
.fs-hero__meta-dot { color: var(--fg-3); }
.fs-hero__excerpt { margin: 0; color: var(--fg-2); max-width: 68ch; }
.fs-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

.fs-hero__specs { margin: 8px 0 0; display: grid; gap: 12px; }
.fs-hero__spec {
    display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px;
    font-size: .9375rem; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.fs-hero__spec:last-child { border-bottom: 0; }
.fs-hero__spec-label { color: var(--fg-3); }
.fs-hero__spec-val { margin: 0; color: var(--fg-2); }

@media (max-width: 780px) {
    /* Звужується САМ постер, а не колонка: інакше разом із ним стискається
       й текст, і опис із акторами стають нечитабельними. */
    .fs-hero__in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .fs-hero__poster { max-width: 220px; }
    .fs-hero__info { justify-items: center; width: 100%; }
    .fs-hero__meta, .fs-hero__cta { justify-content: center; }
    .fs-hero__excerpt { margin-inline: auto; }
    .fs-hero__spec { grid-template-columns: 1fr; gap: 2px; text-align: left; }
}

.fs-body { display: grid; gap: 32px; padding-bottom: 8px; }
.fs-body > * { min-width: 0; }

.fs-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.fs-grid > * { min-width: 0; }
@media (min-width: 1000px) { .fs-grid { grid-template-columns: minmax(0, 1fr) 340px; } }

.fs-description__content { color: var(--fg-2); line-height: 1.7; }
.fs-description__content p { margin-bottom: 1em; }

/* Власна оцінка UkrFlix: модуль віддає свою розмітку, ми лише вписуємо
   її в тон теми, не перевизначаючи структуру. */
.fs-ukrfrate a, .fs-ukrfrate button { color: inherit; }
.fs-ukrfrate img { border-radius: var(--r-sm); }

/* DLE: сподобалось / не сподобалось */
.fs-vote { display: flex; gap: 10px; }
.fs-vote__btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 9px 16px;
    border: 1px solid var(--line-2); border-radius: var(--r-pill);
    color: var(--fg-2);
    transition: color var(--t2) var(--e), border-color var(--t2) var(--e), background var(--t2) var(--e);
}
.fs-vote__btn svg { width: 18px; height: 18px; cursor: pointer; }
.fs-vote__btn b { font-variant-numeric: tabular-nums; }
.fs-vote__btn--up:hover { color: var(--ok); border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .08); }
.fs-vote__btn--down:hover { color: var(--danger); border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .08); }

.fs-views { margin: 14px 0 0; color: var(--fg-3); font-size: .875rem; }

/* ── Франшиза ────────────────────────────────────────────────────────────
   engine/modules/franchise.php віддає готову розмітку, але БЕЗ власного CSS:
   класи .fs-card / .fr-* стилізувалися в старому ukrflix.css. Тому стилі для
   них живуть тут — сам модуль правити не треба.
   Кольори переведені в токени; амбер лишився тільки там, де несе сенс
   (позначка IMDb), а «поточна частина» підсвічується нейтрально, як і решта
   активних станів у темі.                                               */

.fs-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px;
}
.fs-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fs-card__title {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: -.02em;
}
.fs-card__title svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--fg-3); }

.fr-count {
    min-width: 28px; height: 28px; padding: 0 9px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line);
    font-size: .85rem; font-weight: 700; color: var(--fg-2);
    font-variant-numeric: tabular-nums;
}

.fr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.fr-item {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 4px;
    padding: 10px 14px; border-radius: var(--r);
    background: rgba(255, 255, 255, .03);
    border: 1px solid transparent;
    transition: background var(--t2) var(--e), border-color var(--t2) var(--e);
}
.fr-item:hover { background: rgba(255, 255, 255, .07); border-color: var(--line); }

/* Поточна частина: нейтральна підсвітка + світло аури, без окремого бренд-кольору */
.fr-item--current {
    background: rgba(255, 255, 255, .06);
    border-color: var(--line-2);
    box-shadow: inset 3px 0 0 var(--aura-1);
}
.fr-item--current .fr-num { background: var(--fg); color: var(--bg); }
.fr-item--current .fr-title { color: var(--fg); }

.fr-num {
    flex: 0 0 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: .8rem; font-weight: 700;
    background: rgba(255, 255, 255, .07); color: var(--fg-2);
    font-variant-numeric: tabular-nums;
}

.fr-title {
    flex: 1 1 auto; min-width: 0; flex-basis: calc(100% - 38px);
    display: flex; flex-direction: column; gap: 1px;
    font-weight: 600; font-size: .95rem; line-height: 1.25;
    color: var(--fg); overflow: hidden;
}
a.fr-title:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.fr-title-en {
    font-weight: 400; font-size: .75rem; color: var(--fg-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fr-year { flex: 0 0 auto; margin-left: 38px; font-size: .82rem; color: var(--fg-3); white-space: nowrap; }

.fr-imdb {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: var(--r-pill);
    font-size: .82rem; font-weight: 700; white-space: nowrap;
    border: 1px solid var(--line-2);
    font-variant-numeric: tabular-nums;
}
.fr-imdb b { font-size: .62rem; font-weight: 800; letter-spacing: .03em; color: var(--rating); }
.fr-imdb--hi  { color: var(--ok); }
.fr-imdb--mid { color: var(--fg-2); }
.fr-imdb--lo  { color: var(--danger); }

@media (min-width: 620px) {
    .fr-title { flex-basis: auto; }
    .fr-year { margin-left: 0; }
}

.fs-comments { margin-top: 20px; }
.fs-addcomments { margin-top: 4px; }

/* ── Плеєр ──────────────────────────────────────────────────────────── */

/* Плеєр — картка: заголовок, таби джерел, екран */
.fs-player { padding: 0; overflow: hidden; }
.fs-player__head {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 24px; border-bottom: 1px solid var(--line);
}
.fs-player__title { margin: 0; font-size: 1.0625rem; }
.fs-player__head .row-x { margin-left: auto; }

.fs-player__tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 16px 24px 0; }
.fs-tab {
    min-height: 40px; padding: 8px 18px; border-radius: var(--r-pill);
    border: 1px solid var(--line); color: var(--fg-2); font-size: .875rem;
    transition: color var(--t2) var(--e), background var(--t2) var(--e), border-color var(--t2) var(--e);
}
.fs-tab:hover { color: var(--fg); border-color: var(--line-2); }
.fs-tab.active, .fs-tab[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (pointer: coarse) { .fs-tab { min-height: 44px; } }

/* Екран усередині картки плеєра */
.fs-player__screen {
    position: relative;
    margin: 16px 24px 24px;
    border-radius: var(--r); overflow: hidden;
    border: 1px solid var(--line);
    background: #000;
}
@media (max-width: 560px) {
    .fs-player__head, .fs-player__tabs { padding-inline: 16px; }
    .fs-player__screen { margin: 14px 16px 16px; }
}
.fs-player__content { display: none; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.fs-player__content.active { display: block; }
.fs-player__content iframe,
.fs-player__content video,
.fs-player__content > ins { width: 100%; height: 100%; border: 0; display: block; }
.ukrf-custom-player-container { position: relative; width: 100%; height: 100%; }

/* Селектори озвучки/сезону/серії — тонка плаваюча смуга ПОВЕРХ кадру.
   Раніше вони стояли трьома системними полями на всю ширину і з'їдали
   пів екрана; тепер це компактний оверлей, що не забирає кадр. */
.ukrf-player-top-bar {
    position: absolute; z-index: 3; left: 12px; right: 12px; top: 12px;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.ukrf-select {
    -webkit-appearance: none; appearance: none;
    width: auto; min-height: 36px; max-width: 190px;
    padding: 7px 30px 7px 12px;
    border-radius: var(--r-pill);
    background: rgba(8, 8, 10, .72)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f6f8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center / 13px;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--fg); font-size: .8125rem;
    text-overflow: ellipsis;
}
.ukrf-select:hover { border-color: rgba(255, 255, 255, .34); }
.ukrf-select option { background: var(--surface); color: var(--fg); }
@media (max-width: 560px) { .ukrf-select { max-width: 118px; font-size: .75rem; } }

/* Лишається для форм (search.tpl) — на сторінці тайтла сітки-сайдбару вже немає */
.fs-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .fs-grid { grid-template-columns: minmax(0, 1fr) 340px; } }

.fs-description__content { color: var(--fg-2); line-height: 1.7; }
.fs-description__content p { margin-bottom: 1em; }

.fs-rate { display: flex; align-items: center; gap: 12px; font-size: 1.125rem; }
.fs-rate__btn { cursor: pointer; color: var(--fg-2); }
.fs-rate__btn:hover { color: var(--fg); }
.fs-rate__num { font-weight: 600; }
.fs-rate__num--dim { color: var(--fg-3); }
.fs-views { margin: 12px 0 0; color: var(--fg-3); font-size: .875rem; }

/* Модалка «Повідомити про проблему» */
#ukrfOverlay {
    position: fixed; inset: 0; z-index: 140; display: none;
    background: rgba(5, 5, 7, .78);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
#ukrfModal {
    position: fixed; z-index: 141; display: none;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px));
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 22px;
}
#ukrfOverlay.active, #ukrfModal.active { display: block; }
.ukrf-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.ukrf-title { font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; }
.ukrf-sub { color: var(--fg-3); font-size: .8125rem; margin-top: 2px; }
.ukrf-close { margin-left: auto; }
.ukrf-label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.ukrf-copy-block {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 12px 12px 16px; margin-bottom: 14px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.ukrf-copy-text { flex: 1; min-width: 0; font-size: .8125rem; color: var(--fg-2); word-break: break-all; }
.ukrf-hint { margin-top: 12px; color: var(--fg-3); font-size: .8125rem; text-align: center; }

/* ── Результати пошуку ──────────────────────────────────────────────────── */

.sr-item {
    display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px;
    padding: 14px; border-radius: var(--r); border: 1px solid transparent;
    transition: background var(--t2) var(--e), border-color var(--t2) var(--e);
}
.sr-item:hover { background: var(--surface); border-color: var(--line); }
.sr-item__art { width: 80px; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }
.sr-item__body { display: grid; gap: 6px; align-content: start; }
.sr-item__title { font-size: 1.0625rem; }
.sr-item__meta { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; color: var(--fg-3); font-size: .8125rem; }
.sr-item__desc {
    margin: 0; color: var(--fg-2); font-size: .9375rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Живі підказки */
.fsr-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: var(--r); color: var(--fg-2);
}
.fsr-item:hover { background: var(--surface-2); color: var(--fg); }
.fsr-item img { width: 34px; aspect-ratio: 2/3; object-fit: cover; border-radius: 4px; }

/* ── Промо-кадр і анонс ─────────────────────────────────────────────────── */

/* ── Банер головної ──────────────────────────────────────────────────────
   Кадр не «лежить під чорною плівкою», а РОЗЧИНЯЄТЬСЯ у фоні: маска гасить
   саме зображення знизу й ліворуч. Тому шва між банером і сторінкою немає
   на жодному кольорі постера — нічого підганяти вручну не треба.

   Три шари:
     .promo__bg     — кадр (backdrop), замаскований у фон
     .promo__glow   — світло кольору фільму в місці стику (аура)
     .promo__poster — постер, що стоїть «перед» кадром
   Текст лежить у зоні, де кадр уже погашений, тож контраст не залежить
   від того, наскільки світлий кадр (§9).                                */

.promo {
    position: relative;
    min-height: clamp(440px, 68vh, 720px);
    display: flex; align-items: flex-end;
    padding-block: calc(var(--header-h) + 40px) 0;
    margin-bottom: 8px;
}

.promo__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center 25%;
    /* Маска — те саме «зливання». Знизу кадр згасає повністю,
       ліворуч — до половини, щоб під текстом лишався спокійний фон. */
    -webkit-mask-image:
        linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.35) 78%, transparent 100%),
        linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 34%, #000 62%);
    mask-image:
        linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.35) 78%, transparent 100%),
        linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 34%, #000 62%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* Бічний scrim під текст. КРИТИЧНО: він теж має згасати донизу разом із
   кадром. Якщо цього не зробити, непрозора заливка обривається рівно по
   нижньому краю секції — і банер читається як приклеєний прямокутник,
   бо нижче вже видно ауру. Тому та сама вертикальна маска, що й на кадрі.
   І жодного var(--bg) усередині банера: під ним не суцільний фон, а аура. */
.promo::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.5) 40%, transparent 70%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,.3) 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,.3) 80%, transparent 100%);
}

/* Світло кольору фільму в зоні стику — стик стає не «обрізом», а сяйвом */
/* Світло лишається В МЕЖАХ банера: .promo-rail має overflow-x:auto, а це за
   специфікацією вмикає й вертикальне обрізання — усе, що виходило за нижній
   край, різалося рівною лінією й давало той самий «квадрат». */
.promo__glow {
    position: absolute; left: 0; right: 0; bottom: 0; height: 240px; z-index: 1;
    pointer-events: none;
    background: radial-gradient(70% 120% at 50% 100%, var(--aura-1) 0%, transparent 70%);
    opacity: .45;
    filter: blur(50px);
}

.promo__in {
    position: relative; z-index: 2;
    display: grid; gap: 14px; max-width: 58ch;
    padding-bottom: 56px;
}

/* Постер попереду кадру — праворуч, як афіша біля екрана */
.promo__poster {
    position: absolute; right: var(--pad); bottom: 56px; z-index: 2;
    width: clamp(150px, 15vw, 230px);
    aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: var(--r-lg);
    border: 1px solid var(--line-2);
    box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) { .promo__poster { display: none; } }

/* Кілька банерів = рейка зі скрол-снапом; крапки додає seans.js */
.promo-rail {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.promo-rail::-webkit-scrollbar { display: none; }
.promo-rail > .promo { flex: 0 0 100%; scroll-snap-align: start; margin-bottom: 0; }
.uf-cine .promo-rail { scroll-snap-type: none; }

.promo-dots {
    position: relative; z-index: 3;
    display: flex; gap: 8px; justify-content: center;
    margin: -28px 0 8px;
}
.promo-dots button {
    width: 28px; height: 3px; border-radius: 2px;
    background: rgba(255, 255, 255, .22);
    transition: background var(--t2) var(--e);
}
.promo-dots button[aria-current="true"] { background: var(--fg); }
@media (pointer: coarse) { .promo-dots button { height: 6px; } }
.promo__kicker { margin: 0; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.promo__title { font-size: clamp(1.75rem, 4.4vw, 3.25rem); }
.promo__meta { margin: 0; display: flex; gap: 12px; flex-wrap: wrap; color: var(--fg-2); font-size: .9375rem; }
.promo__desc { margin: 0; color: var(--fg-2); }

/* Специфікації всередині промо-кадру (modules/film_base_block.tpl) */
.promo__specs { margin: 4px 0 0; display: grid; gap: 8px; max-width: 56ch; }
.promo__spec { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; font-size: .875rem; }
.promo__spec dt { color: var(--fg-3); }
.promo__spec dd { margin: 0; color: var(--fg-2); }
.promo__cta { margin-top: 8px; }
.promo__kicker svg { width: 14px; height: 14px; }
.promo--anons .promo__kicker { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 560px) { .promo__spec { grid-template-columns: 1fr; gap: 2px; } }

/* ── Сторінка новини (modules/fullstory-news.tpl) ───────────────────────── */

.news { padding-bottom: 24px; }
.news__head { padding: 8px 0 24px; display: grid; gap: 12px; }
.news__meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--fg-3); font-size: .8125rem; }
.news__title { max-width: 22ch; }
.news__body { max-width: 74ch; }
.news__foot {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line);
}
.news__share { margin-left: auto; }
.fs-vote__btn span { font-size: .875rem; }

/* ── Жанри та колекції ──────────────────────────────────────────────────── */

.genres__hero { padding: 8px 0 32px; display: grid; gap: 12px; }
.genres__kicker { margin: 0; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.genres__title { font-size: clamp(2rem, 5vw, 3.5rem); }
.genres__lead { margin: 0; color: var(--fg-2); max-width: 62ch; }

.genres__grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.genre {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    display: flex; align-items: flex-end;
    padding: 16px;
    transition: transform var(--t3) var(--e-out), border-color var(--t2) var(--e);
}
.genre::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--genre-img);
    background-size: cover; background-position: center;
    transition: transform var(--t4) var(--e-out);
}
/* Постійний scrim: назва жанру має читатися на будь-якому кадрі (§9) */
.genre::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8, 8, 10, .92) 0%, rgba(8, 8, 10, .45) 45%, rgba(8, 8, 10, .12) 100%);
}
.genre__t {
    position: relative; z-index: 1;
    font-family: var(--font-display); font-weight: 800; font-size: 1.125rem;
    letter-spacing: -.02em;
}
@media (hover: hover) {
    .genre:hover { transform: translateY(calc(-4px * var(--motion))); border-color: var(--line-2); }
    .genre:hover::before { transform: scale(1.06); }
}

.anons { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; padding: 16px 0; }
.anons__art img { width: 140px; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); }
.anons__body { display: grid; gap: 8px; align-content: start; }
.anons__kicker { margin: 0; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.anons__desc { margin: 0; color: var(--fg-2); }
@media (max-width: 560px) { .anons { grid-template-columns: 100px minmax(0, 1fr); } .anons__art img { width: 100px; } }

/* ── Статичні сторінки ──────────────────────────────────────────────────── */

.static { padding: 8px 0 40px; }
.static__title { margin-bottom: 24px; }
.static__body { max-width: 74ch; color: var(--fg-2); line-height: 1.75; }
.static__body h2 { margin: 32px 0 12px; color: var(--fg); }
.static__body h3 { margin: 24px 0 10px; color: var(--fg); }
.static__body ul, .static__body ol { margin: 0 0 1em; padding-left: 1.25em; list-style: disc; }
.static__body ol { list-style: decimal; }
.static__body li { margin-bottom: .4em; }
.static__body a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.static__body blockquote {
    margin: 20px 0; padding: 14px 20px;
    border-left: 2px solid var(--line-2); color: var(--fg-2); font-style: italic;
}
.static__body code {
    padding: 2px 6px; border-radius: 4px;
    background: var(--surface-2); font-size: .9em; word-break: break-all;
}

/* ── Коментарі на головній ──────────────────────────────────────────────── */

.comments-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ── Коментарі ──────────────────────────────────────────────────────────── */

.comment {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px;
    padding: 16px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line);
}
.comment__ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.comment__body { min-width: 0; }
.comment__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.comment-card__author { font-weight: 700; }
.comment__date, .comment__rating { color: var(--fg-3); font-size: .8125rem; }
.comment__rating { margin-left: auto; }
.comment__text { color: var(--fg-2); line-height: 1.65; overflow-wrap: anywhere; }
.comment__text img { border-radius: var(--r); margin: 8px 0; }
.comment__tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: .8125rem; }
.comment__act, .comment__vote {
    display: inline-flex; align-items: center;
    /* §9: без цього дії під коментарем були 20px і не потрапляли під палець */
    min-height: 36px; padding: 4px 10px; border-radius: var(--r-sm);
    color: var(--fg-3); cursor: pointer;
    transition: color var(--t2) var(--e), background var(--t2) var(--e);
}
.comment__act:hover, .comment__vote:hover { background: rgba(255, 255, 255, .05); }
@media (pointer: coarse) {
    .comment__act, .comment__vote { min-height: 44px; padding-inline: 12px; }
}
.comment__act:hover, .comment__vote:hover { color: var(--fg); }
.comment__vote--up:hover { color: var(--ok); }
.comment__vote--down:hover, .comment__act--danger:hover { color: var(--danger); }

/* Міні-бейдж гейміфікації, який дописує js/uf_badges_comments.js */
.ufb {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 6px; width: 18px; height: 18px; border-radius: 50%;
    font-size: 11px; line-height: 1;
    background: var(--surface-2); border: 1px solid var(--line-2);
}
.ufb--gold   { border-color: rgba(245, 197, 24, .55); }
.ufb--silver { border-color: rgba(255, 255, 255, .34); }
.ufb--bronze { border-color: rgba(205, 127, 50, .5); }

.addcom { display: grid; gap: 16px; }
.addcom__guest { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.addcom__sec img, .addcom .sec_code img { border-radius: var(--r-sm); margin-bottom: 8px; }

.side-comm { display: grid; gap: 6px; padding: 14px 16px; }
.side-comm__title {
    font-weight: 600; font-size: .9375rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.side-comm__meta { display: flex; gap: 10px; color: var(--fg-3); font-size: .8125rem; }
.side-comm--flat { background: none; border: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }

/* ── Профіль ────────────────────────────────────────────────────────────── */

.profile { display: grid; gap: 24px; padding-bottom: 24px; }
.profile__head {
    display: grid; gap: 20px;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
}
.profile__ava { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); }
.profile__name { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.profile__status, .profile__since { margin: 4px 0 0; color: var(--fg-3); font-size: .875rem; }
.profile__badge {
    display: inline-block; margin-top: 10px;
    padding: 4px 12px; border-radius: var(--r-pill);
    border: 1px solid var(--line-2); font-size: .75rem; color: var(--fg-3);
}
.profile__badge--on { color: var(--ok); border-color: rgba(74, 222, 128, .4); }
.profile__stats { display: flex; gap: 28px; margin: 0; }
.profile__stats dt { color: var(--fg-3); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.profile__stats dd { margin: 4px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }
.profile__acts { grid-column: 1 / -1; }
.profile__game { display: grid; gap: 16px; }

@media (max-width: 860px) {
    .profile__head { grid-template-columns: 72px minmax(0, 1fr); }
    .profile__ava { width: 72px; height: 72px; }
    .profile__stats { grid-column: 1 / -1; }
}

.profile-pop {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px;
    padding: 14px; border-radius: var(--r-lg);
    background: var(--surface-2); border: 1px solid var(--line-2);
    box-shadow: var(--shadow);
}
.profile-pop__ava { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.profile-pop__title { display: block; font-size: .9375rem; }
.profile-pop__status, .profile-pop__meta { display: block; color: var(--fg-3); font-size: .78rem; margin-top: 3px; }

/* ── Повідомлення ───────────────────────────────────────────────────────── */

.pm { display: grid; gap: 20px; padding-bottom: 24px; }
.pm-row {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 12px 16px; border-radius: var(--r);
    background: var(--surface); border: 1px solid var(--line);
    transition: border-color var(--t2) var(--e), background var(--t2) var(--e);
}
.pm-row:hover { border-color: var(--line-2); background: var(--surface-2); }
.pm-row__ava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.pm-row__main { min-width: 0; display: grid; gap: 2px; }
.pm-row__subj { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-row__from { color: var(--fg-3); font-size: .8125rem; font-weight: 400; }
.pm-row__date { color: var(--fg-3); font-size: .8125rem; white-space: nowrap; }

.pm-msg { display: grid; gap: 16px; }
.pm-msg__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pm-msg__acts { margin-left: auto; }
.pm-msg__subj { font-size: 1.25rem; }
.pm-msg__dialog { display: grid; gap: 12px; margin-top: 8px; }
.pm__check { display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: .9375rem; cursor: pointer; }
.pm__check input { width: auto; min-height: 0; }

/* ── Авторизація та форми-сторінки ──────────────────────────────────────── */

.auth { display: grid; place-items: center; padding: 24px 0 48px; }
.auth__box { width: min(460px, 100%); display: grid; gap: 18px; }
.auth--wide .auth__box { width: min(720px, 100%); }
.auth__title { font-size: clamp(1.5rem, 3vw, 2rem); }
.auth__lead { margin: -8px 0 0; color: var(--fg-2); font-size: .9375rem; }
.auth__alt { margin: 0; text-align: center; color: var(--fg-3); font-size: .875rem; }
.auth__alt a, .auth__links a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.auth__links { display: flex; justify-content: space-between; gap: 16px; font-size: .875rem; flex-wrap: wrap; }

.addnews__vote summary { cursor: pointer; }
.addnews__xf input, .addnews__xf select, .addnews__xf textarea { margin-bottom: 4px; }

/* ── Статистика, 404 ────────────────────────────────────────────────────── */

.stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stats__card { display: grid; gap: 6px; text-align: center; }
.stats__num { font-family: var(--font-display); font-weight: 800; font-size: 2rem; font-variant-numeric: tabular-nums; }
.stats__card span { color: var(--fg-3); font-size: .875rem; }

.err404 { padding: 64px 0 80px; }
.err404__title { font-size: clamp(2rem, 6vw, 3.5rem); }
.err404__search { width: min(560px, 100%); margin: 8px auto 0; }
.err404__acts { justify-content: center; }
.empty__lead { color: var(--fg-2); max-width: 52ch; }

/* ── Друк ───────────────────────────────────────────────────────────────── */

@media print {
    .uf-aura, .uf-atmos, .hdr, .mnav, .reel-arrow { display: none !important; }
    body { background: #fff; color: #000; }
}