/* ============================================================
   1flex — flexui.css
   A dark, cinematic streaming skin. Prefix: flx-
   Layers: reset > tokens > base > layout > parts > pages
   ============================================================ */
@layer reset, tokens, base, layout, parts, pages, util;

/* ---------- reset ---------- */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { margin: 0; }
    h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
    ol, ul { padding: 0; list-style: none; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; height: auto; }
    button, input, select, textarea { font: inherit; color: inherit; }
    button { cursor: pointer; background: none; border: 0; }
    svg { display: block; }
    dialog { padding: 0; border: 0; color: inherit; }
}

/* ---------- tokens ---------- */
@layer tokens {
    :root {
        --flx-ink:      #18181b;
        --flx-ink-2:    #1f1f23;
        --flx-panel:    #232328;
        --flx-panel-2:  #2a2a30;
        --flx-line:     rgba(255, 255, 255, .09);
        --flx-line-2:   rgba(255, 255, 255, .16);
        --flx-text:     #f4f4f6;
        --flx-muted:    #a9a9b6;
        --flx-faint:    #74747f;

        --flx-red:      #e21221;
        --flx-red-deep: #b30d19;
        --flx-red-glow: rgba(226, 18, 33, .45);
        --flx-gold:     #f5c518;

        --flx-shell:    1320px;
        --flx-gutter:   clamp(16px, 4vw, 48px);
        --flx-r-sm:     6px;
        --flx-r:        10px;
        --flx-r-lg:     16px;

        --flx-ease:     cubic-bezier(.22, .61, .36, 1);
        --flx-shadow:   0 18px 40px -18px rgba(0, 0, 0, .85);

        --flx-disp: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
        --flx-body: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
    }
}

