:root {
    /* color — surfaces */
    --color-bg: #0a0a0b;
    --color-surface-1: #141416;
    --color-surface-2: #1c1c20;
    --color-surface-3: #26262b;
    /* color — text levels */
    --color-text-1: #f4f4f6;
    --color-text-2: #c0c0c6;
    --color-text-3: #8b8b93;
    --color-text-4: #5e5e66;
    /* color — accent */
    --color-accent: #ff5b79;
    --color-accent-soft: rgba(255, 91, 121, .14);
    --color-gradient: linear-gradient(135deg, #ff8a5c 0%, #ff4d8d 100%);
    --color-on-accent: #0a0a0b;
    /* spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 26px;
    --space-7: 32px;
    --space-8: 46px;
    /* radius scale */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;
    --radius-full: 999px;
    /* typography */
    --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 18px;
    --text-xl: 21px;
    --text-2xl: 23px;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    /* effects */
    --shadow-pop: 0 14px 40px -18px rgba(0, 0, 0, .6);
    /* layout */
    --layout-container: 1360px;
    --layout-header-h: 68px;
    --control-h: 40px;
    /* z-index */
    --z-header: 50;
    --z-dropdown: 60;
    --z-drawer: 70;
    --z-search: 80;
    --z-modal: 90;
    --z-toast: 100;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: radial-gradient(920px 440px at 50% -170px, rgba(255, 120, 110, .13), transparent 70%), var(--color-bg);
    background-attachment: fixed;
    color: var(--color-text-1);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    line-height: 1.45;
}
::selection { background: var(--color-accent); color: var(--color-on-accent); }
/* scrollbar (dark theme) */
* { scrollbar-color: var(--color-surface-3) transparent; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-surface-3); border: 3px solid var(--color-bg); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-4); }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; }
input, select, textarea { border: none; outline: none; font-family: inherit; }
img { display: block; max-width: 100%; }
[x-cloak] { display: none !important; }
body.is-locked { overflow: hidden; }
.app { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { max-width: var(--layout-container); margin: 0 auto; width: 100%; padding: 0 clamp(16px, 3vw, 34px); }
.feed { flex: 1; padding: 30px 0 60px; }
.grid { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); } }
@media (max-width: 380px) { .grid { grid-template-columns: 1fr; } }
.rail {
    display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-4); flex: none; }
