/* ─── 01. Tokens ─── */
:root {
    --vb-bg-0: #08080d;
    --vb-bg-1: #0c0c14;
    --vb-bg-2: #14141d;
    --vb-bg-3: #1a1a25;
    --vb-bg-4: #232331;
    --vb-line: rgba(255,255,255,.06);
    --vb-line-2: rgba(255,255,255,.10);

    --vb-ink-1: #f4f4f8;
    --vb-ink-2: rgba(255,255,255,.78);
    --vb-ink-3: rgba(255,255,255,.55);
    --vb-ink-4: rgba(255,255,255,.36);

    --vb-pink: #ffd44d;
    --vb-pink-2: #ffe27a;
    --vb-yellow: #ffd44d;
    --vb-yellow-2: #ffe27a;
    --vb-cyan: #4cc4ff;

    --vb-radius-s: 6px;
    --vb-radius-m: 10px;
    --vb-radius-l: 16px;
    --vb-radius-pill: 999px;

    --vb-shadow-s: 0 2px 6px rgba(0,0,0,.45);
    --vb-shadow-m: 0 8px 24px rgba(0,0,0,.55);
    --vb-shadow-l: 0 18px 50px rgba(0,0,0,.65);

    --vb-font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --vb-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --vb-wrap: 1320px;
    --vb-pad: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.vb-body {
    background: var(--vb-bg-0);
    color: var(--vb-ink-1);
    font-family: var(--vb-font-body);
    font-size: 15px;
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--vb-pink-2); }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }

.vb-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.vb-skip {
    position: absolute; left: -9999px; top: 0; z-index: 10000;
    background: var(--vb-pink); color: #fff; padding: 12px 20px;
    border-radius: 0 0 var(--vb-radius-m) 0; font-weight: 600;
}
.vb-skip:focus { left: 0; }

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

/* ─── 02. Buttons / pills / chips ─── */
.vb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; border-radius: var(--vb-radius-pill);
    font-family: var(--vb-font-display);
    font-weight: 600; font-size: 14px; letter-spacing: .2px;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
    line-height: 1;
}
.vb-btn:active { transform: translateY(1px); }
.vb-btn--block { width: 100%; }

.vb-btn--play {
    background: #fff; color: #0a0a12;
}
.vb-btn--play:hover { background: var(--vb-yellow); color: #0a0a12; }

.vb-btn--solid {
    background: var(--vb-pink); color: #fff;
}
.vb-btn--solid:hover { background: var(--vb-pink-2); color: #fff; }

.vb-btn--ghost {
    background: rgba(255,255,255,.10);
    color: var(--vb-ink-1);
    border-color: rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
}
.vb-btn--ghost:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.30);
    color: #fff;
}

