/* ==========================================================================
   movhub theme — main stylesheet
   layered cascade · prefix: mh- · light/dark via OS, dark by default
   ========================================================================== */

@layer reset, tokens, base, layout, components, pages, utility;

/* ----- 01. Reset ---------------------------------------------------------- */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body, h1, h2, h3, h4, h5, h6, p, ol, ul, dl, figure, blockquote { margin: 0; }
    ol, ul { padding: 0; list-style: none; }
    img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
    button, input, select, textarea { font: inherit; color: inherit; }
    button { background: none; border: 0; padding: 0; cursor: pointer; }
    a { color: inherit; text-decoration: none; }
    table { border-collapse: collapse; }
    [hidden] { display: none !important; }
}

/* ----- 02. Tokens --------------------------------------------------------- */
@layer tokens {
    :root {
        /* surfaces */
        --mh-shell:        #050b15;
        --mh-canvas:       #111113;
        --mh-board:        #0e1a2c;
        --mh-card:         #131f33;
        --mh-card-up:      #1a2740;
        --mh-rail:         #11192a;
        --mh-divider:      #1d2b44;
        --mh-edge:         #243652;

        /* type */
        --mh-ink-100:      #f5f8fd;
        --mh-ink-200:      #d5deec;
        --mh-ink-300:      #97a4ba;
        --mh-ink-400:      #6f7f97;
        --mh-ink-500:      #4f5d75;

        /* brand */
        --mh-accent:       #3ea6ff;
        --mh-accent-soft:  rgba(62, 166, 255, 0.16);
        --mh-accent-hi:    #6cc1ff;
        --mh-amber:        #f6c453;
        --mh-rose:         #ef5a6f;
        --mh-mint:         #4dd1a3;

        /* metrics */
        --mh-radius-xs:    4px;
        --mh-radius-sm:    6px;
        --mh-radius-md:    10px;
        --mh-radius-lg:    14px;
        --mh-radius-pill:  999px;
        --mh-shadow-sm:    0 1px 2px rgba(0,0,0,.4);
        --mh-shadow-md:    0 8px 24px rgba(0,0,0,.45);
        --mh-shadow-lg:    0 24px 60px rgba(0,0,0,.55);

        /* layout */
        --mh-bound:        1280px;
        --mh-gutter:       clamp(14px, 2vw, 22px);
        --mh-rail-gap:     clamp(8px, 1vw, 14px);

        /* type ramp */
        --mh-font-display: "Barlow Condensed", "Oswald", system-ui, sans-serif;
        --mh-font-body:    "Manrope", "Inter", system-ui, sans-serif;

        --mh-fs-xxs:       clamp(10px, 0.7vw, 11px);
        --mh-fs-xs:        clamp(11px, 0.78vw, 12px);
        --mh-fs-sm:        clamp(12px, 0.85vw, 13px);
        --mh-fs-md:        clamp(13px, 0.95vw, 14px);
        --mh-fs-lg:        clamp(15px, 1.1vw, 17px);
        --mh-fs-h2:        clamp(18px, 1.6vw, 24px);
        --mh-fs-h1:        clamp(28px, 3.4vw, 44px);

        color-scheme: dark;
    }
}

/* ----- 03. Base ----------------------------------------------------------- */
@layer base {
    body {
        background: var(--mh-canvas);
        color: var(--mh-ink-200);
        font-family: var(--mh-font-body);
        font-size: var(--mh-fs-md);
        line-height: 1.55;
        font-feature-settings: "ss01", "ss02";
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }
    body > main#main-content { flex: 1 0 auto; }
    body > .mh-foot { flex-shrink: 0; }

    a { color: var(--mh-accent); transition: color .15s ease; }
    a:hover { color: var(--mh-accent-hi); }

    h1, h2, h3, h4 {
        font-family: var(--mh-font-display);
        font-weight: 600;
        color: var(--mh-ink-100);
        line-height: 1.18;
        letter-spacing: .015em;
    }

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

    .skip-link {
        position: fixed; inset-inline-start: 12px; inset-block-start: -200px;
        background: var(--mh-accent); color: #021629;
        padding: 10px 16px; border-radius: var(--mh-radius-sm);
        z-index: 9999; font-weight: 700;
        transition: inset-block-start .2s ease;
    }
    .skip-link:focus { inset-block-start: 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;
    }

    img[data-fallback] { background: var(--mh-rail); }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0s !important;
            transition-duration: 0s !important;
        }
    }
}

/* ----- 04. Layout helpers ------------------------------------------------- */
@layer layout {
    .mh-bound {
        width: 100%;
        max-width: var(--mh-bound);
        margin-inline: auto;
        padding-inline: var(--mh-gutter);
    }

    main#main-content { display: block; padding-block-end: 32px; }

    .mh-section + .mh-section { margin-block-start: clamp(20px, 2.4vw, 36px); }
    .mh-section { margin-block-start: clamp(18px, 2vw, 28px); }

    .mh-strip-head {
        display: flex; align-items: center;
        gap: 12px;
        margin-block-end: 12px;
        padding-block-end: 8px;
        border-block-end: 1px solid #1a1f2c;
    }
    .mh-strip-head h2 {
        font-family: var(--mh-font-body);
        font-size: 17px;
        font-weight: 600;
        color: #fff;
        text-transform: none;
        letter-spacing: 0;
        position: relative;
        padding-inline-start: 12px;
        line-height: 1.2;
        display: inline-flex;
        align-items: baseline;
        gap: 10px;
    }
    .mh-strip-head h2::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 4px;
        inset-block-end: 4px;
        width: 3px;
        border-radius: 2px;
        background: var(--mh-accent);
    }
    .mh-strip-head h2 .mh-strip-count {
        font-family: var(--mh-font-body);
        font-size: 12px;
        color: var(--mh-ink-400);
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
    }
    .mh-strip-head .mh-strip-flex { flex: 1; }
    .mh-strip-head .mh-strip-actions {
        display: flex; align-items: center; gap: 8px;
    }
    .mh-strip-head .mh-link-more {
        display: inline-flex; align-items: center;
        padding: 5px 14px;
        background: var(--mh-accent);
        color: #fff;
        border-radius: 4px;
        font-family: var(--mh-font-body);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        line-height: 1.2;
    }
    .mh-strip-head .mh-link-more:hover { background: var(--mh-accent-hi); color: #fff; }
    .mh-strip-head .mh-strip-nav {
        display: inline-flex; align-items: center;
        gap: 4px;
        background: transparent;
    }
    .mh-strip-head .mh-strip-nav button {
        width: 28px; height: 28px;
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--mh-ink-300);
        background: rgba(255, 255, 255, .04);
        border: 1px solid #1f2a3e;
        border-radius: 6px;
        transition: color .15s ease, background .15s ease, border-color .15s ease;
    }
    .mh-strip-head .mh-strip-nav button:hover {
        color: #fff;
        background: rgba(62, 166, 255, .12);
        border-color: var(--mh-accent);
    }
    .mh-strip-head .mh-strip-nav button:disabled {
        opacity: .35;
        cursor: not-allowed;
        background: transparent;
        border-color: #1a1f2c;
    }
    .mh-strip-head .mh-strip-nav button:disabled:hover {
        color: var(--mh-ink-300);
        background: transparent;
        border-color: #1a1f2c;
    }
}