.spacer { flex: 1; }
/* turbo navigation progress bar (created by ~/base/turbo) */
#turbo-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--color-gradient); z-index: 100; transition: width .15s ease, opacity .3s ease; }
/* logo (shared with footer/auth) */
.logo { font-weight: var(--weight-extrabold); font-size: var(--text-2xl); letter-spacing: -.03em; display: inline-flex; align-items: center; flex: none; }
.logo b { color: var(--color-accent); }
.logo span { color: var(--color-text-1); }
.logo i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gradient); margin-left: 5px; align-self: flex-end; margin-bottom: 6px; }
/* header bar */
.header {
    position: sticky; top: 0; z-index: var(--z-header); background: rgba(10, 10, 11, .72);
    backdrop-filter: blur(16px) saturate(1.4); border-top: 2px solid var(--color-accent);
    transition: background .25s, box-shadow .25s;
}
.header.is-stuck { background: rgba(10, 10, 11, .9); box-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px -18px rgba(0, 0, 0, .8); }
.header__inner { display: flex; align-items: center; gap: 22px; height: var(--layout-header-h); max-width: var(--layout-container); margin: 0 auto; padding: 0 clamp(16px, 3vw, 34px); }
.header__actions { display: flex; align-items: center; gap: 10px; flex: none; }
/* nav + dropdown (CSS hover) */
.nav { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__link {
    display: inline-flex; align-items: center; gap: 7px; height: var(--control-h); padding: 0 13px;
    border-radius: var(--radius-sm); font-weight: var(--weight-semibold); font-size: var(--text-md);
    color: var(--color-text-2); white-space: nowrap; transition: .15s;
}
.nav__link:hover { color: var(--color-text-1); background: var(--color-surface-1); }
.nav__link svg { width: 16px; height: 16px; fill: none; stroke: var(--color-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav__caret { width: 11px !important; height: 11px !important; stroke: currentColor !important; opacity: .5; transition: transform .2s; }
.nav__item:hover .nav__caret { transform: rotate(180deg); opacity: .9; }
.dropdown { position: absolute; top: 100%; left: 0; padding-top: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; z-index: var(--z-dropdown); }
.nav__item:hover .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown__inner { background: var(--color-surface-2); border-radius: var(--radius-md); padding: 8px; min-width: 200px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 2px; }
.dropdown--wide .dropdown__inner { display: grid; grid-template-columns: 1fr 1fr; min-width: 340px; }
.dropdown a { padding: 9px 13px; border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-2); white-space: nowrap; transition: .12s; }
.dropdown a:hover { background: var(--color-surface-3); color: var(--color-text-1); }
/* action buttons */
.iconbtn { width: var(--control-h); height: var(--control-h); border-radius: var(--radius-sm); display: grid; place-content: center; background: var(--color-surface-1); transition: .15s; flex: none; }
.iconbtn:hover { background: var(--color-surface-2); }
.iconbtn svg { width: 19px; height: 19px; fill: none; stroke: var(--color-text-2); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn:hover svg { stroke: var(--color-text-1); }
.signin { width: var(--control-h); height: var(--control-h); border-radius: var(--radius-sm); display: grid; place-content: center; background: var(--color-surface-2); flex: none; transition: .15s; }
.signin svg { width: 20px; height: 20px; fill: var(--color-text-3); stroke: none; }
.signin:hover { background: var(--color-surface-3); }
.signin:hover svg { fill: var(--color-text-1); }
/* language menu */
.lang { display: inline-flex; align-items: center; gap: 7px; height: var(--control-h); padding: 0 12px; border-radius: var(--radius-sm); background: var(--color-surface-1); font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--color-text-2); transition: .15s; }
.lang:hover { background: var(--color-surface-2); color: var(--color-text-1); }
.lang i { font-size: var(--text-md); }
.langm { position: relative; }
.lang__caret { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .5; margin-left: 1px; transition: transform .2s; }
.langm.is-open .lang__caret { transform: rotate(180deg); }
.langm__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: calc(var(--z-dropdown) + 1); width: 300px; background: var(--color-surface-2); border-radius: var(--radius-md); padding: 8px; box-shadow: var(--shadow-pop); max-height: 360px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.langm__opt { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px; font-size: 13.5px; font-weight: var(--weight-medium); color: var(--color-text-2); text-align: left; transition: .12s; }
.langm__opt:hover { background: var(--color-surface-3); color: var(--color-text-1); }
.langm__opt.is-on { color: var(--color-accent); font-weight: var(--weight-bold); }
.langm__flag { font-size: 16px; line-height: 1; }
/* search overlay */
.search { position: fixed; inset: 0; z-index: var(--z-search); pointer-events: none; }
.search.is-open { pointer-events: auto; }
.search__scrim { position: absolute; inset: 0; background: rgba(5, 5, 6, .6); }
.search__bar { position: absolute; top: 0; left: 0; right: 0; background: rgba(10, 10, 11, .96); backdrop-filter: blur(16px); border-bottom: 2px solid var(--color-accent); display: flex; flex-direction: column; transition: transform .4s cubic-bezier(.2, .9, .3, 1.2); }
.search__bar--off { transform: translateY(-100%); }
.search__bar--on { transform: translateY(0); }
.search__field { display: flex; align-items: center; gap: 14px; max-width: 680px; width: 100%; margin: 0 auto; padding: 0 clamp(16px, 3vw, 34px); min-height: var(--layout-header-h); }
.search__field svg { width: 22px; height: 22px; fill: none; stroke: var(--color-text-3); stroke-width: 1.9; flex: none; }
.search__field input { flex: 1; min-width: 0; height: var(--layout-header-h); background: none; color: var(--color-text-1); font-size: var(--text-lg); font-family: inherit; }
.search__field input::placeholder { color: var(--color-text-4); }
.search__close { font-size: 26px; color: var(--color-text-3); flex: none; line-height: 1; }
.search__close:hover { color: var(--color-text-1); }
/* auth modal */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(5, 5, 6, .7); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px; overflow-y: auto; }
.auth { position: relative; width: min(420px, 100%); background: var(--color-surface-1); border-radius: var(--radius-xl); padding: 34px 30px 26px; box-shadow: var(--shadow-pop); margin: auto; }
.auth__close { position: absolute; top: 16px; right: 18px; font-size: 26px; line-height: 1; color: var(--color-text-3); }
.auth__close:hover { color: var(--color-text-1); }
.auth__brand { display: flex; justify-content: center; margin-bottom: 22px; }
.auth__tabs { display: flex; gap: 4px; background: var(--color-surface-2); border-radius: var(--radius-md); padding: 4px; margin-bottom: 22px; }
.auth__tabs button { flex: 1; height: 42px; border-radius: 10px; font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--color-text-3); transition: .14s; }
.auth__tabs button.is-on { background: var(--color-gradient); color: var(--color-on-accent); }
.auth__form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field span { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-3); }
.field input { height: 46px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-text-1); font-size: var(--text-md); font-family: inherit; transition: .15s; }
.field input::placeholder { color: var(--color-text-4); }
.field input:focus { box-shadow: 0 0 0 2px var(--color-accent) inset; }
.auth__submit { height: 48px; border-radius: var(--radius-sm); background: var(--color-gradient); color: var(--color-on-accent); font-weight: var(--weight-extrabold); font-size: var(--text-md); margin-top: 4px; transition: .15s; }
.auth__submit:hover { filter: brightness(1.08); }
.auth__submit:disabled { opacity: .6; cursor: default; filter: none; }
.auth__error { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: var(--radius-sm); background: rgba(245, 86, 74, .12); border: 1px solid rgba(245, 86, 74, .32); color: var(--color-danger, #f5564a); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.auth__error svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cf-turnstile { width: 100%; min-height: 65px; }
/* logged-in user menu (avatar + dropdown) */
.usermenu { position: relative; }
.avatar-btn { position: relative; width: var(--control-h); height: var(--control-h); border-radius: var(--radius-sm); display: grid; place-content: center; background: var(--color-gradient); flex: none; transition: .15s; }
.avatar-btn:hover { filter: brightness(1.08); }
.avatar-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--color-on-accent); }
.avatar-btn__dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #3ad07a; border: 2.5px solid var(--color-bg); }
.usermenu__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: calc(var(--z-dropdown) + 1); width: 210px; background: var(--color-surface-2); border-radius: var(--radius-md); padding: 8px; box-shadow: var(--shadow-pop); }
.usermenu__item { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 9px; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-2); cursor: pointer; transition: .12s; }
.usermenu__item svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.usermenu__item:hover { background: var(--color-surface-3); color: var(--color-text-1); }
.usermenu__sep { height: 1px; background: rgba(255, 255, 255, .06); margin: 6px 4px; }
.usermenu__item--danger { color: #ff6b6b; }
.usermenu__item--danger:hover { background: rgba(255, 107, 107, .12); color: #ff8585; }
/* hamburger toggle (mobile only) */
.menu-toggle { display: none; width: var(--control-h); height: var(--control-h); border-radius: var(--radius-sm); place-content: center; background: var(--color-surface-1); flex: none; transition: .15s; }
.menu-toggle:hover { background: var(--color-surface-2); }
.menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: var(--color-text-1); stroke-width: 2; stroke-linecap: round; }
/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); pointer-events: none; }
.drawer.is-open { pointer-events: auto; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(5, 5, 6, .6); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 80vw; max-width: 320px; background: var(--color-surface-1); border-left: 2px solid var(--color-accent); display: flex; flex-direction: column; overflow-y: auto; transition: transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.drawer__panel--off { transform: translateX(100%); }
.drawer__panel--on { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--layout-header-h); padding: 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .06); flex: none; }
.drawer__close { font-size: 28px; line-height: 1; color: var(--color-text-3); }
.drawer__close:hover { color: var(--color-text-1); }
.drawer__nav { display: flex; flex-direction: column; padding: 12px 12px 24px; gap: 2px; }
.drawer__link { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: var(--radius-sm); font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--color-text-1); transition: .12s; }
.drawer__link:hover { background: var(--color-surface-2); }
.drawer__link svg { width: 18px; height: 18px; fill: none; stroke: var(--color-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drawer__group { display: flex; flex-direction: column; }
.drawer__groupbtn { display: flex; align-items: center; justify-content: space-between; padding: 12px 13px; border-radius: var(--radius-sm); font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--color-text-1); transition: .12s; }
.drawer__groupbtn:hover { background: var(--color-surface-2); }
.drawer__caret { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .5; transition: transform .2s; }
.drawer__groupbtn.is-open .drawer__caret { transform: rotate(180deg); opacity: .9; }
.drawer__sub { display: flex; flex-direction: column; padding: 2px 0 6px 13px; }
.drawer__sub a { padding: 9px 13px; border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-2); transition: .12s; }
.drawer__sub a:hover { background: var(--color-surface-2); color: var(--color-text-1); }
/* tablet/mobile: hide desktop nav, show hamburger (nav of 8 items needs ~1200px) */
@media (max-width: 1200px) {
    .nav { display: none; }
    .menu-toggle { display: grid; order: 1; }
}
@media (min-width: 1201px) { .drawer { display: none; } }
/* tablet: tighten header gap, language menu fits viewport (langm isn't a right-aligned element so it overflows on tablet too) */
@media (max-width: 768px) {
    .header__inner { gap: 14px; }
    .langm__menu { position: fixed; top: calc(var(--layout-header-h) + 6px); left: 12px; right: 12px; width: auto; max-width: none; }
}
/* mobile: auth modal tightens, user menu fits */
@media (max-width: 480px) {
    .modal { padding: 28px 14px; }
    .auth { padding: 26px 20px 22px; border-radius: var(--radius-lg); }
    .search__field { gap: 11px; }
    .usermenu__menu { width: min(240px, calc(100vw - 24px)); }
}
.footer { margin-top: 40px; background: var(--color-surface-1); padding: 48px 0 30px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 2fr; gap: 48px; }
.footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 320px; }
.footer__tag { color: var(--color-text-3); font-size: 13.5px; line-height: 1.65; margin: 0; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer__col h4 { font-size: 12.5px; font-weight: var(--weight-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-2); margin: 0 0 14px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col a { display: inline-block; color: var(--color-text-3); font-size: var(--text-base); padding: 5px 0; transition: .12s; }
.footer__col a:hover { color: var(--color-text-1); }
.footer__bottom { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .06); }
.footer__badge { font-size: 11px; font-weight: var(--weight-extrabold); color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: 6px; padding: 3px 7px; }
.footer__note { color: var(--color-text-4); font-size: var(--text-sm); }
.footer__legal { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.footer__legal a { color: var(--color-text-3); font-size: var(--text-sm); transition: .12s; }
.footer__legal a:hover { color: var(--color-text-1); }
@media (max-width: 780px) { .footer__top { grid-template-columns: 1fr; gap: 30px; } .footer__legal { margin-left: 0; } }
@media (max-width: 640px) { .footer__cols { grid-template-columns: repeat(2, 1fr); column-gap: 16px; } }
.section { margin-top: 46px; }
.section:first-child { margin-top: 30px; }
.section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section__title { display: flex; align-items: center; gap: 11px; font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: -.02em; margin: 0; white-space: nowrap; }
.section__title i { width: 4px; height: 20px; border-radius: 2px; background: var(--color-gradient); flex: none; }
.section__all { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-accent); white-space: nowrap; transition: .13s; }
.section__all:hover { filter: brightness(1.15); }
@media (max-width: 480px) {
    .section { margin-top: 34px; }
    .section__head { margin-bottom: 14px; }
    .section__title { font-size: var(--text-lg); }
}
.card { position: relative; display: flex; flex-direction: column; gap: 11px; cursor: pointer; min-width: 0; }
.card__poster { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__img { transform: scale(1.05); }
.card__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; z-index: 1; background: var(--color-surface-2); }
.card__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, rgba(5, 5, 6, .5), transparent 40%); opacity: 0; transition: .22s; }
.card:hover .card__shade { opacity: 1; }
.card__dur { position: absolute; z-index: 2; right: 8px; bottom: 8px; background: rgba(5, 5, 6, .82); color: #fff; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 2px 6px; border-radius: 7px; font-variant-numeric: tabular-nums; }
.card__body { display: flex; flex-direction: column; gap: 4px; padding: 0 1px; margin-bottom: 1rem; }
.card__title { font-size: 14.5px; font-weight: var(--weight-semibold); color: var(--color-text-1); line-height: 1.35; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: .3rem 0; }
.card:hover .card__title { color: #fff; }
.card__link { color: inherit; text-decoration: none; }
.card__cover { position: absolute; inset: 0; display: block; }
.card__meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--color-text-3); }
.card__save { position: absolute; z-index: 3; top: 8px; right: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-full); background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; opacity: 0; transform: translateY(-4px); transition: opacity .18s, transform .18s, background .15s; }
.card__save svg { width: 18px; height: 18px; }
.card:hover .card__save { opacity: 1; transform: translateY(0); }
.card__save:hover { background: rgba(0, 0, 0, .82); }
.card__save.is-on { background: var(--color-accent); color: #fff; opacity: 1; transform: translateY(0); }
.card__save:disabled { cursor: default; opacity: .6; }
.card:hover .card__save:disabled { opacity: .6; }
/* decorative overlays must not block the .card__cover link (poster/preview clickable); only the save button stays interactive */
.card__shade, .card__dur, .card__preview { pointer-events: none; }
.featured__save { top: 12px; right: 12px; width: 36px; height: 36px; }
@media (hover: none), (max-width: 768px) {
    .card__save { opacity: 1; transform: translateY(0); }
}
.rec__section + .rec__section { margin-top: 46px; }
.rec__skeleton { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.rec__skeleton-poster { aspect-ratio: 16 / 10; border-radius: var(--radius-md); background: var(--color-surface-2); }
.rec__skeleton-line { height: 12px; border-radius: 6px; background: var(--color-surface-2); }
.rec__skeleton-line--short { width: 55%; }
.rec__skeleton-poster,
.rec__skeleton-line { animation: rec-pulse 1.3s ease-in-out infinite; }
@keyframes rec-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}
.rec__more { display: flex; justify-content: center; margin-top: 24px; }
.rec__more-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 24px; border: 1px solid var(--color-surface-2); border-radius: var(--radius-full);
    background: var(--color-surface-1); color: var(--color-text-1);
    font-size: var(--text-base); font-weight: var(--weight-semibold); cursor: pointer;
    transition: background .15s, border-color .15s;
}
.rec__more-btn:hover:not(:disabled) { background: var(--color-surface-2); }
.rec__more-btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 480px) {
    .rec__section + .rec__section { margin-top: 34px; }
}
.featured-swiper { overflow: hidden; padding-bottom: 26px; --swiper-navigation-color: var(--color-text-1); --swiper-navigation-size: 26px; --swiper-pagination-color: var(--color-accent); --swiper-pagination-bullet-inactive-color: var(--color-text-1); --swiper-pagination-bullet-inactive-opacity: .45; }
.featured-swiper .swiper-pagination { bottom: 4px; }
.featured-swiper .swiper-slide { height: auto; }
.featured-swiper .swiper-button-next, .featured-swiper .swiper-button-prev { background: rgba(10, 10, 11, .55); backdrop-filter: blur(4px); width: 42px; height: 42px; border-radius: var(--radius-full); transition: background .15s; }
.featured-swiper .swiper-button-next:hover, .featured-swiper .swiper-button-prev:hover { background: rgba(10, 10, 11, .8); }
.featured-swiper .swiper-button-disabled { opacity: 0; }
@media (max-width: 760px) { .featured-swiper .swiper-button-next, .featured-swiper .swiper-button-prev { display: none; } }
.featured { display: flex; flex-direction: column; justify-content: flex-end; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; background: var(--color-surface-2); }
.featured__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.featured:hover .featured__img { transform: scale(1.04); }
.featured__shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(5, 5, 6, .92) 2%, rgba(5, 5, 6, .25) 45%, transparent 75%); }
.featured__link { position: static; padding: clamp(18px, 3vw, 28px); color: inherit; text-decoration: none; }
.featured__tag, .featured__title, .featured__meta { position: relative; z-index: 1; }
.featured__tag { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 9px; }
.featured__tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-gradient); }
.featured__title { font-size: clamp(20px, 2.4vw, 28px); font-weight: var(--weight-extrabold); letter-spacing: -.02em; margin: 0 0 8px; line-height: 1.12; text-wrap: balance; }
.featured__meta { display: flex; align-items: center; gap: 9px; font-size: var(--text-base); color: var(--color-text-2); }
.featured__dur { position: absolute; right: 14px; bottom: 14px; z-index: 1; background: rgba(5, 5, 6, .7); backdrop-filter: blur(4px); color: #fff; font-size: var(--text-sm); font-weight: var(--weight-semibold); padding: 4px 9px; border-radius: 8px; }
/* page head */
.pagehead { display: flex; flex-direction: column; padding: 6px 0 4px; }
.pagehead__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pagehead__title { font-size: clamp(26px, 3.2vw, 34px); font-weight: var(--weight-extrabold); letter-spacing: -.025em; margin: 0; }
.pagehead__count { color: var(--color-text-3); font-size: var(--text-base); margin-top: 6px; }
/* tag-detail follow button (own class — never reuse .watch__save) */
.tfollow { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-text-1); font-weight: var(--weight-bold); font-size: var(--text-base); cursor: pointer; transition: .14s; white-space: nowrap; }
.tfollow:hover { background: var(--color-surface-3); }
.tfollow.is-on { background: var(--color-accent-soft); color: var(--color-accent); }
.tfollow__icon { width: 18px; height: 18px; flex: none; }
/* actress hero (head) */
.ahero { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; padding: 6px 0 8px; }
.ahero__avatar { width: 138px; height: 138px; border-radius: 50%; background-size: cover; background-position: center top; background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='-27%2024%20100%20100'%3e%3cpath%20fill='%23F5EEE5'%20d='M-27%2024H73v100H-27z'/%3e%3cdefs%3e%3cpath%20id='a'%20d='M36%2095.9c0%204%204.7%205.2%207.1%205.8%207.6%202%2022.8%205.9%2022.8%205.9%203.2%201.1%205.7%203.5%207.1%206.6v9.8H-27v-9.8c1.3-3.1%203.9-5.5%207.1-6.6%200%200%2015.2-3.9%2022.8-5.9%202.4-.6%207.1-1.8%207.1-5.8V85h26v10.9z'/%3e%3c/defs%3e%3cuse%20fill='%23E6C19C'%20overflow='visible'%20xlink:href='%23a'/%3e%3cclipPath%20id='b'%3e%3cuse%20overflow='visible'%20xlink:href='%23a'/%3e%3c/clipPath%3e%3cpath%20fill='%23D4B08C'%20d='M23.2%2035h.2c3.3%200%208.2.2%2011.4%202%203.3%201.9%207.3%205.6%208.5%2012.1%202.4%2013.7-2.1%2035.4-6.3%2042.4-4%206.7-9.8%209.2-13.5%209.4H23h-.1c-3.7-.2-9.5-2.7-13.5-9.4-4.2-7-8.7-28.7-6.3-42.4%201.2-6.5%205.2-10.2%208.5-12.1%203.2-1.8%208.1-2%2011.4-2h.2z'%20clip-path='url(%23b)'/%3e%3cpath%20fill='%23F2CEA5'%20d='M22.6%2040c19.1%200%2020.7%2013.8%2020.8%2015.1%201.1%2011.9-3%2028.1-6.8%2033.7-4%205.9-9.8%208.1-13.5%208.3h-.5c-3.8-.3-9.6-2.5-13.6-8.4-3.8-5.6-7.9-21.8-6.8-33.8C2.3%2053.7%203.5%2040%2022.6%2040z'/%3e%3c/svg%3e"); background-color: var(--color-surface-3); flex: none; box-shadow: 0 0 0 5px var(--color-bg); }
.ahero__info { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 13px; }
.ahero__name { font-size: clamp(26px, 3.4vw, 36px); font-weight: var(--weight-extrabold); letter-spacing: -.025em; margin: 0; }
.ahero__stats { display: flex; gap: 30px; flex-wrap: wrap; }
.astat { display: flex; flex-direction: column; gap: 2px; }
.astat b { font-size: var(--text-xl); font-weight: var(--weight-extrabold); letter-spacing: -.01em; }
.astat span { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-4); }
.ahero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ahero__follow { height: 44px; padding: 0 22px; }
/* button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 20px; border-radius: var(--radius-sm); font-weight: var(--weight-bold); font-size: var(--text-base); cursor: pointer; transition: .14s; white-space: nowrap; }
.btn--primary { background: var(--color-gradient); color: var(--color-on-accent); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--soft { background: var(--color-surface-2); color: var(--color-text-1); }
.btn--soft:hover { background: var(--color-surface-3); }
/* filter bar */
.filters { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; margin: 22px 0 30px; }
.fgroup { display: flex; align-items: center; gap: 8px; }
.fspace { flex: 1; min-width: 8px; }
/* segmented */
.seg { display: inline-flex; background: var(--color-surface-1); border-radius: var(--radius-sm); padding: 3px; }
.seg a, .seg button { height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 8px; font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-text-3); transition: .14s; white-space: nowrap; }
.seg a:hover, .seg button:hover { color: var(--color-text-1); }
.seg a.is-on, .seg button.is-on { background: var(--color-surface-3); color: var(--color-text-1); }
/* select dropdown */
.sel { position: relative; }
.sel__btn { display: inline-flex; align-items: center; gap: 9px; height: var(--control-h); padding: 0 13px; border-radius: var(--radius-sm); background: var(--color-surface-1); font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--color-text-1); transition: .14s; white-space: nowrap; }
.sel__btn:hover { background: var(--color-surface-2); }
.sel__btn .k { color: var(--color-text-4); font-weight: var(--weight-semibold); flex: none; }
.sel__val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sel__btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .5; transition: transform .2s; flex: none; }
.sel.is-open .sel__btn svg { transform: rotate(180deg); }
.sel__menu { position: absolute; top: calc(100% + 7px); left: 0; z-index: calc(var(--z-dropdown) + 1); min-width: 180px; max-height: 400px; overflow-y: auto; background: var(--color-surface-2); border-radius: var(--radius-md); padding: 7px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 2px; }
.sel__menu.is-right { left: auto; right: 0; }
.sel__menu--cols { display: grid; grid-template-columns: repeat(var(--sel-cols, 2), minmax(0, 1fr)); }
.sel__opt { text-align: left; padding: 9px 12px; border-radius: 8px; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-2); transition: .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel__opt:hover { background: var(--color-surface-3); color: var(--color-text-1); }
.sel__opt.is-on { color: var(--color-accent); font-weight: var(--weight-bold); }
/* pagination */
.pager { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 42px; flex-wrap: wrap; }
.pager a { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border-radius: var(--radius-sm); background: var(--color-surface-1); font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--color-text-2); transition: .14s; }
.pager a:hover { background: var(--color-surface-2); color: var(--color-text-1); }
.pager a.is-on { background: var(--color-gradient); color: var(--color-on-accent); }
.pager a.is-disabled { opacity: .35; pointer-events: none; }
.pager__gap { color: var(--color-text-4); }
.empty { padding: 80px 20px; text-align: center; color: var(--color-text-3); font-size: var(--text-lg); }
/* tablet: tighten filter bar spacing, allow actress segmented to wrap */
@media (max-width: 768px) {
    .filters { gap: 10px; margin: 18px 0 24px; }
    .filters .asearch { flex-basis: 100%; width: 100%; min-width: 0; }
    .fspace { display: none; }
    .seg { flex-wrap: wrap; }
}
/* mobile: actress hero stacks, select menu fits viewport */
@media (max-width: 480px) {
    .ahero { flex-direction: column; align-items: flex-start; gap: 16px; }
    .ahero__info { min-width: auto; }
    .ahero__stats { gap: 16px; }
    .ahero__actions { flex-direction: column; width: 100%; }
    .ahero__actions .tfollow { width: 100%; justify-content: center; }
    .sel__menu { max-width: calc(100vw - 24px); }
    .filters > .sel { flex: 1 1 calc(50% - 5px); min-width: 0; }
    .filters > .sel .sel__btn { width: 100%; justify-content: space-between; }
    .seg { width: 100%; }
    .seg a, .seg button { flex: 1; justify-content: center; }
    .pager { gap: 5px; margin-top: 32px; }
}
/* directory search box */
.asearch { display: flex; align-items: center; gap: 9px; height: var(--control-h); padding: 0 13px; border-radius: var(--radius-sm); background: var(--color-surface-1); min-width: 230px; }
.asearch svg { width: 17px; height: 17px; fill: none; stroke: var(--color-text-3); stroke-width: 1.9; flex: none; }
.asearch input { flex: 1; min-width: 0; background: none; color: var(--color-text-1); font-size: var(--text-base); font-family: inherit; }
.asearch input::placeholder { color: var(--color-text-4); }
/* genres */
.ggrid { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .ggrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .ggrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ggrid { grid-template-columns: 1fr; } }
.gchip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-radius: var(--radius-md); background: var(--color-surface-1); transition: .14s; min-width: 0; }
.gchip:hover { background: var(--color-surface-2); transform: translateY(-2px); }
.gchip__name { font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--color-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gchip__count { flex: none; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-4); background: var(--color-surface-3); padding: 2px 8px; border-radius: var(--radius-full); }
.gchip:hover .gchip__count { color: var(--color-accent); }
/* makers */
.mgrid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .mgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .mgrid { grid-template-columns: 1fr; } }
.mcard { display: flex; align-items: center; gap: 14px; padding: 14px 15px; border-radius: var(--radius-md); background: var(--color-surface-1); transition: .14s; min-width: 0; }
.mcard:hover { background: var(--color-surface-2); transform: translateY(-2px); }
.mcard__logo { flex: none; width: 54px; height: 54px; border-radius: 13px; display: grid; place-content: center; background: var(--color-gradient); color: var(--color-on-accent); font-weight: var(--weight-extrabold); font-size: var(--text-lg); letter-spacing: -.02em; }
.mcard__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mcard__name { font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--color-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard__meta { font-size: 12.5px; color: var(--color-text-3); margin-top: 3px; }
/* follow button (series/makers/actresses) */
.follow-btn { flex: none; height: 32px; padding: 0 14px; border-radius: var(--radius-full); background: var(--color-surface-3); color: var(--color-text-2); font-weight: var(--weight-bold); font-size: 12.5px; transition: .13s; white-space: nowrap; cursor: pointer; }
.follow-btn:hover { color: var(--color-text-1); }
.follow-btn.is-on { background: var(--color-accent-soft); color: var(--color-accent); }
/* actresses */
.agrid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .agrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .agrid { grid-template-columns: 1fr; } }
.acard { display: flex; align-items: center; gap: 15px; padding: 14px 15px; border-radius: var(--radius-md); background: var(--color-surface-1); transition: .15s; min-width: 0; }
.acard:hover { background: var(--color-surface-2); }
.acard__avatar { width: 72px; height: 72px; border-radius: 50%; background-size: cover; background-position: center top; background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='-27%2024%20100%20100'%3e%3cpath%20fill='%23F5EEE5'%20d='M-27%2024H73v100H-27z'/%3e%3cdefs%3e%3cpath%20id='a'%20d='M36%2095.9c0%204%204.7%205.2%207.1%205.8%207.6%202%2022.8%205.9%2022.8%205.9%203.2%201.1%205.7%203.5%207.1%206.6v9.8H-27v-9.8c1.3-3.1%203.9-5.5%207.1-6.6%200%200%2015.2-3.9%2022.8-5.9%202.4-.6%207.1-1.8%207.1-5.8V85h26v10.9z'/%3e%3c/defs%3e%3cuse%20fill='%23E6C19C'%20overflow='visible'%20xlink:href='%23a'/%3e%3cclipPath%20id='b'%3e%3cuse%20overflow='visible'%20xlink:href='%23a'/%3e%3c/clipPath%3e%3cpath%20fill='%23D4B08C'%20d='M23.2%2035h.2c3.3%200%208.2.2%2011.4%202%203.3%201.9%207.3%205.6%208.5%2012.1%202.4%2013.7-2.1%2035.4-6.3%2042.4-4%206.7-9.8%209.2-13.5%209.4H23h-.1c-3.7-.2-9.5-2.7-13.5-9.4-4.2-7-8.7-28.7-6.3-42.4%201.2-6.5%205.2-10.2%208.5-12.1%203.2-1.8%208.1-2%2011.4-2h.2z'%20clip-path='url(%23b)'/%3e%3cpath%20fill='%23F2CEA5'%20d='M22.6%2040c19.1%200%2020.7%2013.8%2020.8%2015.1%201.1%2011.9-3%2028.1-6.8%2033.7-4%205.9-9.8%208.1-13.5%208.3h-.5c-3.8-.3-9.6-2.5-13.6-8.4-3.8-5.6-7.9-21.8-6.8-33.8C2.3%2053.7%203.5%2040%2022.6%2040z'/%3e%3c/svg%3e"); background-color: var(--color-surface-3); flex: none; }
.acard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acard__name { font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--color-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acard__meta { font-size: 12.5px; color: var(--color-text-3); margin-top: 3px; }
/* mobile: search full width, selects share rows, rows tighten */
@media (max-width: 480px) {
    .asearch { width: 100%; min-width: 0; flex-basis: 100%; }
    .mcard, .acard, .srow { gap: 12px; padding: 12px; }
    .acard__avatar { width: 60px; height: 60px; }
    .mcard__logo { width: 48px; height: 48px; font-size: var(--text-md); }
}
/* series */
.slist { display: flex; flex-direction: column; gap: 8px; }
.srow { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--color-surface-1); transition: .14s; }
.srow:hover { background: var(--color-surface-2); }
.srow__rank { flex: none; width: 26px; font-size: var(--text-base); font-weight: var(--weight-extrabold); color: var(--color-text-4); font-variant-numeric: tabular-nums; text-align: center; }
.srow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.srow__name { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-text-1); letter-spacing: -.01em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow__meta { font-size: 12.5px; color: var(--color-text-3); }
.srow__badge { flex: none; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-accent); background: var(--color-accent-soft); padding: 5px 11px; border-radius: var(--radius-full); white-space: nowrap; }
.srow__chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--color-text-4); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .srow__badge { display: none; } }
.watch { padding-top: var(--space-6); padding-bottom: var(--space-8); }
.watch__main { display: flex; flex-direction: column; gap: var(--space-5); }
.watch-layout { display: flex; gap: var(--space-6); align-items: flex-start; }
.watch-main { flex: 1; min-width: 0; }
.watch-side { flex: none; width: 340px; min-width: 300px; }
.watch-side__title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-1); margin-bottom: var(--space-4); }
.watch-side__list { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0 0 0 calc(var(--space-2) * -1); padding: 0; }
.vside { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2); border-radius: var(--radius-md); transition: background .15s; }
.vside:hover { background: var(--color-surface-2); }
.vside__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background: var(--color-surface-3) center / cover no-repeat;
    overflow: hidden;
}
.vside__dur {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .78);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}
.vside__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.vside__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-1);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vside:hover .vside__title { color: var(--color-accent); }
.vside__meta { display: flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--color-text-3); }
.player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000 center / cover no-repeat;
}
.player__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player.is-loading::after {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    top: 50%;
    left: 50%;
    margin: -19px 0 0 -19px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: var(--color-accent);
    border-radius: var(--radius-full);
    animation: watch-spin .8s linear infinite;
}
.player__empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-3);
    font-size: var(--text-sm);
    background: rgba(10, 10, 11, .7);
}
@keyframes watch-spin { to { transform: rotate(360deg); } }
.switch { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.switch__group { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.switch__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-3); }
.switch__items { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.switch__btn {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--color-text-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: background .15s, color .15s;
}
.switch__btn:hover { background: var(--color-surface-3); color: var(--color-text-1); }
.switch__btn.is-on { background: var(--color-accent); color: #fff; }
.watch__head { display: flex; align-items: flex-start; gap: var(--space-4); }
.watch__headinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.watch__title { font-size: clamp(var(--text-lg), 4.4vw, var(--text-xl)); font-weight: var(--weight-bold); color: var(--color-text-1); line-height: 1.3; }
.watch__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-3); }
.watch__metaitem { display: inline-flex; align-items: center; gap: 5px; }
.watch__meta--stats { gap: var(--space-2); }
.watch__metaicon { width: 14px; height: 14px; flex: none; }
.watch__meta--stats { gap: var(--space-5); }
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--color-surface-3);
    color: var(--color-text-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.badge--censored { background: var(--color-surface-3); }
.badge--uncensored,
.badge--uncensored-leaked { background: var(--color-accent-soft); color: var(--color-accent); }
.badge--vr { background: rgba(91, 140, 255, .16); color: #7da0ff; }
.watch__save {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--color-text-2);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.watch__save .watch__metaicon { width: 16px; height: 16px; }
.watch__save:hover { background: var(--color-surface-3); color: var(--color-text-1); }
.watch__save.is-on { background: var(--color-accent-soft); color: var(--color-accent); }
.watch__save:disabled { cursor: default; }
.watch__block { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--color-surface-2); }
.watch__bhead { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-1); }
.watch__desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 78ch;
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-text-2);
}
.watch__desc-text.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.watch__more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.watch__more:hover { background: var(--color-accent-soft); }
.watch__more-icon { width: 16px; height: 16px; flex: none; transition: transform .2s; }
.watch__more-icon.is-up { transform: rotate(180deg); }
.castgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-4); max-height: 300px; overflow-y: auto; padding-right: var(--space-2); }
.castgrid__item { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.castgrid__avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-full);
    background: var(--color-surface-3) center / cover no-repeat;
}
.castgrid__avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gradient);
    color: var(--color-on-accent);
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    text-transform: uppercase;
}
.castgrid__name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.castgrid__item:hover .castgrid__name { color: var(--color-accent); }
.watch__info { display: flex; flex-direction: column; gap: var(--space-3); }
.watch__info-row { display: flex; gap: var(--space-4); font-size: var(--text-sm); }
.watch__info-row dt { flex: 0 0 110px; color: var(--color-text-3); font-weight: var(--weight-medium); }
.watch__info-row dd { flex: 1 1 auto; min-width: 0; margin-inline-start: 5px; color: var(--color-text-1); }
.watch__info-row dd:not(.chips) a { color: var(--color-text-1); transition: color .15s; }
.watch__info-row dd:not(.chips) a:hover { color: var(--color-accent); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--color-text-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: background .15s, color .15s;
}
.chip:hover { background: var(--color-accent-soft); color: var(--color-accent); }
@media (max-width: 1024px) {
    .watch-layout { flex-direction: column; align-items: stretch; }
    .watch-side { width: 100%; min-width: 0; }
    /* Related rail drops below the video — render it as a card grid (poster on
       top, body below) like the home grids: 3 cols on tablet, 2 on mobile. */
    .watch-side__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5) var(--space-4); margin-left: 0; }
    .vside { flex-direction: column; gap: var(--space-2); padding: 0; min-width: 0; }
    .vside__thumb { width: 100%; }
    .castgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 768px) {
    .watch__main { gap: var(--space-4); }
    .switch { gap: var(--space-4); }
    .watch__info-row dt { flex-basis: 90px; }
    .castgrid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); }
    .watch__block { padding-top: var(--space-4); }
    .watch__bhead { font-size: var(--text-base); }
    .watch-side__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .switch { flex-direction: column; gap: var(--space-3); }
    .switch__group { align-items: flex-start; }
    .castgrid { grid-template-columns: repeat(2, 1fr); }
    .watch__desc { font-size: var(--text-sm); line-height: 1.65; }
}
/* account: edit profile form */
.account-form { display: flex; flex-direction: column; gap: 16px; max-width: 460px; margin-top: 26px; }
.account-form--centered { max-width: 520px; margin-left: auto; margin-right: auto; }
.account-form__toggle { align-self: flex-start; color: var(--color-accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; background: none; padding: 2px 0; transition: .13s; }
.account-form__toggle:hover { filter: brightness(1.15); }
.account-form__pass { display: flex; flex-direction: column; gap: 14px; }
.field__error { font-size: var(--text-sm); font-style: normal; color: var(--color-accent); }
.account-notice { margin-top: 22px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent); font-weight: var(--weight-semibold); font-size: var(--text-base); }
/* account: import site picker (segmented chips over hidden radios) */
.site-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.site-picker__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-opt { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: var(--radius-sm); background: var(--color-surface-2); border: 1.5px solid transparent; color: var(--color-text-2); font-weight: var(--weight-semibold); font-size: var(--text-base); cursor: pointer; transition: .14s; user-select: none; }
.site-opt:hover { background: var(--color-surface-3); color: var(--color-text-1); }
.site-picker__input:checked + .site-opt { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); }
.site-picker__input:focus-visible + .site-opt { box-shadow: 0 0 0 2px var(--color-accent) inset; }
/* account: following list */
.follow-list { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.follow-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--color-surface-1); transition: .14s; }
.follow-row:hover { background: var(--color-surface-2); }
.follow-row__badge { flex: none; font-size: var(--text-xs); font-weight: var(--weight-bold); padding: 5px 11px; border-radius: var(--radius-full); white-space: nowrap; color: var(--color-accent); background: var(--color-accent-soft); }
.follow-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.follow-row__name { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-text-1); letter-spacing: -.01em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-row:hover .follow-row__name { color: #fff; }
.follow-row__meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--color-text-3); }
.follow-row__unfollow:hover { background: var(--color-accent-soft); color: var(--color-accent); }
/* account: actress grid with unfollow */
.afollow { position: relative; }
.afollow__unfollow { position: absolute; top: 12px; right: 12px; z-index: 2; }
.afollow__unfollow:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.afollow .acard { padding-right: 96px; }
/* mobile: forms full width, follow row wraps cleanly */
@media (max-width: 480px) {
    .account-form, .account-form--centered { max-width: 100%; }
    .follow-row { flex-wrap: wrap; }
    .follow-row__main { flex-basis: 100%; order: 1; }
    .follow-row__unfollow { order: 2; }
}
/* legal / contact prose pages */
.page { max-width: 820px; margin: 0 auto; padding: 8px 0 40px; color: var(--color-text-2); }
.page--narrow { max-width: 620px; }
.page h1 { font-size: clamp(26px, 3.2vw, 34px); font-weight: var(--weight-extrabold); letter-spacing: -.025em; color: var(--color-text-1); margin: 0 0 24px; }
.page h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-1); letter-spacing: -.01em; margin: 30px 0 10px; }
.page p { font-size: var(--text-base); line-height: 1.75; margin: 0 0 16px; }
.page ol, .page ul { margin: 0 0 18px; padding-left: 22px; }
.page li { font-size: var(--text-base); line-height: 1.7; margin-bottom: 10px; }
.page a { color: var(--color-accent); word-break: break-word; }
.page a:hover { text-decoration: underline; }
.page__email { font-size: var(--text-lg); font-weight: var(--weight-bold); }
@media (max-width: 560px) {
    .page h1 { margin-bottom: 18px; }
    .page p, .page li { line-height: 1.65; }
}
/* old-domain interstitial */
.moved { max-width: 560px; margin: 0 auto; padding: 60px 0 80px; text-align: center; color: var(--color-text-2); }
.moved__domain { font-size: clamp(28px, 5vw, 44px); font-weight: var(--weight-extrabold); letter-spacing: -.03em; color: var(--color-accent); margin: 0 0 14px; }
.moved__title { font-size: clamp(20px, 2.8vw, 26px); font-weight: var(--weight-bold); color: var(--color-text-1); margin: 0 0 12px; }
.moved__note { font-size: var(--text-base); line-height: 1.7; margin: 0 0 28px; }
/* error page (front::error.index) */
.errpage { max-width: 560px; margin: 0 auto; padding: 70px 0 90px; text-align: center; color: var(--color-text-2); }
.errpage__code { font-size: clamp(64px, 12vw, 120px); font-weight: var(--weight-extrabold); letter-spacing: -.04em; line-height: 1; color: var(--color-accent); }
.errpage__msg { font-size: clamp(18px, 2.6vw, 24px); font-weight: var(--weight-bold); color: var(--color-text-1); margin: 14px 0 28px; }
.errpage__debug { margin-top: 32px; padding: 16px; border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text-3); font-size: var(--text-xs); text-align: left; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
/* toasts: fixed bottom-right stack, type-tinted left border */
.toasts {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    min-width: 240px;
    max-width: 360px;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    border-left: 3px solid var(--color-accent);
    box-shadow: var(--shadow-pop);
    color: var(--color-text-1);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    cursor: pointer;
}
.toast--success {
    border-left-color: #3fcf8e;
}
.toast--error {
    border-left-color: var(--color-accent);
}
@media (max-width: 480px) {
    .toasts {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .toast {
        min-width: 0;
        max-width: none;
    }
}
/**
 * Swiper 11.2.10
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: June 28, 2025
 */

/* FONT_START */
@font-face {
  font-family: 'swiper-icons';
  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
  font-weight: 400;
  font-style: normal;
}
/* FONT_END */
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}
.swiper-button-prev svg,
.swiper-button-next svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
  transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-lock {
  display: none;
}
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}
/* Navigation font end */
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform,
        200ms top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
        200ms left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}