.vb-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--vb-radius-pill);
    background: rgba(255,255,255,.08); color: var(--vb-ink-2);
    font-family: var(--vb-font-display); font-size: 12px; font-weight: 600;
    border: 1px solid rgba(255,255,255,.06);
}
a.vb-pill:hover { background: rgba(255,255,255,.16); color: #fff; }
.vb-pill--type {
    background: var(--vb-pink); color: #fff; border-color: transparent;
}
.vb-pill--rate {
    background: rgba(255,212,77,.14); color: var(--vb-yellow);
    border-color: rgba(255,212,77,.28);
}
.vb-pill--state-returning-series,
.vb-pill--state-in-production { background: rgba(76,196,255,.14); color: var(--vb-cyan); border-color: rgba(76,196,255,.28); }
.vb-pill--state-ended,
.vb-pill--state-canceled { background: rgba(255,255,255,.10); color: var(--vb-ink-2); }

.vb-tag {
    display: inline-flex; padding: 4px 11px;
    border-radius: var(--vb-radius-s);
    background: var(--vb-bg-3); color: var(--vb-ink-2);
    font-size: 12px; font-weight: 600; letter-spacing: .2px;
    border: 1px solid var(--vb-line);
}
.vb-tag:hover { background: var(--vb-pink); color: #fff; border-color: transparent; }

.vb-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--vb-radius-pill);
    background: var(--vb-bg-2); color: var(--vb-ink-2);
    font-family: var(--vb-font-display); font-weight: 600; font-size: 13px;
    border: 1px solid var(--vb-line);
    white-space: nowrap;
}
.vb-chip:hover { color: #fff; border-color: rgba(232,57,139,.5); }
.vb-chip.is-on {
    background: var(--vb-pink); color: #fff; border-color: transparent;
}

/* Popover ─ details/summary */
.vb-pop { position: relative; }
.vb-pop > summary { list-style: none; cursor: pointer; }
.vb-pop > summary::-webkit-details-marker { display: none; }
.vb-pop[open] > summary { background: var(--vb-bg-3); color: #fff; border-color: rgba(232,57,139,.4); }
.vb-pop__menu {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 180px; max-height: 280px; overflow-y: auto;
    background: var(--vb-bg-2); border: 1px solid var(--vb-line-2);
    border-radius: var(--vb-radius-m); padding: 6px;
    box-shadow: var(--vb-shadow-m); z-index: 50;
}
.vb-pop__item {
    display: block; padding: 8px 12px;
    border-radius: var(--vb-radius-s); color: var(--vb-ink-2);
    font-size: 13.5px; font-weight: 500;
    cursor: pointer; user-select: none;
}
.vb-pop__item:hover { background: var(--vb-bg-3); color: #fff; }
.vb-pop__item.is-on { background: var(--vb-pink); color: #fff; }
.vb-pop__item input[type="radio"] { margin-right: 8px; accent-color: var(--vb-pink); }

/* ─── 03. Topbar (header) ─── */
.vb-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    padding: 12px 0; pointer-events: none;
    transition: background .25s ease, backdrop-filter .25s ease, transform .25s ease;
}
.vb-topbar.is-fixed {
    background: linear-gradient(180deg, rgba(8,8,13,.92), rgba(8,8,13,.78));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--vb-line);
    pointer-events: auto;
}
.vb-topbar.is-hidden { transform: translateY(-100%); }

.vb-topbar__row {
    position: relative;
    width: 100%;
    max-width: var(--vb-wrap);
    margin: 0 auto;
    padding: 0 var(--vb-pad);
    display: flex; align-items: center; gap: 16px;
    pointer-events: auto;
}
.vb-brand { display: inline-flex; flex-shrink: 0; }
.vb-brand img { height: 28px; width: auto; }
.vb-brand--ghost { width: 0; height: 28px; }

.vb-quicklinks {
    display: none; align-items: center; gap: 22px;
    font-family: var(--vb-font-display); font-weight: 600; font-size: 14px;
    color: var(--vb-ink-2);
    position: absolute; left: 50%; transform: translateX(-50%);
}
.vb-quicklinks a:hover { color: #fff; }

.vb-topbar__tools {
    margin-left: auto;
    display: flex; align-items: center; gap: 10px;
}
.vb-quicklinks + .vb-topbar__tools { margin-left: auto; }

.vb-topbar__search {
    display: none; align-items: center; gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 7px 14px;
    transition: border-color .2s ease, background .2s ease;
}
.vb-topbar__search:focus-within {
    border-color: var(--vb-yellow);
    background: rgba(255,255,255,.12);
}
.vb-topbar__search svg { color: var(--vb-ink-3); flex-shrink: 0; }
.vb-topbar__search input {
    background: transparent; border: 0; outline: none;
    color: #fff; font: 500 13px var(--vb-font-body);
    width: 140px;
}
.vb-topbar__search input::placeholder { color: var(--vb-ink-4); }

@media (min-width: 920px) {
    .vb-topbar__search { display: inline-flex; }
}

.vb-tool {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    color: var(--vb-ink-1);
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.08);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.vb-tool:hover {
    background: var(--vb-pink); color: #fff; border-color: transparent;
}
.vb-burger { display: inline-flex; }

@media (min-width: 920px) {
    .vb-quicklinks { display: inline-flex; }
    .vb-burger { display: none; }
}

/* ─── 04. Drawer (mobile menu) ─── */
.vb-drawer {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,.6);
    display: none;
}
.vb-drawer:not([hidden]) { display: block; }
.vb-drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(86vw, 340px);
    background: var(--vb-bg-1);
    border-left: 1px solid var(--vb-line);
    padding: 64px 22px 22px;
    box-shadow: var(--vb-shadow-l);
    transform: translateX(100%);
    transition: transform .28s ease;
}
.vb-drawer.is-shown .vb-drawer__panel { transform: translateX(0); }
.vb-drawer__shut {
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px;
    border-radius: 999px; border: none;
    background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
}
.vb-drawer__shut:hover { background: rgba(255,255,255,.16); }
.vb-drawer__find {
    display: flex; align-items: center; gap: 10px;
    background: var(--vb-bg-3); border: 1px solid var(--vb-line);
    border-radius: var(--vb-radius-pill);
    padding: 10px 16px; margin-bottom: 18px;
}
.vb-drawer__find input { flex: 1; background: transparent; border: 0; color: #fff; outline: none; font-size: 14px; }
.vb-drawer__nav { display: flex; flex-direction: column; gap: 2px; }
.vb-drawer__nav a {
    padding: 12px 14px; border-radius: var(--vb-radius-m);
    color: var(--vb-ink-2); font-family: var(--vb-font-display); font-weight: 600;
}
.vb-drawer__nav a:hover { background: var(--vb-bg-3); color: #fff; }

/* ─── 05. Notification bar ─── */
.vb-notify {
    background: linear-gradient(90deg, rgba(232,57,139,.25), rgba(232,57,139,.10));
    border-bottom: 1px solid rgba(232,57,139,.20);
    color: var(--vb-ink-1);
    font-size: 13.5px;
    position: relative; z-index: 210;
}
.vb-notify__row {
    width: 100%; max-width: var(--vb-wrap);
    margin: 0 auto; padding: 9px var(--vb-pad);
    display: flex; align-items: center; gap: 12px;
}
.vb-notify__dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--vb-pink);
    box-shadow: 0 0 0 4px rgba(232,57,139,.18); flex-shrink: 0;
}
.vb-notify__msg { flex: 1; }
.vb-notify__act {
    background: transparent; color: var(--vb-pink-2);
    border: 0; cursor: pointer; font: 600 13px var(--vb-font-display);
    padding: 4px 10px;
}
.vb-notify__act:hover { color: var(--vb-yellow); }
.vb-notify__shut {
    width: 28px; height: 28px; border: 0;
    background: rgba(255,255,255,.08); color: #fff;
    border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.vb-notify__shut:hover { background: rgba(255,255,255,.18); }

.vb-modal {
    background: transparent; border: 0; padding: 0;
}
.vb-modal::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(4px); }
.vb-modal__card {
    background: var(--vb-bg-2); border: 1px solid var(--vb-line);
    border-radius: var(--vb-radius-l); width: min(94vw, 480px);
    color: var(--vb-ink-1); box-shadow: var(--vb-shadow-l);
    overflow: hidden;
}
.vb-modal__head {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 22px; border-bottom: 1px solid var(--vb-line);
}
.vb-modal__head h3 { margin: 0; font: 700 16px var(--vb-font-display); flex: 1; }
.vb-modal__shut {
    width: 30px; height: 30px; border: 0;
    background: rgba(255,255,255,.08); color: #fff;
    border-radius: 999px; cursor: pointer;
}
.vb-modal__body { padding: 18px 22px; color: var(--vb-ink-2); line-height: 1.6; }
.vb-modal__foot { padding: 14px 22px 18px; }

/* ─── 06. Crumbs ─── */
.vb-crumbs {
    background: rgba(255,255,255,.02);
    border-bottom: 1px solid var(--vb-line);
    padding: 14px 0;
    margin-top: 56px;
}
body.vb-page-landing .vb-crumbs,
body.vb-page-home    .vb-crumbs,
body.vb-page-detail  .vb-crumbs { display: none; }

.vb-crumbs__inner {
    width: 100%; max-width: var(--vb-wrap);
    margin: 0 auto; padding: 0 var(--vb-pad);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    color: var(--vb-ink-3); font-size: 13px;
}
.vb-crumbs__step:hover { color: var(--vb-pink-2); }
.vb-crumbs__sep { color: var(--vb-ink-4); }
.vb-crumbs__here { color: var(--vb-ink-1); font-weight: 600; }

/* ─── 07. Main / ad ─── */
.vb-main { padding-bottom: 60px; }
body.vb-page-landing .vb-main,
body.vb-page-home    .vb-main { padding-top: 0; }
body.vb-page-list    .vb-main,
body.vb-page-search  .vb-main,
body.vb-page-cat     .vb-main,
body.vb-page-person  .vb-main,
body.vb-page-request .vb-main,
body.vb-page-404     .vb-main { padding-top: 80px; }
body.vb-page-detail  .vb-main { padding-top: 0; }

.vb-ad {
    width: 100%; max-width: var(--vb-wrap);
    margin: 18px auto 8px; padding: 0 var(--vb-pad);
    text-align: center;
}

/* ─── 08. Tile (poster card) ─── */
.vb-tile {
    width: 100%;
    transition: transform .2s ease;
}
.vb-tile__link {
    display: block; color: var(--vb-ink-1);
}
.vb-tile__art {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: var(--vb-radius-s);
    overflow: hidden;
    background: var(--vb-bg-3);
}
.vb-tile__img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease, opacity .25s ease;
}
.vb-tile:hover .vb-tile__img { transform: scale(1.05); }