/* ----- 05. Components: header & nav -------------------------------------- */
@layer components {

    /* notification bar */
    .mh-notice {
        background: linear-gradient(90deg, #0c2a4a, #1b4a7a);
        color: var(--mh-ink-100);
        font-size: var(--mh-fs-sm);
        padding-block: 8px;
        border-block-end: 1px solid var(--mh-divider);
    }
    .mh-notice-row {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
    }
    .mh-notice-msg { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
    .mh-notice-msg svg { flex-shrink: 0; opacity: .75; }
    .mh-notice-msg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mh-notice-cta {
        display: inline-flex; align-items: center; gap: 4px;
        background: rgba(255,255,255,.12);
        padding: 4px 12px; border-radius: var(--mh-radius-pill);
        font-weight: 600; font-size: var(--mh-fs-xs);
        white-space: nowrap;
    }
    .mh-notice-cta:hover { background: rgba(255,255,255,.22); color: #fff; }
    .mh-notice-x {
        display: inline-flex; padding: 4px;
        color: var(--mh-ink-200); opacity: .7;
        border-radius: var(--mh-radius-xs);
    }
    .mh-notice-x:hover { opacity: 1; background: rgba(255,255,255,.08); }

    .mh-notice-dlg {
        max-width: 520px; width: 92vw;
        background: var(--mh-board);
        color: var(--mh-ink-200);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-lg);
        padding: 0;
        box-shadow: var(--mh-shadow-lg);
    }
    .mh-notice-dlg::backdrop { background: rgba(2,8,20,.7); backdrop-filter: blur(6px); }
    .mh-notice-dlg-body { padding: 20px 22px; }
    .mh-notice-dlg-head {
        display: flex; align-items: center; gap: 10px;
        padding: 16px 22px;
        border-block-end: 1px solid var(--mh-divider);
    }
    .mh-notice-dlg-head h3 {
        font-size: var(--mh-fs-lg); flex: 1; margin: 0;
        font-family: var(--mh-font-body); font-weight: 700;
    }
    .mh-notice-dlg-head button { color: var(--mh-ink-300); padding: 4px; }
    .mh-notice-dlg-foot {
        padding: 14px 22px;
        border-block-start: 1px solid var(--mh-divider);
    }
    .mh-notice-dlg-foot a { font-weight: 600; }

    /* header bar — near-black, sticky */
    .mh-topbar {
        position: sticky; inset-block-start: 0;
        z-index: 80;
        background: #0c0c0c;
        border-block-end: 1px solid #1a1a1a;
    }
    .mh-topbar-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: stretch;
        gap: 0;
        height: 56px;
        padding-inline: 0;
    }

    /* logo slab — solid black block on the left */
    .mh-brand {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 8px;
        padding-inline: clamp(20px, 2.4vw, 32px);
        background: #000;
        color: #fff;
        align-self: stretch;
        min-width: 110px;
    }
    .mh-brand img {
        height: 38px;
        width: auto;
        display: block;
    }
    .mh-brand-word {
        display: none;
    }

    .mh-nav {
        display: flex; align-items: center;
        justify-content: center;
        gap: clamp(4px, 0.6vw, 10px);
        padding-inline: clamp(14px, 2vw, 28px);
    }
    .mh-nav-link {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 12px;
        font-family: var(--mh-font-body);
        font-size: 14px;
        font-weight: 500;
        color: #d0d4dc;
        border-radius: 4px;
        text-transform: none;
        letter-spacing: 0;
        transition: color .15s ease;
    }
    .mh-nav-link svg { display: none; }
    .mh-nav-link:hover { color: #fff; background: transparent; }
    .mh-nav-link.is-current { color: var(--mh-accent); }

    .mh-nav-drop { position: relative; }
    .mh-nav-drop {
        display: inline-flex; align-items: center; gap: 0;
    }
    .mh-nav-summary-link {
        padding: 8px 6px 8px 12px;
        font-family: var(--mh-font-body);
        font-size: 14px;
        font-weight: 500;
        color: #d0d4dc;
        text-transform: none;
        letter-spacing: 0;
        transition: color .15s ease;
    }
    .mh-nav-summary-link:hover { color: #fff; }
    .mh-nav-summary-link.is-current { color: var(--mh-accent); }
    .mh-nav-caret {
        display: inline-flex; align-items: center; justify-content: center;
        padding: 8px 10px 8px 4px;
        background: transparent;
        color: #6f7480;
        border: 0;
        cursor: pointer;
        transition: color .15s ease, transform .2s ease;
    }
    .mh-nav-caret:hover { color: #fff; }
    .mh-nav-drop.is-open .mh-nav-caret { color: var(--mh-accent); transform: rotate(180deg); }
    .mh-nav-drop-pop {
        position: absolute;
        inset-block-start: calc(100% + 4px);
        inset-inline-start: 12px;
        min-width: 200px;
        background: #161616;
        border: 1px solid #262626;
        border-radius: var(--mh-radius-sm);
        padding: 6px;
        box-shadow: var(--mh-shadow-md);
        z-index: 50;
        display: none;
    }
    .mh-nav-drop.is-open .mh-nav-drop-pop { display: grid; }
    .mh-nav-drop-item {
        display: block;
        padding: 8px 12px;
        font-size: 13px;
        color: #d0d4dc;
        border-radius: var(--mh-radius-xs);
        font-weight: 500;
    }
    .mh-nav-drop-item:hover { background: #1f1f1f; color: #fff; }

    /* search field — gray rectangular */
    .mh-tools {
        display: flex; align-items: center;
        padding-inline: clamp(14px, 2vw, 24px);
        justify-self: end;
    }
    .mh-search-pill {
        display: flex; align-items: center;
        gap: 0;
        background: #2a2a2a;
        border: 1px solid #2a2a2a;
        padding: 0;
        border-radius: var(--mh-radius-xs);
        height: 34px;
        width: clamp(220px, 24vw, 280px);
        transition: border-color .15s ease;
    }
    .mh-search-pill:focus-within {
        border-color: #444;
    }
    .mh-search-pill input {
        flex: 1; min-width: 0;
        background: transparent;
        border: 0; outline: 0;
        padding: 0 12px;
        color: #fff;
        font-size: 13px;
        font-family: var(--mh-font-body);
        height: 100%;
    }
    .mh-search-pill input::placeholder { color: #888; }
    .mh-search-pill button {
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 100%;
        background: transparent;
        color: #aaa;
        border-radius: 0;
        flex-shrink: 0;
    }
    .mh-search-pill button:hover { color: #fff; background: rgba(255,255,255,.05); }
    .mh-search-pill button svg { width: 14px; height: 14px; }

    .mh-burger {
        display: none;
        width: 36px; height: 36px;
        background: transparent;
        border: 0;
        border-radius: var(--mh-radius-xs);
        align-items: center; justify-content: center;
        color: #d0d4dc;
        margin-inline-start: 8px;
    }
    .mh-burger:hover { background: rgba(255,255,255,.06); color: #fff; }

    /* A-Z letter strip — removed; CSS retained for backwards compatibility (no longer rendered) */
    .mh-az { display: none; }

    /* drawer (mobile) */
    .mh-drawer {
        position: fixed;
        inset-block: 0; inset-inline-end: 0;
        width: min(86vw, 320px);
        background: var(--mh-shell);
        border-inline-start: 1px solid var(--mh-divider);
        z-index: 100;
        transform: translateX(100%);
        transition: transform .25s ease;
        padding: 18px;
        overflow-y: auto;
        display: flex; flex-direction: column; gap: 14px;
    }
    .mh-drawer.mh-shown { transform: translateX(0); }
    .mh-drawer-veil {
        position: fixed;
        inset: 0;
        background: rgba(2,8,20,.65);
        backdrop-filter: blur(2px);
        z-index: 99;
        opacity: 0; pointer-events: none;
        transition: opacity .25s ease;
    }
    .mh-drawer-veil.mh-shown { opacity: 1; pointer-events: auto; }
    .mh-drawer-head {
        display: flex; align-items: center; justify-content: space-between;
        padding-block-end: 12px;
        border-block-end: 1px solid var(--mh-divider);
    }
    .mh-drawer-x {
        width: 32px; height: 32px;
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--mh-ink-300);
        border-radius: var(--mh-radius-sm);
    }
    .mh-drawer nav { display: grid; gap: 2px; }
    .mh-drawer nav a {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px;
        color: var(--mh-ink-200);
        font-weight: 600;
        font-size: var(--mh-fs-md);
        border-radius: var(--mh-radius-sm);
    }
    .mh-drawer nav a:hover { background: rgba(255,255,255,.05); color: var(--mh-ink-100); }
    .mh-drawer-search { padding-block-start: 12px; border-block-start: 1px solid var(--mh-divider); }
    .mh-drawer-search form { display: flex; gap: 6px; }
    .mh-drawer-search input {
        flex: 1; padding: 9px 12px;
        background: var(--mh-card);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-sm);
        color: var(--mh-ink-100);
    }
    .mh-drawer-search button {
        padding: 0 14px;
        background: var(--mh-accent); color: #021629;
        border-radius: var(--mh-radius-sm);
        font-weight: 700;
    }

    @media (width < 880px) {
        .mh-nav { display: none; }
        .mh-search-pill { display: none; }
        .mh-burger { display: inline-flex; }
        .mh-tools .mh-icon-btn { padding: 6px; }
    }

    .mh-icon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px;
        color: var(--mh-ink-200);
        background: rgba(255,255,255,.04);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-sm);
    }
    .mh-icon-btn:hover { background: rgba(255,255,255,.08); color: var(--mh-ink-100); }

    /* breadcrumbs */
    .mh-crumbs {
        background: #111113;
        border-block-end: 1px solid #1a1a1a;
        padding-block: 10px;
        font-size: var(--mh-fs-xs);
    }
    .mh-crumbs ol {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 6px;
        color: var(--mh-ink-400);
    }
    .mh-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
    .mh-crumbs li + li::before {
        content: "›";
        color: var(--mh-ink-500);
        margin-inline: 4px;
    }
    .mh-crumbs a { color: var(--mh-ink-300); }
    .mh-crumbs a:hover { color: var(--mh-accent); }
    .mh-crumbs li:last-child > span { color: var(--mh-ink-100); }

    /* hero rail (3-up backdrop tiles) */
    .mh-hero {
        position: relative;
        margin-block-start: 18px;
    }
    .mh-hero-track {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .mh-hero-track::-webkit-scrollbar { display: none; }
    .mh-hero-cell {
        flex: 0 0 calc((100% - 28px) / 3);
        min-width: 0;
        scroll-snap-align: start;
        border-radius: var(--mh-radius-md);
        overflow: hidden;
        position: relative;
        aspect-ratio: 16 / 9;
        background: var(--mh-rail);
    }
    @media (width < 980px) {
        .mh-hero-cell { flex-basis: calc((100% - 14px) / 2); }
    }
    @media (width < 720px) {
        .mh-hero-cell { flex-basis: 100%; }
    }
    .mh-hero-cell img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform .4s ease;
    }
    .mh-hero-cell:hover img { transform: scale(1.04); }
    .mh-hero-shade {
        position: absolute; inset: 0;
        background: linear-gradient(180deg, transparent 40%, rgba(2,6,16,.85) 100%);
    }
    .mh-hero-info {
        position: absolute;
        inset-block-end: 0; inset-inline: 0;
        padding: 14px 16px;
    }
    .mh-hero-info h3 {
        font-family: var(--mh-font-display);
        font-size: clamp(15px, 1.4vw, 19px);
        font-weight: 700;
        color: #fff;
        text-shadow: 0 2px 6px rgba(0,0,0,.5);
        margin-block-end: 2px;
        text-transform: uppercase;
        letter-spacing: .03em;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mh-hero-info time {
        font-size: var(--mh-fs-xs);
        color: rgba(255,255,255,.78);
        font-weight: 500;
    }
    .mh-hero-pill {
        position: absolute;
        inset-block-start: 12px; inset-inline-end: 12px;
        background: var(--mh-accent);
        color: #021629;
        font-size: 10px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: var(--mh-radius-pill);
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .mh-hero-arrow {
        position: absolute;
        inset-block-start: 50%;
        transform: translateY(-50%);
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(8,16,32,.7);
        border: 1px solid var(--mh-divider);
        color: var(--mh-ink-100);
        border-radius: 50%;
        z-index: 5;
        opacity: .85;
        transition: opacity .15s, background .15s;
    }
    .mh-hero-arrow:hover { opacity: 1; background: rgba(8,16,32,.92); }
    .mh-hero-arrow.mh-prev { inset-inline-start: -8px; }
    .mh-hero-arrow.mh-next { inset-inline-end: -8px; }
    .mh-hero-dots {
        display: flex; justify-content: center; gap: 6px;
        margin-block-start: 10px;
    }
    .mh-hero-dots button {
        width: 6px; height: 6px;
        background: var(--mh-edge);
        border-radius: 50%;
        transition: background .15s, width .15s;
    }
    .mh-hero-dots button.is-current {
        background: var(--mh-accent);
        width: 18px;
        border-radius: var(--mh-radius-pill);
    }

    /* poster rail (wrapping grid — used on list/browse pages) */
    .mh-rail {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: var(--mh-rail-gap);
    }
    @media (width < 1100px) { .mh-rail { grid-template-columns: repeat(6, 1fr); } }
    @media (width < 920px)  { .mh-rail { grid-template-columns: repeat(5, 1fr); } }
    @media (width < 720px)  { .mh-rail { grid-template-columns: repeat(4, 1fr); } }
    @media (width < 520px)  { .mh-rail { grid-template-columns: repeat(3, 1fr); } }
    @media (width < 380px)  { .mh-rail { grid-template-columns: repeat(2, 1fr); } }

    /* poster strip (horizontal scroll — used on home/category/detail) */
    .mh-strip-wrap {
        position: relative;
    }
    .mh-strip {
        display: flex;
        gap: var(--mh-rail-gap);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 4px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-block-end: 4px;
    }
    .mh-strip::-webkit-scrollbar { display: none; }
    .mh-strip > .mh-poster {
        flex: 0 0 calc((100% - (var(--mh-rail-gap) * 6)) / 7);
        min-width: 0;
        scroll-snap-align: start;
    }
    @media (width < 1100px) { .mh-strip > .mh-poster { flex-basis: calc((100% - (var(--mh-rail-gap) * 5)) / 6); } }
    @media (width < 920px)  { .mh-strip > .mh-poster { flex-basis: calc((100% - (var(--mh-rail-gap) * 4)) / 5); } }
    @media (width < 720px)  { .mh-strip > .mh-poster { flex-basis: calc((100% - (var(--mh-rail-gap) * 3)) / 4); } }
    @media (width < 520px)  { .mh-strip > .mh-poster { flex-basis: calc((100% - (var(--mh-rail-gap) * 2)) / 3); } }
    @media (width < 380px)  { .mh-strip > .mh-poster { flex-basis: calc((100% - var(--mh-rail-gap)) / 2); } }

    .mh-poster {
        display: flex; flex-direction: column;
        gap: 8px;
    }
    .mh-poster-art {
        position: relative;
        aspect-ratio: 2 / 3;
        background: var(--mh-rail);
        border-radius: var(--mh-radius-sm);
        overflow: hidden;
        box-shadow: var(--mh-shadow-sm);
    }
    .mh-poster-art img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }
    .mh-poster:hover .mh-poster-art img { transform: scale(1.05); }
    .mh-poster-veil {
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.55));
        opacity: 0;
        transition: opacity .2s ease;
        display: flex; align-items: center; justify-content: center;
    }
    .mh-poster:hover .mh-poster-veil { opacity: 1; }
    .mh-poster-play {
        width: 42px; height: 42px;
        background: var(--mh-accent);
        color: #021629;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 16px rgba(0,0,0,.35);
    }
    .mh-poster-flag {
        position: absolute;
        inset-block-start: 8px; inset-inline-end: 8px;
        background: rgba(62,166,255,.95);
        color: #021629;
        font-size: 9px;
        font-weight: 800;
        padding: 3px 8px;
        border-radius: var(--mh-radius-pill);
        letter-spacing: .06em;
        text-transform: uppercase;
        backdrop-filter: blur(2px);
    }
    .mh-poster-flag.mh-flag-ep {
        background: var(--mh-amber);
        color: #1a1100;
        inset-inline-start: 8px;
        inset-inline-end: auto;
    }
    .mh-poster-score {
        position: absolute;
        inset-block-end: 8px; inset-inline-start: 8px;
        background: rgba(2,8,20,.85);
        color: var(--mh-amber);
        font-size: 10px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 3px;
    }
    .mh-poster-meta { padding-inline: 0; }
    .mh-poster-name {
        font-family: var(--mh-font-body);
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        line-height: 1.3;
        margin-block-end: 3px;
        overflow: hidden; text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .mh-poster:hover .mh-poster-name { color: var(--mh-accent); }
    .mh-poster-when {
        font-size: 12px;
        color: #6f7480;
        font-weight: 500;
    }

    /* episode card (landscape — wrapping grid) */
    .mh-eprail {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--mh-rail-gap);
    }
    @media (width < 1100px) { .mh-eprail { grid-template-columns: repeat(4, 1fr); } }
    @media (width < 820px)  { .mh-eprail { grid-template-columns: repeat(3, 1fr); } }
    @media (width < 560px)  { .mh-eprail { grid-template-columns: repeat(2, 1fr); } }

    /* episode strip (landscape — horizontal scroll) */
    .mh-epstrip {
        display: flex;
        gap: var(--mh-rail-gap);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-block-end: 4px;
    }
    .mh-epstrip::-webkit-scrollbar { display: none; }
    .mh-epstrip > .mh-epcard {
        flex: 0 0 calc((100% - (var(--mh-rail-gap) * 4)) / 5);
        min-width: 0;
        scroll-snap-align: start;
    }
    @media (width < 1100px) { .mh-epstrip > .mh-epcard { flex-basis: calc((100% - (var(--mh-rail-gap) * 3)) / 4); } }
    @media (width < 820px)  { .mh-epstrip > .mh-epcard { flex-basis: calc((100% - (var(--mh-rail-gap) * 2)) / 3); } }
    @media (width < 560px)  { .mh-epstrip > .mh-epcard { flex-basis: calc((100% - var(--mh-rail-gap)) / 2); } }

    .mh-epcard {
        display: flex; flex-direction: column; gap: 6px;
    }
    .mh-epcard-art {
        position: relative;
        aspect-ratio: 16 / 9;
        background: var(--mh-rail);
        border-radius: var(--mh-radius-sm);
        overflow: hidden;
    }
    .mh-epcard-art img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform .3s ease;
    }
    .mh-epcard:hover .mh-epcard-art img { transform: scale(1.05); }
    .mh-epcard-flag {
        position: absolute;
        inset-block-start: 6px; inset-inline-start: 6px;
        background: rgba(2,8,20,.85);
        color: var(--mh-ink-100);
        font-size: 10px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 3px;
    }
    .mh-epcard-name {
        font-family: var(--mh-font-body);
        font-size: var(--mh-fs-sm);
        font-weight: 600;
        color: var(--mh-ink-100);
        line-height: 1.3;
        overflow: hidden; text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .mh-epcard:hover .mh-epcard-name { color: var(--mh-accent); }
    .mh-epcard-when {
        font-size: var(--mh-fs-xs);
        color: var(--mh-ink-400);
    }

    /* TOP movies / TOP tv (ranked rows) */
    .mh-toptab-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(14px, 2vw, 28px);
    }
    @media (width < 880px) { .mh-toptab-grid { grid-template-columns: 1fr; } }

    .mh-toptab {
        background: var(--mh-board);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-md);
        padding: 14px;
    }
    .mh-toptab-head {
        display: flex; align-items: center; justify-content: space-between;
        margin-block-end: 12px;
        padding-block-end: 10px;
        border-block-end: 1px solid var(--mh-divider);
    }
    .mh-toptab-head h2 {
        font-size: var(--mh-fs-lg);
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 700;
        font-family: var(--mh-font-display);
    }
    .mh-toptab-list { display: grid; gap: 6px; }
    .mh-toprow {
        display: grid;
        grid-template-columns: 24px 36px 36px 1fr;
        align-items: center;
        gap: 10px;
        padding: 6px 4px;
        border-radius: var(--mh-radius-sm);
        transition: background .15s ease;
    }
    .mh-toprow:hover { background: rgba(255,255,255,.04); }
    .mh-toprow-rank {
        font-family: var(--mh-font-display);
        font-size: 14px;
        font-weight: 700;
        color: var(--mh-ink-400);
        text-align: center;
    }
    .mh-toprow-thumb {
        width: 36px; height: 50px;
        border-radius: 3px;
        overflow: hidden;
        background: var(--mh-rail);
    }
    .mh-toprow-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .mh-toprow-score {
        font-size: var(--mh-fs-xs);
        font-weight: 700;
        color: var(--mh-amber);
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    .mh-toprow-name {
        font-size: var(--mh-fs-sm);
        font-weight: 600;
        color: var(--mh-ink-100);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        min-width: 0;
    }
    .mh-toprow:hover .mh-toprow-name { color: var(--mh-accent); }

    /* tabs (Day/Week/Month style for top sections) */
    .mh-tabs { display: inline-flex; gap: 4px; }
    .mh-tab {
        font-size: var(--mh-fs-xs);
        padding: 4px 10px;
        border-radius: var(--mh-radius-pill);
        color: var(--mh-ink-300);
        font-weight: 600;
        background: rgba(255,255,255,.03);
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .mh-tab:hover { color: var(--mh-ink-100); background: rgba(255,255,255,.07); }
    .mh-tab.mh-tab--current {
        background: var(--mh-accent-soft);
        color: var(--mh-accent);
    }

    .mh-toptab-head .mh-link-more {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: var(--mh-fs-xs);
        font-weight: 700;
        color: var(--mh-accent);
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    .mh-toptab-head .mh-link-more:hover { color: var(--mh-accent-hi); }

    /* footer */
    .mh-foot {
        margin-block-start: 32px;
        background: #0c0d0f;
        border-block-start: 1px solid #1a1a1a;
        padding-block: 18px;
        font-size: var(--mh-fs-xs);
        color: var(--mh-ink-400);
    }
    .mh-foot-row {
        display: flex; align-items: center; justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }
    .mh-foot-brand { color: var(--mh-ink-200); font-weight: 600; }
    .mh-foot-brand a { color: var(--mh-accent); }
    .mh-foot-nav { display: flex; flex-wrap: wrap; gap: 14px; }
    .mh-foot-nav a { color: var(--mh-ink-300); }
    .mh-foot-nav a:hover { color: var(--mh-accent); }
    .mh-foot-disclaim {
        margin-block-start: 10px;
        max-width: 980px;
        line-height: 1.55;
    }

    /* ad banner wrap */
    .mh-ad {
        margin-block: 14px;
        text-align: center;
        padding-inline: var(--mh-gutter);
    }
    .mh-ad-tag {
        display: block;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--mh-ink-500);
        margin-block-end: 4px;
    }

    /* buttons */
    .mh-btn {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 6px;
        padding: 10px 18px;
        border-radius: var(--mh-radius-sm);
        font-weight: 700;
        font-size: var(--mh-fs-sm);
        text-transform: uppercase;
        letter-spacing: .04em;
        transition: background .15s, color .15s, transform .1s;
    }
    .mh-btn:active { transform: translateY(1px); }
    .mh-btn-primary {
        background: var(--mh-accent);
        color: #021629;
    }
    .mh-btn-primary:hover { background: var(--mh-accent-hi); color: #021629; }
    .mh-btn-ghost {
        background: rgba(255,255,255,.06);
        border: 1px solid var(--mh-divider);
        color: var(--mh-ink-100);
    }
    .mh-btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

    /* alerts */
    .mh-alert {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 14px;
        border-radius: var(--mh-radius-md);
        font-size: var(--mh-fs-sm);
        margin-block-end: 16px;
    }
    .mh-alert-good { background: rgba(77,209,163,.12); color: var(--mh-mint); border: 1px solid rgba(77,209,163,.32); }
    .mh-alert-bad  { background: rgba(239,90,111,.12); color: var(--mh-rose); border: 1px solid rgba(239,90,111,.32); }
}

/* ----- 06. Pages: detail (movie + series) -------------------------------- */
@layer pages {

    /* ============================================================
       Detail page — 2-column layout (main + sidebar)
       Wider bound on detail pages so the player feels bigger.
       ============================================================ */
    .mh-page-detail main { padding-inline: 0; }
    .mh-page-detail .mh-bound.mh-dpage {
        max-width: 1480px;
        padding-inline: clamp(8px, 1.4vw, 18px);
    }
    .mh-dpage {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 14px;
        padding-block: 14px;
    }
    @media (width < 1100px) {
        .mh-dpage { grid-template-columns: minmax(0, 1fr) 280px; }
    }
    @media (width < 980px) {
        .mh-dpage { grid-template-columns: 1fr; }
    }
    .mh-dmain {
        display: grid;
        gap: 14px;
        min-width: 0;
    }
    .mh-daside {
        background: #191c22;
        border-radius: 4px;
        padding: 14px;
        align-self: start;
    }

    /* Player frame */
    .mh-dplayer {
        background: #0a0a0c;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        aspect-ratio: 16 / 9;
    }
    .mh-dplayer-hd {
        position: absolute;
        inset-block-start: 10px;
        inset-inline-end: 10px;
        background: linear-gradient(135deg, #f97316, #ef4444);
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        padding: 3px 9px;
        border-radius: 3px;
        z-index: 5;
        letter-spacing: .04em;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    }
    .mh-dplayer-poster {
        position: absolute; inset: 0;
        cursor: pointer; z-index: 2;
    }
    .mh-dplayer-poster img { width: 100%; height: 100%; object-fit: cover; opacity: .65; }
    .mh-dplayer-poster::after {
        content: "";
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 90%);
    }
    .mh-dplayer-poster button {
        position: absolute;
        inset-block-start: 50%; inset-inline-start: 50%;
        transform: translate(-50%, -50%);
        width: 64px; height: 64px;
        background: rgba(255, 255, 255, .12);
        backdrop-filter: blur(4px);
        color: #fff;
        border: 2px solid rgba(255, 255, 255, .35);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        z-index: 3;
        transition: transform .15s ease, background .15s ease;
    }
    .mh-dplayer-poster button:hover {
        transform: translate(-50%, -50%) scale(1.08);
        background: rgba(255, 255, 255, .22);
    }
    .mh-dplayer-iframe { width: 100%; height: 100%; border: 0; display: block; }
    .mh-dplayer-load {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center; gap: 10px;
        background: rgba(10, 10, 12, .8);
        color: #cbd0d8;
        font-size: 13px;
        z-index: 4;
    }

    /* Server list panel */
    .mh-dsrv {
        background: #191c22;
        border-radius: 4px;
        padding: 14px;
    }
    .mh-dsrv-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
        margin-block-end: 12px;
    }
    .mh-dsrv-head h3 {
        font-family: var(--mh-font-body);
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        text-transform: none;
        letter-spacing: 0;
    }
    .mh-dsrv-actions {
        display: inline-flex; align-items: center; gap: 14px;
        font-size: 12px;
        color: #6f7480;
    }
    .mh-dsrv-actions a, .mh-dsrv-actions button {
        color: var(--mh-accent);
        background: transparent;
        border: 0;
        padding: 0;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }
    .mh-dsrv-actions a:hover, .mh-dsrv-actions button:hover { color: var(--mh-accent-hi); }
    .mh-dsrv-list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }
    @media (width < 980px) { .mh-dsrv-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    @media (width < 720px) { .mh-dsrv-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (width < 480px) { .mh-dsrv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .mh-dsrv-row {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        background: #22262e;
        border-radius: 4px;
        border: 0;
        cursor: pointer;
        text-align: start;
        transition: background .15s ease;
        width: 100%;
        color: inherit;
        min-width: 0;
    }
    .mh-dsrv-row:hover { background: #2a2f38; }
    .mh-dsrv-row.is-current,
    .mh-dsrv-row.mh-srv--current {
        background: #2a2f38;
        box-shadow: inset 0 0 0 1px var(--mh-accent);
    }
    .mh-dsrv-icon {
        width: 22px; height: 22px;
        display: inline-flex; align-items: center; justify-content: center;
        background: #10b981;
        color: #02201a;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .mh-dsrv-name {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mh-dsrv-row .mh-dsrv-meta { display: none; }
    .mh-dsrv-list > .mh-dsrv-meta {
        grid-column: 1 / -1;
        display: block;
        padding: 6px 4px;
        font-size: 12px;
        color: #6f7480;
    }

    /* Title / info card */
    .mh-dtitle {
        background: #191c22;
        border-radius: 4px;
        padding: 14px;
        display: grid;
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 16px;
    }
    @media (width < 520px) {
        .mh-dtitle { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
    }
    .mh-dtitle-poster {
        width: 100%; aspect-ratio: 2 / 3;
        border-radius: 4px;
        overflow: hidden;
        background: #22262e;
    }
    .mh-dtitle-poster img { width: 100%; height: 100%; object-fit: cover; }
    .mh-dtitle-info { min-width: 0; }
    .mh-dtitle-h1 {
        font-family: var(--mh-font-body);
        font-size: 22px;
        font-weight: 700;
        color: #fff;
        line-height: 1.2;
        margin-block-end: 4px;
        text-transform: none;
        letter-spacing: 0;
    }
    .mh-dtitle-tag {
        font-size: 13px;
        color: #9ca3af;
        margin-block-end: 8px;
        font-style: italic;
        line-height: 1.5;
    }
    .mh-dtitle-meta {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 4px 12px;
        font-size: 12px;
        color: #9ca3af;
        margin-block-end: 12px;
    }
    .mh-dtitle-meta a { color: #9ca3af; }
    .mh-dtitle-meta a:hover { color: var(--mh-accent); }
    .mh-dtitle-meta time { font-variant-numeric: tabular-nums; }
    .mh-dtitle-rate {
        display: flex; align-items: flex-start; gap: 14px;
        margin-block-end: 10px;
    }
    .mh-dtitle-score {
        width: 50px; height: 50px;
        background: #22262e;
        color: #fff;
        font-family: var(--mh-font-body);
        font-size: 22px;
        font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 4px;
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }
    .mh-dtitle-rate-side {
        display: grid; gap: 4px;
        min-width: 0;
    }
    .mh-dtitle-stars {
        display: inline-flex; align-items: center; gap: 1px;
        color: #f59e0b;
        font-size: 14px;
        line-height: 1;
    }
    .mh-dtitle-stars > span { display: inline-block; }
    .mh-dtitle-stars > span.mh-empty { color: #3a3f47; }
    .mh-dtitle-rate-side > .mh-dtitle-rate-extra {
        font-size: 11px;
        color: #6f7480;
        display: inline-flex; align-items: center; gap: 12px;
    }
    .mh-dtitle-rate-side > .mh-dtitle-rate-extra svg { color: #6f7480; }
    .mh-dtitle-genre {
        font-size: 13px;
        color: #cbd0d8;
        font-weight: 500;
    }
    .mh-dtitle-genre a { color: #cbd0d8; }
    .mh-dtitle-genre a:hover { color: var(--mh-accent); }

    /* Tab pill row */
    .mh-dtabs {
        display: inline-flex;
        gap: 4px;
    }
    .mh-dtab {
        display: inline-flex; align-items: center;
        padding: 7px 22px;
        background: var(--mh-accent);
        color: #fff;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        cursor: default;
        white-space: nowrap;
        line-height: 1.2;
        border: 1px solid var(--mh-accent);
    }
    .mh-dtab.mh-dtab-ghost {
        background: transparent;
        color: var(--mh-accent);
        border-color: var(--mh-accent);
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }
    .mh-dtab.mh-dtab-ghost:hover {
        background: var(--mh-accent);
        color: #fff;
    }

    /* Generic detail panel */
    .mh-dpanel {
        background: #191c22;
        border-radius: 4px;
        padding: 14px;
    }
    .mh-dpanel-head {
        font-family: var(--mh-font-body);
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        margin-block-end: 10px;
        text-transform: none;
        letter-spacing: 0;
    }
    .mh-dpanel p {
        font-size: 13px;
        color: #cbd0d8;
        line-height: 1.7;
        margin-block-end: 12px;
    }
    .mh-dpanel-img {
        width: 220px; max-width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 4px;
        overflow: hidden;
        background: #22262e;
    }
    .mh-dpanel-img img { width: 100%; height: 100%; object-fit: cover; }

    /* Metadata table */
    .mh-dtable {
        background: #191c22;
        border-radius: 4px;
        overflow: hidden;
        display: grid;
        gap: 1px;
        background-color: #22262e;
    }
    .mh-dtable-row {
        display: grid;
        grid-template-columns: 130px minmax(0, 1fr);
        background: #191c22;
        padding: 11px 14px;
        align-items: center;
        gap: 12px;
    }
    @media (width < 520px) {
        .mh-dtable-row { grid-template-columns: 100px minmax(0, 1fr); }
    }
    .mh-dtable-key {
        font-size: 12px;
        color: #6f7480;
        font-weight: 500;
    }
    .mh-dtable-val {
        font-size: 13px;
        color: #fff;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .mh-dtable-val .mh-stars-row {
        color: #f59e0b;
        display: inline-flex;
        gap: 1px;
    }
    .mh-dtable-val .mh-stars-row > span.mh-empty { color: #3a3f47; }
    .mh-dtable-val .mh-stars-num {
        background: var(--mh-accent);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 3px;
    }

    /* Similar titles */
    .mh-dsim {
        background: #191c22;
        border-radius: 4px;
        padding: 14px;
    }
    .mh-dsim-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
    }
    @media (width < 720px) { .mh-dsim-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    @media (width < 520px) { .mh-dsim-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .mh-dsim-card {
        display: block;
        aspect-ratio: 2 / 3;
        border-radius: 4px;
        overflow: hidden;
        background: #22262e;
    }
    .mh-dsim-card img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }
    .mh-dsim-card:hover img { transform: scale(1.05); }

    /* Sidebar — Most Popular */
    .mh-daside-head {
        font-family: var(--mh-font-body);
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        margin-block-end: 12px;
    }
    .mh-daside-list {
        display: grid; gap: 8px;
    }
    .mh-daside-row {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 6px;
        border-radius: 4px;
        transition: background .15s ease;
    }
    .mh-daside-row:hover { background: #22262e; }
    .mh-daside-thumb {
        width: 50px; aspect-ratio: 2 / 3;
        border-radius: 3px;
        overflow: hidden;
        background: #22262e;
    }
    .mh-daside-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .mh-daside-info {
        display: grid; gap: 4px; min-width: 0;
    }
    .mh-daside-name {
        font-size: 12px;
        font-weight: 600;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.3;
    }
    .mh-daside-row:hover .mh-daside-name { color: var(--mh-accent); }
    .mh-daside-meta {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 11px;
        color: #6f7480;
    }
    .mh-daside-rate {
        display: inline-flex; align-items: center; gap: 3px;
        color: #f59e0b;
        font-weight: 600;
    }

    /* Action buttons row (above title) — used for Play/Trailer on the new layout */
    .mh-dactions {
        display: flex; flex-wrap: nowrap; gap: 8px;
        margin-block-end: 12px;
        align-items: center;
    }

    /* Inline report form */
    .mh-dreport {
        background: #22262e;
        border-radius: 4px;
        padding: 12px 14px;
        margin-block-start: 12px;
        display: none;
    }
    .mh-dreport.mh-shown { display: block; }
    .mh-dreport form {
        display: flex; flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .mh-dreport select,
    .mh-dreport textarea {
        padding: 8px 10px;
        background: #191c22;
        border: 1px solid #2a2f38;
        color: #fff;
        border-radius: 4px;
        font-size: 13px;
        font-family: var(--mh-font-body);
    }
    .mh-dreport select { min-width: 200px; }
    .mh-dreport textarea {
        flex: 1; min-width: 200px;
        resize: vertical;
    }
    .mh-dreport textarea.mh-stash { display: none; }
    .mh-dreport button[type="submit"] {
        padding: 8px 16px;
        background: var(--mh-accent);
        color: #fff;
        border-radius: 4px;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .mh-dreport button[type="submit"]:hover { background: var(--mh-accent-hi); }

    /* Episodes panel (series detail) — fits the new card style */
    .mh-deps {
        background: #191c22;
        border-radius: 4px;
        padding: 14px;
    }
    .mh-deps-tools {
        display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        margin-block-end: 12px;
    }
    .mh-deps-tools select {
        padding: 8px 12px;
        background: #22262e;
        border: 1px solid #2a2f38;
        color: #fff;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 600;
    }
    .mh-deps-search {
        flex: 1; min-width: 180px; max-width: 280px;
        display: flex; align-items: center;
        background: #22262e;
        border: 1px solid #2a2f38;
        border-radius: 4px;
        padding: 0 10px;
    }
    .mh-deps-search svg { color: #6f7480; flex-shrink: 0; }
    .mh-deps-search input {
        flex: 1; padding: 8px 10px;
        background: transparent;
        border: 0; outline: 0;
        color: #fff;
        font-size: 13px;
    }
    .mh-deps-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 6px;
    }
    .mh-deps-list.mh-stash { display: none; }
    .mh-dep-row {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) 24px;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        background: #22262e;
        border-radius: 4px;
        border: 0;
        cursor: pointer;
        text-align: start;
        width: 100%;
        color: inherit;
        transition: background .15s ease;
    }
    .mh-dep-row:hover { background: #2a2f38; }
    .mh-dep-row.is-current { background: #2a2f38; box-shadow: inset 3px 0 0 var(--mh-accent); }
    .mh-dep-num {
        width: 24px; height: 24px;
        display: inline-flex; align-items: center; justify-content: center;
        background: #10b981;
        color: #02201a;
        border-radius: 50%;
        font-size: 11px;
        font-weight: 700;
    }
    .mh-dep-name {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mh-dep-tag { color: #6f7480; display: inline-flex; }
    .mh-dep-row[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
    .mh-dep-row[aria-disabled="true"] .mh-dep-num { background: #3a3f47; color: #6f7480; }
    .mh-dep-row[aria-disabled="true"] .mh-dep-name { color: #6f7480; font-style: italic; }

    /* Episode nav (prev/next) */
    .mh-depnav {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px;
        margin-block-start: 12px;
        padding: 10px 14px;
        background: #22262e;
        border-radius: 4px;
        font-size: 13px;
    }
    .mh-depnav.mh-stash { display: none; }
    .mh-depnav-tag {
        flex: 1;
        text-align: center;
        color: #fff;
        font-weight: 600;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mh-depnav-btn {
        padding: 6px 12px;
        background: #191c22;
        color: #cbd0d8;
        border-radius: 4px;
        font-weight: 600; font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .mh-depnav-btn:hover:not(:disabled) { background: var(--mh-accent); color: #fff; }
    .mh-depnav-btn:disabled { opacity: .35; cursor: not-allowed; }

    /* Trailer modal */
    .mh-detail-back {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
    }
    .mh-detail-back img {
        width: 100%; height: 100%;
        object-fit: cover;
        opacity: .35;
        filter: blur(4px);
        transform: scale(1.06);
    }
    .mh-detail-back::after {
        content: "";
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(10,20,36,.6) 0%, var(--mh-canvas) 100%);
    }
    .mh-detail-inner {
        position: relative;
        z-index: 2;
        padding-block: clamp(24px, 4vw, 48px);
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: clamp(20px, 3vw, 36px);
    }
    @media (width < 760px) {
        .mh-detail-inner { grid-template-columns: 1fr; }
    }
    .mh-detail-poster {
        width: 240px;
        max-width: 100%;
        aspect-ratio: 2 / 3;
        border-radius: var(--mh-radius-md);
        overflow: hidden;
        background: var(--mh-rail);
        box-shadow: var(--mh-shadow-md);
    }
    @media (width < 760px) {
        .mh-detail-poster {
            width: 180px;
            margin-inline: auto;
        }
    }
    .mh-detail-poster img { width: 100%; height: 100%; object-fit: cover; }
    .mh-detail-info { min-width: 0; }
    .mh-detail-pills {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 8px;
        margin-block-end: 8px;
    }
    .mh-detail-pill {
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 3px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        background: var(--mh-accent);
        color: #021629;
    }
    .mh-detail-pill.mh-pill-ghost {
        background: rgba(255,255,255,.08);
        color: var(--mh-ink-200);
    }
    .mh-detail-rate {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: var(--mh-fs-xs);
        font-weight: 700;
        color: var(--mh-amber);
    }
    .mh-detail-h1 {
        font-family: var(--mh-font-display);
        font-size: var(--mh-fs-h1);
        font-weight: 700;
        color: #fff;
        line-height: 1.05;
        margin-block-end: 6px;
        text-transform: uppercase;
        letter-spacing: .015em;
    }
    .mh-detail-sub {
        color: var(--mh-ink-400);
        font-size: var(--mh-fs-md);
        font-style: italic;
        margin-block-end: 14px;
    }
    .mh-detail-meta {
        display: flex; flex-wrap: wrap;
        gap: 6px 12px;
        font-size: var(--mh-fs-xs);
        color: var(--mh-ink-300);
        margin-block-end: 12px;
    }
    .mh-detail-meta a { color: var(--mh-ink-300); }
    .mh-detail-meta a:hover { color: var(--mh-accent); }
    .mh-detail-meta time { font-variant-numeric: tabular-nums; }
    .mh-detail-meta-dot { color: var(--mh-ink-500); }
    .mh-detail-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 14px; }
    .mh-detail-genre {
        padding: 4px 10px;
        font-size: var(--mh-fs-xs);
        background: rgba(255,255,255,.05);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-pill);
        color: var(--mh-ink-200);
        font-weight: 600;
    }
    .mh-detail-genre:hover { background: var(--mh-accent-soft); color: var(--mh-accent); border-color: var(--mh-accent); }
    .mh-detail-desc {
        font-size: var(--mh-fs-md);
        color: var(--mh-ink-200);
        line-height: 1.7;
        margin-block-end: 16px;
        max-width: 75ch;
    }
    .mh-detail-actions {
        display: flex; flex-wrap: wrap; gap: 10px;
        margin-block-end: 18px;
    }
    .mh-detail-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 24px;
        margin-block-end: 8px;
    }
    @media (width < 600px) { .mh-detail-grid { grid-template-columns: 1fr; } }
    .mh-detail-fact {
        display: flex; flex-direction: column; gap: 2px;
        font-size: var(--mh-fs-xs);
    }
    .mh-detail-fact dt {
        color: var(--mh-ink-500);
        text-transform: uppercase;
        letter-spacing: .06em;
        font-weight: 600;
    }
    .mh-detail-fact dd {
        color: var(--mh-ink-100);
        margin: 0;
    }
    .mh-detail-fact a { color: var(--mh-ink-200); }
    .mh-detail-fact a:hover { color: var(--mh-accent); }

    /* player area (inline on detail page) */
    .mh-player {
        margin-block-start: 24px;
        padding-block: 24px;
        background: var(--mh-board);
        border-block: 1px solid var(--mh-divider);
    }
    .mh-player-frame {
        position: relative;
        aspect-ratio: 16 / 9;
        background: #000;
        border-radius: var(--mh-radius-md);
        overflow: hidden;
        box-shadow: var(--mh-shadow-lg);
    }
    .mh-player-poster {
        position: absolute; inset: 0;
        cursor: pointer;
        z-index: 2;
    }
    .mh-player-poster img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
    .mh-player-poster::after {
        content: "";
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 90%);
    }
    .mh-player-poster button {
        position: absolute;
        inset-block-start: 50%; inset-inline-start: 50%;
        transform: translate(-50%, -50%);
        width: 76px; height: 76px;
        background: var(--mh-accent);
        color: #021629;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        z-index: 3;
        box-shadow: 0 12px 32px rgba(0,0,0,.5);
        transition: transform .15s ease, background .15s ease;
    }
    .mh-player-poster button:hover {
        transform: translate(-50%, -50%) scale(1.06);
        background: var(--mh-accent-hi);
    }
    .mh-player-iframe {
        width: 100%; height: 100%;
        border: 0;
        display: block;
    }
    .mh-player-load {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center; gap: 10px;
        background: rgba(2,8,20,.75);
        color: var(--mh-ink-200);
        font-size: var(--mh-fs-sm);
        z-index: 4;
    }
    .mh-spinner {
        width: 22px; height: 22px;
        border: 2px solid var(--mh-divider);
        border-top-color: var(--mh-accent);
        border-radius: 50%;
        animation: mh-spin .7s linear infinite;
    }
    @keyframes mh-spin { to { transform: rotate(360deg); } }

    .mh-srvbar {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 6px;
        margin-block-start: 14px;
    }
    .mh-srvbar-hint {
        font-size: var(--mh-fs-xs);
        color: var(--mh-ink-400);
        margin-inline-end: 6px;
        display: inline-flex; align-items: center; gap: 6px;
    }
    .mh-srvbtn {
        font-size: var(--mh-fs-xs);
        padding: 7px 13px;
        border-radius: var(--mh-radius-sm);
        background: rgba(255,255,255,.04);
        border: 1px solid var(--mh-divider);
        color: var(--mh-ink-200);
        font-weight: 600;
    }
    .mh-srvbtn:hover { background: rgba(255,255,255,.09); color: var(--mh-ink-100); }
    .mh-srvbtn.mh-srv--current {
        background: var(--mh-accent);
        color: #021629;
        border-color: var(--mh-accent);
    }

    .mh-epnav {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px;
        margin-block-start: 12px;
        padding: 10px 14px;
        background: rgba(255,255,255,.03);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-md);
        font-size: var(--mh-fs-sm);
    }
    .mh-epnav-tag {
        color: var(--mh-ink-100); font-weight: 600;
        text-align: center; flex: 1;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mh-epnav-btn {
        padding: 6px 12px;
        background: rgba(255,255,255,.05);
        color: var(--mh-ink-200);
        border-radius: var(--mh-radius-sm);
        font-weight: 600; font-size: var(--mh-fs-xs);
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    .mh-epnav-btn:hover:not(:disabled) { background: var(--mh-accent); color: #021629; }
    .mh-epnav-btn:disabled { opacity: .4; cursor: not-allowed; }

    .mh-report {
        margin-block-start: 14px;
        padding-block-start: 14px;
        border-block-start: 1px solid var(--mh-divider);
    }
    .mh-report-toggle {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 12px;
        background: rgba(239,90,111,.1);
        color: var(--mh-rose);
        border: 1px solid rgba(239,90,111,.3);
        border-radius: var(--mh-radius-sm);
        font-size: var(--mh-fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .mh-report-toggle:hover { background: rgba(239,90,111,.18); }
    .mh-report-form {
        display: none;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        margin-block-start: 12px;
    }
    .mh-report-form.mh-shown { display: flex; }
    .mh-report-form select,
    .mh-report-form textarea {
        padding: 8px 10px;
        background: var(--mh-card);
        border: 1px solid var(--mh-divider);
        color: var(--mh-ink-100);
        border-radius: var(--mh-radius-sm);
        font-size: var(--mh-fs-sm);
    }
    .mh-report-form select { min-width: 200px; }
    .mh-report-form textarea {
        flex: 1; min-width: 220px;
        resize: vertical;
        font-family: var(--mh-font-body);
    }
    .mh-report-form textarea.mh-stash { display: none; }
    .mh-report-form button {
        padding: 8px 16px;
        background: var(--mh-accent);
        color: #021629;
        border-radius: var(--mh-radius-sm);
        font-weight: 700;
        font-size: var(--mh-fs-xs);
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .mh-report-form button:hover { background: var(--mh-accent-hi); }

    /* episodes section */
    .mh-eps {
        margin-block-start: 24px;
    }
    .mh-eps-tools {
        display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
        margin-block-end: 14px;
    }
    .mh-eps-tools select {
        padding: 8px 12px;
        background: var(--mh-card);
        border: 1px solid var(--mh-divider);
        color: var(--mh-ink-100);
        border-radius: var(--mh-radius-sm);
        font-size: var(--mh-fs-sm);
        font-weight: 600;
    }
    .mh-eps-search {
        flex: 1; min-width: 180px; max-width: 320px;
        display: flex; align-items: center;
        background: var(--mh-card);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-sm);
        padding: 0 10px;
    }
    .mh-eps-search svg { color: var(--mh-ink-400); flex-shrink: 0; }
    .mh-eps-search input {
        flex: 1; padding: 8px 10px;
        background: transparent;
        border: 0; outline: 0;
        color: var(--mh-ink-100);
        font-size: var(--mh-fs-sm);
    }
    .mh-eps-list { display: grid; gap: 4px; }
    .mh-eps-list.mh-stash { display: none; }
    .mh-ep-row {
        display: grid;
        grid-template-columns: 36px 1fr 28px;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        background: var(--mh-board);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-sm);
        text-align: start;
        transition: border-color .15s, background .15s;
        cursor: pointer;
        color: inherit;
        width: 100%;
    }
    .mh-ep-row:hover {
        border-color: var(--mh-accent);
        background: rgba(62,166,255,.06);
    }
    .mh-ep-row.is-current {
        border-color: var(--mh-accent);
        background: var(--mh-accent-soft);
    }
    .mh-ep-num {
        font-family: var(--mh-font-display);
        font-size: 16px;
        font-weight: 700;
        color: var(--mh-accent);
        text-align: center;
    }
    .mh-ep-name {
        font-size: var(--mh-fs-sm);
        font-weight: 600;
        color: var(--mh-ink-100);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mh-ep-tag {
        display: flex; align-items: center; justify-content: center;
        color: var(--mh-ink-400);
    }
    .mh-ep-row[aria-disabled="true"] {
        opacity: .55;
        cursor: not-allowed;
        background: transparent;
    }
    .mh-ep-row[aria-disabled="true"]:hover {
        border-color: var(--mh-divider);
        background: transparent;
    }
    .mh-ep-row[aria-disabled="true"] .mh-ep-num { color: var(--mh-ink-500); }
    .mh-ep-row[aria-disabled="true"] .mh-ep-name { color: var(--mh-ink-400); font-style: italic; }

    /* trailer modal */
    .mh-trailer-veil {
        position: fixed; inset: 0;
        background: rgba(2,8,20,.85);
        backdrop-filter: blur(8px);
        z-index: 200;
        display: none;
        align-items: center; justify-content: center;
        padding: 20px;
    }
    .mh-trailer-veil.mh-shown { display: flex; }
    .mh-trailer-frame {
        position: relative;
        width: min(960px, 100%);
        aspect-ratio: 16 / 9;
        background: #000;
        border-radius: var(--mh-radius-md);
        overflow: hidden;
        box-shadow: var(--mh-shadow-lg);
    }
    .mh-trailer-frame iframe { width: 100%; height: 100%; border: 0; }
    .mh-trailer-x {
        position: absolute;
        inset-block-start: -36px; inset-inline-end: 0;
        color: var(--mh-ink-100);
        font-size: var(--mh-fs-sm);
        font-weight: 600;
        display: inline-flex; align-items: center; gap: 6px;
    }

    /* INDEX (SEO landing) */
    .mh-idx-hero {
        position: relative;
        padding-block: clamp(32px, 6vw, 72px);
        background:
            radial-gradient(ellipse at 20% 0%, rgba(62,166,255,.18), transparent 60%),
            radial-gradient(ellipse at 80% 100%, rgba(124,80,210,.18), transparent 55%),
            var(--mh-canvas);
        border-block-end: 1px solid var(--mh-divider);
        text-align: center;
    }
    .mh-idx-h1 {
        font-family: var(--mh-font-display);
        font-size: clamp(32px, 5vw, 56px);
        line-height: 1.05;
        max-width: 26ch;
        margin: 0 auto 12px;
        text-transform: uppercase;
        letter-spacing: .015em;
    }
    .mh-idx-h1 b { color: var(--mh-accent); font-weight: 700; }
    .mh-idx-sub {
        max-width: 60ch;
        margin: 0 auto 22px;
        color: var(--mh-ink-300);
        font-size: var(--mh-fs-lg);
    }
    .mh-idx-search {
        max-width: 560px;
        margin: 0 auto;
        display: flex;
        gap: 6px;
        background: rgba(2,8,20,.5);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-pill);
        padding: 4px;
    }
    .mh-idx-search:focus-within { border-color: var(--mh-accent); }
    .mh-idx-search input {
        flex: 1; min-width: 0;
        padding: 10px 16px;
        background: transparent;
        border: 0; outline: 0;
        color: var(--mh-ink-100);
        font-size: var(--mh-fs-md);
    }
    .mh-idx-search button {
        padding: 0 22px;
        background: var(--mh-accent);
        color: #021629;
        border-radius: var(--mh-radius-pill);
        font-weight: 700;
        text-transform: uppercase;
        font-size: var(--mh-fs-sm);
        letter-spacing: .04em;
    }
    .mh-idx-quick {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
        margin-block-start: 18px;
    }
    .mh-idx-quick a {
        padding: 6px 14px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-pill);
        color: var(--mh-ink-200);
        font-size: var(--mh-fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .mh-idx-quick a:hover { background: var(--mh-accent-soft); color: var(--mh-accent); }

    .mh-idx-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-block: 22px;
    }
    @media (width < 700px) { .mh-idx-stats { grid-template-columns: repeat(2, 1fr); } }
    .mh-idx-stat {
        background: var(--mh-board);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-md);
        padding: 16px 14px;
        text-align: center;
    }
    .mh-idx-stat-num {
        font-family: var(--mh-font-display);
        font-size: clamp(22px, 2.6vw, 30px);
        color: var(--mh-accent);
        font-weight: 700;
        line-height: 1;
    }
    .mh-idx-stat-tag {
        display: block;
        margin-block-start: 4px;
        font-size: var(--mh-fs-xs);
        color: var(--mh-ink-400);
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .mh-idx-hot {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    @media (width < 700px) { .mh-idx-hot { grid-template-columns: 1fr; } }
    .mh-idx-hot a {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 14px;
        background: var(--mh-board);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-sm);
    }
    .mh-idx-hot a:hover { border-color: var(--mh-accent); background: var(--mh-card); }
    .mh-idx-hot-rank {
        font-family: var(--mh-font-display);
        font-size: 22px;
        font-weight: 700;
        color: var(--mh-accent);
        min-width: 24px;
    }
    .mh-idx-hot-name { flex: 1; color: var(--mh-ink-100); font-weight: 600; font-size: var(--mh-fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mh-idx-hot-mark {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: var(--mh-fs-xs);
        color: var(--mh-ink-400);
    }
    .mh-idx-hot-mark span.mh-idx-hot-rate {
        color: var(--mh-amber);
        font-weight: 700;
    }

    .mh-idx-genres {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 8px;
    }
    .mh-idx-genres a {
        padding: 12px;
        text-align: center;
        background: var(--mh-board);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-sm);
        color: var(--mh-ink-100);
        font-weight: 600;
        font-size: var(--mh-fs-sm);
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .mh-idx-genres a:hover { border-color: var(--mh-accent); color: var(--mh-accent); }

    .mh-idx-features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
    }
    .mh-idx-feature {
        padding: 18px;
        background: var(--mh-board);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-md);
    }
    .mh-idx-feature-num {
        font-family: var(--mh-font-display);
        font-size: 36px;
        font-weight: 700;
        color: var(--mh-accent);
        line-height: 1;
    }
    .mh-idx-feature h3 {
        font-size: var(--mh-fs-lg);
        margin-block: 8px 6px;
        color: var(--mh-ink-100);
        text-transform: uppercase;
        letter-spacing: .03em;
    }
    .mh-idx-feature p {
        font-size: var(--mh-fs-sm);
        color: var(--mh-ink-300);
        line-height: 1.6;
    }

    .mh-idx-faq { max-width: 880px; margin: 0 auto; }
    .mh-idx-faq details {
        background: var(--mh-board);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-sm);
        margin-block-end: 8px;
    }
    .mh-idx-faq summary {
        cursor: pointer;
        list-style: none;
        padding: 14px 16px;
        font-size: var(--mh-fs-md);
        font-weight: 600;
        color: var(--mh-ink-100);
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    .mh-idx-faq summary::-webkit-details-marker { display: none; }
    .mh-idx-faq summary::after {
        content: "+";
        font-size: 22px;
        color: var(--mh-accent);
        font-weight: 400;
        transition: transform .2s;
    }
    .mh-idx-faq details[open] summary::after { content: "−"; }
    .mh-idx-faq p {
        padding: 0 16px 14px;
        font-size: var(--mh-fs-sm);
        color: var(--mh-ink-300);
        line-height: 1.7;
    }
    .mh-idx-faq p a { color: var(--mh-accent); }

    .mh-idx-prose {
        max-width: 980px; margin: 0 auto;
        font-size: var(--mh-fs-md);
        line-height: 1.75;
        color: var(--mh-ink-300);
    }
    .mh-idx-prose h2 {
        font-size: var(--mh-fs-h2);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-block: 18px 8px;
        color: var(--mh-ink-100);
    }
    .mh-idx-prose ul {
        list-style: disc;
        padding-inline-start: 22px;
    }
    .mh-idx-prose li { margin-block-end: 4px; }
    .mh-idx-prose a { color: var(--mh-accent); }

    /* ============================================================
       Cinematic landing (index page) — dark, centered, animated
       ============================================================ */
    .mh-cine {
        position: relative;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
        padding: clamp(32px, 6vw, 80px) 20px;
        isolation: isolate;
    }
    /* layered animated background */
    .mh-cine-bg {
        position: absolute; inset: 0;
        z-index: -3;
        background:
            radial-gradient(60% 80% at 50% -10%, #16202e 0%, transparent 60%),
            radial-gradient(50% 60% at 100% 100%, #1a1226 0%, transparent 55%),
            #050608;
    }
    .mh-cine-orbs { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
    .mh-cine-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(70px);
        opacity: .5;
        will-change: transform;
    }
    .mh-cine-orb.o1 {
        width: 46vw; height: 46vw;
        background: radial-gradient(circle, rgba(62,166,255,.55), transparent 70%);
        top: -10vw; left: -8vw;
        animation: mh-orb-a 18s ease-in-out infinite;
    }
    .mh-cine-orb.o2 {
        width: 38vw; height: 38vw;
        background: radial-gradient(circle, rgba(168,85,247,.45), transparent 70%);
        bottom: -12vw; right: -6vw;
        animation: mh-orb-b 22s ease-in-out infinite;
    }
    .mh-cine-orb.o3 {
        width: 30vw; height: 30vw;
        background: radial-gradient(circle, rgba(16,185,129,.30), transparent 70%);
        top: 40%; left: 55%;
        animation: mh-orb-c 26s ease-in-out infinite;
    }
    @keyframes mh-orb-a {
        0%,100% { transform: translate(0,0) scale(1); }
        50% { transform: translate(8vw, 6vh) scale(1.15); }
    }
    @keyframes mh-orb-b {
        0%,100% { transform: translate(0,0) scale(1); }
        50% { transform: translate(-7vw, -5vh) scale(1.1); }
    }
    @keyframes mh-orb-c {
        0%,100% { transform: translate(0,0) scale(1); }
        50% { transform: translate(-5vw, 8vh) scale(1.2); }
    }
    /* drifting poster collage behind everything */
    .mh-cine-collage {
        position: absolute; inset: 0;
        z-index: -1;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        padding: 10px;
        opacity: .12;
        transform: scale(1.1);
        animation: mh-collage-drift 40s linear infinite alternate;
        pointer-events: none;
    }
    .mh-cine-collage img {
        width: 100%; aspect-ratio: 2/3; object-fit: cover;
        border-radius: 6px;
        filter: grayscale(.3);
    }
    @keyframes mh-collage-drift {
        0%   { transform: scale(1.1) translateY(0); }
        100% { transform: scale(1.1) translateY(-40px); }
    }
    .mh-cine::after {
        content: "";
        position: absolute; inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, rgba(5,6,8,.55) 0%, rgba(5,6,8,.82) 60%, #050608 100%);
        pointer-events: none;
    }

    /* centered content */
    .mh-cine-inner {
        max-width: 760px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
    }
    .mh-cine-logo {
        opacity: 0;
        transform: translateY(16px);
        animation: mh-cine-rise .9s cubic-bezier(.2,.7,.2,1) .1s forwards;
    }
    .mh-cine-logo img {
        height: clamp(56px, 9vw, 96px);
        width: auto;
        filter: drop-shadow(0 8px 28px rgba(62,166,255,.35));
    }
    .mh-cine-tagline {
        font-family: var(--mh-font-display);
        font-size: clamp(26px, 5vw, 52px);
        line-height: 1.05;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: .02em;
        max-width: 18ch;
        opacity: 0;
        transform: translateY(16px);
        animation: mh-cine-rise .9s cubic-bezier(.2,.7,.2,1) .25s forwards;
    }
    .mh-cine-tagline b { color: var(--mh-accent); }
    .mh-cine-sub {
        font-size: clamp(14px, 1.6vw, 17px);
        color: var(--mh-ink-300);
        max-width: 52ch;
        line-height: 1.6;
        opacity: 0;
        transform: translateY(16px);
        animation: mh-cine-rise .9s cubic-bezier(.2,.7,.2,1) .4s forwards;
    }
    @keyframes mh-cine-rise {
        to { opacity: 1; transform: translateY(0); }
    }

    /* search */
    .mh-cine-search {
        width: min(560px, 100%);
        display: flex; gap: 8px;
        background: rgba(12,16,24,.7);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: var(--mh-radius-pill);
        padding: 6px;
        backdrop-filter: blur(10px);
        opacity: 0;
        transform: translateY(16px);
        animation: mh-cine-rise .9s cubic-bezier(.2,.7,.2,1) .5s forwards;
    }
    .mh-cine-search:focus-within { border-color: var(--mh-accent); box-shadow: 0 0 0 3px rgba(62,166,255,.18); }
    .mh-cine-search input {
        flex: 1; min-width: 0;
        background: transparent; border: 0; outline: 0;
        padding: 10px 18px;
        color: #fff; font-size: 15px;
    }
    .mh-cine-search input::placeholder { color: var(--mh-ink-400); }
    .mh-cine-search button {
        padding: 0 24px;
        background: var(--mh-accent); color: #021629;
        border-radius: var(--mh-radius-pill);
        font-weight: 700; font-size: 13px;
        text-transform: uppercase; letter-spacing: .05em;
        transition: background .15s ease;
    }
    .mh-cine-search button:hover { background: var(--mh-accent-hi); }

    /* nav buttons (Home / Movies / TV Shows) */
    .mh-cine-nav {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
        opacity: 0;
        transform: translateY(16px);
        animation: mh-cine-rise .9s cubic-bezier(.2,.7,.2,1) .62s forwards;
    }
    .mh-cine-btn {
        display: inline-flex; align-items: center; gap: 9px;
        padding: 13px 28px;
        border-radius: var(--mh-radius-pill);
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        border: 1px solid rgba(255,255,255,.16);
        background: rgba(255,255,255,.05);
        color: #fff;
        backdrop-filter: blur(6px);
        transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .mh-cine-btn svg { width: 18px; height: 18px; }
    .mh-cine-btn:hover {
        transform: translateY(-3px);
        background: rgba(255,255,255,.1);
        border-color: rgba(255,255,255,.3);
        color: #fff;
    }
    .mh-cine-btn.mh-cine-btn-primary {
        background: var(--mh-accent);
        border-color: var(--mh-accent);
        color: #021629;
        box-shadow: 0 8px 26px rgba(62,166,255,.32);
    }
    .mh-cine-btn.mh-cine-btn-primary:hover {
        background: var(--mh-accent-hi);
        box-shadow: 0 12px 32px rgba(62,166,255,.45);
        color: #021629;
    }

    /* stat strip */
    .mh-cine-stats {
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: clamp(20px, 5vw, 56px);
        margin-block-start: 8px;
        opacity: 0;
        transform: translateY(16px);
        animation: mh-cine-rise .9s cubic-bezier(.2,.7,.2,1) .74s forwards;
    }
    .mh-cine-stat { display: grid; gap: 2px; }
    .mh-cine-stat-num {
        font-family: var(--mh-font-display);
        font-size: clamp(22px, 3vw, 32px);
        color: #fff;
        font-weight: 700;
        line-height: 1;
    }
    .mh-cine-stat-tag {
        font-size: 11px;
        color: var(--mh-ink-400);
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    /* scroll cue */
    .mh-cine-cue {
        position: absolute;
        inset-block-end: 20px; inset-inline: 0;
        display: flex; justify-content: center;
        color: var(--mh-ink-400);
        animation: mh-cue-bob 1.8s ease-in-out infinite;
        opacity: 0;
        animation: mh-cine-rise .9s ease 1s forwards, mh-cue-bob 1.8s ease-in-out 1.6s infinite;
    }
    @keyframes mh-cue-bob {
        0%,100% { transform: translateY(0); }
        50% { transform: translateY(6px); }
    }

    /* lower content section on the landing (genres / faq / prose) */
    .mh-cine-lower {
        background: #050608;
        padding-block: clamp(28px, 4vw, 48px);
        border-block-start: 1px solid #14181f;
    }

    @media (prefers-reduced-motion: reduce) {
        .mh-cine-logo, .mh-cine-tagline, .mh-cine-sub, .mh-cine-search,
        .mh-cine-nav, .mh-cine-stats, .mh-cine-cue {
            opacity: 1; transform: none; animation: none;
        }
        .mh-cine-orb, .mh-cine-collage { animation: none; }
    }

    /* list (browse) page */
    .mh-listhead {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
        gap: 14px;
        margin-block: 18px 14px;
    }
    .mh-listhead h1 {
        font-size: var(--mh-fs-h2);
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 700;
    }
    .mh-listhead .mh-strip-count {
        font-size: var(--mh-fs-sm);
        color: var(--mh-ink-400);
        font-family: var(--mh-font-body);
    }

    .mh-filterbar {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
        margin-block-end: 16px;
    }
    .mh-filter-drop {
        position: relative;
    }
    .mh-filter-trigger {
        display: inline-flex; align-items: center;
        gap: 8px;
        padding: 9px 12px;
        background: #131f33;
        border: 1px solid #1f2a3e;
        border-radius: 6px;
        color: #d0d4dc;
        font-family: var(--mh-font-body);
        font-size: 13px;
        line-height: 1;
        font-weight: 500;
        cursor: pointer;
        min-width: 140px;
        transition: border-color .15s ease, background .15s ease, color .15s ease;
    }
    .mh-filter-trigger:hover {
        border-color: var(--mh-accent);
        color: #fff;
    }
    .mh-filter-drop.is-open .mh-filter-trigger {
        border-color: var(--mh-accent);
        background: rgba(62, 166, 255, .08);
        color: #fff;
    }
    .mh-filter-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #6f7480;
    }
    .mh-filter-value {
        flex: 1;
        text-align: end;
        font-weight: 600;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mh-filter-caret {
        color: #6f7480;
        flex-shrink: 0;
        transition: transform .2s ease, color .15s ease;
    }
    .mh-filter-drop.is-open .mh-filter-caret {
        color: var(--mh-accent);
        transform: rotate(180deg);
    }
    .mh-filter-pop-menu {
        position: absolute;
        inset-block-start: calc(100% + 6px);
        inset-inline-start: 0;
        z-index: 30;
        min-width: 100%;
        max-width: 240px;
        background: #161616;
        border: 1px solid #262626;
        border-radius: 6px;
        padding: 6px;
        box-shadow: var(--mh-shadow-md);
        display: none;
    }
    .mh-filter-drop.is-open .mh-filter-pop-menu {
        display: grid;
        gap: 1px;
    }
    .mh-filter-pop-menu--scroll {
        max-height: 280px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #2a2a2a transparent;
    }
    .mh-filter-pop-menu--scroll::-webkit-scrollbar { width: 6px; }
    .mh-filter-pop-menu--scroll::-webkit-scrollbar-track { background: transparent; }
    .mh-filter-pop-menu--scroll::-webkit-scrollbar-thumb {
        background: #2a2a2a;
        border-radius: 3px;
    }
    .mh-filter-pop-item {
        display: block;
        padding: 8px 12px;
        font-size: 13px;
        color: #d0d4dc;
        border-radius: 4px;
        font-weight: 500;
        white-space: nowrap;
        transition: background .15s ease, color .15s ease;
    }
    .mh-filter-pop-item:hover {
        background: #1f1f1f;
        color: #fff;
    }
    .mh-filter-pop-item.is-current {
        background: rgba(62, 166, 255, .12);
        color: var(--mh-accent);
    }

    /* pagination — segmented pill bar */
    .pagination {
        margin-block: 28px;
        text-align: center;
    }
    .pagination__list {
        display: inline-flex; flex-wrap: wrap; justify-content: center;
        align-items: center;
        gap: 6px;
        list-style: none;
        padding: 6px;
        margin: 0 auto;
        background: #15181f;
        border: 1px solid #232833;
        border-radius: var(--mh-radius-pill);
        box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
    }
    .pagination__item { display: inline-flex; }
    .pagination__link {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 40px; height: 40px;
        padding: 0 14px;
        background: transparent;
        border: 0;
        color: var(--mh-ink-300);
        border-radius: var(--mh-radius-pill);
        font-family: var(--mh-font-display);
        font-weight: 600;
        font-size: 15px;
        letter-spacing: .02em;
        position: relative;
        transition: color .18s ease, background .18s ease, transform .18s ease;
    }
    .pagination__link:hover {
        color: #fff;
        background: rgba(255, 255, 255, .06);
    }
    /* prev / next arrows (first & last links rendered with &laquo; / &raquo;) */
    .pagination__item:first-child .pagination__link[aria-label],
    .pagination__item:last-child .pagination__link[aria-label] {
        color: var(--mh-accent);
        font-size: 18px;
    }
    .pagination__item:first-child .pagination__link[aria-label]:hover,
    .pagination__item:last-child .pagination__link[aria-label]:hover {
        background: rgba(62, 166, 255, .14);
        color: var(--mh-accent-hi);
    }
    .pagination__link--active {
        background: linear-gradient(135deg, var(--mh-accent), #2f7fd0);
        color: #021629;
        box-shadow: 0 4px 14px rgba(62, 166, 255, .4);
        transform: translateY(-1px);
        pointer-events: none;
    }
    .pagination__link--active:hover {
        background: linear-gradient(135deg, var(--mh-accent), #2f7fd0);
        color: #021629;
    }
    .pagination__ellipsis {
        display: inline-flex; align-items: flex-end; justify-content: center;
        min-width: 28px; height: 40px;
        padding-block-end: 10px;
        color: #4f5663;
        font-size: 16px;
        letter-spacing: 2px;
    }
    @media (width < 520px) {
        .pagination__link { min-width: 36px; height: 36px; padding: 0 10px; font-size: 14px; }
        .pagination__list { gap: 3px; padding: 5px; }
    }

    /* search */
    .mh-search-page { padding-block-start: 18px; }
    .mh-search-bar {
        display: flex; flex-direction: column; align-items: center;
        gap: 12px;
        margin-block: 18px 6px;
    }
    .mh-search-hero {
        text-align: center;
        padding-block: clamp(32px, 5vw, 60px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .mh-search-hero svg {
        color: var(--mh-ink-500);
        margin-block-end: 12px;
    }
    .mh-search-hero h1 {
        font-size: var(--mh-fs-h2);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-block-end: 6px;
    }
    .mh-search-hero p {
        color: var(--mh-ink-300);
        margin-block-end: 18px;
    }
    .mh-search-block {
        width: min(560px, 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
    .mh-search-form {
        width: 100%;
        display: flex;
        gap: 6px;
        background: var(--mh-board);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-pill);
        padding: 4px;
    }
    .mh-search-form:focus-within {
        border-color: var(--mh-accent);
        box-shadow: 0 0 0 3px rgba(62, 166, 255, .15);
    }
    .mh-search-form input {
        flex: 1; min-width: 0;
        padding: 10px 18px;
        background: transparent;
        border: 0; outline: 0;
        color: var(--mh-ink-100);
        font-size: var(--mh-fs-md);
    }
    .mh-search-form input::placeholder { color: var(--mh-ink-400); }
    .mh-search-form button {
        padding: 0 22px;
        background: var(--mh-accent);
        color: #021629;
        border-radius: var(--mh-radius-pill);
        font-weight: 700;
        text-transform: uppercase;
        font-size: var(--mh-fs-xs);
        letter-spacing: .04em;
        white-space: nowrap;
        transition: background .15s ease;
    }
    .mh-search-form button:hover { background: var(--mh-accent-hi); }
    .mh-search-types {
        display: flex; justify-content: center; gap: 6px;
        margin-block-start: 14px;
    }
    .mh-search-type {
        padding: 5px 12px;
        background: var(--mh-board);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-pill);
        font-size: var(--mh-fs-xs);
        color: var(--mh-ink-300);
        font-weight: 600;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .mh-search-type input { display: none; }
    .mh-search-type.is-current {
        background: var(--mh-accent-soft);
        color: var(--mh-accent);
        border-color: var(--mh-accent);
    }
    .mh-search-summary {
        margin-block: 14px;
        font-size: var(--mh-fs-sm);
        color: var(--mh-ink-300);
    }
    .mh-search-summary strong { color: var(--mh-ink-100); }
    .mh-search-empty {
        text-align: center;
        padding-block: 48px;
        color: var(--mh-ink-300);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .mh-search-empty svg {
        color: #3a3f47;
        margin-block-end: 8px;
    }
    .mh-search-empty p:first-of-type {
        font-size: var(--mh-fs-lg);
        color: var(--mh-ink-100);
        margin-block-end: 2px;
    }
    .mh-search-empty .mh-search-cta {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
        margin-block-start: 16px;
    }

    /* request page */
    .mh-rq {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 28px;
        margin-block: 24px;
    }
    @media (width < 760px) { .mh-rq { grid-template-columns: 1fr; } }
    .mh-rq-info {
        background: var(--mh-board);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-md);
        padding: 22px;
    }
    .mh-rq-info h1 {
        font-size: var(--mh-fs-h2);
        text-transform: uppercase;
        letter-spacing: .03em;
        margin-block-end: 6px;
    }
    .mh-rq-info p { color: var(--mh-ink-300); font-size: var(--mh-fs-sm); margin-block-end: 14px; }
    .mh-rq-info ol {
        list-style: none;
        counter-reset: stp;
        display: grid; gap: 8px;
        margin-block-start: 8px;
    }
    .mh-rq-info ol li {
        counter-increment: stp;
        padding-inline-start: 28px;
        position: relative;
        font-size: var(--mh-fs-sm);
        color: var(--mh-ink-200);
    }
    .mh-rq-info ol li::before {
        content: counter(stp);
        position: absolute;
        inset-inline-start: 0; inset-block-start: 0;
        width: 20px; height: 20px;
        background: var(--mh-accent);
        color: #021629;
        border-radius: 50%;
        font-size: 11px;
        font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .mh-rq-form {
        background: var(--mh-board);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-md);
        padding: 22px;
        display: grid;
        gap: 12px;
    }
    .mh-rq-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    @media (width < 520px) { .mh-rq-row { grid-template-columns: 1fr; } }
    .mh-fld { display: grid; gap: 4px; }
    .mh-fld label {
        font-size: var(--mh-fs-xs);
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--mh-ink-300);
        font-weight: 700;
    }
    .mh-fld input,
    .mh-fld select,
    .mh-fld textarea {
        padding: 10px 12px;
        background: var(--mh-card);
        border: 1px solid var(--mh-divider);
        color: var(--mh-ink-100);
        border-radius: var(--mh-radius-sm);
        font-size: var(--mh-fs-sm);
        font-family: var(--mh-font-body);
    }
    .mh-fld input:focus,
    .mh-fld select:focus,
    .mh-fld textarea:focus {
        outline: 0;
        border-color: var(--mh-accent);
    }

    /* 404 */
    .mh-err {
        text-align: center;
        padding-block: clamp(40px, 8vw, 100px);
    }
    .mh-err-num {
        font-family: var(--mh-font-display);
        font-size: clamp(80px, 14vw, 180px);
        line-height: 1;
        font-weight: 700;
        color: var(--mh-accent);
        letter-spacing: -.02em;
    }
    .mh-err h1 {
        font-size: var(--mh-fs-h2);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-block: 8px 14px;
    }
    .mh-err p { color: var(--mh-ink-300); max-width: 50ch; margin: 0 auto 22px; }
    .mh-err-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

    /* person page */
    .mh-person-head {
        text-align: center;
        padding-block: 22px;
        border-block-end: 1px solid var(--mh-divider);
        margin-block-end: 18px;
    }
    .mh-person-role {
        display: inline-block;
        padding: 4px 12px;
        background: var(--mh-accent-soft);
        color: var(--mh-accent);
        border-radius: var(--mh-radius-pill);
        font-size: var(--mh-fs-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-block-end: 8px;
    }
    .mh-person-head h1 {
        font-size: var(--mh-fs-h1);
        text-transform: uppercase;
        letter-spacing: .015em;
    }
    .mh-person-head p { color: var(--mh-ink-300); max-width: 60ch; margin: 8px auto 0; }

    /* share CTA */
    .mh-share {
        margin-block: 24px;
        text-align: center;
    }
    .mh-share-title {
        font-size: var(--mh-fs-md);
        font-weight: 700;
        color: var(--mh-ink-100);
        margin-block-end: 4px;
    }
    .mh-share-sub {
        font-size: var(--mh-fs-xs);
        color: var(--mh-ink-400);
        margin-block-end: 12px;
    }
    .mh-share .sharethis-inline-share-buttons {
        display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
    }

    /* subscribe popup */
    .mh-tg-pop {
        position: fixed;
        inset-block-end: 18px; inset-inline-end: 18px;
        max-width: 280px;
        background: var(--mh-board);
        border: 1px solid var(--mh-divider);
        border-radius: var(--mh-radius-md);
        padding: 16px;
        z-index: 90;
        box-shadow: var(--mh-shadow-md);
    }
    .mh-tg-x {
        position: absolute;
        inset-block-start: 6px; inset-inline-end: 6px;
        width: 24px; height: 24px;
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--mh-ink-400);
        border-radius: var(--mh-radius-xs);
    }
    .mh-tg-x:hover { color: var(--mh-ink-100); background: rgba(255,255,255,.06); }
    .mh-tg-pop h4 {
        font-size: var(--mh-fs-md);
        font-weight: 700;
        color: var(--mh-ink-100);
        margin-block-end: 6px;
    }
    .mh-tg-pop p {
        font-size: var(--mh-fs-xs);
        color: var(--mh-ink-300);
        margin-block-end: 10px;
        line-height: 1.55;
    }
    .mh-tg-pop a.mh-tg-cta {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        width: 100%;
        padding: 8px;
        background: #229ed9;
        color: #fff;
        border-radius: var(--mh-radius-sm);
        font-weight: 700;
        font-size: var(--mh-fs-sm);
    }
    .mh-tg-pop a.mh-tg-cta:hover { background: #2ab0ed; }
}

/* ----- 07. Utility -------------------------------------------------------- */
@layer utility {
    .mh-stash { display: none !important; }
    .mh-flex-grow { flex: 1; }
    .mh-mt-md { margin-block-start: 14px; }
    .mh-mt-lg { margin-block-start: 22px; }
    .mh-text-mute { color: var(--mh-ink-400); }
}