/* ===========================================================================
   lookmovie theme — site.css
   01. Tokens / reset
   02. Layer: chrome (skip, body, header, footer, breadcrumbs, drawer)
   03. Layer: hero carousel
   04. Layer: promo / ads strip
   05. Layer: filter bar (movies-filter style + sort chips)
   06. Layer: card grid + tile + slider rails + segment chips
   07. Layer: pagination + form pages + 404
   08. Layer: detail header + meta + facts + actions
   09. Layer: inline player + servers + report + episode list + trailer modal
   10. Layer: index landing sections
   11. Layer: notification bar + share CTA + popup
   12. Utilities + reduced motion
   =========================================================================== */

@layer reset, tokens, base, chrome, hero, promo, filter, grid, list, detail, player, index, util;

/* ============== 01. Tokens / reset ====================================== */

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body { margin: 0; }
    img, video, iframe { max-width: 100%; }
    img { height: auto; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
    input, select, textarea { font: inherit; color: inherit; }
    summary { cursor: pointer; list-style: none; }
    summary::-webkit-details-marker { display: none; }
    .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .d-none { display: none !important; }
}

@layer tokens {
    :root {
        --lk-bg:        #091525;
        --lk-bg-alt:    #0c1a2e;
        --lk-surface:   #122339;
        --lk-surface-2: #16273f;
        --lk-card:      #182a44;
        --lk-line:      rgba(255, 255, 255, 0.07);
        --lk-line-2:    rgba(255, 255, 255, 0.13);
        --lk-text:      #f1f3f8;
        --lk-text-soft: #c5cee0;
        --lk-text-mute: #8b97b3;
        --lk-brand:     #ed2c45;
        --lk-brand-2:   #ff4759;
        --lk-blue:      #2a6bff;
        --lk-blue-2:    #3d83ff;
        --lk-green:     #20c46f;
        --lk-yellow:    #ffd24a;
        --lk-promo-1:   #1c2945;
        --lk-promo-2:   #283a63;
        --lk-promo-bd:  rgba(120, 196, 255, 0.55);

        --lk-radius:    8px;
        --lk-radius-sm: 6px;
        --lk-radius-lg: 14px;

        --lk-font-d: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --lk-font-b: 'Roboto', system-ui, -apple-system, "Segoe UI", sans-serif;

        --lk-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
        --lk-shadow-md: 0 8px 22px rgba(0, 0, 0, 0.32);
        --lk-shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.40);
    }

    @media (color-gamut: p3) {
        :root {
            --lk-brand:   oklch(0.62 0.21 22);
            --lk-brand-2: oklch(0.68 0.21 22);
            --lk-green:   oklch(0.72 0.18 145);
            --lk-yellow:  oklch(0.86 0.16 90);
        }
    }
}

/* ============== 02. Chrome =============================================== */

@layer base {
    body.lk-body {
        background:
            radial-gradient(1200px 600px at 50% -200px, rgba(43, 71, 130, 0.35), transparent 60%),
            var(--lk-bg);
        color: var(--lk-text);
        font-family: var(--lk-font-b);
        font-size: 15px;
        line-height: 1.55;
        min-height: 100dvh;
        overflow-x: hidden;
    }

    .lk-skip {
        position: absolute;
        top: -48px;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 18px;
        background: var(--lk-brand);
        color: #fff;
        border-radius: var(--lk-radius);
        font-weight: 700;
        z-index: 9999;
        transition: top .2s ease;
    }
    .lk-skip:focus-visible { top: 12px; }
}

@layer chrome {
    /* ----- header ---------- */
    .lk-bar {
        position: sticky; top: 0; z-index: 60;
        background: linear-gradient(180deg, rgba(9, 21, 37, 0.98), rgba(9, 21, 37, 0.92));
        border-bottom: 1px solid var(--lk-line);
        backdrop-filter: blur(8px);
    }
    .lk-bar__inner {
        display: flex; align-items: center; gap: 18px;
        max-width: 1240px; margin: 0 auto; padding: 12px 18px;
    }
    .lk-bar__brand img { height: 30px; width: auto; }
    .lk-bar__nav { display: flex; align-items: center; gap: 4px; }
    .lk-bar__nav-link {
        padding: 8px 11px; border-radius: var(--lk-radius-sm);
        color: var(--lk-text-soft);
        font: 600 12px/1 var(--lk-font-d);
        letter-spacing: .04em;
        text-transform: uppercase;
        transition: color .15s ease, background .15s ease;
    }
    .lk-bar__nav-link:hover { color: var(--lk-brand-2); background: rgba(255, 71, 89, 0.08); }
    .lk-bar__menu { position: relative; }
    .lk-bar__menu > summary { padding: 8px 11px; border-radius: var(--lk-radius-sm); display: inline-flex; gap: 4px; color: var(--lk-text-soft); font: 600 12px/1 var(--lk-font-d); text-transform: uppercase; letter-spacing: .04em; }
    .lk-bar__menu > summary:hover { color: var(--lk-brand-2); }
    .lk-bar__menu-pop {
        position: absolute; top: calc(100% + 4px); left: 0;
        min-width: 200px; padding: 6px;
        background: var(--lk-surface);
        border: 1px solid var(--lk-line-2);
        border-radius: var(--lk-radius);
        box-shadow: var(--lk-shadow-md);
        display: grid; gap: 1px;
    }
    .lk-bar__menu-pop--wide { grid-template-columns: repeat(2, 1fr); min-width: 320px; }
    .lk-bar__menu-link {
        display: block; padding: 8px 12px; border-radius: 4px;
        font-size: 13px; color: var(--lk-text-soft);
    }
    .lk-bar__menu-link:hover { background: var(--lk-card); color: var(--lk-text); }

    .lk-bar__find {
        flex: 1 1 320px;
        display: flex; align-items: center; gap: 8px;
        background: rgba(0, 0, 0, 0.32);
        border: 1px solid var(--lk-line-2);
        border-radius: 22px;
        padding: 6px 14px;
        max-width: 420px;
    }
    .lk-bar__find-icon { color: var(--lk-text-mute); display: flex; }
    .lk-bar__find input {
        flex: 1; background: transparent; border: 0; outline: 0;
        color: var(--lk-text); font-size: 13px;
    }
    .lk-bar__find input::placeholder { color: var(--lk-text-mute); }

    .lk-bar__cta { display: flex; gap: 8px; }
    .lk-bar__cta-link {
        padding: 8px 14px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--lk-line-2);
        border-radius: 6px;
        font: 700 11px/1 var(--lk-font-d);
        color: var(--lk-text);
        letter-spacing: .06em;
        transition: background .15s ease, border-color .15s ease;
    }
    .lk-bar__cta-link:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--lk-brand); color: var(--lk-brand-2); }
    .lk-bar__cta-link--ghost { background: transparent; }

    .lk-bar__burger {
        display: none;
        width: 36px; height: 36px; border-radius: 4px;
        flex-direction: column; justify-content: center; gap: 4px;
        align-items: center;
        margin-left: auto;
    }
    .lk-bar__burger span { display: block; width: 18px; height: 2px; background: var(--lk-text); border-radius: 2px; }

    @media (max-width: 1080px) {
        .lk-bar__nav, .lk-bar__cta { display: none; }
        .lk-bar__burger { display: flex; }
    }
    @media (max-width: 640px) {
        .lk-bar__find { display: none; }
        .lk-bar__inner { padding: 10px 14px; }
    }

    /* ----- mobile drawer --- */
    .lk-mob-panel {
        position: fixed; inset: 0 30% 0 0;
        max-width: 320px;
        background: var(--lk-bg-alt);
        border-right: 1px solid var(--lk-line-2);
        z-index: 80;
        padding: 20px 22px;
        transform: translateX(-100%);
        transition: transform .28s ease;
        display: flex; flex-direction: column; gap: 18px;
    }
    .lk-mob-panel:not([hidden]) { transform: translateX(0); }
    .lk-mob-panel__top { display: flex; align-items: center; justify-content: space-between; }
    .lk-mob-panel__brand { font: 800 18px/1 var(--lk-font-d); color: var(--lk-brand); letter-spacing: .04em; text-transform: uppercase; }
    .lk-mob-panel__x { width: 32px; height: 32px; border-radius: 50%; color: var(--lk-text); }
    .lk-mob-panel__find { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.4); border: 1px solid var(--lk-line-2); border-radius: 24px; padding: 8px 14px; }
    .lk-mob-panel__find input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--lk-text); font-size: 13px; }
    .lk-mob-panel__find button { color: var(--lk-text-mute); display: flex; }
    .lk-mob-panel__nav { display: flex; flex-direction: column; gap: 2px; }
    .lk-mob-panel__lnk {
        padding: 12px 14px; border-radius: 6px;
        color: var(--lk-text-soft);
        font: 700 13px/1 var(--lk-font-d);
        letter-spacing: .04em; text-transform: uppercase;
    }
    .lk-mob-panel__lnk:hover { background: var(--lk-card); color: var(--lk-text); }

    .lk-mob-scrim {
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 70;
    }

    /* ----- main / footer / breadcrumbs --- */
    .lk-main { display: block; }

    .lk-floor {
        margin-top: 64px;
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.85) 100%),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'%3E%3Crect fill='%23192e4d' width='120' height='80'/%3E%3C/svg%3E");
        border-top: 1px solid var(--lk-line);
    }
    .lk-floor__inner {
        max-width: 1240px; margin: 0 auto; padding: 28px 18px;
        display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 22px;
    }
    .lk-floor__brand img { height: 26px; width: auto; }
    .lk-floor__nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
    .lk-floor__lnk {
        font-size: 12px; color: var(--lk-text-mute);
    }
    .lk-floor__lnk:hover { color: var(--lk-brand-2); }
    .lk-floor__note {
        margin: 0;
        text-align: right;
        max-width: 560px;
        font-size: 11.5px;
        line-height: 1.6;
        color: var(--lk-text-mute);
        justify-self: end;
    }
    @media (max-width: 880px) {
        .lk-floor__inner { grid-template-columns: 1fr; gap: 14px; }
        .lk-floor__note { text-align: left; max-width: none; }
    }

    .lk-crumb {
        max-width: 1240px; margin: 0 auto; padding: 14px 18px 0;
    }
    .lk-crumb__line { display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0; list-style: none; gap: 4px 6px; }
    .lk-crumb__item { display: inline-flex; align-items: center; gap: 6px; }
    .lk-crumb__lnk { font-size: 12px; color: var(--lk-text-mute); }
    .lk-crumb__lnk:hover { color: var(--lk-brand-2); }
    .lk-crumb__txt { font-size: 12px; color: var(--lk-text); font-weight: 600; }
    .lk-crumb__sep { color: var(--lk-text-mute); font-size: 12px; }
}