.vb-tile__chip {
    position: absolute; top: 6px;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 6px; border-radius: 3px;
    font: 700 10px var(--vb-font-display); letter-spacing: .3px;
    color: #fff;
}
.vb-tile__chip--type { left: 6px; background: var(--vb-pink); color: #000; }
.vb-tile__chip--rate { right: 6px; background: transparent; color: var(--vb-yellow); font-size: 11px; }

.vb-tile__epi {
    position: absolute; left: 6px; bottom: 6px;
    background: rgba(0,0,0,.7); color: #fff;
    padding: 2px 6px; border-radius: 3px;
    font: 700 10px var(--vb-font-display); letter-spacing: .2px;
}

.vb-tile__cue {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px;
    background: rgba(0,0,0,.6);
    color: #fff;
    opacity: 0; transition: opacity .25s ease;
    padding: 14px 10px;
    text-align: center;
}
.vb-tile__cue svg {
    width: 42px; height: 42px;
    background: #e53935;
    padding: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vb-tile__cue-title {
    font: 700 14px var(--vb-font-display);
    color: #fff;
    line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}
.vb-tile__cue-sub {
    font: 500 12px var(--vb-font-body);
    color: rgba(255,255,255,.65);
}
.vb-tile:hover .vb-tile__cue { opacity: 1; }

.vb-tile__cap {
    display: none;
}

/* ─── 09. Rail (slider) ─── */
.vb-rail {
    position: relative;
    margin: 0;
}
.vb-rail__track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 4px 0 10px;
    scrollbar-width: none;
}
.vb-rail__track::-webkit-scrollbar { display: none; }
.vb-rail__track > * {
    flex: 0 0 auto;
    width: 150px;
    scroll-snap-align: start;
}
.vb-rail__btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px;
    background: rgba(20,20,29,.92);
    color: var(--vb-ink-1);
    border: 1px solid var(--vb-line-2);
    border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 5;
    box-shadow: var(--vb-shadow-m);
    transition: background .2s, color .2s;
}
.vb-rail__btn:hover { background: var(--vb-pink); color: #fff; border-color: transparent; }
.vb-rail__btn:disabled { opacity: 0; pointer-events: none; }
.vb-rail__btn--prev { left: -10px; }
.vb-rail__btn--next { right: -10px; }

@media (min-width: 720px)  { .vb-rail__track > * { width: 160px; } }
@media (min-width: 1100px) { .vb-rail__track > * { width: 170px; } }

/* ─── 10. Bloc (section block) ─── */
.vb-bloc { margin: 32px 0 16px; }
.vb-bloc__head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
}
.vb-bloc__h {
    margin: 0;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--vb-pink);
}
.vb-bloc__more {
    margin-left: auto; font: 600 13px var(--vb-font-display);
    color: var(--vb-ink-3);
}
.vb-bloc__more:hover { color: var(--vb-yellow); }

/* ─── 11. Hero (home) ─── */
.vb-hero {
    position: relative; isolation: isolate;
    min-height: clamp(520px, 82vh, 780px);
    overflow: hidden;
    margin-top: 0;
}
.vb-hero__slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .9s ease;
}
.vb-hero__slide.is-on { opacity: 1; visibility: visible; }

.vb-hero__back {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden;
}
.vb-hero__back img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
    transform: scale(1.08);
    animation: vbHeroDrift 18s ease-in-out infinite alternate;
}
.vb-hero__slide.is-on .vb-hero__back img {
    animation: vbHeroKen 16s ease-out forwards;
}
@keyframes vbHeroKen {
    0%   { transform: scale(1.12) translate3d(0, 0, 0); }
    100% { transform: scale(1.02) translate3d(0, -2%, 0); }
}
@keyframes vbHeroDrift {
    0%   { transform: scale(1.08) translate3d(0, 0, 0); }
    100% { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

/* atmospheric fog drifting across the lower third */
.vb-hero__fog {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(120% 60% at 18% 100%, rgba(120,130,150,.16) 0%, transparent 55%),
        radial-gradient(90% 50% at 70% 96%, rgba(90,100,120,.12) 0%, transparent 60%);
    mix-blend-mode: screen;
    opacity: .8;
    animation: vbFog 14s ease-in-out infinite alternate;
}
@keyframes vbFog {
    0%   { transform: translate3d(0, 0, 0); opacity: .55; }
    100% { transform: translate3d(3%, -1.5%, 0); opacity: .85; }
}

/* cinematic light rays sweeping from upper right */
.vb-hero__rays {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(115deg, transparent 38%, rgba(255,225,150,.07) 48%, transparent 58%),
        linear-gradient(125deg, transparent 60%, rgba(255,235,180,.05) 68%, transparent 76%);
    mix-blend-mode: screen;
    opacity: .9;
    animation: vbRays 9s ease-in-out infinite alternate;
}
@keyframes vbRays {
    0%   { opacity: .45; transform: translateX(-2%); }
    100% { opacity: .9;  transform: translateX(2%); }
}

/* sophisticated readability gradient: dark left, open right + bottom vignette */
.vb-hero__scrim {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(6,6,11,.94) 0%, rgba(6,6,11,.74) 30%, rgba(6,6,11,.30) 60%, rgba(6,6,11,.04) 100%),
        linear-gradient(0deg, var(--vb-bg-0) 1%, rgba(6,6,11,.55) 22%, rgba(6,6,11,.05) 55%, rgba(6,6,11,.35) 100%);
}

/* subtle film-grain texture */
.vb-hero__grain {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    opacity: .06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    animation: vbGrain .6s steps(2) infinite;
}
@keyframes vbGrain {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(-4px, 3px, 0); }
    100% { transform: translate3d(3px, -2px, 0); }
}

