@media (max-width: 767px) {


    .hero { display: none !important; }


    .mh-hero {
        position: relative;
        min-height: 82dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        overflow: hidden;
        padding: 0 20px calc(36px + env(safe-area-inset-bottom)) 20px;
    }

    .mh-bg {
        position: absolute;
        inset: 0;
        background: var(--grad-hero), var(--void);
        filter: blur(15px) saturate(1.1);
        transform: scale(1.08);
        opacity: 0.9;
        transition: filter .8s ease, transform .8s ease;
    }

    .mh-hero.mh-ready .mh-bg {
        filter: blur(0) saturate(1.1);
        transform: scale(1);
    }

    .mh-vignette {
        position: absolute;
        inset: 0;
        background:
                radial-gradient(120% 70% at 50% 100%, rgba(0,0,0,.85) 10%, transparent 60%),
                linear-gradient(180deg, rgba(8,6,8,.75) 0%, rgba(8,6,8,.15) 38%, rgba(8,6,8,.55) 78%, var(--void) 100%);
    }

    .mh-glow {
        position: absolute;
        left: 50%;
        top: 18%;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(201,24,59,.45), transparent 70%);
        transform: translateX(-50%);
        filter: blur(20px);
        pointer-events: none;
    }

    .mh-content { position: relative; z-index: 1; }

    .mh-eyebrow {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--gold);
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .5s ease, transform .5s ease;
    }

    .mh-title {
        font-family: 'Bebas Neue', sans-serif;
        line-height: .92;
        font-size: clamp(48px, 15vw, 68px);
        letter-spacing: .01em;
        margin: 10px 0 6px;
        color: var(--cream);
    }

    .mh-title .mh-line {
        display: block;
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .55s ease, transform .55s ease;
    }

    .mh-title .mh-line:nth-child(2) { transition-delay: .08s; }
    .mh-title .mh-line:nth-child(3) {
        transition-delay: .16s;
        background: linear-gradient(100deg, var(--crimson-glow) 0%, var(--crimson) 55%, #ff5a6e 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .mh-hero.mh-ready .mh-eyebrow,
    .mh-hero.mh-ready .mh-line {
        opacity: 1;
        transform: translateY(0);
    }

    .mh-sub {
        margin-top: 12px;
        max-width: 34ch;
        color: var(--cream-dim);
        font-size: 14px;
        line-height: 1.5;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .5s ease .2s, transform .5s ease .2s;
    }

    .mh-hero.mh-ready .mh-sub { opacity: 1; transform: translateY(0); }

    .mh-cta {
        margin-top: 22px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        padding: 0 22px;
        border-radius: 999px;
        background: linear-gradient(100deg, var(--crimson) 0%, var(--crimson-bright) 100%);
        color: var(--cream);
        font-weight: 700;
        font-size: 13px;
        letter-spacing: .06em;
        text-transform: uppercase;
        border: none;
        box-shadow: 0 12px 28px -10px rgba(200,32,58,.65);
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .5s ease .3s, transform .5s ease .3s;
    }

    .mh-hero.mh-ready .mh-cta { opacity: 1; transform: translateY(0); }
    .mh-cta:active { transform: scale(.97); }

    .mh-stats {
        display: flex;
        gap: 22px;
        margin-top: 26px;
        opacity: 0;
        transition: opacity .5s ease .4s;
    }

    .mh-hero.mh-ready .mh-stats { opacity: 1; }

    .mh-stats b {
        display: block;
        font-family: 'Bebas Neue', sans-serif;
        font-size: 20px;
        color: var(--cream);
    }

    .mh-stats span {
        display: block;
        font-size: 10px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--cream-dim);
    }

    @media (prefers-reduced-motion: reduce) {
        .mh-bg, .mh-eyebrow, .mh-line, .mh-sub, .mh-cta, .mh-stats {
            transition: none !important;
        }
        .mh-hero { opacity: 1; }
        .mh-bg { filter: none; transform: none; }
        .mh-eyebrow, .mh-line, .mh-sub, .mh-cta, .mh-stats { opacity: 1; transform: none; }
    }


    .mt-year-label .yr {
        font-size: clamp(64px, 22vw, 112px);
    }


    .mt-yearpicker {
        position: sticky;
        top: 60px; /* sits right under the fixed header */
        z-index: 5;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 10px 16px 12px;
        margin: 0 -16px 8px;
        background: linear-gradient(180deg, var(--void) 78%, transparent);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mt-yearpicker::-webkit-scrollbar { display: none; }

    .mt-chip {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255,255,255,.03);
        color: var(--cream-dim);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: .02em;
    }
    .mt-chip.active {
        border-color: var(--gold);
        color: var(--gold);
        background: rgba(215,185,74,.1);
    }

    .mt-more {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mt-more-inner {
        width: 100%;
        aspect-ratio: 2/3;
        border-radius: 10px;
        border: 1px dashed var(--line);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }
    .mt-more-plus {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 22px;
        color: var(--gold);
    }
    .mt-more-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--cream-dim);
    }
    .mt-more:active .mt-more-inner { transform: scale(.97); }


    .mr-head { padding: 28px 20px 14px; }
    .mr-eyebrow {
        color: var(--gold);
        font-size: 11px;
        letter-spacing: .16em;
        text-transform: uppercase;
    }
    .mr-title {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(26px, 7.5vw, 32px);
        margin: 4px 0 2px;
        line-height: 1.05;
    }
    .mr-sub { color: var(--cream-dim); font-size: 13px; }


    .tn-row {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 4px 20px 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tn-row::-webkit-scrollbar { display: none; }

    .tn-card {
        flex: 0 0 auto;
        width: 40vw;
        max-width: 176px;
        scroll-snap-align: start;
        cursor: pointer;
    }

    .tn-poster {
        position: relative;
        width: 100%;
        aspect-ratio: 2 / 3;
        border-radius: 10px;
        background-size: cover;
        background-position: center;
        background-color: var(--card);
        /* Visible even when the poster image 404s/fails to load, so a
           missing poster reads as "no image yet" rather than an empty
           void that blends into the black page background. */
        border: 1px solid var(--line);
        box-shadow: 0 10px 24px -12px rgba(0,0,0,.65);
        overflow: hidden;
        opacity: 0;
        transform: scale(.96);
        filter: blur(8px);
        transition: opacity .5s ease, transform .5s ease, filter .5s ease;
    }
    .tn-card.in-view .tn-poster { opacity: 1; transform: scale(1); filter: blur(0); }

    .tn-poster.in-view{
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    .tn-rating {
        position: absolute;
        right: 8px;
        bottom: 8px;
        padding: 3px 7px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 700;
        background: rgba(8,6,10,.72);
        backdrop-filter: blur(4px);
        color: var(--gold);
    }

    .tn-title {
        margin-top: 8px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .tn-card:active .tn-poster { transform: scale(.97); }


    .dd-wrap { padding: 8px 20px 36px; }

    .dd-headline {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(26px, 8vw, 34px);
        line-height: 1.02;
        margin-bottom: 18px;
    }
    .dd-headline .neon-red {
        background: linear-gradient(100deg, var(--crimson-glow) 0%, var(--crimson) 55%, #ff5a6e 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    .dd-arena {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 10px;
    }

    .dd-side { cursor: pointer; }
    .dd-poster {
        position: relative;
        aspect-ratio: 2/3;
        border-radius: 12px;
        background-size: cover;
        background-position: center;
        background-color: var(--card);
        border: 2px solid var(--line);
        overflow: hidden;
        transition: transform .15s ease, border-color .2s ease;
    }
    .dd-side.dd-winner .dd-poster { border-color: var(--gold); }
    .dd-side:active .dd-poster { transform: scale(.97); }

    .dd-vs {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 20px;
        color: var(--gold);
        text-shadow: 0 0 14px rgba(215,185,74,.5);
    }

    .dd-score {
        text-align: center;
        margin-top: 8px;
        font-size: 13px;
        font-weight: 700;
        color: var(--gold);
    }

    .dd-cta {
        display: block;
        width: 100%;
        min-height: 48px;
        margin-top: 20px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(100deg, var(--crimson) 0%, var(--crimson-bright) 100%);
        color: var(--cream);
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        font-size: 13px;
    }
    .dd-cta:active { transform: scale(.98); }
    .dd-cta[disabled] { opacity: .5; }

    .dd-result {
        text-align: center;
        padding: 26px 10px 6px;
    }
    .dd-result h3 {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 26px;
        margin: 0 0 14px;
        letter-spacing: .04em;
    }
    .dd-bar {
        height: 10px;
        border-radius: 6px;
        background: rgba(255,255,255,.08);
        overflow: hidden;
        display: flex;
        margin: 10px 0;
    }
    .dd-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    }
    .dd-result-note {
        font-size: 12px;
        color: var(--cream-dim);
        margin-top: 8px;
    }


    .mtop-list { padding: 6px 20px 30px; display: flex; flex-direction: column; gap: 4px; }

    .mtop-row {
        display: grid;
        grid-template-columns: 28px 46px 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 10px 4px;
        border-bottom: 1px solid var(--line);
        cursor: pointer;
        min-height: 44px;
    }
    .mtop-rank {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 17px;
        color: var(--gold-dim);
    }
    .mtop-poster {
        width: 46px;
        aspect-ratio: 2/3;
        border-radius: 6px;
        background-size: cover;
        background-position: center;
        background-color: var(--card);
        border: 1px solid var(--line);
    }
    .mtop-title {
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mtop-score { font-size: 13px; font-weight: 700; color: var(--gold); }

    .mtop-signin {
        margin: 0 20px 30px;
        padding: 26px 18px;
        text-align: center;
        border: 1px dashed var(--line);
        border-radius: 14px;
    }
    .mtop-signin h3 {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 22px;
        margin: 0 0 12px;
    }
    .mtop-signin button {
        min-height: 44px;
        padding: 0 20px;
        border: none;
        border-radius: 8px;
        background: var(--gold);
        color: var(--void);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: .05em;
    }

    .mr-empty { padding: 10px 20px 24px; color: var(--cream-dim); font-size: 13px; }


    .rf-row {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 4px 20px 34px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .rf-row::-webkit-scrollbar { display: none; }
    .rf-card { flex: 0 0 auto; width: 40vw; max-width: 176px; scroll-snap-align: start; cursor: pointer; }
    .rf-card .tn-poster, .rf-card .tn-title { /* reuse trending card visuals */ }


    .mc-overlay {
        position: fixed;
        inset: 0;

        z-index: 95;
        background: var(--void);
        transform: translateY(100%);
        transition: transform .38s cubic-bezier(.32,.72,0,1);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: calc(40px + env(safe-area-inset-bottom));
    }
    .mc-overlay.open { transform: translateY(0); }

    .mc-header {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
        background: linear-gradient(180deg, var(--void) 75%, transparent);
    }
    .mc-back {
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
        border: none;
        color: var(--cream);
    }
    .mc-header h2 {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 20px;
        letter-spacing: .04em;
        margin: 0;
    }
    .mc-profile-link {
        margin-left: auto;
        padding: 7px 12px;
        border-radius: 20px;
        border: 1px solid var(--gold-dim);
        background: rgba(212, 175, 55, 0.1);
        color: var(--gold);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .mc-stats {
        display: flex;
        gap: 10px;
        padding: 4px 20px 26px;
    }
    .mc-stat {
        flex: 1;
        text-align: center;
        padding: 16px 6px;
        border: 1px solid var(--line);
        border-radius: 12px;
    }
    .mc-stat b {
        display: block;
        font-family: 'Bebas Neue', sans-serif;
        font-size: 26px;
        color: var(--gold);
    }
    .mc-stat span {
        display: block;
        font-size: 10px;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--cream-dim);
        margin-top: 2px;
    }

    .mc-guest {
        margin: 40px 20px;
        text-align: center;
        color: var(--cream-dim);
        font-size: 14px;
    }


    .ms-overlay {
        position: fixed;
        inset: 0;
        z-index: 96;
        background: var(--void);
        transform: translateX(100%);
        transition: transform .3s ease;
        display: flex;
        flex-direction: column;
    }
    .ms-overlay.open { transform: translateX(0); }

    .ms-topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: calc(14px + env(safe-area-inset-top)) 16px 10px;
        flex: 0 0 auto;
    }
    .ms-back {
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
        border: none;
        color: var(--cream);
        flex: 0 0 auto;
    }
    .ms-input-wrap { flex: 1; position: relative; }
    .ms-input {
        width: 100%;
        min-height: 44px;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: rgba(255,255,255,.04);
        color: var(--cream);
        padding: 0 14px;
        font-size: 16px;
    }
    .ms-input:focus { outline: none; border-color: var(--gold-dim); }

    .ms-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 30px; }

    .ms-section-title {
        padding: 16px 20px 8px;
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--cream-dim);
    }
    .ms-trending-list { padding: 0 20px; display: flex; flex-direction: column; }
    .ms-trending-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--line);
        font-size: 14.5px;
    }

    .ms-results {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 12px;
        padding: 6px 20px 20px;
    }
    .ms-result-card { cursor: pointer; }


    .fg-flash {
        position: fixed;
        inset: 0;
        z-index: 98;
        pointer-events: none;
        opacity: 0;
        background:
                url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
                radial-gradient(circle at 50% 50%, rgba(201,24,59,.5), rgba(8,6,8,.96) 70%);
        mix-blend-mode: normal;
    }
    .fg-flash.fg-run {
        animation: fgFlash .32s ease-out;
    }
    @keyframes fgFlash {
        0% { opacity: 0; }
        35% { opacity: 1; }
        100% { opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
        .fg-flash.fg-run { animation: none; }
    }


    /* ---------- My Cinema: Favorites / History switcher ---------- */

    .mc-tabs {
        display: flex;
        gap: 4px;
        margin: 4px 20px 14px;
        padding: 4px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
    }
    .mc-tab {
        flex: 1;
        min-height: 40px;
        border: none;
        border-radius: 9px;
        background: transparent;
        color: var(--cream-dim);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .02em;
        cursor: pointer;
        transition: background .2s ease, color .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mc-tab.active {
        background: linear-gradient(100deg, var(--crimson) 0%, var(--crimson-bright) 100%);
        color: var(--cream);
    }

    .mcc-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0 20px 14px;
    }
    .mcc-toolbar--empty { display: none; }
    .mcc-count {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--cream-dim);
    }
    .mcc-toolbar-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .mcc-filter-btn {
        width: 34px;
        height: 34px;
        min-width: 44px;
        min-height: 44px;
        margin: -5px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.03);
        color: var(--cream);
    }
    .mcc-clear-btn {
        min-height: 44px;
        padding: 0 12px;
        border-radius: 20px;
        border: 1px solid rgba(200, 32, 58, 0.4);
        background: rgba(200, 32, 58, 0.1);
        color: var(--crimson-bright);
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .mcc-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 12px;
        padding: 0 20px 10px;
    }
    .mcc-sentinel { height: 1px; }

    .mcc-card {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        background: var(--grad-card);
        border: 1px solid var(--border);
        cursor: pointer;
        transition: transform .15s ease;
    }
    .mcc-card:active { transform: scale(0.97); }

    .mcc-poster {
        position: relative;
        width: 100%;
        aspect-ratio: 2 / 3;
        background-size: cover;
        background-position: center;
        background-color: var(--card);
        background-repeat: no-repeat;
    }
    .mcc-poster::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(12, 10, 16, 0.92), transparent 55%);
    }
    .mcc-poster--empty::before {
        content: '🎬';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        opacity: .35;
    }

    .mcc-rating {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 2;
        background: rgba(12, 10, 16, 0.75);
        border: 1px solid var(--gold);
        color: var(--gold);
        font-weight: 800;
        font-size: 11px;
        padding: 3px 7px;
        border-radius: 20px;
    }

    .mcc-fav-btn.favorite-heart-btn {
        position: absolute;
        top: 4px;
        right: 4px;
        left: auto;
        z-index: 3;
        width: 44px;
        height: 44px;
        opacity: 1;
        background: rgba(12, 10, 16, 0.55);
        border-color: transparent;
    }

    .mcc-remove-btn {
        position: absolute;
        bottom: 8px;
        left: 8px;
        z-index: 3;
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: rgba(12, 10, 16, 0.75);
        color: var(--cream);
        font-size: 12px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mcc-body {
        position: relative;
        z-index: 2;
        margin-top: -34px;
        padding: 8px 10px 10px;
    }
    .mcc-title {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.25;
        margin: 0 0 3px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .mcc-meta {
        font-size: 11px;
        color: var(--cream-dim);
        letter-spacing: .03em;
    }

    /* Skeleton loading */
    .mcc-skeleton { cursor: default; }
    .mcc-skeleton .mcc-poster {
        background: linear-gradient(100deg, rgba(255,255,255,.03) 20%, rgba(255,255,255,.08) 40%, rgba(255,255,255,.03) 60%);
        background-size: 200% 100%;
        animation: mccShimmer 1.4s ease-in-out infinite;
    }
    .mcc-skeleton .mcc-poster::after { display: none; }
    .mcc-sk-line {
        height: 10px;
        border-radius: 5px;
        margin-bottom: 6px;
        background: linear-gradient(100deg, rgba(255,255,255,.03) 20%, rgba(255,255,255,.08) 40%, rgba(255,255,255,.03) 60%);
        background-size: 200% 100%;
        animation: mccShimmer 1.4s ease-in-out infinite;
    }
    @keyframes mccShimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
        .mcc-skeleton .mcc-poster, .mcc-sk-line { animation: none; }
    }

    /* Empty state */
    .mcc-empty {
        margin: 30px 24px 0;
        text-align: center;
        padding: 30px 16px;
        border: 1px dashed var(--line);
        border-radius: 16px;
    }
    .mcc-empty-icon { font-size: 34px; margin-bottom: 10px; }
    .mcc-empty h3 {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 22px;
        letter-spacing: .03em;
        margin: 0 0 8px;
    }
    .mcc-empty p {
        font-size: 13px;
        color: var(--cream-dim);
        margin: 0 0 18px;
    }
    .mcc-empty-cta {
        min-height: 44px;
        padding: 0 22px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(100deg, var(--crimson) 0%, var(--crimson-bright) 100%);
        color: var(--cream);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: .04em;
    }
    .mcc-empty-cta:active { transform: scale(.98); }

    /* Bottom sheet: filter + confirm dialogs, shared shell */
    .mcc-sheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 99;
        background: rgba(0, 0, 0, 0.55);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    .mcc-sheet-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }
    .mcc-sheet, .mcc-confirm {
        width: 100%;
        max-width: 520px;
        background: var(--void);
        border: 1px solid var(--line);
        border-radius: 18px 18px 0 0;
        padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.32,.72,0,1);
    }
    .mcc-sheet-backdrop.open .mcc-sheet,
    .mcc-sheet-backdrop.open .mcc-confirm {
        transform: translateY(0);
    }
    .mcc-sheet-handle {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--line);
        margin: 4px auto 14px;
    }
    .mcc-sheet h3, .mcc-confirm h3 {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 19px;
        letter-spacing: .03em;
        margin: 0 0 14px;
    }
    .mcc-sheet-options {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding-bottom: 6px;
    }
    .mcc-sheet-opt {
        min-height: 48px;
        text-align: left;
        padding: 0 14px;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.02);
        color: var(--cream);
        font-size: 14px;
    }
    .mcc-sheet-opt.active {
        border-color: var(--gold-dim);
        background: rgba(212, 175, 55, 0.1);
        color: var(--gold);
        font-weight: 600;
    }

    /* Confirm dialog (clear history) */
    .mcc-confirm {
        border-radius: 18px;
        margin: 0 16px calc(16px + env(safe-area-inset-bottom));
        max-width: 460px;
        transform: translateY(40px);
        opacity: 0;
        transition: transform .25s ease, opacity .25s ease;
    }
    .mcc-sheet-backdrop.open .mcc-confirm {
        transform: translateY(0);
        opacity: 1;
    }
    .mcc-confirm p {
        font-size: 13.5px;
        color: var(--cream-dim);
        margin: 0 0 18px;
        line-height: 1.4;
    }
    .mcc-confirm-actions {
        display: flex;
        gap: 10px;
    }
    .mcc-confirm-actions button {
        flex: 1;
        min-height: 46px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
    }
    .mcc-confirm-cancel {
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.03);
        color: var(--cream);
    }
    .mcc-confirm-danger {
        border: none;
        background: linear-gradient(100deg, var(--crimson) 0%, var(--crimson-bright) 100%);
        color: var(--cream);
    }

    @media (min-width: 380px) {
        .mcc-grid { gap: 16px 14px; }
    }
}