/* ---------- base ---------- */
@layer base {
    body {
        background: var(--flx-ink);
        color: var(--flx-text);
        font-family: var(--flx-body);
        font-size: 15px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }
    body.flx-drawer-open { overflow: hidden; }

    h1, h2, h3, .flx-disp {
        font-family: var(--flx-disp);
        font-weight: 700;
        letter-spacing: .01em;
        line-height: 1.08;
    }

    a { transition: color .18s var(--flx-ease); }
    a:hover { color: #fff; }

    :focus-visible {
        outline: 2px solid var(--flx-red);
        outline-offset: 2px;
        border-radius: 3px;
    }

    .flx-skip {
        position: fixed;
        top: -60px;
        left: 12px;
        z-index: 999;
        background: var(--flx-red);
        color: #fff;
        padding: 10px 16px;
        border-radius: var(--flx-r-sm);
        font-weight: 700;
        transition: top .2s var(--flx-ease);
    }
    .flx-skip:focus { top: 12px; }

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

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: .001ms !important;
            transition-duration: .001ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* ---------- layout primitives ---------- */
@layer layout {
    .flx-shell {
        width: 100%;
        max-width: var(--flx-shell);
        margin-inline: auto;
        padding-inline: var(--flx-gutter);
    }
    .flx-hide { display: none !important; }

    /* Full-bleed row wrapper: first card aligns to the centered shell's
       left content edge, the row then runs out to the page's right edge. */
    .flx-rail {
        --flx-rail-pad: max(var(--flx-gutter), calc((100vw - var(--flx-shell)) / 2 + var(--flx-gutter)));
        padding-left: var(--flx-rail-pad);
        padding-right: var(--flx-gutter);
    }

    /* Home uses the full viewport width with even gutters on both sides,
       so headings + rows align to the left edge (no dead left margin). */
    .flx-page-home .flx-shell {
        max-width: none;
    }
    .flx-page-home .flx-rail {
        --flx-rail-pad: var(--flx-gutter);
    }

    .flx-block { margin-block: clamp(28px, 4vw, 46px); }
    .flx-block__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px;
    }
    .flx-block__title {
        font-size: clamp(20px, 2.6vw, 28px);
        text-transform: uppercase;
    }
    .flx-block__all {
        font-family: var(--flx-body);
        font-size: 13px;
        font-weight: 700;
        color: var(--flx-muted);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }
    .flx-block__all:hover { color: var(--flx-red); }

    .flx-h1 {
        font-size: clamp(22px, 3vw, 32px);
        text-transform: uppercase;
        margin: 26px 0 4px;
    }
    .flx-h1__mark { color: var(--flx-red); }

    .flx-adslot { margin: 18px auto; text-align: center; }
}

/* ============================================================
   parts — header / footer / notice / buttons / chips
   ============================================================ */
@layer parts {

    /* ---- notification ---- */
    .flx-notice {
        background: linear-gradient(90deg, var(--flx-red-deep), var(--flx-red));
        color: #fff;
        font-size: 13.5px;
    }
    .flx-notice__row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-block: 9px;
    }
    .flx-notice__dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
        animation: flx-ping 1.8s infinite;
        flex: none;
    }
    @keyframes flx-ping {
        0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
        70%  { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    }
    .flx-notice__text { flex: 1; min-width: 0; font-weight: 600; }
    .flx-notice__cta {
        font-weight: 800;
        text-decoration: underline;
        white-space: nowrap;
        color: #fff;
    }
    .flx-notice__x {
        display: inline-flex;
        color: #fff;
        opacity: .85;
    }
    .flx-notice__x svg { width: 16px; height: 16px; }
    .flx-notice__x:hover { opacity: 1; }

    .flx-notice-modal {
        max-width: 460px;
        width: calc(100% - 32px);
        background: var(--flx-panel);
        color: var(--flx-text);
        border: 1px solid var(--flx-line);
        border-radius: var(--flx-r-lg);
        box-shadow: var(--flx-shadow);
    }
    .flx-notice-modal::backdrop { background: rgba(0, 0, 0, .7); }
    .flx-notice-modal__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        border-bottom: 1px solid var(--flx-line);
    }
    .flx-notice-modal__head h2 { font-size: 20px; text-transform: uppercase; }
    .flx-notice-modal__head button { color: var(--flx-muted); }
    .flx-notice-modal__body { padding: 18px 20px; color: var(--flx-muted); }
    .flx-notice-modal__link {
        display: inline-block;
        margin: 0 20px 20px;
        color: var(--flx-red);
        font-weight: 800;
    }

    /* ---- topbar ---- */
    .flx-topbar {
        position: sticky;
        top: 0;
        z-index: 60;
        background: linear-gradient(180deg, rgba(24, 24, 27, .96) 0%, rgba(24, 24, 27, .82) 70%, rgba(24, 24, 27, 0) 100%);
        transition: background .25s var(--flx-ease), transform .3s var(--flx-ease);
    }
    .flx-topbar.flx-solid {
        background: rgba(24, 24, 27, .97);
        border-bottom: 1px solid var(--flx-line);
        backdrop-filter: blur(8px);
    }
    .flx-topbar.flx-tuck { transform: translateY(-100%); }

    .flx-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        max-width: var(--flx-shell);
        margin-inline: auto;
        padding: 12px clamp(16px, 4vw, 48px);
    }
    .flx-bar__left { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
    .flx-bar__right { display: flex; align-items: center; gap: 10px; }

    .flx-brand__img { height: 34px; width: auto; object-fit: contain; }

    .flx-nav { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); }
    .flx-nav__link {
        font-size: 14px;
        font-weight: 700;
        color: var(--flx-muted);
        letter-spacing: .02em;
        position: relative;
        padding: 4px 0;
    }
    .flx-nav__link::after {
        content: "";
        position: absolute;
        left: 0; bottom: -2px;
        width: 0; height: 2px;
        background: var(--flx-red);
        transition: width .22s var(--flx-ease);
    }
    .flx-nav__link:hover { color: #fff; }
    .flx-nav__link:hover::after { width: 100%; }

    .flx-find {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, .08);
        border: 1px solid var(--flx-line);
        border-radius: 999px;
        padding: 2px 4px 2px 2px;
        transition: border-color .2s var(--flx-ease), background .2s var(--flx-ease);
    }
    .flx-find:focus-within {
        border-color: var(--flx-red);
        background: rgba(255, 255, 255, .12);
    }
    .flx-find__go {
        display: inline-flex;
        padding: 7px;
        color: var(--flx-muted);
    }
    .flx-find__go svg { width: 18px; height: 18px; }
    .flx-find__field {
        width: 0;
        opacity: 0;
        border: 0;
        background: none;
        outline: none;
        padding: 0;
        font-size: 13.5px;
        transition: width .3s var(--flx-ease), opacity .3s var(--flx-ease), padding .3s var(--flx-ease);
    }
    .flx-find:focus-within .flx-find__field,
    .flx-find:hover .flx-find__field {
        width: 200px;
        opacity: 1;
        padding-right: 10px;
    }
    .flx-find__field::placeholder { color: var(--flx-faint); }

    .flx-iconlink {
        display: none;
        align-items: center;
        justify-content: center;
        width: 38px; height: 38px;
        border-radius: 50%;
        color: var(--flx-text);
    }
    .flx-iconlink svg { width: 19px; height: 19px; }
    .flx-iconlink--ghost { color: var(--flx-muted); }
    .flx-iconlink:hover { background: rgba(255, 255, 255, .1); color: #fff; }

    .flx-burger {
        display: none;
        flex-direction: column;
        gap: 4px;
        padding: 6px;
    }
    .flx-burger span {
        width: 22px; height: 2px;
        background: var(--flx-text);
        border-radius: 2px;
        transition: transform .25s var(--flx-ease), opacity .2s var(--flx-ease);
    }

    /* ---- drawer ---- */
    .flx-scrim {
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(0, 0, 0, .6);
        opacity: 0;
        animation: flx-fade .25s var(--flx-ease) forwards;
    }
    @keyframes flx-fade { to { opacity: 1; } }

    .flx-drawer {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        z-index: 80;
        width: min(82vw, 320px);
        background: var(--flx-ink-2);
        border-right: 1px solid var(--flx-line);
        transform: translateX(-100%);
        transition: transform .3s var(--flx-ease);
        display: flex;
        flex-direction: column;
        padding: 16px;
        overflow-y: auto;
    }
    .flx-drawer.flx-open { transform: none; }
    .flx-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .flx-drawer__brand {
        font-family: var(--flx-disp);
        font-size: 20px;
        text-transform: uppercase;
        color: var(--flx-red);
    }
    .flx-drawer__shut { color: var(--flx-muted); }
    .flx-drawer__shut svg { width: 22px; height: 22px; }
    .flx-drawer__find {
        display: flex;
        background: var(--flx-panel);
        border: 1px solid var(--flx-line);
        border-radius: var(--flx-r);
        overflow: hidden;
        margin-bottom: 16px;
    }
    .flx-drawer__find input {
        flex: 1;
        background: none;
        border: 0;
        padding: 11px 12px;
        outline: none;
        font-size: 14px;
    }
    .flx-drawer__find button {
        padding-inline: 12px;
        color: var(--flx-muted);
    }
    .flx-drawer__find svg { width: 18px; height: 18px; }
    .flx-drawer__nav { display: flex; flex-direction: column; }
    .flx-drawer__nav a {
        padding: 13px 6px;
        font-weight: 700;
        border-bottom: 1px solid var(--flx-line);
        color: var(--flx-text);
    }
    .flx-drawer__nav a:hover { color: var(--flx-red); }

    /* ---- buttons ---- */
    .flx-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 22px;
        border-radius: var(--flx-r-sm);
        font-weight: 800;
        font-size: 14px;
        letter-spacing: .01em;
        transition: transform .16s var(--flx-ease), background .2s var(--flx-ease), box-shadow .2s var(--flx-ease);
        white-space: nowrap;
    }
    .flx-btn svg { width: 18px; height: 18px; }
    .flx-btn--play {
        background: var(--flx-red);
        color: #fff;
        box-shadow: 0 10px 22px -10px var(--flx-red-glow);
    }
    .flx-btn--play:hover {
        background: var(--flx-red-deep);
        color: #fff;
        transform: translateY(-1px);
    }
    .flx-btn--ghost {
        background: rgba(255, 255, 255, .12);
        color: #fff;
        border: 1px solid var(--flx-line-2);
    }
    .flx-btn--ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }

    /* ---- chips / genres / facts ---- */
    .flx-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .03em;
    }
    .flx-chip--kind { background: var(--flx-red); color: #fff; }
    .flx-chip--score { background: rgba(245, 197, 24, .16); color: var(--flx-gold); }
    .flx-chip--status { background: rgba(255, 255, 255, .12); color: var(--flx-text); }

    .flx-genre {
        display: inline-block;
        padding: 5px 12px;
        border: 1px solid var(--flx-line-2);
        border-radius: 999px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--flx-muted);
        transition: border-color .18s var(--flx-ease), color .18s var(--flx-ease);
    }
    .flx-genre:hover { border-color: var(--flx-red); color: #fff; }

    .flx-fact {
        font-size: 13px;
        font-weight: 600;
        color: var(--flx-muted);
    }
    .flx-fact--up { text-transform: uppercase; }
    a.flx-fact:hover { color: var(--flx-red); }

    /* ---- footer ---- */
    .flx-footer {
        margin-top: 56px;
        background: var(--flx-ink-2);
        border-top: 1px solid var(--flx-line);
        padding-top: 40px;
    }
    .flx-footer__grid {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr;
        gap: 32px;
        padding-bottom: 30px;
    }
    .flx-footer__brand img { height: 34px; width: auto; margin-bottom: 14px; }
    .flx-footer__pitch { color: var(--flx-muted); font-size: 14px; max-width: 38ch; }
    .flx-footer__h {
        font-family: var(--flx-disp);
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 12px;
        color: var(--flx-text);
    }
    .flx-footer__col { display: flex; flex-direction: column; gap: 9px; }
    .flx-footer__col a { color: var(--flx-muted); font-size: 14px; }
    .flx-footer__col a:hover { color: var(--flx-red); }
    .flx-footer__base {
        border-top: 1px solid var(--flx-line);
        padding-block: 22px;
    }
    .flx-footer__legal { color: var(--flx-faint); font-size: 12.5px; max-width: 80ch; }
    .flx-footer__copy { color: var(--flx-faint); font-size: 12.5px; margin-top: 8px; }

    /* ---- breadcrumbs ---- */
    .flx-trail { padding-block: 12px; }
    .flx-trail__row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; }
    .flx-trail__sep { width: 14px; height: 14px; color: var(--flx-faint); flex: none; }
    .flx-trail__link { color: var(--flx-muted); font-weight: 600; }
    .flx-trail__link:hover { color: var(--flx-red); }
    .flx-trail__here { color: var(--flx-text); font-weight: 700; }

    /* ---- telegram popup ---- */
    .flx-tg {
        position: fixed;
        right: 18px; bottom: 18px;
        z-index: 90;
        width: 300px;
        max-width: calc(100vw - 36px);
        background: var(--flx-panel);
        border: 1px solid var(--flx-line-2);
        border-radius: var(--flx-r-lg);
        box-shadow: var(--flx-shadow);
        padding: 18px;
        transform: translateY(140%);
        opacity: 0;
        transition: transform .4s var(--flx-ease), opacity .4s var(--flx-ease);
    }
    .flx-tg.flx-live { transform: none; opacity: 1; }
    .flx-tg__x { position: absolute; top: 8px; right: 10px; color: var(--flx-faint); }
    .flx-tg__x svg { width: 16px; height: 16px; }
    .flx-tg__icon {
        width: 42px; height: 42px;
        border-radius: 12px;
        background: rgba(0, 136, 204, .18);
        color: #2aabee;
        display: grid;
        place-items: center;
        margin-bottom: 10px;
    }
    .flx-tg__icon svg { width: 24px; height: 24px; }
    .flx-tg__title { font-weight: 800; font-size: 16px; }
    .flx-tg__text { color: var(--flx-muted); font-size: 13px; margin: 4px 0 12px; }
    .flx-tg__join {
        display: block;
        text-align: center;
        background: #229ed9;
        color: #fff;
        font-weight: 800;
        padding: 10px;
        border-radius: var(--flx-r-sm);
    }
    .flx-tg__join:hover { background: #1c87ba; color: #fff; }

    /* ---- share ---- */
    .flx-share {
        max-width: 720px;
        margin: 30px auto;
        padding: 18px;
        text-align: center;
        background: var(--flx-panel);
        border: 1px solid var(--flx-line);
        border-radius: var(--flx-r-lg);
    }
    .flx-share__title { font-weight: 800; font-size: 16px; }
    .flx-share__desc { color: var(--flx-muted); font-size: 13px; margin-top: 2px; }
    .flx-share__btns {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }

    /* ---- player ad overlay ---- */
    .flx-player-ad {
        position: absolute;
        inset: 0;
        z-index: 8;
        display: block;
    }
}