.vb-hero__copy {
    position: relative; z-index: 4;
    display: flex; align-items: flex-end;
    min-height: clamp(520px, 82vh, 780px);
    padding: 84px 0 188px;
}
.vb-hero__inner {
    max-width: 600px;
    animation: vbHeroRise .8s cubic-bezier(.2,.7,.2,1) both;
}
.vb-hero__slide.is-on .vb-hero__inner { animation: vbHeroRise .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vbHeroRise {
    0%   { opacity: 0; transform: translateY(22px); }
    100% { opacity: 1; transform: translateY(0); }
}

.vb-hero__kicker {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0 0 16px;
    font: 700 12px var(--vb-font-display);
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--vb-yellow);
}
.vb-hero__kicker-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--vb-yellow);
    box-shadow: 0 0 10px 1px rgba(255,212,77,.7);
}
.vb-hero__title {
    margin: 0 0 16px;
    font: 900 clamp(38px, 6vw, 76px) var(--vb-font-display);
    letter-spacing: -1.5px;
    line-height: .96;
    color: #fff;
    text-shadow: 0 6px 36px rgba(0,0,0,.6);
    text-wrap: balance;
}
.vb-hero__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    color: rgba(255,255,255,.82);
    font: 600 14px var(--vb-font-display);
    margin-bottom: 18px;
}
.vb-hero__rate {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--vb-yellow); font-weight: 800;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(255,212,77,.12);
    border: 1px solid rgba(255,212,77,.28);
}
.vb-hero__pip { position: relative; color: rgba(255,255,255,.78); }
.vb-hero__pip + .vb-hero__pip { padding-left: 16px; }
.vb-hero__pip + .vb-hero__pip::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(255,255,255,.45); transform: translateY(-50%);
}
.vb-hero__desc {
    color: rgba(255,255,255,.74);
    max-width: 520px;
    margin: 0 0 26px;
    font-size: 15px; line-height: 1.6;
    text-shadow: 0 1px 12px rgba(0,0,0,.5);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Netflix / Prime style action buttons */
.vb-hero__act { display: flex; gap: 12px; flex-wrap: wrap; }
.vb-hero__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 30px; border-radius: 6px;
    font: 700 15px var(--vb-font-display); letter-spacing: .2px;
    border: 0; cursor: pointer; line-height: 1;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.vb-hero__btn:active { transform: scale(.97); }
.vb-hero__btn--play {
    background: #fff; color: #0a0a12;
}
.vb-hero__btn--play:hover {
    background: rgba(255,255,255,.82); color: #0a0a12;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.vb-hero__btn--info {
    background: rgba(110,110,120,.55); color: #fff;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vb-hero__btn--info:hover { background: rgba(130,130,140,.5); color: #fff; }

.vb-hero__strip {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    z-index: 5;
    display: flex; gap: 10px; overflow-x: auto;
    padding: 0 var(--vb-pad);
    width: 100%; max-width: var(--vb-wrap);
    scrollbar-width: none;
}
.vb-hero__strip::-webkit-scrollbar { display: none; }
.vb-hero__thumb {
    flex: 0 0 auto;
    width: 64px; aspect-ratio: 2 / 3;
    border: 2px solid transparent; border-radius: var(--vb-radius-s);
    overflow: hidden; padding: 0; background: var(--vb-bg-3); cursor: pointer;
    opacity: .5; transition: opacity .25s, border-color .25s, transform .25s;
}
.vb-hero__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vb-hero__thumb:hover { opacity: .85; transform: translateY(-3px); }
.vb-hero__thumb.is-on {
    opacity: 1; border-color: var(--vb-yellow);
    box-shadow: 0 6px 20px rgba(255,212,77,.35);
}

@media (min-width: 720px) {
    .vb-hero__thumb { width: 78px; }
}
@media (max-width: 600px) {
    .vb-hero__copy { padding: 72px 0 168px; }
    .vb-hero__strip { bottom: 18px; }
    .vb-hero__thumb { width: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    .vb-hero__back img,
    .vb-hero__fog,
    .vb-hero__rays,
    .vb-hero__grain,
    .vb-hero__inner { animation: none !important; }
}

/* ─── 12. Home grid (lane + sidebar) ─── */
.vb-home {
    margin-top: 0;
    padding-top: 28px;
    padding-left: 0;
}
.vb-home__h1 {
    margin: 8px 0 18px;
    font: 700 22px var(--vb-font-display);
    color: var(--vb-ink-1);
}
.vb-home__grid {
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr;
}
@media (min-width: 1100px) {
    .vb-home__grid { grid-template-columns: minmax(0,1fr) 320px; gap: 32px; }
}

/* ─── 13. Side lists (TOP / POPULAR) ─── */
.vb-list {
    margin-bottom: 22px;
}
.vb-list__head {
    display: flex; align-items: center; gap: 8px;
    padding: 0 4px 14px;
}
.vb-list__icon {
    color: var(--vb-yellow);
    flex-shrink: 0;
}
.vb-list__h {
    margin: 0; font: 800 16px var(--vb-font-display); letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff; flex: 1;
}
.vb-list__tabs {
    display: inline-flex; gap: 4px;
}
.vb-list__tab {
    background: transparent; border: 0; cursor: pointer;
    padding: 6px 14px; border-radius: var(--vb-radius-s);
    font: 600 13px var(--vb-font-display); letter-spacing: .2px;
    color: var(--vb-ink-3);
    transition: background .18s ease, color .18s ease;
}
.vb-list__tab:hover { color: #fff; }
.vb-list__tab.is-on {
    background: var(--vb-bg-3);
    color: #fff;
}

.vb-list__items {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.vb-list__row {
    background: var(--vb-bg-2);
    border-radius: var(--vb-radius-m);
    transition: background .18s ease;
}
.vb-list__row[hidden] { display: none; }

.vb-list__link {
    display: flex; align-items: center; gap: 14px;
    padding: 8px 12px 8px 8px;
    color: var(--vb-ink-1);
    border-radius: var(--vb-radius-m);
}
.vb-list__row:hover {
    background: var(--vb-yellow);
}
.vb-list__row:hover .vb-list__link,
.vb-list__row:hover .vb-list__sub,
.vb-list__row:hover .vb-list__name { color: #1a1a25; }
.vb-list__row:hover .vb-list__rank {
    background: #1a1a25;
    color: var(--vb-yellow);
    border-color: #1a1a25;
}

.vb-list__thumbwrap {
    position: relative; flex-shrink: 0;
    width: 56px; height: 56px;
}
.vb-list__thumb {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: var(--vb-radius-s);
    background: var(--vb-bg-3);
    display: block;
}
.vb-list__rank {
    position: absolute;
    left: -6px; bottom: -4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--vb-bg-2);
    border: 2px solid var(--vb-yellow);
    color: #fff;
    font: 700 11px var(--vb-font-display);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.vb-list__meta {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0; flex: 1;
}
.vb-list__sub {
    font: 500 12px var(--vb-font-body);
    color: var(--vb-ink-3);
}
.vb-list__name {
    font: 700 14px var(--vb-font-display);
    color: #fff;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    line-height: 1.3;
}

/* ─── 14. Landing page (index) ─── */
.vb-land {
    position: relative; isolation: isolate;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 80px var(--vb-pad) 60px;
    text-align: center;
}
.vb-land__art {
    position: fixed; inset: 0; z-index: -1;
    background-image: var(--vb-land-art, none);
    background-size: cover; background-position: center;
}
.vb-land__inner {
    width: 100%; max-width: 780px;
    display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.vb-land__mark {
    margin: 0; padding: 0; line-height: 0;
}
.vb-land__mark img {
    width: clamp(220px, 38vw, 400px); height: auto;
    filter: drop-shadow(0 12px 36px rgba(0,0,0,.7));
}

.vb-land__find {
    width: 100%; max-width: 580px;
    display: flex; align-items: stretch;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--vb-radius-pill);
    padding: 4px;
    box-shadow: 0 14px 50px rgba(0,0,0,.45);
}
.vb-land__filt > summary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; color: var(--vb-ink-1);
    font: 600 13px var(--vb-font-display); letter-spacing: .2px;
    border-radius: 999px; cursor: pointer;
}
.vb-land__filt > summary svg + svg { margin-left: 0; }
.vb-land__filt[open] > summary { background: rgba(255,255,255,.12); }
.vb-land__filtmenu { left: 0; }
.vb-land__input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: none;
    color: #fff; font: 500 14.5px var(--vb-font-body);
    padding: 0 14px;
}
.vb-land__input::placeholder { color: var(--vb-ink-3); }
.vb-land__go {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--vb-pink); color: #fff;
    border: 0; border-radius: 999px; cursor: pointer;
}
.vb-land__go:hover { background: var(--vb-pink-2); }

.vb-land__quick {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.vb-land__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font: 700 13.5px var(--vb-font-display); letter-spacing: .25px;
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vb-land__cta:hover {
    background: rgba(0,0,0,.75);
    border-color: rgba(255,255,255,.32);
    color: #fff;
    transform: translateY(-2px);
}
.vb-land__cta--accent {
    background: linear-gradient(135deg, var(--vb-pink), var(--vb-pink-2));
    border-color: transparent;
    box-shadow: 0 12px 30px rgba(232,57,139,.45);
}
.vb-land__cta--accent:hover {
    background: linear-gradient(135deg, var(--vb-pink-2), var(--vb-pink));
    box-shadow: 0 16px 40px rgba(232,57,139,.55);
}

/* Landing prose panel — centered sheet, transparent flanks */
.vb-land-prose {
    position: relative;
    padding: 60px var(--vb-pad);
    background: transparent;
}
.vb-land-prose__sheet {
    width: 100%; max-width: 1080px;
    margin: 0 auto;
    padding: 36px clamp(20px, 4vw, 48px);
    color: var(--vb-ink-2);
    background: rgba(8, 8, 13, .82);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--vb-radius-l);
    box-shadow: var(--vb-shadow-l);
}
.vb-land-prose__h {
    margin: 0 0 22px;
    font: 700 clamp(22px, 3.4vw, 30px) var(--vb-font-display);
    color: #fff; letter-spacing: -.2px;
    line-height: 1.2;
}
.vb-land-prose p {
    margin: 0 0 16px;
    color: var(--vb-ink-2);
    font-size: 14.5px; line-height: 1.75;
    max-width: 920px;
}
.vb-land-prose p:last-child { margin-bottom: 0; }

/* ─── 15. Filters / list page ─── */
.vb-filters {
    margin-bottom: 18px;
}
.vb-filters__row {
    display: flex; flex-wrap: wrap; gap: 10px;
    align-items: center;
}

/* Dropdown filter (details/summary) */
.vb-fdrop { position: relative; }
.vb-fdrop > summary {
    list-style: none; cursor: pointer;
}
.vb-fdrop > summary::-webkit-details-marker { display: none; }
.vb-fdrop__btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: var(--vb-radius-s);
    background: var(--vb-bg-2); border: 1px solid var(--vb-line-2);
    color: var(--vb-ink-2);
    font: 500 13.5px var(--vb-font-display);
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease;
}
.vb-fdrop__btn strong { color: #fff; font-weight: 700; }
.vb-fdrop__btn:hover { border-color: rgba(255,212,77,.4); }
.vb-fdrop[open] > summary .vb-fdrop__btn {
    border-color: var(--vb-yellow);
    background: var(--vb-bg-3);
}
.vb-fdrop__caret { color: var(--vb-ink-3); transition: transform .2s ease; }
.vb-fdrop[open] .vb-fdrop__caret { transform: rotate(180deg); color: var(--vb-yellow); }

.vb-fdrop__menu {
    position: absolute; top: calc(100% + 8px); left: 0;
    z-index: 60;
    min-width: 220px; max-height: 320px; overflow-y: auto;
    background: var(--vb-bg-2);
    border: 1px solid var(--vb-line-2);
    border-radius: var(--vb-radius-m);
    padding: 8px;
    box-shadow: var(--vb-shadow-l);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.vb-fdrop__menu::-webkit-scrollbar { display: none; }
.vb-fdrop__menu--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    min-width: 320px;
}
.vb-fdrop__item {
    display: block;
    padding: 9px 12px; border-radius: var(--vb-radius-s);
    color: var(--vb-ink-2);
    font: 500 13px var(--vb-font-body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .15s ease, color .15s ease;
}
.vb-fdrop__item:hover { background: var(--vb-bg-3); color: #fff; }
.vb-fdrop__item.is-on { background: var(--vb-yellow); color: #1a1a25; font-weight: 700; }

@media (max-width: 520px) {
    .vb-fdrop, .vb-fdrop > summary, .vb-fdrop__btn { width: 100%; }
    .vb-fdrop__btn { justify-content: space-between; }
    .vb-fdrop__menu { left: 0; right: 0; width: 100%; }
    .vb-fdrop__menu--grid { min-width: 0; }
}

.vb-list-page__head { margin: 18px 0 22px; }
.vb-list-page__h {
    margin: 0; font: 800 28px var(--vb-font-display);
    color: var(--vb-ink-1);
}
.vb-list-page__sub {
    margin: 6px 0 0; color: var(--vb-ink-3); font-size: 14px;
}

.vb-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
}
@media (min-width: 540px)  { .vb-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 760px)  { .vb-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1024px) { .vb-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (min-width: 1280px) { .vb-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }

.vb-empty {
    padding: 60px 20px; text-align: center;
    color: var(--vb-ink-2); line-height: 1.7;
}
.vb-empty p { margin: 0 0 16px; }
.vb-empty__act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }

/* ─── 16. Detail page ─── */

/* Backdrop */
.vb-mv__back {
    position: absolute; top: 0; left: 0; right: 0;
    height: 420px; z-index: -1; overflow: hidden;
}
.vb-mv__back img {
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
    opacity: .35;
}
.vb-mv__back::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,8,13,.3) 0%, var(--vb-bg-0) 100%);
}

/* Info grid */
.vb-mv {
    position: relative;
    padding: 100px 0 40px;
}
.vb-mv__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 720px) {
    .vb-mv__grid { grid-template-columns: 200px 1fr; gap: 32px; }
}

.vb-mv__poster {
    align-self: start;
}
.vb-mv__poster img {
    width: 100%; max-width: 200px;
    aspect-ratio: 2/3; object-fit: cover;
    border-radius: var(--vb-radius-m);
    box-shadow: var(--vb-shadow-l);
    display: block; margin: 0 auto;
}
@media (min-width: 720px) {
    .vb-mv__poster img { margin: 0; }
}

.vb-mv__info {}
.vb-mv__title {
    margin: 0 0 10px;
    font: 800 clamp(24px, 4vw, 36px) var(--vb-font-display);
    color: #fff; line-height: 1.1; letter-spacing: -.3px;
}
.vb-mv__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-bottom: 12px;
    font: 600 13px var(--vb-font-display);
    color: var(--vb-ink-3);
}
.vb-mv__type {
    color: var(--vb-ink-2);
}
.vb-mv__rate {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--vb-yellow); font-weight: 700;
}
.vb-mv__year, .vb-mv__runtime { color: var(--vb-ink-3); }
.vb-mv__meta > span + span::before {
    content: "\00B7"; margin-right: 12px;
    color: var(--vb-ink-4);
}