/* ============== 03. Hero carousel ======================================= */

@layer hero {
    .lk-hero {
        max-width: 1240px;
        margin: 18px auto 0;
        padding: 0 18px;
    }
    .lk-hero__deck {
        position: relative;
        aspect-ratio: 16 / 7;
        border-radius: var(--lk-radius-lg);
        overflow: hidden;
        background: var(--lk-surface);
        box-shadow: var(--lk-shadow-md);
    }
    @media (max-width: 720px) {
        .lk-hero__deck { aspect-ratio: 16 / 11; }
    }
    .lk-hero__slide {
        position: absolute; inset: 0;
        opacity: 0; pointer-events: none;
        transition: opacity .55s ease;
        display: grid; grid-template-rows: 1fr;
    }
    .lk-hero__slide.is-current { opacity: 1; pointer-events: auto; }
    .lk-hero__art { position: absolute; inset: 0; }
    .lk-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .lk-hero__art::after {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(9, 21, 37, 0) 30%, rgba(9, 21, 37, 0.55) 60%, rgba(9, 21, 37, 0.95) 100%),
                    linear-gradient(90deg, rgba(9, 21, 37, 0.85) 0%, rgba(9, 21, 37, 0.2) 50%, transparent 80%);
    }
    .lk-hero__body {
        position: relative; z-index: 2;
        align-self: end;
        padding: 28px 32px 26px;
        max-width: 540px;
    }
    .lk-hero__title {
        margin: 0 0 10px;
        font: 800 28px/1.15 var(--lk-font-d);
        letter-spacing: .01em;
    }
    .lk-hero__yr { color: var(--lk-text-mute); font-weight: 600; font-size: 16px; }
    .lk-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; font-size: 12px; }
    .lk-hero__rate { display: inline-flex; align-items: center; gap: 4px; color: var(--lk-yellow); font-weight: 700; }
    .lk-hero__pill {
        padding: 3px 9px; border-radius: 4px; background: rgba(255, 255, 255, 0.16);
        font: 700 11px/1 var(--lk-font-d); letter-spacing: .04em;
    }
    .lk-hero__pill--qual { background: var(--lk-green); color: #061a10; }
    .lk-hero__pill--age  { background: var(--lk-brand); color: #fff; }
    .lk-hero__tag { color: var(--lk-text-soft); font-size: 12px; }
    .lk-hero__tag:hover { color: var(--lk-brand-2); }
    .lk-hero__desc { margin: 0 0 18px; color: var(--lk-text-soft); font-size: 13.5px; line-height: 1.6; }
    .lk-hero__act { display: flex; flex-wrap: wrap; gap: 10px; }
    .lk-hero__btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 11px 22px; border-radius: 6px;
        font: 700 13px/1 var(--lk-font-d);
        letter-spacing: .04em; text-transform: uppercase;
    }
    .lk-hero__btn--watch { background: var(--lk-brand); color: #fff; box-shadow: 0 6px 16px rgba(237, 44, 69, 0.35); }
    .lk-hero__btn--watch:hover { background: var(--lk-brand-2); }
    .lk-hero__btn--trailer { background: rgba(255, 255, 255, 0.1); color: var(--lk-text); border: 1px solid var(--lk-line-2); }
    .lk-hero__btn--trailer:hover { background: rgba(255, 255, 255, 0.16); }

    .lk-hero__nav {
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 38px; height: 38px;
        border-radius: 50%;
        background: rgba(9, 21, 37, 0.6);
        color: var(--lk-text);
        display: flex; align-items: center; justify-content: center;
        z-index: 3;
        transition: background .15s ease;
    }
    .lk-hero__nav:hover { background: rgba(0, 0, 0, 0.85); }
    .lk-hero__nav--prev { left: 12px; }
    .lk-hero__nav--next { right: 12px; }

    .lk-hero__strip {
        margin-top: 10px;
        display: flex; gap: 8px; overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: thin;
    }
    .lk-hero__thumb {
        flex: 0 0 auto;
        width: 72px; aspect-ratio: 2 / 3;
        border-radius: 4px;
        overflow: hidden;
        opacity: .6;
        transition: opacity .15s ease, transform .15s ease;
    }
    .lk-hero__thumb img { width: 100%; height: 100%; object-fit: cover; }
    .lk-hero__thumb.is-current { opacity: 1; outline: 2px solid var(--lk-brand-2); }
    .lk-hero__thumb:hover { opacity: 1; transform: translateY(-2px); }

    @media (max-width: 720px) {
        .lk-hero__body { padding: 18px 20px 18px; max-width: none; }
        .lk-hero__title { font-size: 22px; }
        .lk-hero__strip { display: none; }
    }
}

/* ============== 04. Promo strip ========================================== */

@layer promo {
    .lk-promo {
        max-width: 1240px;
        margin: 22px auto 0;
        padding: 0 18px;
    }
    .lk-promo__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 22px;
        padding: 20px 26px;
        background: linear-gradient(135deg, var(--lk-promo-1) 0%, var(--lk-promo-2) 100%);
        border: 1.5px solid var(--lk-promo-bd);
        border-radius: var(--lk-radius-lg);
        box-shadow: 0 8px 24px rgba(20, 50, 95, 0.30);
    }
    .lk-promo__pic { color: #f3deb6; opacity: .9; }
    .lk-promo__pic--right { color: #f0b8c2; }
    .lk-promo__copy { text-align: center; }
    .lk-promo__hd { margin: 0 0 4px; font: 700 18px/1.3 var(--lk-font-d); }
    .lk-promo__hd-soft { color: var(--lk-brand-2); }
    .lk-promo__sub { margin: 0 0 12px; color: var(--lk-text-soft); font-size: 13px; }
    .lk-promo__btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 18px;
        background: var(--lk-blue);
        border-radius: 22px;
        font: 700 12px/1 var(--lk-font-d);
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #fff;
    }
    .lk-promo__btn:hover { background: var(--lk-blue-2); }
    @media (max-width: 720px) {
        .lk-promo__inner { grid-template-columns: 1fr; padding: 18px; }
        .lk-promo__pic { display: none; }
    }
}

/* ============== 05. Filter bar =========================================== */

@layer filter {
    .lk-filter-wrap { max-width: 1240px; margin: 28px auto 0; padding: 0 18px; }
    .lk-filter-wrap__inner { text-align: center; }
    .lk-filter-wrap__hd {
        margin: 0 0 16px;
        font: 800 22px/1 var(--lk-font-d);
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    .lk-filter { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
    .lk-filter__bar {
        display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
        margin-bottom: 4px;
    }
    .lk-filter__sort {
        padding: 6px 14px; border-radius: 4px;
        background: var(--lk-surface);
        border: 1px solid var(--lk-line-2);
        font: 600 11.5px/1 var(--lk-font-d);
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--lk-text-soft);
    }
    .lk-filter__sort:hover { color: var(--lk-text); border-color: var(--lk-brand); }
    .lk-filter__sort.is-current { background: var(--lk-brand); color: #fff; border-color: var(--lk-brand); }

    .lk-filter__row {
        display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
        align-items: stretch;
    }
    .lk-filter__cell { display: flex; flex-direction: column; gap: 4px; min-width: 175px; }
    .lk-filter__lbl { font-size: 10.5px; color: var(--lk-text-mute); letter-spacing: .04em; text-transform: uppercase; padding-left: 4px; }
    .lk-filter__pick {
        appearance: none; -webkit-appearance: none;
        padding: 9px 30px 9px 12px;
        border-radius: var(--lk-radius);
        background: var(--lk-surface);
        border: 1px solid var(--lk-line-2);
        color: var(--lk-text);
        font-size: 13px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238b97b3' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        cursor: pointer;
    }
    .lk-filter__pick:focus-visible { outline: 2px solid var(--lk-brand-2); outline-offset: 2px; }
    .lk-filter__go {
        padding: 9px 28px;
        background: var(--lk-brand); color: #fff;
        border-radius: var(--lk-radius);
        font: 700 12px/1 var(--lk-font-d);
        letter-spacing: .06em;
        text-transform: uppercase;
        align-self: end;
    }
    .lk-filter__go:hover { background: var(--lk-brand-2); }

    /* segment chips for country/search type filters */
    .lk-segment { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
    .lk-chip {
        padding: 6px 14px; border-radius: 18px;
        background: var(--lk-surface);
        border: 1px solid var(--lk-line-2);
        font-size: 12px; color: var(--lk-text-soft);
    }
    .lk-chip:hover { color: var(--lk-text); border-color: var(--lk-brand); }
    .lk-chip.is-on { background: var(--lk-brand); color: #fff; border-color: var(--lk-brand); }

    .lk-genrebar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
}

/* ============== 06. Grid + tile + slider rails =========================== */

@layer grid {
    .lk-grid-wrap { max-width: 1240px; margin: 18px auto 0; padding: 0 18px; }
    .lk-grid-wrap__inner { display: block; }
    .lk-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px 14px;
    }
    @media (max-width: 1080px) { .lk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    @media (max-width: 760px)  { .lk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; } }
    @media (max-width: 460px)  { .lk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    .lk-tile { position: relative; }
    .lk-tile__art {
        position: relative; display: block;
        aspect-ratio: 2 / 3;
        border-radius: var(--lk-radius);
        overflow: hidden;
        background: var(--lk-surface);
    }
    .lk-tile__poster { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .25s ease; }
    .lk-tile__art:hover .lk-tile__poster { transform: scale(1.04); filter: brightness(.55); }
    .lk-tile__rate {
        position: absolute; top: 8px; left: 8px;
        background: rgba(0, 0, 0, 0.78);
        color: var(--lk-yellow);
        padding: 3px 7px;
        border-radius: 4px;
        font: 700 11px/1 var(--lk-font-d);
        display: inline-flex; align-items: center; gap: 4px;
    }
    .lk-tile__qual {
        position: absolute; bottom: 8px; right: 8px;
        background: var(--lk-green);
        color: #06170c;
        padding: 3px 8px;
        border-radius: 4px;
        font: 800 10.5px/1 var(--lk-font-d);
        letter-spacing: .04em;
    }
    .lk-tile__tv {
        position: absolute; top: 8px; right: 8px;
        background: var(--lk-blue);
        color: #fff;
        padding: 3px 8px;
        border-radius: 4px;
        font: 800 10.5px/1 var(--lk-font-d);
        letter-spacing: .04em;
    }
    .lk-tile__se {
        position: absolute; bottom: 8px; left: 8px;
        background: rgba(0, 0, 0, 0.78);
        color: #fff;
        padding: 3px 7px;
        border-radius: 4px;
        font: 700 10.5px/1 var(--lk-font-d);
    }
    .lk-tile__hover-play {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        opacity: 0; color: #fff;
        transition: opacity .2s ease;
        pointer-events: none;
    }
    .lk-tile__art:hover .lk-tile__hover-play { opacity: 1; }
    .lk-tile__cap { padding: 8px 4px 4px; }
    .lk-tile__name {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font: 600 13px/1.3 var(--lk-font-d);
        text-transform: uppercase;
        letter-spacing: .02em;
        color: var(--lk-text);
    }
    .lk-tile__name:hover { color: var(--lk-brand-2); }
    .lk-tile__year { display: block; font-size: 11px; color: var(--lk-text-mute); margin-top: 2px; }

    /* slider rails */
    .lk-rail {
        position: relative;
        margin: 0 -2px;
    }
    .lk-rail__track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(170px, 1fr);
        gap: 14px;
        overflow-x: auto;
        padding: 4px 2px 14px;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scroll-snap-type: x mandatory;
    }
    .lk-rail__track > .lk-tile { scroll-snap-align: start; }
    @media (min-width: 760px)  { .lk-rail__track { grid-auto-columns: minmax(190px, 1fr); } }
    @media (min-width: 1080px) { .lk-rail__track { grid-auto-columns: minmax(210px, 1fr); } }

    .lk-rail__nav {
        position: absolute; top: calc(50% - 28px); transform: translateY(-50%);
        width: 38px; height: 38px;
        border-radius: 50%;
        background: rgba(9, 21, 37, 0.85);
        color: var(--lk-text);
        display: none;
        align-items: center; justify-content: center;
        z-index: 3;
        box-shadow: var(--lk-shadow-md);
    }
    .lk-rail__nav:hover { background: var(--lk-brand); color: #fff; }
    .lk-rail__nav--prev { left: -10px; }
    .lk-rail__nav--next { right: -10px; }
    .lk-rail:hover .lk-rail__nav,
    .lk-rail__nav:focus-visible { display: flex; }
    .lk-rail--bare .lk-rail__nav { display: none; }

    /* row wrappers */
    .lk-row { max-width: 1240px; margin: 36px auto 0; padding: 0 18px; }
    .lk-row__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .lk-row__hd, .lk-row__h {
        margin: 0;
        font: 700 17px/1 var(--lk-font-d);
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .lk-row__more {
        font-size: 12px;
        color: var(--lk-text-mute);
        font-weight: 600;
    }
    .lk-row__more:hover { color: var(--lk-brand-2); }
}

/* ============== 07. Pagination + form pages + 404 ======================== */

@layer list {
    .lk-list { max-width: 1240px; margin: 18px auto 0; padding: 0 18px; }
    .lk-list__shell { display: block; }
    .lk-list__head { padding: 14px 0 18px; }
    .lk-list__head--search { display: flex; flex-direction: column; gap: 12px; }
    .lk-list__h {
        margin: 0 0 6px;
        font: 800 22px/1.2 var(--lk-font-d);
    }
    .lk-list__hl { color: var(--lk-brand-2); }
    .lk-list__sub {
        margin: 0;
        color: var(--lk-text-mute);
        font-size: 13px;
    }
    .lk-list__empty {
        padding: 60px 20px;
        text-align: center;
        background: var(--lk-surface);
        border: 1px solid var(--lk-line-2);
        border-radius: var(--lk-radius-lg);
    }
    .lk-list__empty h2 {
        margin: 0 0 6px;
        font: 700 18px/1.3 var(--lk-font-d);
    }
    .lk-list__empty p { margin: 0; color: var(--lk-text-soft); font-size: 13px; }
    .lk-list__empty a { color: var(--lk-brand-2); }

    .lk-page-pad { max-width: 1240px; margin: 22px auto 36px; padding: 0 18px; text-align: center; }
    .lk-page-pad__caption { color: var(--lk-text-mute); font-size: 12px; margin: 0 0 8px; }
    .lk-pages, .lk-pager > nav, .lk-pager .pagination {
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: 4px;
    }
    .lk-pager { margin: 28px 0 8px; display: flex; justify-content: center; }
    .lk-pages__lnk, .lk-pager a, .lk-pager span.current {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 36px; height: 36px; padding: 0 10px;
        background: var(--lk-surface);
        border: 1px solid var(--lk-line-2);
        border-radius: 4px;
        font: 700 12.5px/1 var(--lk-font-d);
        color: var(--lk-text-soft);
    }
    .lk-pages__lnk:hover, .lk-pager a:hover { color: var(--lk-text); border-color: var(--lk-brand); }
    .lk-pages__lnk.is-current, .lk-pager .current, .lk-pager .active a {
        background: var(--lk-brand); color: #fff; border-color: var(--lk-brand);
    }
    .lk-pages__chev { color: var(--lk-text-mute); padding: 0 8px; }

    /* engine paginationHtml() ships <ul class="pagination"> styled here */
    .lk-pager .pagination { list-style: none; padding: 0; margin: 0; }
    .lk-pager .pagination li a,
    .lk-pager .pagination li span {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 36px; height: 36px; padding: 0 10px;
        background: var(--lk-surface);
        border: 1px solid var(--lk-line-2);
        border-radius: 4px;
        font: 700 12.5px/1 var(--lk-font-d);
        color: var(--lk-text-soft);
    }
    .lk-pager .pagination li.active a,
    .lk-pager .pagination li.active span {
        background: var(--lk-brand); color: #fff; border-color: var(--lk-brand);
    }
    .lk-pager .pagination li.disabled a,
    .lk-pager .pagination li.disabled span { opacity: .35; pointer-events: none; }

    /* request + 404 + search forms */
    .lk-form-page { max-width: 720px; margin: 32px auto; padding: 0 18px; }
    .lk-form-page__shell { background: var(--lk-surface); border: 1px solid var(--lk-line-2); border-radius: var(--lk-radius-lg); padding: 28px; }
    .lk-form-page__head { text-align: center; margin-bottom: 22px; }
    .lk-form-page__h { margin: 0 0 6px; font: 800 22px/1.2 var(--lk-font-d); }
    .lk-form-page__sub { margin: 0; color: var(--lk-text-soft); font-size: 13px; }
    .lk-form-page__ok { background: rgba(32, 196, 111, 0.12); border: 1px solid rgba(32, 196, 111, 0.4); border-radius: var(--lk-radius); padding: 18px; }
    .lk-form-page__err { background: rgba(237, 44, 69, 0.12); border: 1px solid rgba(237, 44, 69, 0.4); border-radius: var(--lk-radius); padding: 12px 16px; margin-bottom: 16px; color: var(--lk-brand-2); font-size: 13px; }

    .lk-form { display: flex; flex-direction: column; gap: 14px; }
    .lk-form__row { display: flex; flex-direction: column; gap: 6px; }
    .lk-form__lbl { font-size: 12px; color: var(--lk-text-soft); font-weight: 600; }
    .lk-form__lbl em { color: var(--lk-brand-2); font-style: normal; font-weight: 700; }
    .lk-form input, .lk-form textarea, .lk-form select {
        padding: 11px 14px;
        background: var(--lk-bg-alt);
        border: 1px solid var(--lk-line-2);
        border-radius: var(--lk-radius);
        color: var(--lk-text);
        font-size: 14px;
    }
    .lk-form input:focus-visible, .lk-form textarea:focus-visible, .lk-form select:focus-visible {
        outline: 2px solid var(--lk-brand-2); outline-offset: 2px;
        border-color: var(--lk-brand-2);
    }
    .lk-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        padding: 10px 20px;
        border-radius: var(--lk-radius);
        font: 700 13px/1 var(--lk-font-d);
        letter-spacing: .04em;
        text-transform: uppercase;
        transition: background .15s ease, transform .15s ease;
    }
    .lk-btn--brand { background: var(--lk-brand); color: #fff; }
    .lk-btn--brand:hover { background: var(--lk-brand-2); }
    .lk-btn--xl { padding: 14px 26px; font-size: 14px; align-self: flex-start; }
    .lk-btn--ghost { background: rgba(255,255,255,.08); color: var(--lk-text); border: 1px solid var(--lk-line-2); }
    .lk-btn--ghost:hover { background: rgba(255,255,255,.14); }

    .lk-search {
        display: flex; align-items: center; gap: 8px;
        background: var(--lk-surface); border: 1px solid var(--lk-line-2);
        border-radius: 28px; padding: 6px 8px 6px 16px;
        max-width: 540px;
    }
    .lk-search__icon { color: var(--lk-text-mute); display: flex; }
    .lk-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--lk-text); font-size: 14px; padding: 6px 0; }
    .lk-search__rest p { margin: 0 0 8px; color: var(--lk-text-soft); }
    .lk-search__suggest { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
    .lk-search__suggest a { color: var(--lk-brand-2); font-weight: 600; font-size: 14px; }

    .lk-404 { max-width: 640px; margin: 64px auto; padding: 0 18px; text-align: center; }
    .lk-404__num { margin: 0; font: 800 96px/1 var(--lk-font-d); color: var(--lk-brand); letter-spacing: .04em; }
    .lk-404__h { margin: 0 0 12px; font: 800 26px/1.2 var(--lk-font-d); }
    .lk-404__lead { margin: 0 0 22px; color: var(--lk-text-soft); }
    .lk-404__find { display: flex; gap: 8px; max-width: 480px; margin: 0 auto 18px; }
    .lk-404__find input { flex: 1; padding: 11px 16px; background: var(--lk-surface); border: 1px solid var(--lk-line-2); border-radius: var(--lk-radius); color: var(--lk-text); font-size: 14px; }
    .lk-404__nav { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
    .lk-404__nav a { color: var(--lk-brand-2); font-weight: 600; font-size: 13px; }
}

/* ============== 08. Detail header + facts + actions ====================== */

@layer detail {
    /* Movie detail (lk-dt-* classes) */
    .lk-dt-bg { position: absolute; inset: 0 0 auto 0; height: 540px; z-index: 0; pointer-events: none; }
    .lk-dt-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
    .lk-dt-bg__shade {
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(9, 21, 37, 0.4) 0%, rgba(9, 21, 37, 0.85) 60%, var(--lk-bg) 100%);
    }
    body.lk-page-detail .lk-main { position: relative; }

    .lk-dt { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 18px; }
    .lk-dt__inner { padding: 18px 0 28px; }
    .lk-dt__back { margin-bottom: 14px; }
    .lk-dt__back-lnk { display: inline-flex; align-items: center; gap: 6px; color: var(--lk-text-soft); font-size: 12px; font-weight: 600; }
    .lk-dt__back-lnk:hover { color: var(--lk-brand-2); }

    .lk-dt__grid {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 32px;
        align-items: start;
    }
    @media (max-width: 800px) { .lk-dt__grid { grid-template-columns: 1fr; gap: 22px; } }

    .lk-dt__poster { margin: 0; border-radius: var(--lk-radius-lg); overflow: hidden; box-shadow: var(--lk-shadow-lg); }
    .lk-dt__poster img { width: 100%; height: auto; display: block; }
    @media (max-width: 800px) { .lk-dt__poster { max-width: 220px; margin: 0 auto; } }

    .lk-dt__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .lk-dt__pill {
        padding: 4px 10px; border-radius: 4px;
        background: rgba(255, 255, 255, 0.1);
        font: 700 11px/1 var(--lk-font-d);
        letter-spacing: .04em;
    }
    .lk-dt__pill--type { background: var(--lk-brand); color: #fff; }
    .lk-dt__pill--rate { background: rgba(0, 0, 0, 0.55); color: var(--lk-yellow); display: inline-flex; align-items: center; gap: 4px; }
    .lk-dt__pill--qual { background: var(--lk-green); color: #061a10; }

    .lk-dt__title { margin: 0 0 4px; font: 800 32px/1.15 var(--lk-font-d); }
    @media (max-width: 800px) { .lk-dt__title { font-size: 24px; } }
    .lk-dt__alt { margin: 0 0 16px; color: var(--lk-text-mute); font-size: 14px; }

    .lk-dt__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
    .lk-dt__tag {
        padding: 4px 10px; border-radius: 4px;
        background: var(--lk-surface);
        border: 1px solid var(--lk-line-2);
        font-size: 12px;
        color: var(--lk-text-soft);
    }
    .lk-dt__tag:hover { color: var(--lk-text); border-color: var(--lk-brand); }

    .lk-dt__sum { margin: 0 0 22px; color: var(--lk-text-soft); font-size: 14px; line-height: 1.7; }

    .lk-dt__act { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
    .lk-dt__act-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 10px 20px;
        border-radius: 6px;
        font: 700 12px/1 var(--lk-font-d);
        letter-spacing: .04em;
        text-transform: uppercase;
        cursor: pointer;
    }
    .lk-dt__act-btn--watch { background: var(--lk-brand); color: #fff; }
    .lk-dt__act-btn--watch:hover { background: var(--lk-brand-2); }
    .lk-dt__act-btn--trailer,
    .lk-dt__act-btn--rnd,
    .lk-dt__act-btn--report {
        background: rgba(255, 255, 255, 0.08);
        color: var(--lk-text);
        border: 1px solid var(--lk-line-2);
    }
    .lk-dt__act-btn--trailer:hover,
    .lk-dt__act-btn--rnd:hover,
    .lk-dt__act-btn--report:hover { background: rgba(255, 255, 255, 0.16); }

    .lk-dt__facts { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
    .lk-dt__fact { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--lk-line); }
    .lk-dt__fact:last-child { border-bottom: 0; }
    .lk-dt__fact dt { color: var(--lk-text-mute); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 2px 0 0; }
    .lk-dt__fact dd { margin: 0; font-size: 13.5px; }
    .lk-dt__fact-lnk { color: var(--lk-text); }
    .lk-dt__fact-lnk:hover { color: var(--lk-brand-2); }

    /* Series detail (lk-detail / lk-hero alias) — separate styles to avoid clash */
    body.page-series-detail .lk-hero { margin: 0; padding: 0; max-width: none; position: relative; height: 420px; overflow: hidden; }
    body.page-series-detail .lk-hero__bg { position: absolute; inset: 0; }
    body.page-series-detail .lk-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
    body.page-series-detail .lk-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 21, 37, 0.4) 0%, rgba(9, 21, 37, 0.92) 70%, var(--lk-bg) 100%); }

    .lk-detail { position: relative; z-index: 2; max-width: 1240px; margin: -240px auto 0; padding: 0 18px 28px; }
    .lk-detail__shell { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
    @media (max-width: 800px) { .lk-detail { margin-top: -120px; } .lk-detail__shell { grid-template-columns: 1fr; } }

    .lk-detail__poster { display: flex; flex-direction: column; gap: 14px; }
    .lk-detail__frame { border-radius: var(--lk-radius-lg); overflow: hidden; box-shadow: var(--lk-shadow-lg); }
    .lk-detail__frame img { width: 100%; height: auto; }
    @media (max-width: 800px) { .lk-detail__poster { max-width: 220px; margin: 0 auto; } }

    .lk-detail__cta { display: flex; flex-direction: column; gap: 8px; }
    @media (max-width: 800px) { .lk-detail__cta { display: none; } }

    .lk-btn--play, .lk-btn--latest { background: var(--lk-brand); color: #fff; padding: 11px 18px; }
    .lk-btn--play:hover, .lk-btn--latest:hover { background: var(--lk-brand-2); }
    .lk-btn--latest { background: rgba(255, 255, 255, 0.1); border: 1px solid var(--lk-line-2); }
    .lk-btn--latest:hover { background: rgba(255, 255, 255, 0.16); }

    .lk-detail__core { color: var(--lk-text); }
    .lk-detail__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12.5px; color: var(--lk-text-soft); }
    .lk-pill { padding: 3px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); font-weight: 700; font-size: 11px; }
    .lk-pill--mini { background: var(--lk-blue); color: #fff; padding: 3px 9px; letter-spacing: .04em; text-transform: uppercase; }
    .lk-detail__stat { padding: 3px 9px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
    .lk-detail__yr { color: var(--lk-text-soft); }
    .lk-detail__yr:hover { color: var(--lk-brand-2); }
    .lk-detail__rt { color: var(--lk-text-mute); }
    .lk-detail__rate { display: inline-flex; align-items: center; gap: 4px; color: var(--lk-yellow); font-weight: 700; }
    .lk-detail__rate-of { color: var(--lk-text-mute); font-weight: 500; }

    .lk-detail__title { margin: 0 0 4px; font: 800 30px/1.15 var(--lk-font-d); }
    @media (max-width: 800px) { .lk-detail__title { font-size: 22px; } }
    .lk-detail__alt { margin: 0 0 14px; color: var(--lk-text-mute); font-size: 14px; }
    .lk-detail__genres { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
    .lk-tag { padding: 4px 10px; border-radius: 14px; background: var(--lk-surface); border: 1px solid var(--lk-line-2); font-size: 12px; color: var(--lk-text-soft); }
    .lk-tag:hover { color: var(--lk-text); border-color: var(--lk-brand); }
    .lk-detail__lead { margin: 12px 0 18px; color: var(--lk-text-soft); font-size: 14.5px; line-height: 1.75; }

    .lk-detail__handheld { display: none; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
    @media (max-width: 800px) { .lk-detail__handheld { display: flex; } }

    .lk-facts { display: grid; gap: 8px; margin: 18px 0 0; }
    .lk-facts__row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--lk-line); }
    .lk-facts__row:last-child { border-bottom: 0; }
    .lk-facts__row dt { color: var(--lk-text-mute); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
    .lk-facts__row dd { margin: 0; font-size: 13.5px; }
    .lk-facts__row a { color: var(--lk-text); }
    .lk-facts__row a:hover { color: var(--lk-brand-2); }
}

/* ============== 09. Player + servers + report + episodes + trailer ====== */

@layer player {
    /* Movie inline player block (lk-pl-*) */
    .lk-pl { max-width: 1240px; margin: 28px auto 0; padding: 0 18px; }
    .lk-pl__inner { background: var(--lk-surface); border: 1px solid var(--lk-line-2); border-radius: var(--lk-radius-lg); padding: 18px; }
    .lk-pl__title { font: 700 13px/1.4 var(--lk-font-d); letter-spacing: .04em; margin-bottom: 10px; color: var(--lk-text-soft); }
    .lk-pl__shell { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--lk-radius); overflow: hidden; }
    .lk-pl__poster { position: absolute; inset: 0; cursor: pointer; }
    .lk-pl__poster img { width: 100%; height: 100%; object-fit: cover; }
    .lk-pl__poster::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
    .lk-pl__play {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 76px; height: 76px;
        border-radius: 50%;
        background: var(--lk-brand);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        z-index: 2;
        box-shadow: 0 12px 28px rgba(237, 44, 69, 0.4);
        cursor: pointer;
    }
    .lk-pl__play:hover { background: var(--lk-brand-2); transform: translate(-50%, -50%) scale(1.06); }
    .lk-pl__frame { width: 100%; height: 100%; border: 0; }
    .lk-pl__frame.is-shown { display: block; }
    .lk-pl__servers { margin-top: 14px; }
    .lk-pl__hint {
        margin: 0 0 8px;
        display: flex; align-items: center; gap: 6px;
        color: var(--lk-text-mute); font-size: 12px;
    }
    .lk-pl__servers-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .lk-pl__srv {
        padding: 7px 14px;
        background: var(--lk-bg-alt);
        border: 1px solid var(--lk-line-2);
        border-radius: 4px;
        font: 600 12px/1 var(--lk-font-d);
        color: var(--lk-text-soft);
        letter-spacing: .04em;
        cursor: pointer;
    }
    .lk-pl__srv:hover { color: var(--lk-text); border-color: var(--lk-brand); }
    .lk-pl__srv.is-current { background: var(--lk-brand); color: #fff; border-color: var(--lk-brand); }

    .lk-pl__report { margin-top: 14px; }
    .lk-pl__report > summary {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--lk-line-2);
        border-radius: 4px;
        font-size: 12px; color: var(--lk-text-soft);
    }
    .lk-pl__report > summary:hover { color: var(--lk-text); }
    .lk-pl__report-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .lk-pl__report-form select, .lk-pl__report-form textarea {
        background: var(--lk-bg-alt);
        border: 1px solid var(--lk-line-2);
        border-radius: 4px;
        padding: 8px 12px;
        color: var(--lk-text);
        font-size: 13px;
        flex: 1 1 200px;
    }
    .lk-pl__report-go {
        padding: 8px 18px;
        background: var(--lk-brand); color: #fff;
        border-radius: 4px;
        font: 700 12px/1 var(--lk-font-d);
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    .lk-pl__report-go:hover { background: var(--lk-brand-2); }

    /* Series inline player + server tabs (lk-stream / lk-srv / lk-epnav / lk-rep / lk-eps / lk-ep) */
    .lk-stream { max-width: 1240px; margin: 28px auto 0; padding: 0 18px; }
    .lk-stream__shell { background: var(--lk-surface); border: 1px solid var(--lk-line-2); border-radius: var(--lk-radius-lg); padding: 18px; }
    .lk-stream__head { margin-bottom: 12px; }
    .lk-stream__h { margin: 0; font: 700 14px/1 var(--lk-font-d); letter-spacing: .04em; }
    .lk-stream__hint { margin: 4px 0 0; font-size: 12px; color: var(--lk-text-mute); }
    .lk-stream__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--lk-radius); overflow: hidden; }
    .lk-stream__poster { position: absolute; inset: 0; cursor: pointer; }
    .lk-stream__poster img { width: 100%; height: 100%; object-fit: cover; }
    .lk-stream__poster::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
    .lk-stream__play {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 80px; height: 80px;
        border-radius: 50%;
        background: var(--lk-brand);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        z-index: 2;
        box-shadow: 0 12px 28px rgba(237, 44, 69, 0.4);
        cursor: pointer;
    }
    .lk-stream__iframe { width: 100%; height: 100%; border: 0; display: block; }
    .lk-stream__iframe.d-none { display: none; }
    .player-loading {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        gap: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: var(--lk-text); font-size: 13px;
        z-index: 3;
    }
    .lk-stream__spin {
        width: 22px; height: 22px;
        border: 2.5px solid rgba(255, 255, 255, 0.25);
        border-top-color: var(--lk-brand-2);
        border-radius: 50%;
        animation: lk-spin 0.7s linear infinite;
    }
    @keyframes lk-spin { to { transform: rotate(360deg); } }

    .lk-srv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
    .lk-srv__hint { margin: 0; font-size: 12px; color: var(--lk-text-mute); flex: 1 1 100%; }
    .lk-srv__lbl { font: 600 12px/1 var(--lk-font-d); color: var(--lk-text-soft); text-transform: uppercase; letter-spacing: .04em; padding-right: 6px; }
    .lk-srv__row { display: flex; flex-wrap: wrap; gap: 6px; }
    .lk-srv__row .server-tab,
    .lk-srv__row > button {
        padding: 7px 14px;
        background: var(--lk-bg-alt);
        border: 1px solid var(--lk-line-2);
        border-radius: 4px;
        font: 600 12px/1 var(--lk-font-d);
        color: var(--lk-text-soft);
        letter-spacing: .04em;
        cursor: pointer;
    }
    .lk-srv__row .server-tab:hover,
    .lk-srv__row > button:hover { color: var(--lk-text); border-color: var(--lk-brand); }
    .lk-srv__row .server-tab.active,
    .lk-srv__row > button.active { background: var(--lk-brand); color: #fff; border-color: var(--lk-brand); }

    .lk-epnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lk-line); }
    .lk-epnav__btn {
        padding: 8px 14px;
        background: var(--lk-bg-alt);
        border: 1px solid var(--lk-line-2);
        border-radius: 4px;
        font: 600 12px/1 var(--lk-font-d);
        color: var(--lk-text-soft);
        cursor: pointer;
    }
    .lk-epnav__btn:not(:disabled):hover { color: var(--lk-text); border-color: var(--lk-brand); }
    .lk-epnav__btn:disabled { opacity: .3; cursor: not-allowed; }
    .lk-epnav__here { font-size: 13px; color: var(--lk-text-soft); text-align: center; flex: 1; }

    .lk-rep { margin-top: 14px; }
    .lk-rep__trig {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--lk-line-2);
        border-radius: 4px;
        font-size: 12px; color: var(--lk-text-soft);
        cursor: pointer;
    }
    .lk-rep__trig:hover { color: var(--lk-text); }
    .lk-rep__form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .lk-rep__form select, .lk-rep__form textarea, .lk-rep__msg {
        background: var(--lk-bg-alt);
        border: 1px solid var(--lk-line-2);
        border-radius: 4px;
        padding: 8px 12px;
        color: var(--lk-text);
        font-size: 13px;
        flex: 1 1 200px;
    }
    .report-submit-btn { padding: 8px 18px; }

    /* Episode list */
    .lk-eps { max-width: 1240px; margin: 28px auto 0; padding: 0 18px; }
    .lk-eps__shell { background: var(--lk-surface); border: 1px solid var(--lk-line-2); border-radius: var(--lk-radius-lg); padding: 22px; }
    .lk-eps__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .lk-eps__h { margin: 0; font: 800 18px/1 var(--lk-font-d); }
    .lk-eps__tools { display: flex; gap: 8px; flex-wrap: wrap; }
    .lk-eps__season {
        appearance: none;
        padding: 8px 30px 8px 12px;
        background: var(--lk-bg-alt);
        border: 1px solid var(--lk-line-2);
        border-radius: var(--lk-radius);
        color: var(--lk-text);
        font-size: 13px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238b97b3' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 12px center;
        cursor: pointer;
    }
    .lk-eps__find {
        display: flex; align-items: center; gap: 6px;
        padding: 6px 12px;
        background: var(--lk-bg-alt);
        border: 1px solid var(--lk-line-2);
        border-radius: var(--lk-radius);
    }
    .lk-eps__find input {
        background: transparent; border: 0; outline: 0;
        color: var(--lk-text); font-size: 13px;
    }
    .lk-eps__list { display: flex; flex-direction: column; gap: 8px; }
    .lk-eps__lead { margin: 0 0 8px; color: var(--lk-text-mute); font-size: 12px; }
    .lk-eps__none { padding: 24px; text-align: center; color: var(--lk-text-mute); font-size: 13px; }

    .lk-ep {
        display: grid; grid-template-columns: 60px 1fr auto; gap: 12px;
        align-items: center;
        padding: 12px 14px;
        background: var(--lk-bg-alt);
        border: 1px solid var(--lk-line);
        border-radius: var(--lk-radius);
        text-align: left;
        width: 100%; cursor: pointer;
        transition: background .15s ease, border-color .15s ease, transform .15s ease;
    }
    .lk-ep:hover { background: var(--lk-card); border-color: var(--lk-brand); transform: translateX(2px); }
    .lk-ep--soon { opacity: .55; cursor: not-allowed; }
    .lk-ep--soon:hover { transform: none; background: var(--lk-bg-alt); border-color: var(--lk-line); }
    .lk-ep__num { font: 800 14px/1 var(--lk-font-d); color: var(--lk-brand-2); letter-spacing: .04em; }
    .lk-ep__title { font-size: 14px; font-weight: 600; color: var(--lk-text); }
    .lk-ep__when { font-size: 11.5px; color: var(--lk-text-mute); }
    .lk-ep__go { color: var(--lk-text-mute); display: flex; }

    /* Trailer modal */
    .lk-trailer {
        border: 0;
        padding: 0;
        background: transparent;
        max-width: 90vw;
        max-height: 90vh;
        margin: auto;
    }
    .lk-trailer::backdrop { background: rgba(0, 0, 0, 0.85); }
    .lk-trailer__card { position: relative; width: min(960px, 90vw); }
    .lk-trailer__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--lk-radius-lg); overflow: hidden; }
    .lk-trailer__frame iframe { width: 100%; height: 100%; border: 0; }
    .lk-trailer__x {
        position: absolute; top: -42px; right: 0;
        width: 36px; height: 36px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        color: #fff;
        font-size: 22px; line-height: 0;
        display: flex; align-items: center; justify-content: center;
        z-index: 10;
    }
    .lk-trailer__x:hover { background: var(--lk-brand); }
}

/* ============== 10. Index landing sections =============================== */

@layer index {
    .lk-idx-hero {
        max-width: 1100px; margin: 32px auto 0; padding: 0 18px;
        text-align: center;
    }
    .lk-idx-hero__inner { padding: 30px 0; }
    .lk-idx-hero__hd {
        margin: 0 0 12px;
        font: 800 clamp(26px, 4vw, 38px)/1.18 var(--lk-font-d);
    }
    .lk-idx-hero__sub { margin: 0 0 22px; color: var(--lk-text-soft); font-size: 15px; max-width: 640px; margin-left: auto; margin-right: auto; }
    .lk-idx-hero__find {
        display: flex; align-items: center; gap: 8px;
        max-width: 580px; margin: 0 auto 20px;
        padding: 6px 8px 6px 16px;
        background: var(--lk-surface); border: 1px solid var(--lk-line-2);
        border-radius: 30px;
    }
    .lk-idx-hero__find-icon { color: var(--lk-text-mute); display: flex; }
    .lk-idx-hero__find input {
        flex: 1; padding: 10px 0;
        background: transparent; border: 0; outline: 0;
        color: var(--lk-text); font-size: 14px;
    }
    .lk-idx-hero__go {
        padding: 10px 24px;
        background: var(--lk-brand); color: #fff;
        border-radius: 22px;
        font: 700 12px/1 var(--lk-font-d);
        letter-spacing: .06em; text-transform: uppercase;
    }
    .lk-idx-hero__go:hover { background: var(--lk-brand-2); }
    .lk-idx-hero__quick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
    .lk-idx-hero__chip {
        padding: 6px 14px; border-radius: 18px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--lk-line-2);
        font-size: 12px; color: var(--lk-text-soft);
    }
    .lk-idx-hero__chip:hover { color: var(--lk-text); border-color: var(--lk-brand); }

    .lk-idx-stats { max-width: 1100px; margin: 28px auto 0; padding: 0 18px; }
    .lk-idx-stats__inner {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
        background: var(--lk-surface); border: 1px solid var(--lk-line-2);
        border-radius: var(--lk-radius-lg);
        padding: 22px;
    }
    @media (max-width: 600px) { .lk-idx-stats__inner { grid-template-columns: repeat(2, 1fr); } }
    .lk-idx-stats__cell { text-align: center; }
    .lk-idx-stats__num { display: block; font: 800 28px/1 var(--lk-font-d); color: var(--lk-brand-2); }
    .lk-idx-stats__lbl { display: block; margin-top: 4px; color: var(--lk-text-mute); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }

    .lk-idx-hot, .lk-idx-hub, .lk-idx-why, .lk-idx-faq, .lk-idx-prose { max-width: 1100px; margin: 32px auto 0; padding: 0 18px; }

    .lk-idx-hot__hd, .lk-idx-hub__hd, .lk-idx-why__hd, .lk-idx-faq__hd, .lk-idx-prose__hd {
        margin: 0 0 16px;
        font: 800 22px/1.2 var(--lk-font-d);
    }
    .lk-idx-hub__sub { margin: -10px 0 16px; color: var(--lk-text-mute); font-size: 13px; }

    .lk-idx-hot__list {
        list-style: none; padding: 0; margin: 0;
        display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 18px;
    }
    @media (max-width: 720px) { .lk-idx-hot__list { grid-template-columns: 1fr; } }
    .lk-idx-hot__row {
        display: grid; grid-template-columns: 28px 1fr auto; gap: 10px;
        align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--lk-line);
    }
    .lk-idx-hot__rank { font: 800 14px/1 var(--lk-font-d); color: var(--lk-brand); }
    .lk-idx-hot__lnk { font-weight: 600; font-size: 14px; color: var(--lk-text); }
    .lk-idx-hot__lnk:hover { color: var(--lk-brand-2); }
    .lk-idx-hot__meta { font-size: 11.5px; color: var(--lk-text-mute); }

    .lk-idx-hub__grid {
        display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
    }
    @media (max-width: 880px) { .lk-idx-hub__grid { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 520px) { .lk-idx-hub__grid { grid-template-columns: repeat(3, 1fr); } }
    .lk-idx-hub__cell {
        display: flex; flex-direction: column; gap: 2px;
        padding: 14px 12px;
        background: var(--lk-surface);
        border: 1px solid var(--lk-line-2);
        border-radius: var(--lk-radius);
        text-align: center;
    }
    .lk-idx-hub__cell:hover { border-color: var(--lk-brand); transform: translateY(-2px); }
    .lk-idx-hub__name { font-weight: 700; font-size: 13px; }
    .lk-idx-hub__cnt { color: var(--lk-text-mute); font-size: 11px; }

    .lk-idx-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    @media (max-width: 880px) { .lk-idx-why__grid { grid-template-columns: repeat(2, 1fr); } }
    .lk-idx-why__card {
        padding: 18px; background: var(--lk-surface); border: 1px solid var(--lk-line-2); border-radius: var(--lk-radius-lg);
        display: flex; flex-direction: column; gap: 8px;
    }
    .lk-idx-why__ico {
        width: 38px; height: 38px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(237, 44, 69, 0.16); color: var(--lk-brand-2);
    }
    .lk-idx-why__t { margin: 4px 0 0; font: 700 15px/1.3 var(--lk-font-d); }
    .lk-idx-why__p { margin: 0; color: var(--lk-text-soft); font-size: 13px; }

    .lk-idx-faq__list { display: flex; flex-direction: column; gap: 8px; }
    .lk-idx-faq__row {
        background: var(--lk-surface);
        border: 1px solid var(--lk-line-2);
        border-radius: var(--lk-radius);
        padding: 0;
    }
    .lk-idx-faq__q {
        padding: 14px 18px;
        font: 700 14.5px/1.4 var(--lk-font-d);
        position: relative;
    }
    .lk-idx-faq__q::after {
        content: '+';
        position: absolute; right: 18px; top: 14px;
        font-size: 18px; color: var(--lk-text-mute);
        transition: transform .2s ease;
    }
    .lk-idx-faq__row[open] .lk-idx-faq__q::after { content: '−'; }
    .lk-idx-faq__a {
        margin: 0; padding: 0 18px 14px;
        color: var(--lk-text-soft); font-size: 13.5px; line-height: 1.7;
    }

    .lk-idx-prose__inner p { margin: 0 0 12px; color: var(--lk-text-soft); font-size: 13.5px; line-height: 1.75; }
    .lk-idx-prose__inner a { color: var(--lk-brand-2); }
}

/* ============== 11. Notification + share + popup + ad ==================== */

@layer chrome {
    .lk-notify {
        background: linear-gradient(90deg, var(--lk-brand) 0%, var(--lk-brand-2) 100%);
        color: #fff;
        font-size: 13px;
    }
    .lk-notify__inner {
        max-width: 1240px; margin: 0 auto; padding: 8px 18px;
        display: flex; align-items: center; gap: 12px;
    }
    .lk-notify__msg { flex: 1; }
    .lk-notify__more, .lk-notify__cta {
        padding: 4px 12px;
        background: rgba(255, 255, 255, 0.18);
        border-radius: 4px;
        font: 700 11px/1 var(--lk-font-d);
        text-transform: uppercase; letter-spacing: .04em;
        color: #fff;
    }
    .lk-notify__more:hover, .lk-notify__cta:hover { background: rgba(255, 255, 255, 0.3); }
    .lk-notify__x { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 18px; line-height: 0; display: flex; align-items: center; justify-content: center; }
    .lk-notify__dlg { border: 0; max-width: 480px; padding: 22px; background: var(--lk-surface); color: var(--lk-text); border-radius: var(--lk-radius-lg); }
    .lk-notify__dlg::backdrop { background: rgba(0,0,0,.7); }
    .lk-notify__dlg-x { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; border-radius: 50%; color: var(--lk-text); font-size: 18px; }
    .lk-notify__dlg-body { font-size: 14px; line-height: 1.6; }

    .lk-ad { max-width: 1240px; margin: 18px auto 0; padding: 0 18px; }
    .lk-ad > * { display: block; max-width: 100%; }

    .lk-share { max-width: 1240px; margin: 28px auto 0; padding: 0 18px; }
    .lk-share__inner {
        background: var(--lk-surface); border: 1px solid var(--lk-line-2);
        border-radius: var(--lk-radius-lg);
        padding: 18px 22px;
        display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
    }
    .lk-share__lbl { margin: 0; font-weight: 600; font-size: 14px; flex: 1 1 200px; }
    .lk-share__row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
    .lk-share__lnk {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 12px; border-radius: 4px;
        background: var(--lk-bg-alt);
        border: 1px solid var(--lk-line-2);
        color: var(--lk-text-soft);
        font: 600 12px/1 var(--lk-font-d);
        letter-spacing: .04em;
    }
    .lk-share__lnk:hover { color: var(--lk-text); border-color: var(--lk-brand); }
    .lk-share__lnk--x:hover    { background: #1d1d1d; }
    .lk-share__lnk--fb:hover   { background: #1877f2; color: #fff; }
    .lk-share__lnk--wa:hover   { background: #25d366; color: #061a10; }
    .lk-share__lnk--tg:hover   { background: #229ed9; color: #fff; }
    .lk-share__lnk--rd:hover   { background: #ff4500; color: #fff; }
    .lk-share__lnk--copy:hover { background: var(--lk-brand); color: #fff; }

    .lk-pop {
        position: fixed; right: 18px; bottom: 18px; z-index: 90;
        width: min(320px, calc(100vw - 36px));
        background: var(--lk-surface); border: 1px solid var(--lk-line-2);
        border-radius: var(--lk-radius-lg);
        padding: 16px 18px;
        box-shadow: var(--lk-shadow-lg);
        transform: translateY(20px); opacity: 0;
        transition: transform .35s ease, opacity .35s ease;
    }
    .lk-pop.is-armed { transform: translateY(0); opacity: 1; }
    .lk-pop__x { position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; color: var(--lk-text-mute); font-size: 18px; line-height: 0; }
    .lk-pop__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .lk-pop__icon { color: #229ed9; display: flex; }
    .lk-pop__name { font: 700 13px/1.2 var(--lk-font-d); }
    .lk-pop__copy { margin: 0 0 12px; color: var(--lk-text-soft); font-size: 12.5px; line-height: 1.5; }
    .lk-pop__btn {
        display: inline-flex; padding: 8px 18px;
        background: #229ed9; color: #fff;
        border-radius: 4px;
        font: 700 11.5px/1 var(--lk-font-d);
        letter-spacing: .06em; text-transform: uppercase;
    }
    .lk-pop__btn:hover { background: #1f8fc4; }

    .lk-itstl {
        position: absolute; inset: 0; z-index: 5;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 8px;
        background: rgba(0, 0, 0, 0.78);
        color: #fff;
        font: 700 13px/1 var(--lk-font-d);
    }
    .lk-itstl__msg { letter-spacing: .04em; text-transform: uppercase; }
}

/* ============== 12. Utilities + reduced motion =========================== */

@layer util {
    /* SR-only fallback */
    .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0s !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0s !important;
        }
        .lk-stream__spin { animation: lk-spin 1.4s linear infinite; }
    }

    @media (forced-colors: active) {
        .lk-tile__art, .lk-pl__shell, .lk-stream__frame { border: 1px solid CanvasText; }
        .lk-btn--brand, .lk-bar__cta-link, .lk-filter__go, .lk-pages__lnk.is-current { border: 1px solid Highlight; }
    }
}