/* ============================================================
   pages — home stage / rows / tiles / rank
   ============================================================ */
@layer pages {

    /* ---- hero stage (home) ---- */
    .flx-stage {
        position: relative;
        margin-top: -78px;
        min-height: clamp(440px, 64vh, 660px);
        display: grid;
    }
    .flx-stage__slide {
        grid-area: 1 / 1;
        position: relative;
        opacity: 0;
        visibility: hidden;
        transition: opacity .8s var(--flx-ease);
        display: flex;
        align-items: flex-end;
    }
    .flx-stage__slide.flx-live { opacity: 1; visibility: visible; }
    .flx-stage__art { position: absolute; inset: 0; z-index: 0; }
    .flx-stage__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
    .flx-stage__fade {
        position: absolute; inset: 0;
        background:
            linear-gradient(90deg, rgba(24, 24, 27,.94) 0%, rgba(24, 24, 27,.55) 42%, rgba(24, 24, 27,.12) 70%, transparent 100%),
            linear-gradient(0deg, var(--flx-ink) 2%, rgba(24, 24, 27,.2) 40%, transparent 70%);
    }
    .flx-stage__inner { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(34px, 6vw, 72px); }
    .flx-stage__title {
        font-size: clamp(34px, 6vw, 70px);
        text-transform: uppercase;
        max-width: 16ch;
        text-shadow: 0 4px 24px rgba(0, 0, 0, .6);
    }
    .flx-stage__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        margin-top: 14px;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--flx-muted);
    }
    .flx-stage__kind {
        background: var(--flx-red);
        color: #fff;
        padding: 3px 9px;
        border-radius: 4px;
        font-size: 12px;
        text-transform: uppercase;
    }
    .flx-stage__score { color: var(--flx-gold); }
    .flx-stage__g { position: relative; padding-left: 14px; }
    .flx-stage__g::before { content: "•"; position: absolute; left: 3px; color: var(--flx-faint); }
    .flx-stage__plot {
        margin-top: 14px;
        max-width: 56ch;
        color: #d4d4dc;
        font-size: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .flx-stage__actions { display: flex; gap: 12px; margin-top: 22px; }
    .flx-stage__dots {
        position: absolute;
        right: clamp(16px, 4vw, 48px);
        bottom: 22px;
        z-index: 2;
        display: flex;
        gap: 8px;
    }
    .flx-stage__dot {
        width: 9px; height: 9px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .35);
        transition: width .25s var(--flx-ease), background .25s var(--flx-ease);
    }
    .flx-stage__dot.flx-live { width: 26px; border-radius: 6px; background: var(--flx-red); }

    /* ---- content rows ---- */
    .flx-row { position: relative; }
    .flx-row__track {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-block: 4px 8px;
        scroll-padding-inline: 4px;
    }
    .flx-row__track::-webkit-scrollbar { display: none; }
    .flx-row__nav {
        position: absolute;
        top: calc(50% - 16px);
        transform: translateY(-50%);
        z-index: 3;
        width: 40px; height: 64px;
        display: grid;
        place-items: center;
        background: rgba(24, 24, 27, .78);
        border: 1px solid var(--flx-line);
        color: #fff;
        border-radius: var(--flx-r-sm);
        opacity: 0;
        transition: opacity .2s var(--flx-ease), background .2s var(--flx-ease);
    }
    .flx-row__nav svg { width: 22px; height: 22px; }
    .flx-row__nav--prev { left: -8px; }
    .flx-row__nav--next { right: -8px; }
    .flx-row:hover .flx-row__nav,
    .flx-rank:hover .flx-row__nav { opacity: 1; }
    .flx-row__nav:hover { background: var(--flx-red); }
    .flx-row__nav:disabled { opacity: 0 !important; pointer-events: none; }

    /* ---- tile (landscape) ---- */
    .flx-tile { flex: 0 0 auto; width: clamp(220px, 24vw, 290px); }
    .flx-tile__hit { display: block; }
    .flx-tile__art {
        position: relative;
        aspect-ratio: 16 / 9;
        border-radius: var(--flx-r);
        overflow: hidden;
        background: var(--flx-panel-2);
        border: 1px solid var(--flx-line);
        transition: transform .22s var(--flx-ease), box-shadow .22s var(--flx-ease), border-color .22s var(--flx-ease);
    }
    .flx-tile__art img { width: 100%; height: 100%; object-fit: cover; }
    .flx-tile__hit:hover .flx-tile__art {
        transform: translateY(-4px);
        border-color: var(--flx-line-2);
        box-shadow: var(--flx-shadow);
    }
    .flx-tile__type {
        position: absolute;
        top: 8px; left: 8px;
        background: rgba(24, 24, 27, .82);
        color: #fff;
        font-size: 10.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: 3px 7px;
        border-radius: 4px;
    }
    .flx-tile__type--tv { background: var(--flx-red); }
    .flx-tile__tag {
        position: absolute;
        bottom: 8px; left: 8px;
        background: var(--flx-red);
        color: #fff;
        font-size: 10.5px;
        font-weight: 800;
        padding: 3px 8px;
        border-radius: 4px;
    }
    .flx-tile__veil {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        background: linear-gradient(0deg, rgba(24, 24, 27, .5), rgba(24, 24, 27, .12));
        opacity: 0;
        transition: opacity .2s var(--flx-ease);
    }
    .flx-tile__hit:hover .flx-tile__veil { opacity: 1; }
    .flx-tile__play {
        width: 50px; height: 50px;
        border-radius: 50%;
        background: var(--flx-red);
        display: grid;
        place-items: center;
        box-shadow: 0 8px 20px -6px var(--flx-red-glow);
    }
    .flx-tile__play svg { width: 22px; height: 22px; color: #fff; margin-left: 2px; }
    .flx-tile__meta { padding: 9px 2px 2px; }
    .flx-tile__name {
        font-family: var(--flx-body);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .flx-tile__sub {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 3px;
        font-size: 12px;
        color: var(--flx-muted);
    }
    .flx-tile__star { color: var(--flx-gold); font-weight: 700; }
    .flx-tile__se { color: var(--flx-faint); }

    /* ---- top 10 rank rail ---- */
    .flx-rank { position: relative; }
    .flx-rank__track {
        display: flex;
        align-items: flex-end;
        gap: clamp(10px, 1.4vw, 18px);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        padding-block: 8px 14px;
    }
    .flx-rank__track::-webkit-scrollbar { display: none; }
    .flx-rank__item {
        flex: 0 0 auto;
        display: block;
        position: relative;
        padding-left: clamp(36px, 5vw, 66px);
    }
    .flx-rank__num {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 0;
        font-family: var(--flx-disp);
        font-weight: 800;
        font-size: clamp(96px, 13vw, 156px);
        line-height: 1;
        color: transparent;
        -webkit-text-stroke: 2px var(--flx-line-2);
        pointer-events: none;
        transition: -webkit-text-stroke-color .2s var(--flx-ease);
    }
    .flx-rank__item:hover .flx-rank__num { -webkit-text-stroke-color: var(--flx-red); }
    .flx-rank__art {
        display: block;
        position: relative;
        z-index: 1;
        width: clamp(110px, 14vw, 150px);
        aspect-ratio: 2 / 3;
        border-radius: var(--flx-r);
        overflow: hidden;
        border: 1px solid var(--flx-line);
        background: var(--flx-panel-2);
        transition: transform .2s var(--flx-ease);
    }
    .flx-rank__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .flx-rank__item:hover .flx-rank__art { transform: translateY(-4px); }
}

/* ============================================================
   pages — detail hero / player / servers / report / episodes
   ============================================================ */
@layer pages {

    /* ---- detail hero ---- */
    .flx-hero { position: relative; padding-top: 78px; }
    .flx-hero__back { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
    .flx-hero__back img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; }
    .flx-hero__shade {
        position: absolute; inset: 0;
        background:
            linear-gradient(90deg, rgba(24, 24, 27,.95) 0%, rgba(24, 24, 27,.72) 48%, rgba(24, 24, 27,.4) 100%),
            linear-gradient(0deg, var(--flx-ink) 1%, rgba(24, 24, 27,.35) 45%, rgba(24, 24, 27,.55) 100%);
    }
    .flx-hero__inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: clamp(20px, 4vw, 44px);
        padding-block: clamp(28px, 5vw, 56px);
        align-items: start;
    }
    .flx-hero__poster {
        border-radius: var(--flx-r-lg);
        overflow: hidden;
        box-shadow: var(--flx-shadow);
        border: 1px solid var(--flx-line-2);
        background: var(--flx-panel-2);
    }
    .flx-hero__poster img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
    .flx-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
    .flx-hero__title {
        font-size: clamp(30px, 5vw, 56px);
        text-transform: uppercase;
        text-shadow: 0 3px 18px rgba(0, 0, 0, .55);
    }
    .flx-hero__alt { color: var(--flx-muted); font-style: italic; margin-top: 6px; font-size: 15px; }
    .flx-hero__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
    .flx-hero__genres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .flx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
    .flx-hero__plot {
        margin-top: 20px;
        max-width: 66ch;
        color: #d4d4dc;
        font-size: 15px;
        line-height: 1.65;
    }
    .flx-readmore {
        display: inline-block;
        margin-top: 6px;
        color: var(--flx-red);
        font-weight: 800;
        font-size: 13px;
    }
    .flx-hero__grid {
        margin-top: 22px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 28px;
        max-width: 720px;
    }
    .flx-hero__gi--wide { grid-column: 1 / -1; }
    .flx-hero__gi dt {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--flx-faint);
        font-weight: 700;
        margin-bottom: 3px;
    }
    .flx-hero__gi dd { font-size: 14px; color: var(--flx-text); }
    .flx-hero__gi dd a { color: #cfcfd8; }
    .flx-hero__gi dd a:hover { color: var(--flx-red); }

    /* ---- player ---- */
    .flx-watch { margin-block: clamp(24px, 4vw, 40px); }
    .flx-watch__stage {
        position: relative;
        aspect-ratio: 16 / 9;
        max-height: 78vh;
        border-radius: var(--flx-r-lg);
        overflow: hidden;
        background: #000;
        border: 1px solid var(--flx-line);
    }
    .flx-watch__cover { position: absolute; inset: 0; cursor: pointer; }
    .flx-watch__cover img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); }
    .flx-watch__cue {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 84px; height: 84px;
        border-radius: 50%;
        background: var(--flx-red);
        display: grid;
        place-items: center;
        box-shadow: 0 0 0 0 var(--flx-red-glow);
        animation: flx-pulse 2.4s infinite;
        transition: transform .18s var(--flx-ease), background .2s var(--flx-ease);
    }
    .flx-watch__cue svg { width: 34px; height: 34px; color: #fff; margin-left: 4px; }
    .flx-watch__cue:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--flx-red-deep); animation: none; }
    @keyframes flx-pulse {
        0%   { box-shadow: 0 0 0 0 var(--flx-red-glow); }
        70%  { box-shadow: 0 0 0 24px rgba(226, 18, 33, 0); }
        100% { box-shadow: 0 0 0 0 rgba(226, 18, 33, 0); }
    }
    .flx-watch__frame { width: 100%; height: 100%; border: 0; }
    .flx-watch__loader {
        position: absolute;
        inset: 0;
        z-index: 4;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        background: rgba(24, 24, 27, .85);
        color: var(--flx-muted);
        font-size: 14px;
    }
    .flx-spin {
        width: 34px; height: 34px;
        border: 3px solid var(--flx-line-2);
        border-top-color: var(--flx-red);
        border-radius: 50%;
        animation: flx-spin .8s linear infinite;
    }
    @keyframes flx-spin { to { transform: rotate(360deg); } }
    .flx-watch__err { color: #ff8a92; font-weight: 700; }

    /* ---- servers ---- */
    .flx-servers {
        margin-top: 16px;
        background: var(--flx-panel);
        border: 1px solid var(--flx-line);
        border-radius: var(--flx-r);
        padding: 14px 16px;
    }
    .flx-servers__hint {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        color: var(--flx-muted);
        margin-bottom: 10px;
    }
    .flx-servers__hint svg { width: 15px; height: 15px; color: var(--flx-red); flex: none; }
    .flx-servers__row { display: flex; flex-wrap: wrap; gap: 8px; }
    .flx-srv {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 14px;
        border-radius: var(--flx-r-sm);
        background: var(--flx-panel-2);
        border: 1px solid var(--flx-line);
        color: var(--flx-muted);
        font-size: 13px;
        font-weight: 700;
        transition: all .18s var(--flx-ease);
    }
    .flx-srv__no {
        display: grid;
        place-items: center;
        width: 18px; height: 18px;
        border-radius: 4px;
        background: rgba(255, 255, 255, .1);
        font-size: 11px;
        color: var(--flx-faint);
    }
    .flx-srv:hover { color: #fff; border-color: var(--flx-line-2); transform: translateY(-1px); }
    .flx-srv--on {
        background: var(--flx-red);
        border-color: var(--flx-red);
        color: #fff;
        box-shadow: 0 8px 18px -8px var(--flx-red-glow);
    }
    .flx-srv--on .flx-srv__no { background: rgba(0, 0, 0, .25); color: #fff; }

    /* ---- episode nav (player) ---- */
    .flx-epnav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 12px;
        background: var(--flx-panel);
        border: 1px solid var(--flx-line);
        border-radius: var(--flx-r);
        padding: 10px 14px;
    }
    .flx-epnav__btn {
        padding: 8px 14px;
        border-radius: var(--flx-r-sm);
        background: var(--flx-panel-2);
        border: 1px solid var(--flx-line);
        color: var(--flx-text);
        font-weight: 700;
        font-size: 13px;
    }
    .flx-epnav__btn:hover:not(:disabled) { background: var(--flx-red); border-color: var(--flx-red); color: #fff; }
    .flx-epnav__btn:disabled { opacity: .4; cursor: default; }
    .flx-epnav__now { font-family: var(--flx-disp); font-size: 15px; color: var(--flx-muted); text-align: center; }

    /* ---- report ---- */
    .flx-report { margin-top: 12px; }
    .flx-report__toggle {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        font-weight: 700;
        color: var(--flx-muted);
        padding: 6px 4px;
    }
    .flx-report__toggle svg { width: 15px; height: 15px; }
    .flx-report__toggle:hover { color: var(--flx-red); }
    .flx-report__form {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
        align-items: flex-start;
    }
    .flx-report__form select,
    .flx-report__form textarea {
        background: var(--flx-panel-2);
        border: 1px solid var(--flx-line);
        border-radius: var(--flx-r-sm);
        padding: 9px 12px;
        color: var(--flx-text);
        font-size: 13.5px;
        outline: none;
    }
    .flx-report__form select:focus,
    .flx-report__form textarea:focus { border-color: var(--flx-red); }
    .flx-report__form textarea { flex: 1 1 240px; resize: vertical; }
    .flx-report__send {
        background: var(--flx-red);
        color: #fff;
        font-weight: 800;
        padding: 9px 18px;
        border-radius: var(--flx-r-sm);
        font-size: 13.5px;
    }
    .flx-report__send:hover { background: var(--flx-red-deep); }

    /* ---- episodes ---- */
    .flx-eps { margin-block: clamp(24px, 4vw, 40px); }
    .flx-eps__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 18px;
    }
    .flx-eps__tools { display: flex; gap: 10px; flex-wrap: wrap; }
    .flx-season {
        background: var(--flx-panel);
        border: 1px solid var(--flx-line-2);
        border-radius: var(--flx-r-sm);
        padding: 9px 14px;
        color: var(--flx-text);
        font-weight: 700;
        font-size: 13.5px;
        outline: none;
    }
    .flx-season:focus { border-color: var(--flx-red); }
    .flx-epsearch {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--flx-panel);
        border: 1px solid var(--flx-line);
        border-radius: var(--flx-r-sm);
        padding: 0 12px;
    }
    .flx-epsearch svg { width: 16px; height: 16px; color: var(--flx-faint); flex: none; }
    .flx-epsearch input { background: none; border: 0; padding: 9px 0; outline: none; font-size: 13.5px; width: 180px; }
    .flx-eps__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 10px;
    }
    .flx-ep {
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        width: 100%;
        padding: 11px 14px;
        background: var(--flx-panel);
        border: 1px solid var(--flx-line);
        border-radius: var(--flx-r);
        transition: border-color .18s var(--flx-ease), background .18s var(--flx-ease), transform .18s var(--flx-ease);
    }
    button.flx-ep:hover { border-color: var(--flx-red); transform: translateY(-2px); }
    .flx-ep__no {
        flex: none;
        display: grid;
        place-items: center;
        min-width: 34px; height: 34px;
        border-radius: 8px;
        background: var(--flx-panel-2);
        font-family: var(--flx-disp);
        font-size: 16px;
        font-weight: 700;
        color: var(--flx-red);
    }
    .flx-ep__info { flex: 1; min-width: 0; }
    .flx-ep__name {
        display: block;
        font-size: 13.5px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .flx-ep__soon { font-size: 12.5px; color: var(--flx-faint); }
    .flx-ep__cue {
        flex: none;
        display: grid;
        place-items: center;
        width: 30px; height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
        color: var(--flx-muted);
        transition: background .18s var(--flx-ease), color .18s var(--flx-ease);
    }
    .flx-ep__cue svg { width: 16px; height: 16px; }
    button.flx-ep:hover .flx-ep__cue { background: var(--flx-red); color: #fff; }
    .flx-ep--soon { opacity: .6; cursor: default; }
    .flx-ep--on { border-color: var(--flx-red); background: rgba(226, 18, 33, .12); }
    .flx-ep--on .flx-ep__cue { background: var(--flx-red); color: #fff; }
    .flx-eps__empty { color: var(--flx-muted); padding: 20px 4px; }

    /* ---- trailer dialog ---- */
    .flx-trailer {
        max-width: 960px;
        width: calc(100% - 32px);
        background: transparent;
        position: fixed;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        overflow: visible;
    }
    .flx-trailer::backdrop { background: rgba(0, 0, 0, .82); }
    .flx-trailer__x {
        position: absolute;
        top: -42px; right: 0;
        color: #fff;
        opacity: .8;
    }
    .flx-trailer__x svg { width: 26px; height: 26px; }
    .flx-trailer__x:hover { opacity: 1; }
    .flx-trailer__frame {
        aspect-ratio: 16 / 9;
        border-radius: var(--flx-r-lg);
        overflow: hidden;
        background: #000;
        box-shadow: var(--flx-shadow);
    }
    .flx-trailer__frame iframe { width: 100%; height: 100%; border: 0; }
}

/* ============================================================
   pages — list / grid / filters / pagination
   ============================================================ */
@layer pages {

    .flx-listpage { padding-top: 92px; padding-bottom: 30px; }
    .flx-page-home .flx-listpage,
    .flx-page-detail .flx-listpage { padding-top: 0; }
    .flx-listpage__top { margin-bottom: 18px; }
    .flx-listpage__h1 { font-size: clamp(24px, 3.4vw, 38px); text-transform: uppercase; }
    .flx-listpage__lead { color: var(--flx-muted); margin-top: 6px; }

    .flx-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px 14px;
        margin-top: 8px;
    }
    .flx-grid .flx-tile { width: auto; }

    /* ---- filters ---- */
    .flx-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin: 6px 0 22px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--flx-line);
    }
    .flx-filters__sorts { display: flex; gap: 8px; flex-wrap: wrap; }
    .flx-pill {
        display: inline-flex;
        padding: 8px 16px;
        border-radius: 999px;
        background: var(--flx-panel);
        border: 1px solid var(--flx-line);
        color: var(--flx-muted);
        font-size: 13px;
        font-weight: 700;
        transition: all .18s var(--flx-ease);
    }
    .flx-pill:hover { color: #fff; border-color: var(--flx-line-2); }
    .flx-pill--on { background: var(--flx-red); border-color: var(--flx-red); color: #fff; }
    .flx-filters__drops { display: flex; gap: 10px; flex-wrap: wrap; }

    .flx-drop { position: relative; }
    .flx-drop__btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 150px;
        justify-content: space-between;
        padding: 9px 14px;
        background: var(--flx-panel);
        border: 1px solid var(--flx-line-2);
        border-radius: var(--flx-r-sm);
        color: var(--flx-text);
        font-weight: 700;
        font-size: 13.5px;
    }
    .flx-drop__chev { width: 16px; height: 16px; color: var(--flx-muted); transition: transform .2s var(--flx-ease); }
    .flx-drop.flx-open .flx-drop__chev { transform: rotate(180deg); }
    .flx-drop__panel {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 20;
        min-width: 180px;
        background: var(--flx-panel-2);
        border: 1px solid var(--flx-line-2);
        border-radius: var(--flx-r);
        box-shadow: var(--flx-shadow);
        padding: 6px;
        display: none;
    }
    .flx-drop.flx-open .flx-drop__panel { display: block; animation: flx-drop .18s var(--flx-ease); }
    @keyframes flx-drop { from { opacity: 0; transform: translateY(-6px); } }
    .flx-drop__panel--scroll { max-height: 300px; overflow-y: auto; }
    .flx-drop__panel--scroll::-webkit-scrollbar { width: 8px; }
    .flx-drop__panel--scroll::-webkit-scrollbar-thumb { background: var(--flx-line-2); border-radius: 4px; }
    .flx-drop__opt {
        display: block;
        padding: 8px 12px;
        border-radius: var(--flx-r-sm);
        font-size: 13.5px;
        color: var(--flx-muted);
        font-weight: 600;
    }
    .flx-drop__opt:hover { background: rgba(255, 255, 255, .06); color: #fff; }
    .flx-drop__opt.flx-pick { background: var(--flx-red); color: #fff; }

    /* ---- pagination (engine markup) ---- */
    .pagination { margin: 32px 0 8px; }
    .pagination__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        list-style: none;
        padding: 0;
    }
    .pagination__item { list-style: none; }
    .pagination__link {
        display: grid;
        place-items: center;
        min-width: 40px; height: 40px;
        padding: 0 10px;
        border-radius: var(--flx-r-sm);
        background: var(--flx-panel);
        border: 1px solid var(--flx-line);
        color: var(--flx-muted);
        font-weight: 700;
        font-size: 13.5px;
        transition: all .16s var(--flx-ease);
    }
    .pagination__link:hover { color: #fff; border-color: var(--flx-line-2); transform: translateY(-1px); }
    .pagination__link--active {
        background: var(--flx-red);
        border-color: var(--flx-red);
        color: #fff;
        cursor: default;
    }
    .pagination__ellipsis {
        display: grid;
        place-items: center;
        min-width: 40px; height: 40px;
        color: var(--flx-faint);
    }

    /* ---- empty / alerts ---- */
    .flx-empty {
        text-align: center;
        padding: 60px 16px;
        color: var(--flx-muted);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .flx-alert {
        padding: 13px 16px;
        border-radius: var(--flx-r);
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 16px;
    }
    .flx-alert--ok { background: rgba(46, 160, 90, .16); color: #74e0a3; border: 1px solid rgba(46, 160, 90, .35); }
    .flx-alert--bad { background: rgba(226, 18, 33, .14); color: #ff9aa2; border: 1px solid rgba(226, 18, 33, .4); }
}

/* ============================================================
   pages — landing / search / request / 404
   ============================================================ */
@layer pages {

    /* ---- landing ---- */
    .flx-land-hero {
        position: relative;
        text-align: center;
        padding: clamp(70px, 12vw, 130px) 0 clamp(40px, 6vw, 64px);
        overflow: hidden;
    }
    .flx-land-hero__glow {
        position: absolute;
        top: -10%; left: 50%;
        transform: translateX(-50%);
        width: 900px; height: 520px;
        max-width: 130vw;
        background: radial-gradient(ellipse at center, var(--flx-red-glow), transparent 62%);
        opacity: .5;
        filter: blur(8px);
        z-index: 0;
    }
    .flx-land-hero__inner { position: relative; z-index: 1; }
    .flx-land-hero__eyebrow {
        display: inline-block;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--flx-red);
        margin-bottom: 14px;
    }
    .flx-land-hero__title {
        font-size: clamp(30px, 6vw, 60px);
        text-transform: uppercase;
        max-width: 18ch;
        margin-inline: auto;
    }
    .flx-land-hero__sub {
        color: var(--flx-muted);
        font-size: clamp(15px, 2vw, 18px);
        max-width: 56ch;
        margin: 16px auto 0;
    }
    .flx-land-find {
        display: flex;
        align-items: center;
        gap: 8px;
        max-width: 580px;
        margin: 26px auto 0;
        background: var(--flx-panel);
        border: 1px solid var(--flx-line-2);
        border-radius: 999px;
        padding: 6px 6px 6px 18px;
    }
    .flx-land-find:focus-within { border-color: var(--flx-red); }
    .flx-land-find__icon { width: 20px; height: 20px; color: var(--flx-faint); flex: none; }
    .flx-land-find input { flex: 1; background: none; border: 0; outline: none; padding: 12px 4px; font-size: 15px; }
    .flx-land-find button {
        background: var(--flx-red);
        color: #fff;
        font-weight: 800;
        padding: 11px 26px;
        border-radius: 999px;
    }
    .flx-land-find button:hover { background: var(--flx-red-deep); }
    .flx-land-quick {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-top: 22px;
    }
    .flx-land-quick a {
        font-size: 13px;
        font-weight: 700;
        color: var(--flx-muted);
        padding: 7px 14px;
        border: 1px solid var(--flx-line);
        border-radius: 999px;
    }
    .flx-land-quick a:hover { color: #fff; border-color: var(--flx-red); }

    .flx-land-stats { border-block: 1px solid var(--flx-line); background: var(--flx-ink-2); }
    .flx-land-stats__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        padding-block: 26px;
        text-align: center;
    }
    .flx-land-stat__n {
        display: block;
        font-family: var(--flx-disp);
        font-size: clamp(26px, 4vw, 40px);
        font-weight: 800;
        color: var(--flx-red);
    }
    .flx-land-stat__l { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--flx-muted); }

    .flx-land-h2 { font-size: clamp(22px, 3vw, 30px); text-transform: uppercase; margin: clamp(36px, 5vw, 56px) 0 18px; }
    .flx-land-h2--center { text-align: center; }

    .flx-land-hot__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .flx-land-hot__item a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        background: var(--flx-panel);
        border: 1px solid var(--flx-line);
        border-radius: var(--flx-r);
        transition: border-color .18s var(--flx-ease), transform .18s var(--flx-ease);
    }
    .flx-land-hot__item a:hover { border-color: var(--flx-red); transform: translateX(3px); }
    .flx-land-hot__rank { font-family: var(--flx-disp); font-size: 18px; font-weight: 800; color: var(--flx-faint); min-width: 32px; }
    .flx-land-hot__name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .flx-land-hot__tags { display: flex; align-items: center; gap: 8px; flex: none; }
    .flx-land-hot__kind { font-size: 11px; text-transform: uppercase; color: var(--flx-muted); }
    .flx-land-hot__score { font-size: 12px; color: var(--flx-gold); font-weight: 700; }
    .flx-land-hot__more { margin-top: 14px; }
    .flx-land-hot__more a { color: var(--flx-red); font-weight: 800; font-size: 14px; }

    .flx-land-why__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    .flx-land-card {
        background: var(--flx-panel);
        border: 1px solid var(--flx-line);
        border-radius: var(--flx-r-lg);
        padding: 22px 20px;
    }
    .flx-land-card__no {
        font-family: var(--flx-disp);
        font-size: 22px;
        font-weight: 800;
        color: var(--flx-red);
    }
    .flx-land-card h3 { font-family: var(--flx-body); font-size: 16px; font-weight: 800; margin: 8px 0 6px; }
    .flx-land-card p { color: var(--flx-muted); font-size: 13.5px; }

    .flx-land-genres__grid { display: flex; flex-wrap: wrap; gap: 10px; }
    .flx-land-gtag {
        padding: 9px 18px;
        border: 1px solid var(--flx-line-2);
        border-radius: 999px;
        font-weight: 700;
        font-size: 14px;
        color: var(--flx-muted);
    }
    .flx-land-gtag:hover { background: var(--flx-red); border-color: var(--flx-red); color: #fff; }

    .flx-land-faq__list { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; }
    .flx-land-faq__item {
        background: var(--flx-panel);
        border: 1px solid var(--flx-line);
        border-radius: var(--flx-r);
        overflow: hidden;
    }
    .flx-land-faq__item summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 18px;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }
    .flx-land-faq__item summary::-webkit-details-marker { display: none; }
    .flx-land-faq__plus { position: relative; width: 16px; height: 16px; flex: none; }
    .flx-land-faq__plus::before,
    .flx-land-faq__plus::after {
        content: "";
        position: absolute;
        background: var(--flx-red);
        border-radius: 2px;
        transition: transform .2s var(--flx-ease);
    }
    .flx-land-faq__plus::before { top: 7px; left: 0; width: 16px; height: 2px; }
    .flx-land-faq__plus::after { top: 0; left: 7px; width: 2px; height: 16px; }
    .flx-land-faq__item[open] .flx-land-faq__plus::after { transform: rotate(90deg); opacity: 0; }
    .flx-land-faq__item p { padding: 0 18px 16px; color: var(--flx-muted); }
    .flx-land-faq__item p a { color: var(--flx-red); }

    .flx-land-prose__wrap { max-width: 880px; }
    .flx-land-prose p { color: var(--flx-muted); margin-top: 12px; line-height: 1.7; }
    .flx-land-prose a { color: var(--flx-red); }

    /* ---- search ---- */
    .flx-searchpage { padding-top: 92px; padding-bottom: 30px; }
    .flx-searchform { max-width: 720px; margin: 0 auto 24px; }
    .flx-searchform__bar {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--flx-panel);
        border: 1px solid var(--flx-line-2);
        border-radius: 999px;
        padding: 6px 6px 6px 18px;
    }
    .flx-searchform__bar:focus-within { border-color: var(--flx-red); }
    .flx-searchform__bar svg { width: 20px; height: 20px; color: var(--flx-faint); flex: none; }
    .flx-searchform__bar input { flex: 1; background: none; border: 0; outline: none; padding: 12px 4px; font-size: 15px; }
    .flx-searchform__bar button {
        background: var(--flx-red);
        color: #fff;
        font-weight: 800;
        padding: 11px 24px;
        border-radius: 999px;
    }
    .flx-searchform__bar button:hover { background: var(--flx-red-deep); }
    .flx-searchform__types { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
    .flx-stype {
        position: relative;
        padding: 7px 18px;
        border: 1px solid var(--flx-line);
        border-radius: 999px;
        font-size: 13px;
        font-weight: 700;
        color: var(--flx-muted);
        cursor: pointer;
    }
    .flx-stype input { position: absolute; opacity: 0; pointer-events: none; }
    .flx-stype:hover { color: #fff; border-color: var(--flx-line-2); }
    .flx-stype--on { background: var(--flx-red); border-color: var(--flx-red); color: #fff; }
    .flx-searchhint { text-align: center; padding: 30px 16px; }
    .flx-searchhint h1 { font-size: clamp(24px, 3.4vw, 36px); text-transform: uppercase; }
    .flx-searchhint p { color: var(--flx-muted); margin-top: 8px; }
    .flx-searchhint__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
    .flx-searchcount { color: var(--flx-muted); margin-bottom: 16px; }
    .flx-searchcount strong { color: var(--flx-text); }

    /* ---- request ---- */
    .flx-reqpage { padding-top: 92px; padding-bottom: 40px; }
    .flx-reqpage__grid { display: grid; grid-template-columns: 360px 1fr; gap: 32px; align-items: start; }
    .flx-reqpage__aside {
        background: linear-gradient(160deg, var(--flx-panel), var(--flx-ink-2));
        border: 1px solid var(--flx-line);
        border-radius: var(--flx-r-lg);
        padding: 28px;
    }
    .flx-reqpage__icon {
        display: grid;
        place-items: center;
        width: 56px; height: 56px;
        border-radius: 16px;
        background: rgba(226, 18, 33, .14);
        color: var(--flx-red);
        margin-bottom: 16px;
    }
    .flx-reqpage__icon svg { width: 30px; height: 30px; }
    .flx-reqpage__h1 { font-size: 28px; text-transform: uppercase; }
    .flx-reqpage__lead { color: var(--flx-muted); margin: 8px 0 18px; }
    .flx-reqpage__steps { display: flex; flex-direction: column; gap: 10px; counter-reset: flxstep; }
    .flx-reqpage__steps li {
        position: relative;
        padding-left: 38px;
        color: var(--flx-muted);
        font-size: 14px;
    }
    .flx-reqpage__steps li::before {
        counter-increment: flxstep;
        content: counter(flxstep);
        position: absolute;
        left: 0; top: -2px;
        width: 26px; height: 26px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--flx-red);
        color: #fff;
        font-family: var(--flx-disp);
        font-weight: 800;
        font-size: 14px;
    }
    .flx-reqpage__formwrap {
        background: var(--flx-panel);
        border: 1px solid var(--flx-line);
        border-radius: var(--flx-r-lg);
        padding: 26px;
    }
    .flx-reqform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .flx-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .flx-field label { font-size: 13px; font-weight: 700; color: var(--flx-text); }
    .flx-field label span { color: var(--flx-red); }
    .flx-field label em { color: var(--flx-faint); font-style: normal; font-weight: 500; }
    .flx-field input,
    .flx-field select,
    .flx-field textarea {
        background: var(--flx-ink-2);
        border: 1px solid var(--flx-line-2);
        border-radius: var(--flx-r-sm);
        padding: 11px 13px;
        color: var(--flx-text);
        font-size: 14px;
        outline: none;
    }
    .flx-field input:focus,
    .flx-field select:focus,
    .flx-field textarea:focus { border-color: var(--flx-red); }
    .flx-reqform__send { margin-top: 4px; }

    /* ---- 404 ---- */
    .flx-404 { text-align: center; padding: clamp(80px, 14vw, 150px) 16px; }
    .flx-404__code {
        font-family: var(--flx-disp);
        font-size: clamp(90px, 20vw, 200px);
        font-weight: 800;
        line-height: .85;
        color: transparent;
        -webkit-text-stroke: 3px var(--flx-red);
    }
    .flx-404__title { font-size: clamp(24px, 4vw, 38px); text-transform: uppercase; margin-top: 10px; }
    .flx-404__text { color: var(--flx-muted); max-width: 48ch; margin: 12px auto 0; }
    .flx-404__find {
        display: flex;
        align-items: center;
        gap: 8px;
        max-width: 440px;
        margin: 24px auto 0;
        background: var(--flx-panel);
        border: 1px solid var(--flx-line-2);
        border-radius: 999px;
        padding: 5px 6px 5px 16px;
    }
    .flx-404__find:focus-within { border-color: var(--flx-red); }
    .flx-404__find svg { width: 18px; height: 18px; color: var(--flx-faint); flex: none; }
    .flx-404__find input { flex: 1; background: none; border: 0; outline: none; padding: 10px 4px; }
    .flx-404__find button { background: var(--flx-red); color: #fff; font-weight: 800; padding: 10px 22px; border-radius: 999px; }
    .flx-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }

    .flx-person__role {
        display: inline-block;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--flx-red);
        margin-bottom: 6px;
    }
}

/* ============================================================
   util — responsive
   ============================================================ */
@layer util {

    @media (width <= 1024px) {
        .flx-hero__inner { grid-template-columns: 220px 1fr; }
    }

    @media (width <= 860px) {
        .flx-nav { display: none; }
        .flx-find { display: none; }
        .flx-iconlink { display: inline-flex; }
        .flx-burger { display: flex; }

        .flx-stage { margin-top: -68px; min-height: 70vh; }
        .flx-stage__fade {
            background:
                linear-gradient(0deg, var(--flx-ink) 8%, rgba(24, 24, 27,.35) 50%, transparent 90%),
                linear-gradient(90deg, rgba(24, 24, 27,.7), rgba(24, 24, 27,.2));
        }
        .flx-stage__inner { text-align: center; }
        .flx-stage__title { margin-inline: auto; }
        .flx-stage__meta, .flx-stage__actions { justify-content: center; }
        .flx-stage__plot { margin-inline: auto; }
        .flx-stage__dots { left: 50%; transform: translateX(-50%); right: auto; }

        .flx-hero__inner { grid-template-columns: 1fr; text-align: center; }
        .flx-hero__poster { width: 200px; margin-inline: auto; }
        .flx-hero__badges, .flx-hero__facts, .flx-hero__genres, .flx-hero__actions { justify-content: center; }
        .flx-hero__title { margin-inline: auto; }
        .flx-hero__plot { margin-inline: auto; text-align: left; }
        .flx-hero__grid { grid-template-columns: 1fr; text-align: left; max-width: 520px; margin-inline: auto; }

        .flx-reqpage__grid { grid-template-columns: 1fr; }
        .flx-footer__grid { grid-template-columns: 1fr 1fr; }
        .flx-footer__brandcol { grid-column: 1 / -1; }

        .flx-row__nav { display: none; }
    }

    @media (width <= 620px) {
        .flx-land-stats__grid { grid-template-columns: repeat(2, 1fr); }
        .flx-land-hot__list { grid-template-columns: 1fr; }
        .flx-land-why__grid { grid-template-columns: 1fr 1fr; }
        .flx-eps__grid { grid-template-columns: 1fr; }
        .flx-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
        .flx-reqform__row { grid-template-columns: 1fr; }
        .flx-stage__actions { flex-direction: column; }
        .flx-stage__actions .flx-btn { width: 100%; }
        .flx-tile { width: 70vw; }
        .flx-watch__cue { width: 64px; height: 64px; }
        .flx-watch__cue svg { width: 26px; height: 26px; }
        .flx-land-find { flex-wrap: wrap; border-radius: var(--flx-r-lg); padding: 12px; }
        .flx-land-find button { width: 100%; border-radius: var(--flx-r-sm); }
        .flx-searchform__bar { flex-wrap: wrap; border-radius: var(--flx-r-lg); padding: 12px; }
        .flx-searchform__bar button { width: 100%; border-radius: var(--flx-r-sm); }
        .flx-epnav { flex-wrap: wrap; }
        .flx-epnav__now { order: -1; width: 100%; }
    }

    @media (width <= 420px) {
        .flx-land-why__grid { grid-template-columns: 1fr; }
        .flx-footer__grid { grid-template-columns: 1fr; }
    }
}