.vb-mv__genres {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 14px;
}
.vb-mv__genre {
    padding: 4px 12px; border-radius: 999px;
    background: rgba(255,212,77,.18); color: var(--vb-yellow);
    font: 600 12px var(--vb-font-display);
    border: 1px solid rgba(255,212,77,.30);
    transition: background .18s, color .18s;
}
.vb-mv__genre:hover { background: var(--vb-yellow); color: #1a1a25; }

.vb-mv__desc {
    margin: 0 0 18px;
    color: var(--vb-ink-2);
    font-size: 14px; line-height: 1.65;
    max-width: 600px;
}

.vb-mv__actions {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 20px;
}
.vb-mv__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 22px; border-radius: 6px;
    font: 700 14px var(--vb-font-display);
    border: 1.5px solid rgba(255,255,255,.5);
    background: transparent; color: #fff;
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .15s;
    line-height: 1;
}
.vb-mv__btn:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.vb-mv__btn:active { transform: scale(.97); }
.vb-mv__btn--play {
    background: #fff; color: #0a0a12; border-color: #fff;
}
.vb-mv__btn--play:hover { background: rgba(255,255,255,.88); color: #0a0a12; }
.vb-mv__btn--outline {}

.vb-mv__extra {
    border-top: 1px solid var(--vb-line);
    padding-top: 14px;
}
.vb-mv__line {
    margin: 0 0 6px; color: var(--vb-ink-2); font-size: 13px; line-height: 1.5;
}
.vb-mv__line span { color: var(--vb-ink-3); font-weight: 600; margin-right: 6px; }
.vb-mv__line a { color: var(--vb-ink-1); }
.vb-mv__line a:hover { color: var(--vb-yellow); }

/* Player area */
.vb-mv__player {
    padding: 30px 0;
}

/* Related grid */
.vb-mv__related {
    padding: 40px 0 20px;
}
.vb-mv__related-h {
    margin: 0 0 18px;
    font: 700 20px var(--vb-font-display);
    color: var(--vb-ink-1);
}

/* ─── 17. Player ─── */
.vb-player {
    margin: 22px auto 30px;
}
.vb-player--cued .vb-player__poster { display: flex; }
.vb-player__frame {
    position: relative;
    width: 100%; aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--vb-radius-m);
    overflow: hidden;
    box-shadow: var(--vb-shadow-l);
    border: 1px solid var(--vb-line);
}
.vb-player__poster {
    position: absolute; inset: 0;
    display: flex;
    align-items: center; justify-content: center;
    cursor: pointer;
}
.vb-player__poster img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: .45;
}
.vb-player__cue {
    position: relative; z-index: 2;
    width: 72px; height: 72px;
    border-radius: 50%; border: 0;
    background: var(--vb-yellow);
    color: #1a1a25; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 28px rgba(255,212,77,.45);
    transition: transform .2s ease;
}
.vb-player__cue:hover { transform: scale(1.08); }
.vb-player__cue svg { transform: translateX(2px); }
.vb-player__err {
    position: relative; z-index: 2;
    color: #fff; font: 600 14px var(--vb-font-display);
    background: rgba(0,0,0,.7); padding: 12px 18px;
    border-radius: var(--vb-radius-s);
}

.vb-player__iframe {
    width: 100%; height: 100%;
    border: 0; display: block;
}
.vb-player__loading {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; background: rgba(0,0,0,.7);
    color: var(--vb-ink-2); font-size: 14px;
}
.vb-player__spin {
    width: 32px; height: 32px;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: var(--vb-pink);
    border-radius: 50%;
    animation: vbSpin 1s linear infinite;
}
@keyframes vbSpin { to { transform: rotate(360deg); } }

.vb-player__gate {
    position: absolute; inset: 0; z-index: 5;
    display: block;
}

.vb-player__servers {
    margin-top: 12px;
    background: var(--vb-bg-2);
    border: 1px solid var(--vb-line);
    border-radius: var(--vb-radius-m);
    padding: 14px 18px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.vb-player__hint {
    margin: 0; display: inline-flex; align-items: center; gap: 6px;
    color: var(--vb-ink-3); font-size: 12.5px;
    white-space: nowrap;
}
.vb-player__tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.vb-srv {
    padding: 7px 16px;
    background: transparent; color: var(--vb-ink-2);
    border: 1px solid var(--vb-line-2);
    border-radius: 999px;
    font: 600 12.5px var(--vb-font-display);
    cursor: pointer; transition: all .18s ease;
}
.vb-srv:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); }
.vb-srv.is-on { background: var(--vb-yellow); color: #1a1a25; border-color: var(--vb-yellow); font-weight: 700; }

.vb-epnav {
    margin-top: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--vb-bg-2); border: 1px solid var(--vb-line);
    border-radius: var(--vb-radius-m); padding: 10px 14px;
    flex-wrap: wrap;
}
.vb-epnav__btn {
    padding: 7px 13px; border-radius: var(--vb-radius-s);
    background: rgba(255,255,255,.06); border: 1px solid var(--vb-line);
    color: var(--vb-ink-1); font: 600 12.5px var(--vb-font-display);
    cursor: pointer;
}
.vb-epnav__btn:hover:not(:disabled) { background: var(--vb-pink); color: #fff; border-color: transparent; }
.vb-epnav__btn:disabled { opacity: .4; cursor: default; }
.vb-epnav__now { color: var(--vb-ink-2); font-size: 13px; flex: 1; text-align: center; }

.vb-report {
    margin-top: 12px;
}
.vb-report__toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; background: transparent;
    border: 1px solid var(--vb-line); color: var(--vb-ink-3);
    border-radius: var(--vb-radius-pill); cursor: pointer;
    font: 600 12px var(--vb-font-display);
}
.vb-report__toggle:hover { color: var(--vb-yellow); border-color: rgba(255,212,77,.3); }
.vb-report__form {
    display: none; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.vb-report__form.is-shown { display: flex; }
.vb-report__form select,
.vb-report__form textarea {
    background: var(--vb-bg-3);
    border: 1px solid var(--vb-line);
    border-radius: var(--vb-radius-s);
    color: var(--vb-ink-1); padding: 9px 12px;
    font: 500 13px var(--vb-font-body); outline: none;
}
.vb-report__form select { min-width: 200px; }
.vb-report__form textarea { width: 100%; resize: vertical; min-height: 60px; }
.vb-report__form button {
    padding: 9px 18px; background: var(--vb-pink); color: #fff;
    border: 0; border-radius: var(--vb-radius-s); cursor: pointer;
    font: 700 13px var(--vb-font-display);
}
.vb-report__form button:hover { background: var(--vb-pink-2); }

/* ─── 18. Episodes ─── */
.vb-eps { padding: 30px 0 0; }
.vb-eps__head {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    margin-bottom: 16px;
}
.vb-eps__h {
    margin: 0; font: 700 20px var(--vb-font-display); color: var(--vb-pink);
    flex: 1;
}
.vb-eps__tools {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}

/* Season dropdown (matches theme dropdowns) */
.vb-eps__seasonpop { position: relative; }
.vb-eps__seasondrop > summary {
    list-style: none; cursor: pointer;
}
.vb-eps__seasondrop > summary::-webkit-details-marker { display: none; }
.vb-eps__seasonbtn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 16px; border-radius: var(--vb-radius-s);
    background: var(--vb-bg-2); border: 1px solid var(--vb-line-2);
    color: #fff; font: 700 13px var(--vb-font-display);
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease;
}
.vb-eps__seasonbtn:hover { border-color: rgba(255,212,77,.4); }
.vb-eps__seasondrop[open] .vb-eps__seasonbtn {
    border-color: var(--vb-yellow); background: var(--vb-bg-3);
}
.vb-eps__seasonbtn svg { color: var(--vb-ink-3); transition: transform .2s ease; }
.vb-eps__seasondrop[open] .vb-eps__seasonbtn svg { transform: rotate(180deg); color: var(--vb-yellow); }

.vb-eps__seasonmenu {
    position: absolute; top: calc(100% + 8px); left: 0;
    z-index: 60;
    min-width: 200px; max-height: 300px; overflow-y: auto;
    background: var(--vb-bg-2);
    border: 1px solid var(--vb-line-2);
    border-radius: var(--vb-radius-m);
    padding: 6px;
    box-shadow: var(--vb-shadow-l);
    scrollbar-width: none; -ms-overflow-style: none;
}
.vb-eps__seasonmenu::-webkit-scrollbar { display: none; }
.vb-eps__seasonopt {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%;
    padding: 9px 12px; border-radius: var(--vb-radius-s);
    background: transparent; border: 0; cursor: pointer;
    color: var(--vb-ink-2); font: 600 13px var(--vb-font-display);
    text-align: left;
}
.vb-eps__seasonopt span { color: var(--vb-ink-4); font-weight: 500; font-size: 11.5px; }
.vb-eps__seasonopt:hover { background: var(--vb-bg-3); color: #fff; }
.vb-eps__seasonopt.is-on { background: var(--vb-yellow); color: #1a1a25; }
.vb-eps__seasonopt.is-on span { color: rgba(26,26,37,.65); }

.vb-eps__find {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--vb-bg-2); border: 1px solid var(--vb-line-2);
    border-radius: var(--vb-radius-s); padding: 0 14px;
    color: var(--vb-ink-3);
}
.vb-eps__find:focus-within { border-color: var(--vb-yellow); }
.vb-eps__find input {
    background: transparent; border: 0; outline: none;
    padding: 9px 0; min-width: 150px;
    color: var(--vb-ink-1); font-size: 13px;
}

.vb-sr { position: absolute; left: -9999px; }

/* Compact episode number grid */
.vb-eps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}
.vb-eps__grid[hidden] { display: none; }

.vb-epc {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--vb-bg-2);
    border: 1px solid var(--vb-line);
    border-radius: var(--vb-radius-s);
    cursor: pointer;
    color: var(--vb-ink-1);
    transition: background .18s, border-color .18s, transform .15s;
}
.vb-epc:hover {
    background: var(--vb-bg-3);
    border-color: var(--vb-yellow);
    transform: translateY(-2px);
}
.vb-epc__num {
    font: 800 16px var(--vb-font-display);
    color: var(--vb-ink-1);
}
.vb-epc:hover .vb-epc__num { color: var(--vb-yellow); }
.vb-epc__play {
    position: absolute; bottom: 4px; right: 4px;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(255,212,77,.16); color: var(--vb-yellow);
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .18s;
}
.vb-epc:hover .vb-epc__play { opacity: 1; }

.vb-epc--soon {
    opacity: .5; cursor: default; border-style: dashed;
}
.vb-epc--soon:hover { background: var(--vb-bg-2); border-color: var(--vb-line); transform: none; }
.vb-epc--soon .vb-epc__num { color: var(--vb-ink-3); }
.vb-epc__play--clock { opacity: 1; background: rgba(255,255,255,.08); color: var(--vb-ink-3); }

.vb-epc.is-live {
    border-color: var(--vb-yellow);
    background: var(--vb-yellow);
}
.vb-epc.is-live .vb-epc__num { color: #1a1a25; }
.vb-epc.is-live .vb-epc__play { opacity: 1; background: rgba(26,26,37,.2); color: #1a1a25; }

.vb-eps__empty {
    grid-column: 1 / -1;
    padding: 24px; text-align: center; color: var(--vb-ink-3);
    background: var(--vb-bg-2); border: 1px solid var(--vb-line);
    border-radius: var(--vb-radius-m);
}

/* Report under episodes */
.vb-eps .vb-report { margin-top: 18px; }

/* ─── 19. Trailer modal ─── */
.vb-trailer {
    background: transparent; border: 0; padding: 0; margin: auto;
    width: min(96vw, 1024px);
    max-height: 96vh;
}
.vb-trailer::backdrop { background: rgba(0,0,0,.85); backdrop-filter: blur(6px); }
.vb-trailer__shell {
    position: relative; width: 100%;
    background: #000;
    border-radius: var(--vb-radius-l);
    overflow: hidden;
}
.vb-trailer__shut {
    position: absolute; top: 12px; right: 12px; z-index: 10;
    width: 36px; height: 36px;
    background: rgba(0,0,0,.7); color: #fff;
    border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.vb-trailer__shut:hover { background: var(--vb-pink); }
.vb-trailer__frame {
    width: 100%; aspect-ratio: 16/9;
}
.vb-trailer__frame iframe { width: 100%; height: 100%; border: 0; }

/* ─── 20. Search / person / request / 404 ─── */
.vb-search { padding: 18px 0; }
.vb-search__hero {
    text-align: center; padding: 40px 0;
}
.vb-search__icon { color: var(--vb-pink); opacity: .85; margin: 0 auto 14px; }
.vb-search__h {
    margin: 0 0 6px; font: 800 28px var(--vb-font-display); color: #fff;
}
.vb-search__sub { margin: 0 0 22px; color: var(--vb-ink-3); }

.vb-search__form {
    max-width: 640px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 12px;
}
.vb-search__inputwrap {
    display: flex; align-items: center; gap: 10px;
    background: var(--vb-bg-2); border: 1px solid var(--vb-line-2);
    border-radius: var(--vb-radius-pill); padding: 12px 18px;
    color: var(--vb-ink-3);
}
.vb-search__inputwrap input {
    flex: 1; background: transparent; border: 0; outline: none;
    color: #fff; font-size: 15px;
}
.vb-search__types {
    display: inline-flex; gap: 4px; padding: 3px;
    background: var(--vb-bg-2); border: 1px solid var(--vb-line);
    border-radius: var(--vb-radius-pill);
    align-self: center;
}
.vb-search__type {
    padding: 6px 16px; border-radius: 999px;
    color: var(--vb-ink-3);
    font: 600 13px var(--vb-font-display);
    cursor: pointer;
}
.vb-search__type input { display: none; }
.vb-search__type.is-on { background: var(--vb-pink); color: #fff; }
.vb-search__bar { margin-bottom: 24px; }
.vb-search__count {
    margin: 14px 0 0; text-align: center; color: var(--vb-ink-3); font-size: 13.5px;
}
.vb-search__count strong { color: var(--vb-ink-1); }

.vb-person { padding: 12px 0; }
.vb-person__head {
    text-align: center; padding: 30px 0;
    border-bottom: 1px solid var(--vb-line);
    margin-bottom: 26px;
}
.vb-person__role {
    display: inline-block;
    padding: 4px 14px; border-radius: 999px;
    background: rgba(232,57,139,.14); color: var(--vb-pink-2);
    font: 700 11px var(--vb-font-display); letter-spacing: 1.2px;
    text-transform: uppercase;
}
.vb-person__name {
    margin: 12px 0 6px; font: 800 32px var(--vb-font-display);
    color: var(--vb-ink-1);
}
.vb-person__intro {
    max-width: 640px; margin: 0 auto;
    color: var(--vb-ink-2); line-height: 1.65;
}

.vb-req { padding: 30px 0; }
.vb-req__split {
    display: grid; gap: 26px;
    grid-template-columns: 1fr;
}
@media (min-width: 860px) {
    .vb-req__split { grid-template-columns: 320px 1fr; gap: 36px; }
}
.vb-req__intro {
    background: var(--vb-bg-2); border: 1px solid var(--vb-line);
    border-radius: var(--vb-radius-l); padding: 26px;
}
.vb-req__icon {
    display: inline-flex; padding: 12px;
    background: rgba(232,57,139,.14); color: var(--vb-pink-2);
    border-radius: var(--vb-radius-m);
    margin-bottom: 14px;
}
.vb-req__h {
    margin: 0 0 10px; font: 800 22px var(--vb-font-display); color: #fff;
}
.vb-req__lead { margin: 0 0 18px; color: var(--vb-ink-2); line-height: 1.6; }
.vb-req__steps {
    list-style: none; padding: 0; margin: 0 0 14px;
    display: flex; flex-direction: column; gap: 10px;
    counter-reset: vbreq;
}
.vb-req__steps li {
    display: flex; gap: 12px; align-items: flex-start;
    color: var(--vb-ink-2); font-size: 13.5px; line-height: 1.55;
}
.vb-req__steps span {
    flex-shrink: 0;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--vb-pink); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 12px var(--vb-font-display);
}
.vb-req__note { margin: 0; color: var(--vb-ink-3); font-size: 12.5px; font-style: italic; }

.vb-req__form { background: var(--vb-bg-2); border: 1px solid var(--vb-line); border-radius: var(--vb-radius-l); padding: 26px; }
.vb-req__row {
    display: grid; gap: 14px;
    grid-template-columns: 1fr 1fr;
}
.vb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.vb-field label {
    font: 700 12px var(--vb-font-display);
    color: var(--vb-ink-2); letter-spacing: .3px;
    text-transform: uppercase;
}
.vb-field label em { color: var(--vb-pink); font-style: normal; }
.vb-field__opt {
    color: var(--vb-ink-4); font-weight: 500; text-transform: none;
    letter-spacing: 0; font-size: 11px; font-style: italic;
}
.vb-field input,
.vb-field select,
.vb-field textarea {
    padding: 10px 14px;
    background: var(--vb-bg-3); border: 1px solid var(--vb-line);
    border-radius: var(--vb-radius-s);
    color: #fff; font: 500 14px var(--vb-font-body);
    outline: none;
}
.vb-field input:focus,
.vb-field select:focus,
.vb-field textarea:focus { border-color: var(--vb-pink); }
.vb-req__hint {
    display: flex; gap: 16px; margin-top: 4px;
    font-size: 12px;
}
.vb-req__hint a { color: var(--vb-pink-2); }

.vb-alert {
    padding: 12px 14px; border-radius: var(--vb-radius-m);
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px;
}
.vb-alert--ok { background: rgba(36,180,90,.14); color: #74e29c; border: 1px solid rgba(36,180,90,.30); }
.vb-alert--err { background: rgba(220,60,80,.14); color: #ff8095; border: 1px solid rgba(220,60,80,.30); }

.vb-404 {
    text-align: center; padding: 60px 20px;
}
.vb-404__big {
    font: 900 clamp(80px, 18vw, 160px) var(--vb-font-display);
    color: var(--vb-pink); letter-spacing: -4px;
    line-height: 1; margin-bottom: 10px;
    text-shadow: 0 8px 30px rgba(232,57,139,.3);
}
.vb-404__h { margin: 0 0 10px; font: 800 24px var(--vb-font-display); color: #fff; }
.vb-404__lead { margin: 0 0 22px; color: var(--vb-ink-3); }
.vb-404__find { max-width: 440px; margin: 0 auto 18px; }
.vb-404__act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ─── 21. Share CTA / Telegram popup ─── */
.vb-share {
    text-align: center; padding: 26px 16px;
    margin: 26px auto;
    max-width: 720px;
}
.vb-share__lead {
    margin: 0 0 4px; font: 700 17px var(--vb-font-display); color: #fff;
}
.vb-share__sub { margin: 0 0 14px; color: var(--vb-ink-3); font-size: 13px; }
.vb-share__row {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
}

.vb-tg {
    position: fixed; bottom: 22px; right: 22px;
    width: 280px; padding: 18px;
    background: var(--vb-bg-2);
    border: 1px solid var(--vb-line-2);
    border-radius: var(--vb-radius-l);
    box-shadow: var(--vb-shadow-l);
    text-align: center;
    z-index: 1500;
}
.vb-tg__shut {
    position: absolute; top: 8px; right: 8px;
    width: 24px; height: 24px;
    background: transparent; border: 0; color: var(--vb-ink-4);
    cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.vb-tg__shut:hover { color: var(--vb-pink-2); }
.vb-tg__icon { display: inline-flex; margin-bottom: 8px; }
.vb-tg__title { margin: 0 0 4px; font: 700 15px var(--vb-font-display); color: #fff; }
.vb-tg__copy { margin: 0 0 12px; font-size: 12.5px; color: var(--vb-ink-3); line-height: 1.55; }
.vb-tg__cta {
    display: block; padding: 9px 14px;
    background: #1e96c8; color: #fff;
    border-radius: var(--vb-radius-s); font: 700 13.5px var(--vb-font-display);
}
.vb-tg__cta:hover { background: #37aee2; color: #fff; }

@media (max-width: 600px) {
    .vb-tg { left: 14px; right: 14px; bottom: 14px; width: auto; }
}

/* ─── 22. Footer ─── */
.vb-foot {
    position: relative; isolation: isolate;
    margin-top: 60px;
    padding: 50px 0 28px;
    color: var(--vb-ink-2);
    background: var(--vb-bg-0);
    border-top: 1px solid var(--vb-line);
    overflow: hidden;
}
.vb-foot__art {
    position: absolute; inset: 0; z-index: -1;
    background-image: var(--vb-foot-art, none);
    background-size: cover; background-position: center;
    opacity: 1;
}

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

.vb-foot__row {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 22px;
}
.vb-foot__brand img { height: 38px; width: auto; }

.vb-foot__row--links {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 14px;
}
.vb-foot__nav {
    display: flex; flex-wrap: wrap;
    gap: 18px;
    font: 500 13px var(--vb-font-display);
}
.vb-foot__nav a {
    color: var(--vb-ink-2);
    transition: color .2s ease;
}
.vb-foot__nav a:hover { color: var(--vb-pink-2); }

.vb-foot__rule {
    height: 1px;
    background: rgba(255, 255, 255, .14);
    margin: 0 0 22px;
}

.vb-foot__lead {
    margin: 0 auto 12px;
    max-width: 880px;
    color: var(--vb-pink-2);
    font-size: 13.5px;
    line-height: 1.65;
    text-align: center;
}
.vb-foot__law {
    margin: 0 auto 4px;
    max-width: 760px;
    color: var(--vb-ink-2);
    font-size: 12.5px;
    line-height: 1.6;
    text-align: center;
}
.vb-foot__copy {
    margin: 4px 0 0;
    color: var(--vb-ink-3);
    font-size: 12.5px;
    text-align: center;
}

@media (max-width: 640px) {
    .vb-foot__row--links { flex-direction: column; align-items: flex-start; }
    .vb-foot__nav { gap: 14px 18px; }
}

/* ─── 23. Pagination (server-rendered helper) ─── */
.pagination {
    margin: 36px 0 12px;
}
.pagination__list {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    align-items: center;
    margin: 0; padding: 0;
    list-style: none;
}
.pagination__item {
    list-style: none;
    margin: 0; padding: 0;
}
.pagination__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px;
    padding: 0 12px;
    background: var(--vb-bg-2);
    border: 1px solid var(--vb-line);
    border-radius: var(--vb-radius-s);
    color: var(--vb-ink-2);
    font: 700 14px var(--vb-font-display);
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pagination__link:hover {
    background: var(--vb-bg-3);
    color: #fff;
    border-color: rgba(255,212,77,.45);
}
.pagination__link--active {
    background: var(--vb-yellow);
    border-color: var(--vb-yellow);
    color: #1a1a25;
}
.pagination__link--active:hover {
    background: var(--vb-yellow);
    color: #1a1a25;
}
.pagination__ellipsis {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 42px;
    color: var(--vb-ink-4);
    font: 700 14px var(--vb-font-display);
}

/* ─── 24. Misc helpers ─── */
.vb-page-detail .vb-main { padding-top: 0; }
.vb-page-list .vb-main,
.vb-page-search .vb-main,
.vb-page-cat .vb-main,
.vb-page-person .vb-main,
.vb-page-request .vb-main,
.vb-page-404 .vb-main {
    padding-top: 78px;
}

/* hide scrollbars on horizontal rails for webkit / firefox already covered above */

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}