/* =========================================================
   Media Queue — Design System (mq-theme.css)
   Iteration 1: tokens, glass navbar, cinematic hero
   ========================================================= */

:root {
    --mq-bg:            #0d0e12;
    --mq-bg-raised:     #16181f;
    --mq-surface:       rgba(22, 24, 31, 0.72);
    --mq-border:        rgba(255, 255, 255, 0.08);
    --mq-text:          #f4f4f6;
    --mq-text-muted:    #a3a6b4;
    --mq-accent:        #ffc94a;   /* marquee gold */
    --mq-accent-hot:    #ff8a3d;   /* popcorn orange */
    --mq-accent-grad:   linear-gradient(135deg, var(--mq-accent) 0%, var(--mq-accent-hot) 100%);
    --mq-radius:        14px;
    --mq-radius-pill:   999px;
    --mq-nav-h:         72px;
    --mq-font-display:  'Bebas Neue', 'Oswald', Impact, sans-serif;
    --mq-font-body:     'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;
    --mq-ease:          cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Base ---------- */
html, body.mq {
    background: var(--mq-bg) !important;
    color: var(--mq-text);
    font-family: var(--mq-font-body);
    -webkit-font-smoothing: antialiased;
}
body.mq { overflow-x: clip; }
body.mq ::selection { background: var(--mq-accent); color: #111; }

/* Restore font-size inheritance inside the redesigned components.
   The legacy CSS in index.php sets `* { font-size: 14px }` (12px from 576-991px) on EVERY element,
   so any child without its own size snaps back to 12-14px instead of inheriting: e.g. the .hl accent
   words inside headlines, or icons inside badges. :where() keeps this at zero specificity, so it only
   beats that legacy rule (by loading later) and every explicit size in this file still wins.
   Legacy pages outside these components keep their current sizing. */
:where(.mq-nav, .mq-hero, .mq-section-head, .mq-grid, .mq-pager, .mq-auth, .mq-support, .mq-detail, .mq-footer, .mq-totop, #modal_1) * {
    font-size: inherit;
}

/* ---------- Glass navbar ---------- */
.mq-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: var(--mq-nav-h);
    padding: 0;
    background: rgba(13, 14, 18, 0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--mq-border);
    transition: background .35s var(--mq-ease), border-color .35s var(--mq-ease), box-shadow .35s var(--mq-ease);
}
/* On the home page the nav starts transparent and floats over the hero */
body.mq-home .mq-nav:not(.is-scrolled) {
    background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}
.mq-nav.is-scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.45); }

.mq-nav .mq-nav-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: .65rem 1.25rem;
}
.mq-nav .mq-brand img { height: 38px; width: auto; display: block; }

.mq-nav .navbar-nav .nav-link {
    position: relative;
    color: rgba(255,255,255,.78) !important;
    font-weight: 500;
    font-size: .95rem;
    letter-spacing: .01em;
    padding: .5rem .9rem !important;
    border-radius: var(--mq-radius-pill);
    transition: color .2s, background .2s;
}
.mq-nav .navbar-nav .nav-link:hover,
.mq-nav .navbar-nav .nav-link:focus,
.mq-nav .navbar-nav .nav-link.show {
    color: #fff !important;
    background: rgba(255,255,255,.08);
}
.mq-nav .navbar-nav .nav-link i { margin-right: .35rem; opacity: .8; }
.mq-nav .nav-item { margin: 0 2px; }
.mq-nav .dropdown-toggle::after { vertical-align: .15em; }

.mq-nav .dropdown-menu {
    background: rgba(20, 22, 29, .96) !important;
    backdrop-filter: blur(16px);
    border: 1px solid var(--mq-border);
    border-radius: var(--mq-radius);
    padding: .5rem;
    min-width: 240px;
    box-shadow: 0 20px 50px rgba(0,0,0,.55);
    margin-top: .5rem !important;
}
.mq-nav .dropdown-header {
    color: var(--mq-accent);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .5rem .75rem .25rem;
}
.mq-nav .dropdown-item {
    color: rgba(255,255,255,.85) !important;
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .92rem;
}
.mq-nav .dropdown-menu { max-height: none; overflow: visible; }   /* cancel legacy 300px scroll box in index.php */
.mq-nav .dropdown-item { display: flex; align-items: center; gap: .7rem; }
.mq-nav .dropdown-item i { display: inline-block; width: 1.1rem; text-align: center; flex: none; opacity: .75; }
.mq-card__net .dropdown-menu { max-height: 300px; overflow-y: auto; }
.mq-nav .dropdown-item:hover,
.mq-nav .dropdown-item:focus {
    background: rgba(255, 201, 74, .12);
    color: var(--mq-accent) !important;
}
.mq-nav .dropdown-divider { border-color: var(--mq-border); margin: .4rem .25rem; }

/* Search pill in the nav */
.mq-nav .mq-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
}
.mq-nav .mq-search i {
    position: absolute;
    left: 14px;
    color: var(--mq-text-muted);
    pointer-events: none;
}
.mq-nav #search {
    height: 40px !important;
    padding: 0 6.2rem 0 2.5rem !important;
    border-radius: var(--mq-radius-pill) !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid var(--mq-border) !important;
    color: #fff !important;
    font-size: .92rem;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.mq-nav #search::placeholder { color: var(--mq-text-muted); }
.mq-nav #search:focus {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255, 201, 74, .6) !important;
    box-shadow: 0 0 0 4px rgba(255, 201, 74, .15);
}
.mq-nav .mq-search .btn {
    position: absolute;
    right: 4px;
    height: 32px;
    padding: 0 .95rem;
    font-size: .82rem;
}

/* Hamburger */
.mq-nav .navbar-toggler {
    border: 1px solid var(--mq-border);
    border-radius: 10px;
    padding: .4rem .6rem;
    color: #fff !important;
    background: rgba(255,255,255,.06);
}
.mq-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 201, 74, .25); }
/* legacy index.php CSS sets the closed toggler's colour to transparent !important, hiding the icon */
.mq-nav .navbar-toggler i { color: #fff; }

@media (max-width: 991.98px) {
    .mq-nav .navbar-collapse {
        margin-top: .75rem;
        padding: .75rem;
        border-radius: var(--mq-radius);
        background: rgba(20, 22, 29, .97);
        border: 1px solid var(--mq-border);
    }
    .mq-nav .mq-search { min-width: 0; width: 100%; margin-top: .5rem; }
}

/* ---------- Buttons ---------- */
.btn-mq {
    background: var(--mq-accent-grad);
    color: #16110a !important;
    font-weight: 700;
    border: 0;
    border-radius: var(--mq-radius-pill);
    letter-spacing: .02em;
    transition: transform .2s var(--mq-ease), box-shadow .2s var(--mq-ease), filter .2s;
}
.btn-mq:hover, .btn-mq:focus {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(255, 160, 60, .35);
    filter: brightness(1.05);
}

/* ---------- Cinematic hero ---------- */
.mq-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: calc(-1 * var(--mq-nav-h));   /* slide under the floating nav */
    min-height: clamp(520px, 82vh, 860px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
}
.mq-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../images/home_v2.jpg") center 30% / cover no-repeat;
    transform: scale(1.08);
    animation: mq-kenburns 28s ease-in-out infinite alternate;
}
@keyframes mq-kenburns {
    from { transform: scale(1.08) translate3d(0, 0, 0); }
    to   { transform: scale(1.18) translate3d(-1.5%, -1%, 0); }
}
.mq-hero::before {   /* vignette + fade into page */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(13,14,18,.92) 0%, rgba(13,14,18,.55) 45%, rgba(13,14,18,.05) 75%),
        linear-gradient(0deg, var(--mq-bg) 0%, rgba(13,14,18,.4) 35%, rgba(13,14,18,0) 60%),
        radial-gradient(ellipse at 70% 40%, rgba(255,138,61,.12), transparent 60%);
}
.mq-hero__content {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: calc(var(--mq-nav-h) + 3rem) 1.5rem clamp(3rem, 8vh, 6rem);
}
.mq-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .85rem;
    border-radius: var(--mq-radius-pill);
    background: rgba(255, 201, 74, .12);
    border: 1px solid rgba(255, 201, 74, .35);
    color: var(--mq-accent);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    animation: mq-rise .8s var(--mq-ease) both;
}
.mq-hero__eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--mq-accent);
    box-shadow: 0 0 0 0 rgba(255,201,74,.7);
    animation: mq-pulse 2s infinite;
}
@keyframes mq-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,201,74,.6); }
    70%  { box-shadow: 0 0 0 10px rgba(255,201,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,201,74,0); }
}
.mq-hero__title {
    font-family: var(--mq-font-display);
    font-weight: 400;
    /* px + vw rather than rem: the legacy `*` rule also resizes <html>, so 1rem is 14px, or 12px
       between 576-991px, which made rem-based headline sizes jump at those breakpoints. */
    font-size: clamp(40px, 8.5vw, 96px);
    line-height: .92;
    letter-spacing: .01em;
    max-width: 22ch;                        /* desktop: 2 lines, "Never lose track of / what to watch next." */
    text-wrap: balance;                     /* even line lengths at every width */
    margin: 0 0 1.25rem;
    text-shadow: 0 6px 40px rgba(0,0,0,.5);
    animation: mq-rise .9s .08s var(--mq-ease) both;
}

/* Gradient accent words inside display headlines (hero, Help Center, auth panel, footer CTA).
   `font: inherit` keeps them at exactly the headline's size, weight, family and line-height;
   only the colour changes. text-shadow is dropped because with background-clip:text the
   inherited shadow paints over the gradient and muddies it. */
:is(.mq-hero__title, .mq-support__hero h1, .mq-auth__pitch h2, .mq-footer__cta h2) .hl {
    font: inherit;
    letter-spacing: inherit;
    text-shadow: none;
    background: var(--mq-accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.mq-hero__lead {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: rgba(255,255,255,.78);
    max-width: 46ch;
    margin-bottom: 2rem;
    animation: mq-rise 1s .16s var(--mq-ease) both;
}

/* Hero search */
.mq-hero__search {
    display: flex;
    align-items: center;
    max-width: 620px;
    padding: .4rem .4rem .4rem 1.25rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--mq-radius-pill);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    transition: border-color .2s, box-shadow .2s;
    animation: mq-rise 1s .24s var(--mq-ease) both;
}
.mq-hero__search:focus-within {
    border-color: rgba(255, 201, 74, .7);
    box-shadow: 0 0 0 5px rgba(255, 201, 74, .15), 0 20px 60px rgba(0,0,0,.45);
}
.mq-hero__search i { color: var(--mq-text-muted); font-size: 1.15rem; }
.mq-hero__search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: 1.05rem;
    padding: .7rem .85rem;
}
.mq-hero__search input::placeholder { color: rgba(255,255,255,.55); }
.mq-hero__search .btn-mq { padding: .75rem 1.6rem; font-size: .95rem; }

/* Category chips */
.mq-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.5rem;
    animation: mq-rise 1s .32s var(--mq-ease) both;
}
.mq-chips .label {
    color: var(--mq-text-muted);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    align-self: center;
    margin-right: .25rem;
}
.mq-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .95rem;
    border-radius: var(--mq-radius-pill);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.88);
    font-size: .86rem;
    font-weight: 500;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: all .2s var(--mq-ease);
}
.mq-chip:hover {
    color: #16110a;
    background: var(--mq-accent);
    border-color: var(--mq-accent);
    transform: translateY(-2px);
}

/* Scroll cue */
.mq-hero__cue {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    color: rgba(255,255,255,.55);
    font-size: 1.4rem;
    text-decoration: none;
    animation: mq-bob 2.2s ease-in-out infinite;
}
@keyframes mq-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}
@keyframes mq-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Section heading under the hero */
.mq-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 2.5rem .75rem .5rem;
    scroll-margin-top: calc(var(--mq-nav-h) + 1rem);
}
.mq-section-head h2 {
    font-family: var(--mq-font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    letter-spacing: .02em;
    margin: 0;
    line-height: 1;
    position: relative;
    padding-left: 1rem;
}
.mq-section-head h2::before {
    content: "";
    position: absolute;
    left: 0; top: 8%; bottom: 8%;
    width: 5px;
    border-radius: 4px;
    background: var(--mq-accent-grad);
}
.mq-section-head p { color: var(--mq-text-muted); margin: .4rem 0 0 1rem; font-size: .95rem; }

@media (max-width: 575.98px) {
    .mq-hero { min-height: 560px; }
    .mq-hero__title { font-size: clamp(38px, 11vw, 49px); line-height: .94; }   /* tops out at 49px, matching 8.5vw at 576px: no jump */
    .mq-hero__search { padding-left: 1rem; }
    .mq-hero__search .btn-mq { padding: .7rem 1.1rem; }
    .mq-hero__search .btn-mq span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mq-hero__bg, .mq-hero__cue, .mq-hero__eyebrow .dot { animation: none; }
    .mq-hero__eyebrow, .mq-hero__title, .mq-hero__lead, .mq-hero__search, .mq-chips { animation: none; }
}

/* =========================================================
   Iteration 2: Marquee poster cards
   ========================================================= */
#data.mq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 2rem 1.35rem;
    padding: 1.25rem .75rem 1rem;
    margin: 0;
}
@media (max-width: 575.98px) {
    #data.mq-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem .9rem; padding: 1rem .5rem; }
}

.mq-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    animation: mq-card-in .6s var(--mq-ease) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes mq-card-in {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.mq-card__poster {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    border-radius: var(--mq-radius);
    overflow: hidden;
    background: var(--mq-bg-raised);
    box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1px var(--mq-border);
    transform: translateZ(0);
    transition: transform .45s var(--mq-ease), box-shadow .45s var(--mq-ease);
}
.mq-card__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0 !important;
    border-radius: 0 !important;
    transition: transform .7s var(--mq-ease), filter .45s;
}
.mq-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10,10,14,.95) 0%, rgba(10,10,14,.35) 45%, rgba(10,10,14,0) 70%);
    opacity: 0;
    transition: opacity .35s var(--mq-ease);
}
.mq-card__cta {
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    transform: translate(-50%, 14px);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    padding: .5rem 1rem;
    border-radius: var(--mq-radius-pill);
    background: var(--mq-accent-grad);
    color: #16110a;
    font-size: .8rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity .35s var(--mq-ease), transform .35s var(--mq-ease);
}

/* Hover / keyboard focus: lift, zoom, glow */
.mq-card:hover .mq-card__poster,
.mq-card__poster:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(0,0,0,.6), 0 0 0 2px var(--mq-accent), 0 0 40px rgba(255,170,60,.25);
    outline: none;
}
.mq-card:hover .mq-card__poster img { transform: scale(1.07); }
.mq-card:hover .mq-card__shade,
.mq-card__poster:focus-visible .mq-card__shade { opacity: 1; }
.mq-card:hover .mq-card__cta,
.mq-card__poster:focus-visible .mq-card__cta { opacity: 1; transform: translate(-50%, 0); }

/* Rating ring */
.mq-rating {
    --c: var(--mq-accent);
    position: absolute;
    left: .6rem;
    bottom: .6rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, rgba(12,12,16,.92) 76%, transparent 78% 100%),
        conic-gradient(var(--c) calc(var(--p, 0) * 1%), rgba(255,255,255,.14) 0);
    box-shadow: 0 4px 14px rgba(0,0,0,.5);
    transition: opacity .3s, transform .3s var(--mq-ease);
}
.mq-rating b { font-size: .8rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.mq-rating--hi  { --c: #4ade80; }
.mq-rating--mid { --c: var(--mq-accent); }
.mq-rating--lo  { --c: #f87171; }
.mq-card:hover .mq-rating { opacity: 0; transform: scale(.8); }

/* Title + meta */
.mq-card__meta { padding: .8rem .2rem 0; min-width: 0; }
.mq-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--mq-text);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
    text-decoration: none;
    transition: color .2s;
}
.mq-card:hover .mq-card__title { color: var(--mq-accent); }
.mq-card__sub {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .3rem;
    font-size: .78rem;
    color: var(--mq-text-muted);
}
.mq-card__sub .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }

/* Watchlist status pill (top-left) */
.mq-card__status {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 3;
    pointer-events: none;
}
.mq-card__status .status {
    position: static !important;
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: .28rem .6rem !important;
    width: auto !important;
    height: auto !important;
    font-size: .66rem !important;
    line-height: 1 !important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 0 !important;
    border-radius: var(--mq-radius-pill) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.mq-card__status .watchlist { background: rgba(34,197,94,.88) !important; color: #fff; }
.mq-card__status .watched   { background: rgba(59,130,246,.88) !important; color: #fff; }
.mq-card__status .reviewed  { background: rgba(255,201,74,.92) !important; color: #16110a !important; }

/* Friends-network badge (top-right): swaps the bare "N" for a people icon */
.mq-card__net { position: absolute; top: .6rem; right: .6rem; z-index: 4; }
.mq-card__net .circle {
    position: static !important;
    list-style: none;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(12,12,16,.75) !important;
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
}
.mq-card__net .circle > .nav-link {
    color: #fff !important;
    font-size: .9rem;
    padding: 0 !important;
    line-height: 30px;
}
.mq-card__net .dropdown-menu {
    background: rgba(20,22,29,.97) !important;
    border: 1px solid var(--mq-border);
    border-radius: 12px;
    padding: .4rem;
    box-shadow: 0 16px 40px rgba(0,0,0,.6);
}
.mq-card__net .dropdown-item { color: rgba(255,255,255,.9) !important; border-radius: 8px; font-size: .85rem; display: flex; align-items: center; gap: .5rem; }
.mq-card__net .dropdown-item:hover { background: rgba(255,201,74,.12); }
.mq-card__net .network { width: 22px; height: 22px; line-height: 18px; border-radius: 6px; font-size: .7rem; font-weight: 700; }

/* Skeleton loaders */
.mq-card--skeleton { animation: none; }
.mq-card--skeleton .mq-card__poster,
.mq-skel-line {
    background: linear-gradient(100deg, #1a1c23 30%, #262934 50%, #1a1c23 70%);
    background-size: 300% 100%;
    animation: mq-shimmer 1.4s linear infinite;
}
.mq-card--skeleton .mq-card__poster { box-shadow: none; }
.mq-skel-line { height: 12px; border-radius: 6px; margin-top: .85rem; width: 85%; }
.mq-skel-line.short { width: 45%; margin-top: .5rem; }
@keyframes mq-shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* Empty state */
.mq-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 1rem;
    color: var(--mq-text-muted);
}
.mq-empty i { font-size: 3rem; color: var(--mq-accent); display: block; margin-bottom: 1rem; }
.mq-empty h3 { font-family: var(--mq-font-display); font-size: 2.2rem; color: var(--mq-text); font-weight: 400; letter-spacing: .02em; }

/* Pager */
.mq-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 0 3.5rem;
}
.mq-pager__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    border-radius: var(--mq-radius-pill);
    background: rgba(255,255,255,.06);
    border: 1px solid var(--mq-border);
    color: var(--mq-text);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    transition: all .25s var(--mq-ease);
}
.mq-pager__btn:hover { color: var(--mq-text); background: rgba(255,255,255,.12); transform: translateY(-2px); }
.mq-pager__btn--next { background: var(--mq-accent-grad); color: #16110a; border-color: transparent; }
.mq-pager__btn--next:hover { color: #16110a; background: var(--mq-accent-grad); box-shadow: 0 10px 26px rgba(255,160,60,.35); }
.mq-pager__btn.is-disabled { opacity: .35; pointer-events: none; }
.mq-pager__page { color: var(--mq-text-muted); font-size: .9rem; }
.mq-pager__page b { color: var(--mq-text); }

@media (prefers-reduced-motion: reduce) {
    .mq-card, .mq-card--skeleton .mq-card__poster, .mq-skel-line { animation: none; }
    .mq-card__poster, .mq-card__poster img { transition: none; }
}

/* =========================================================
   Iteration 3: Split-screen auth (Sign In / Register)
   ========================================================= */
.mq-auth {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: calc(100vh - var(--mq-nav-h));
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    background: var(--mq-bg);
}

/* ---- Left: animated poster wall ---- */
.mq-auth__wall {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 30% 20%, rgba(255,138,61,.18), transparent 60%), #0a0b0f;
}
.mq-wall {
    position: absolute;
    inset: -25% -15%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    transform: rotate(-11deg);
    opacity: 0;
    transition: opacity 1.4s var(--mq-ease);
}
.mq-wall.is-ready { opacity: .6; }
.mq-wall__col { animation: mq-wall-up 70s linear infinite; will-change: transform; }
.mq-wall__col:nth-child(even) { animation-name: mq-wall-down; animation-duration: 85s; }
.mq-wall__col img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
@keyframes mq-wall-up   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes mq-wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.mq-auth__wall::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(13,14,18,.15) 0%, rgba(13,14,18,.55) 70%, var(--mq-bg) 100%),
        linear-gradient(0deg, rgba(13,14,18,.97) 0%, rgba(13,14,18,.35) 45%, rgba(13,14,18,.2) 100%);
    pointer-events: none;
}
.mq-auth__pitch {
    position: absolute;
    left: clamp(1.5rem, 5vw, 4.5rem);
    right: 2rem;
    bottom: clamp(2rem, 8vh, 5rem);
    z-index: 2;
}
.mq-auth__pitch h2 {
    font-family: var(--mq-font-display);
    font-weight: 400;
    font-size: clamp(52px, 5.5vw, 76px);
    line-height: .92;
    text-wrap: balance;
    margin: 0 0 1.5rem;
    text-shadow: 0 6px 30px rgba(0,0,0,.6);
}
.mq-auth__pitch ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.mq-auth__pitch li { display: flex; align-items: center; gap: .75rem; color: rgba(255,255,255,.85); font-size: 1rem; }
.mq-auth__pitch li i {
    flex: none;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(255,201,74,.14);
    border: 1px solid rgba(255,201,74,.3);
    color: var(--mq-accent);
    font-size: .95rem;
}

/* ---- Right: form panel ---- */
.mq-auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 5vh, 4rem) 1.25rem;
    background: radial-gradient(ellipse at 80% 0%, rgba(255,201,74,.07), transparent 55%);
}
.mq-auth__card {
    width: 100%;
    max-width: 440px;
    padding: 2rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    border: 1px solid var(--mq-border);
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
    backdrop-filter: blur(16px);
    animation: mq-rise .7s var(--mq-ease) both;
}

/* Segmented Sign In / Register switch */
.mq-auth__tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    margin-bottom: 1.75rem;
    border-radius: var(--mq-radius-pill);
    background: rgba(0,0,0,.35);
    border: 1px solid var(--mq-border);
}
.mq-auth__tabs a {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: .55rem 0;
    border-radius: var(--mq-radius-pill);
    color: var(--mq-text-muted);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: color .25s;
}
.mq-auth__tabs a:hover { color: #fff; }
.mq-auth__tabs a.active { color: #16110a; }
.mq-auth__tabs-ink {
    position: absolute;
    top: 4px; bottom: 4px; left: 4px;
    width: calc(50% - 4px);
    border-radius: var(--mq-radius-pill);
    background: var(--mq-accent-grad);
    box-shadow: 0 6px 18px rgba(255,160,60,.35);
    transition: transform .4s var(--mq-ease);
}
.mq-auth--register .mq-auth__tabs-ink { transform: translateX(100%); }

.mq-auth__head { text-align: center; margin-bottom: 1.25rem; }
.mq-auth__icon {
    width: 58px; height: 58px;
    margin: 0 auto .9rem;
    display: grid; place-items: center;
    border-radius: 18px;
    background: var(--mq-accent-grad);
    color: #16110a;
    font-size: 1.6rem;
    box-shadow: 0 12px 30px rgba(255,160,60,.35);
}
.mq-auth__head h1 {
    font-family: var(--mq-font-display);
    font-weight: 400;
    font-size: 2.6rem;
    letter-spacing: .02em;
    line-height: 1;
    margin: 0 0 .4rem;
}
.mq-auth__head p { color: var(--mq-text-muted); font-size: .93rem; margin: 0; }

/* ---- Restyle the legacy forms in place ---- */
.mq-auth .mq-auth__form .container { max-width: none !important; padding: 0 !important; }
.mq-auth form > div:has(> h3),
.mq-auth .login1 > .p-0.m-0,
.mq-auth .register1 > .p-0.m-0 { display: none !important; }
.mq-auth form { padding: 0 !important; }

.mq-auth .form-floating { margin: 0 0 .9rem !important; }
.mq-auth .form-control {
    height: 58px;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: .98rem;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.mq-auth .form-control:focus {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,201,74,.7) !important;
    box-shadow: 0 0 0 4px rgba(255,201,74,.14) !important;
}
.mq-auth .form-floating > label { color: var(--mq-text-muted) !important; padding-left: 1rem; }
.mq-auth .form-floating > .form-control:focus ~ label,
.mq-auth .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--mq-accent) !important; opacity: .9; }
/* Chrome autofill: keep the dark field + white text in every state (incl. focus) */
.mq-auth .form-control:-webkit-autofill,
.mq-auth .form-control:-webkit-autofill:hover,
.mq-auth .form-control:-webkit-autofill:active {
    box-shadow: 0 0 0 100px #1c1e26 inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    transition: background-color 600000s 0s, color 600000s 0s;
}
.mq-auth .form-control:-webkit-autofill:focus {
    box-shadow: 0 0 0 100px #22252e inset, 0 0 0 4px rgba(255,201,74,.14) !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    transition: background-color 600000s 0s, color 600000s 0s;
}
.mq-auth .form-control:autofill { -webkit-text-fill-color: #fff !important; }

.mq-auth .mq-has-eye .form-control { padding-right: 3rem; }
.mq-eye {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mq-text-muted);
    font-size: 1.1rem;
    z-index: 5;
}
.mq-eye:hover { color: #fff; background: rgba(255,255,255,.07); }

/* Terms checkbox */
.mq-auth .form-floatingX { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 1rem !important; }
.mq-auth .form-check-input {
    width: 1.2rem; height: 1.2rem; margin: 0;
    background-color: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.3) !important;
    cursor: pointer;
}
.mq-auth .form-check-input:checked { background-color: var(--mq-accent); border-color: var(--mq-accent) !important; }
.mq-auth .form-check-label { margin: 0 !important; color: var(--mq-text-muted) !important; font-size: .88rem; }
.mq-auth .terms { color: var(--mq-accent) !important; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Submit */
.mq-auth .row:has(> #submit) { margin: 1.25rem 0 0 !important; --bs-gutter-x: 0; }
.mq-auth #submit {
    width: 100%;
    padding: .95rem 1rem !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--mq-accent-grad) !important;
    color: #16110a !important;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .03em;
    box-shadow: 0 12px 30px rgba(255,160,60,.3);
    transition: transform .2s var(--mq-ease), box-shadow .2s, filter .2s, opacity .2s;
}
.mq-auth #submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255,160,60,.45); filter: brightness(1.05); }
.mq-auth #submit:disabled { opacity: .4; box-shadow: none; cursor: not-allowed; }

/* Result banner (#results1, register page only).
   While the main register form is on screen the popup already shows the same message, so hide it.
   Once the form slides away (email-code step, which has no popup) it is the only feedback: theme it. */
.mq-auth #results1:has(~ #form_info:not([style*="display: none"])) { display: none !important; }
.mq-auth #results1 {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px !important;
    padding: 1rem 1.15rem !important;
    margin: 0 0 1rem !important;
    text-align: left !important;
    font-size: .92rem !important;
    font-weight: 500 !important;
    line-height: 1.45;
}
.mq-auth #results1 :is(h3, h4) {
    font-family: var(--mq-font-display);
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: .02em;
    line-height: 1.05;
    margin: 0 0 .3rem !important;
    padding: 0 !important;
}
.mq-auth #results1 [id^="e_"] { display: flex !important; align-items: center; gap: .5rem; margin: .35rem 0 0 !important; padding: 0 !important; }
.mq-auth #results1 [id^="e_"] > :is(i, svg) { flex: none; padding: 0 !important; margin: 0 !important; }
.mq-auth #results1[style*="255, 0, 0"]   { background: rgba(248,113,113,.1) !important; border-color: rgba(248,113,113,.35); color: #fecaca !important; }
.mq-auth #results1[style*="239, 209, 5"] { background: rgba(255,201,74,.1) !important;  border-color: rgba(255,201,74,.35);  color: var(--mq-accent) !important; }
.mq-auth #results1[style*="55, 164, 7"]  { background: rgba(74,222,128,.1) !important;  border-color: rgba(74,222,128,.35);  color: #bbf7d0 !important; }
.mq-auth .prompt { padding: 0 !important; }
.mq-auth .register2 .btn {
    width: 100% !important;
    background: var(--mq-accent-grad) !important;
    color: #16110a !important;
    border-radius: 12px;
    font-weight: 700;
}

.mq-auth__fine {
    margin: 1.25rem 0 0;
    text-align: center;
    color: rgba(255,255,255,.4);
    font-size: .78rem;
}
.mq-auth__fine i { margin-right: .35rem; }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .mq-auth { grid-template-columns: 1fr; }
    .mq-auth__wall { height: 230px; }
    .mq-auth__pitch { bottom: 1.25rem; }
    .mq-auth__pitch h2 { font-size: clamp(36px, 5vw, 46px); margin-bottom: 0; }
    .mq-auth__pitch ul, .mq-auth__pitch .mq-hero__eyebrow { display: none; }
    .mq-auth__panel { padding-top: 0; margin-top: -2.5rem; position: relative; z-index: 3; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .mq-wall__col, .mq-auth__card { animation: none; }
}

/* =========================================================
   Iteration 4a: Help Center (/contact)
   ========================================================= */
.mq-support {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0 1.25rem 4rem;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,170,60,.13), transparent 70%),
        var(--mq-bg);
}
.mq-support > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

.mq-support__hero { text-align: center; padding: clamp(3rem, 8vh, 5.5rem) 0 2.25rem; }
.mq-support__hero h1 {
    font-family: var(--mq-font-display);
    font-weight: 400;
    font-size: clamp(42px, 7vw, 80px);
    line-height: .95;
    text-wrap: balance;
    margin: 0 0 .9rem;
    animation: mq-rise .8s .05s var(--mq-ease) both;
}
.mq-support__hero > p { color: var(--mq-text-muted); font-size: 1.08rem; margin: 0 auto 2rem; max-width: 52ch; animation: mq-rise .8s .1s var(--mq-ease) both; }

.mq-support__search {
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 600px;
    margin: 0 auto;
    padding: .35rem 1.35rem;
    border-radius: var(--mq-radius-pill);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 50px rgba(0,0,0,.4);
    transition: border-color .2s, box-shadow .2s;
    animation: mq-rise .8s .15s var(--mq-ease) both;
}
.mq-support__search:focus-within { border-color: rgba(255,201,74,.7); box-shadow: 0 0 0 5px rgba(255,201,74,.13), 0 18px 50px rgba(0,0,0,.4); }
.mq-support__search i { color: var(--mq-text-muted); font-size: 1.1rem; }
.mq-support__search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font-size: 1.05rem; padding: .8rem 0; }
.mq-support__search input::placeholder { color: rgba(255,255,255,.45); }

/* Topic cards */
.mq-support__topics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
}
.mq-topic {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    padding: 1.15rem 1.25rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    border: 1px solid var(--mq-border);
    color: var(--mq-text);
    transition: transform .3s var(--mq-ease), border-color .3s, box-shadow .3s, background .3s;
    animation: mq-rise .8s .2s var(--mq-ease) both;
}
.mq-topic:hover { transform: translateY(-4px); border-color: rgba(255,201,74,.45); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.mq-topic.active { border-color: var(--mq-accent); background: linear-gradient(180deg, rgba(255,201,74,.14), rgba(255,201,74,.04)); }
.mq-topic__icon {
    flex: none;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(255,201,74,.13);
    color: var(--mq-accent);
    font-size: 1.35rem;
}
.mq-topic__text { display: flex; flex-direction: column; min-width: 0; }
.mq-topic__text b { font-size: 1rem; font-weight: 600; }
.mq-topic__text small { color: var(--mq-text-muted); font-size: .82rem; margin-top: .15rem; }
.mq-topic__go { margin-left: auto; color: var(--mq-text-muted); transition: transform .3s var(--mq-ease), color .3s; }
.mq-topic:hover .mq-topic__go, .mq-topic.active .mq-topic__go { color: var(--mq-accent); transform: translateX(4px); }

/* FAQ + contact layout */
.mq-support__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}
.mq-support__faq { scroll-margin-top: calc(var(--mq-nav-h) + 1rem); }
.mq-support__faq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mq-support h2 {
    font-family: var(--mq-font-display);
    font-weight: 400;
    font-size: 2.2rem;
    letter-spacing: .02em;
    margin: 0;
    line-height: 1;
}
.mq-support__clear { background: none; border: 0; color: var(--mq-accent); font-size: .88rem; font-weight: 600; }
.mq-support__clear i { margin-right: .35rem; }

.mq-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--mq-border);
    --bs-accordion-btn-color: var(--mq-text);
    --bs-accordion-active-color: var(--mq-accent);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a3a6b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffc94a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    border-top: 1px solid var(--mq-border);
}
.mq-accordion .accordion-item { color: var(--mq-text); }
.mq-accordion .accordion-button {
    padding: 1.2rem .25rem;
    font-size: 1.05rem;
    font-weight: 600;
    transition: color .2s;
}
.mq-accordion .accordion-button:hover { color: var(--mq-accent); }
.mq-accordion .accordion-body { padding: 0 2.5rem 1.4rem .25rem; color: rgba(255,255,255,.75); line-height: 1.65; }
.mq-accordion .accordion-body a { color: var(--mq-accent); text-underline-offset: 3px; }
.mq-tag { display: inline-block; padding: .12rem .5rem; border-radius: var(--mq-radius-pill); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.mq-tag.watchlist { background: rgba(34,197,94,.88); }
.mq-tag.watched   { background: rgba(59,130,246,.88); }
.mq-tag.reviewed  { background: rgba(255,201,74,.92); color: #16110a; }
.mq-faq-empty { text-align: center; padding: 2.5rem 1rem; color: var(--mq-text-muted); }
.mq-faq-empty i { font-size: 2.4rem; color: var(--mq-accent); }
.mq-faq-empty p { margin: .5rem 0 1.25rem; }

/* Contact card (sticky on desktop) */
.mq-support__contact { position: sticky; top: calc(var(--mq-nav-h) + 1.25rem); scroll-margin-top: calc(var(--mq-nav-h) + 1rem); }
.mq-support__card {
    padding: 1.75rem clamp(1.25rem, 3vw, 2rem) 1.4rem;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid var(--mq-border);
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.mq-support__card-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.mq-support__card-head .mq-auth__icon { margin: 0; flex: none; width: 52px; height: 52px; font-size: 1.4rem; }
.mq-support__card-head p { margin: .35rem 0 0; color: var(--mq-text-muted); font-size: .88rem; }
.mq-support__card-head p i { color: #4ade80; margin-right: .2rem; }

.mq-support__alt {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,.16);
    color: var(--mq-text);
    text-decoration: none;
    transition: border-color .2s, background .2s;
}
.mq-support__alt:hover { color: var(--mq-text); border-color: rgba(255,201,74,.5); background: rgba(255,201,74,.05); }
.mq-support__alt > i:first-child { font-size: 1.4rem; color: var(--mq-accent); }
.mq-support__alt span { display: flex; flex-direction: column; min-width: 0; }
.mq-support__alt small { color: var(--mq-text-muted); font-size: .78rem; }
.mq-support__alt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

/* Restyle the legacy contact form in place */
.mq-support .mq-support__form .container { max-width: none !important; padding: 0 !important; }
.mq-support form { padding: 0 !important; }
.mq-support form > div:has(> h3) { display: none !important; }
.mq-support .form-floating { margin: 0 0 .9rem !important; }
.mq-support .form-control {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: .98rem;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.mq-support input.form-control { height: 58px; }
.mq-support textarea.form-control { min-height: 150px; padding-top: 1.85rem !important; resize: vertical; }
.mq-support .form-control:focus {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,201,74,.7) !important;
    box-shadow: 0 0 0 4px rgba(255,201,74,.14) !important;
}
.mq-support .form-floating > label { color: var(--mq-text-muted) !important; padding-left: 1rem; }
.mq-support .form-floating > .form-control:focus ~ label,
.mq-support .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--mq-accent) !important; opacity: .9; }
.mq-support .form-floating > textarea.form-control ~ label::after { background: transparent !important; }
.mq-support .form-control:-webkit-autofill,
.mq-support .form-control:-webkit-autofill:hover,
.mq-support .form-control:-webkit-autofill:active {
    box-shadow: 0 0 0 100px #1c1e26 inset !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 600000s 0s, color 600000s 0s;
}
.mq-support .form-control:-webkit-autofill:focus {
    box-shadow: 0 0 0 100px #22252e inset, 0 0 0 4px rgba(255,201,74,.14) !important;
    -webkit-text-fill-color: #fff !important;
}
.mq-support .row:has(> #submit) { margin: 1.1rem 0 0 !important; --bs-gutter-x: 0; }
.mq-support #submit {
    width: 100%;
    padding: .95rem 1rem !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--mq-accent-grad) !important;
    color: #16110a !important;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .03em;
    box-shadow: 0 12px 30px rgba(255,160,60,.3);
    transition: transform .2s var(--mq-ease), box-shadow .2s, filter .2s, opacity .2s;
}
.mq-support #submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255,160,60,.45); }
.mq-support #submit:disabled { opacity: .5; cursor: progress; }

@media (max-width: 991.98px) {
    .mq-support__topics { grid-template-columns: 1fr; gap: .75rem; margin-bottom: 2rem; }
    .mq-support__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .mq-support__contact { position: static; }
}

/* =========================================================
   Iteration 4b: Site-wide footer
   ========================================================= */
.mq-footer {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 3rem;
    padding: 0 1.25rem;
    background: linear-gradient(180deg, var(--mq-bg) 0%, #08090c 100%);
    border-top: 1px solid var(--mq-border);
    color: var(--mq-text-muted);
}
.mq-footer::before {   /* gold hairline glow */
    content: "";
    position: absolute;
    top: -1px; left: 50%;
    width: min(680px, 80%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--mq-accent), transparent);
}
.mq-footer > * { max-width: 1320px; margin: 0 auto; }

.mq-footer__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 3.25rem 0 2.75rem;
    border-bottom: 1px solid var(--mq-border);
}
.mq-footer__cta h2 {
    font-family: var(--mq-font-display);
    font-weight: 400;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1;
    text-wrap: balance;
    color: var(--mq-text);
    margin: 0 0 .4rem;
}
.mq-footer__cta p { margin: 0; }
.mq-footer__cta .btn { flex: none; white-space: nowrap; }

.mq-footer__main {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 2rem;
    padding: 2.75rem 0;
}
.mq-footer__brand img { height: 34px; width: auto; margin-bottom: 1rem; }
.mq-footer__brand p { max-width: 30ch; margin: 0; font-size: .92rem; }
.mq-footer__col { display: flex; flex-direction: column; gap: .55rem; }
.mq-footer__col h3 {
    color: var(--mq-text);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 .4rem;
}
.mq-footer__col a {
    color: var(--mq-text-muted);
    text-decoration: none;
    font-size: .92rem;
    width: fit-content;
    transition: color .2s, transform .2s var(--mq-ease);
}
.mq-footer__col a:hover { color: var(--mq-accent); transform: translateX(3px); }

.mq-footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem 2rem;
    padding: 1.4rem 0 1.8rem;
    border-top: 1px solid var(--mq-border);
    font-size: .8rem;
    color: rgba(255,255,255,.4);
}
.mq-footer__tmdb { max-width: 60ch; }
.mq-footer__tmdb a { color: var(--mq-text-muted); }

.mq-totop {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1020;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(20,22,29,.85);
    backdrop-filter: blur(10px);
    color: var(--mq-text);
    font-size: 1.15rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .3s, transform .3s var(--mq-ease), background .2s, color .2s;
}
.mq-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.mq-totop:hover { background: var(--mq-accent); color: #16110a; }

@media (max-width: 991.98px) {
    .mq-footer__cta { flex-direction: column; align-items: flex-start; }
    .mq-footer__main { grid-template-columns: 1fr 1fr; }
    .mq-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .mq-footer__main { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
    .mq-totop { right: .9rem; bottom: .9rem; }
}

/* keep the back-to-top button clear of the reCAPTCHA badge */
body:has(.grecaptcha-badge) .mq-totop { bottom: 92px; }

/* Legacy validators flag bad fields with an inline red border (jQuery .css('border-color','#FF0000')),
   which the theme's !important borders were hiding. Show a themed error state instead.
   The opaque inset keeps autofilled fields dark so their text stays readable. */
:is(.mq-auth, .mq-support) .form-control.form-control:is([style*="255, 0, 0"], [style*="ff0000" i]) {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 1000px #221a1e inset, 0 0 0 4px rgba(248,113,113,.18) !important;
}
:is(.mq-auth, .mq-support) .form-control.form-control:is([style*="255, 0, 0"], [style*="ff0000" i]) ~ label {
    color: #fca5a5 !important;
}

/* =========================================================
   Themed popup (forms/modal.php renders #modal_1)
   Legacy markup untouched: the header's inline colour (red / green / blue) picks the
   accent; js/mq-ui.js adds the icon badge and the action button.
   ========================================================= */
.modal-backdrop.show {
    opacity: 1;
    background-color: rgba(5, 6, 9, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#modal_1 .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin, 1.75rem) * 2);
}
#modal_1 .modal-dialog:not(.modal-lg):not(.modal-xl) { max-width: 470px; }
#modal_1.fade .modal-dialog { transform: translateY(18px) scale(.96); transition: transform .35s var(--mq-ease); }
#modal_1.show .modal-dialog { transform: none; }

#modal_1 .modal-content {
    --mq-modal-accent: var(--mq-accent);
    --mq-modal-rgb: 255, 201, 74;
    position: relative;
    overflow: hidden;
    color: var(--mq-text);
    background:
        radial-gradient(ellipse 70% 55% at 0% 0%, rgba(var(--mq-modal-rgb), .13), transparent 60%),
        linear-gradient(180deg, #1c1e26 0%, #14161c 100%);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 22px;
    box-shadow: 0 40px 100px rgba(0,0,0,.65);
}
#modal_1 .modal-content:has(> .modal-header[style*="red"])   { --mq-modal-accent: #f87171; --mq-modal-rgb: 248, 113, 113; }
#modal_1 .modal-content:has(> .modal-header[style*="green"]) { --mq-modal-accent: #4ade80; --mq-modal-rgb: 74, 222, 128; }
#modal_1 .modal-content::before {   /* accent hairline */
    content: "";
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--mq-modal-accent), transparent);
}

#modal_1 .modal-header {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0 !important;
    padding: 1.5rem 1.5rem .6rem !important;
    background: none !important;   /* replaces the solid red / green / blue bar */
    border: 0;
}
#modal_1 .modal-title {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: var(--mq-font-display);
    font-weight: 400;
    font-size: 1.9rem;
    letter-spacing: .02em;
    line-height: 1;
}
#modal_1 .mq-modal__icon {
    flex: none;
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(var(--mq-modal-rgb), .14);
    border: 1px solid rgba(var(--mq-modal-rgb), .35);
    color: var(--mq-modal-accent);
    font-size: 1.3rem;
    box-shadow: 0 0 32px rgba(var(--mq-modal-rgb), .2);
}
#modal_1 .btn-close {
    flex: none;
    box-sizing: border-box;
    width: 36px; height: 36px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    background: rgba(255,255,255,.07) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / .7rem auto no-repeat !important;
    opacity: .75;
    transition: opacity .2s, background-color .2s, transform .3s var(--mq-ease);
}
#modal_1 .btn-close:hover { opacity: 1; background-color: rgba(255,255,255,.13) !important; transform: rotate(90deg); }
#modal_1 .btn-close:focus { opacity: 1; box-shadow: 0 0 0 3px rgba(var(--mq-modal-rgb), .35); }

#modal_1 .modal-body {
    margin: 0 !important;
    padding: .6rem 1.5rem 1.25rem !important;
    color: rgba(255,255,255,.82);
    font-size: .97rem;
    line-height: 1.6;
}
#modal_1 .modal-body .row { --bs-gutter-x: 0; }
#modal_1 .modal-body .border { border-color: rgba(255,255,255,.08) !important; }

/* errors.php / contact_errors.php: muted intro line + one card per error */
#modal_1 .modal-body h4[style*="color: red"] {
    color: var(--mq-text-muted) !important;
    font-family: var(--mq-font-body);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 .9rem;
}
#modal_1 .modal-body div[style*="color: red"] { display: grid; gap: .55rem; color: inherit !important; }
#modal_1 .modal-body div[style*="color: red"] > div {
    display: flex !important;
    align-items: center;
    gap: .7rem;
    margin: 0 !important;
    padding: .75rem .95rem !important;
    border-radius: 12px;
    background: rgba(248,113,113,.08);
    border: 1px solid rgba(248,113,113,.22);
    color: #fde2e2;
    font-size: .93rem;
    font-weight: 500;
    line-height: 1.4;
}
#modal_1 .modal-body div[style*="color: red"] > div > :is(i, svg) {
    flex: none;
    margin: 0 !important;
    padding: 0 !important;
    color: #f87171;
    font-size: 1.05rem;
}

/* success.php: its <h4> repeats the popup title, so drop it; message text goes light */
#modal_1 .modal-body h4[style*="color: black"] { display: none !important; }
#modal_1 .modal-body [style*="color: black"] { color: rgba(255,255,255,.85) !important; }
#modal_1 .modal-body [style*="color: black"] .mx-auto { margin-left: 0 !important; }

/* terms.php / policy.php: long legal text, scrolls inside the popup */
#modal_1 .modal-dialog.modal-lg .modal-body {
    max-height: min(68vh, 640px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}
#modal_1 .modal-body .p-4 { padding: 0 !important; }
#modal_1 .modal-body .text-dark { color: rgba(255,255,255,.8) !important; }
#modal_1 .modal-body :is(h1, h2, h3) { color: #fff; }
#modal_1 .modal-body h1 { font-family: var(--mq-font-display); font-weight: 400; font-size: 2.2rem; letter-spacing: .02em; }
#modal_1 .modal-body h2 { font-size: 1.2rem; font-weight: 700; margin-top: 1.75rem; }
#modal_1 .modal-body h3 { font-size: 1rem; font-weight: 600; margin-top: 1.25rem; color: var(--mq-accent); }
#modal_1 .modal-body a { color: var(--mq-accent); }

/* Action button row (added by js/mq-ui.js) */
#modal_1 .mq-modal__footer { display: flex; gap: .6rem; padding: 0 1.5rem 1.5rem; }
#modal_1 .mq-modal__footer .btn { flex: 1; padding: .85rem 1rem; border-radius: 12px; font-size: .98rem; }
#modal_1 .mq-modal__footer .btn:focus-visible { box-shadow: 0 0 0 3px rgba(var(--mq-modal-rgb), .45); }
#modal_1 .modal-lg .mq-modal__footer { justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--mq-border); }
#modal_1 .modal-lg .mq-modal__footer .btn { flex: 0 0 auto; padding-inline: 2.25rem; }
.btn-mq-ghost {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--mq-text) !important;
    font-weight: 600;
    border-radius: var(--mq-radius-pill);
    transition: background .2s, border-color .2s;
}
.btn-mq-ghost:hover, .btn-mq-ghost:focus { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.25); }

@media (max-width: 575.98px) {
    #modal_1 .modal-header { padding: 1.25rem 1.15rem .5rem !important; }
    #modal_1 .modal-body { padding: .5rem 1.15rem 1rem !important; }
    #modal_1 .mq-modal__footer { padding: 0 1.15rem 1.15rem; }
    #modal_1 .modal-title { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    #modal_1.fade .modal-dialog { transition: none; }
    #modal_1 .btn-close:hover { transform: none; }
}

/* =========================================================
   Iteration 5: Movie / TV details (mq_details.php)
   ========================================================= */
.mq-detail { margin: 0 0 1rem; }

/* Backdrop hero */
.mq-detail__hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: clamp(520px, 72vh, 760px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background: #0a0b0f;
}
.mq-detail__backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center 25%;
    transform: scale(1.05);
    animation: mq-kenburns 30s ease-in-out infinite alternate;
}
.mq-detail__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(13,14,18,.96) 0%, rgba(13,14,18,.78) 38%, rgba(13,14,18,.25) 75%, rgba(13,14,18,.45) 100%),
        linear-gradient(0deg, var(--mq-bg) 0%, rgba(13,14,18,.55) 28%, rgba(13,14,18,0) 65%);
}
.mq-detail__hero-inner {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 4rem 1.5rem 3rem;
    display: grid;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: end;
}
.mq-detail__poster img,
.mq-detail__noposter {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08);
    animation: mq-rise .8s var(--mq-ease) both;
}
.mq-detail__noposter { display: grid; place-items: center; background: var(--mq-bg-raised); color: var(--mq-text-muted); font-size: 3rem; }
.mq-detail__info { min-width: 0; animation: mq-rise .9s .08s var(--mq-ease) both; }
.mq-detail__info .mq-hero__eyebrow { margin-bottom: 1rem; animation: none; }
.mq-detail__title {
    font-family: var(--mq-font-display);
    font-weight: 400;
    font-size: clamp(42px, 6vw, 88px);   /* px + vw: see the note on .mq-hero__title */
    line-height: .92;
    letter-spacing: .01em;
    margin: 0 0 .6rem;
    text-wrap: balance;
    text-shadow: 0 6px 40px rgba(0,0,0,.5);
}
.mq-detail__tagline { font-size: 1.1rem; font-style: italic; color: rgba(255,255,255,.75); margin: 0 0 1.25rem; }

.mq-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1.4rem; margin-bottom: 1.1rem; }
.mq-rating--lg { position: static; width: 58px; height: 58px; }
.mq-rating--lg b { font-size: 1.05rem; }
.mq-detail__fact { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.88); font-size: .95rem; font-weight: 500; }
.mq-detail__fact i { color: var(--mq-accent); }
.mq-detail__genres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.mq-detail__genres span {
    padding: .35rem .85rem;
    border-radius: var(--mq-radius-pill);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    font-size: .82rem;
    font-weight: 500;
    backdrop-filter: blur(8px);
}

/* Watchlist / Played / Review (the page JS toggles label-active / label-watched / label-reviewed) */
.mq-detail__actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.mq-detail__actions .update {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: auto !important;
    margin: 0 !important;
    padding: .8rem 1.35rem !important;
    border-radius: var(--mq-radius-pill) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: .95rem;
    backdrop-filter: blur(10px);
    transition: transform .2s var(--mq-ease), background .2s, border-color .2s, box-shadow .2s;
}
.mq-detail__actions .update:hover { transform: translateY(-2px); background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.3) !important; }
.mq-detail__actions .update:first-child:not(.label-active) {   /* Watchlist is the primary action */
    background: var(--mq-accent-grad) !important;
    color: #16110a !important;
    border-color: transparent !important;
    box-shadow: 0 10px 28px rgba(255,160,60,.3);
}
.mq-detail__actions .update.label-active   { background: rgba(34,197,94,.9) !important;  color: #fff !important;    border-color: transparent !important; }
.mq-detail__actions .update.label-watched  { background: rgba(59,130,246,.9) !important; color: #fff !important;    border-color: transparent !important; }
.mq-detail__actions .update.label-reviewed { background: rgba(255,201,74,.95) !important; color: #16110a !important; border-color: transparent !important; }
.mq-detail__signin { margin: .9rem 0 0; color: var(--mq-text-muted); font-size: .88rem; }
.mq-detail__signin i { margin-right: .35rem; }
.mq-detail__signin a { color: var(--mq-accent); font-weight: 600; }
.mq-detail .network {
    margin-top: 1rem;
    padding: .75rem 1rem;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--mq-border);
    font-size: .9rem;
    color: rgba(255,255,255,.85);
}

/* Body: content + sticky side panels */
.mq-detail__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 3rem;
    padding: 2.5rem .75rem 0;
    align-items: start;
}
.mq-detail__section { margin-bottom: 3rem; }
.mq-detail__h2 {
    position: relative;
    font-family: var(--mq-font-display);
    font-weight: 400;
    font-size: 2.1rem;
    letter-spacing: .02em;
    line-height: 1;
    margin: 0 0 1.15rem;
    padding-left: 1rem;
}
.mq-detail__h2::before {
    content: "";
    position: absolute;
    left: 0; top: 8%; bottom: 8%;
    width: 5px;
    border-radius: 4px;
    background: var(--mq-accent-grad);
}
.mq-detail__overview { font-size: 1.12rem; line-height: 1.7; color: rgba(255,255,255,.86); max-width: 70ch; margin: 0; }
.mq-detail__makers { margin: 1.1rem 0 0; color: #fff; font-weight: 600; }
.mq-detail__makers span { color: var(--mq-text-muted); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-right: .4rem; }

.mq-cast {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    padding: .25rem .25rem 1rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}
.mq-cast__item { flex: 0 0 116px; scroll-snap-align: start; text-align: center; color: var(--mq-text); text-decoration: none; }
.mq-cast__photo {
    display: grid;
    place-items: center;
    width: 116px; height: 116px;
    margin: 0 auto .6rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mq-bg-raised);
    border: 2px solid rgba(255,255,255,.1);
    color: var(--mq-text-muted);
    font-size: 2.4rem;
    transition: border-color .25s, transform .25s var(--mq-ease);
}
.mq-cast__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.mq-cast__item:hover { color: var(--mq-text); }
.mq-cast__item:hover .mq-cast__photo { border-color: var(--mq-accent); transform: translateY(-3px); }
.mq-cast__name { display: block; font-size: .88rem; font-weight: 600; line-height: 1.25; }
.mq-cast__role {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-top: .15rem;
    color: var(--mq-text-muted);
    font-size: .78rem;
    line-height: 1.25;
}

.mq-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.mq-videos__item .ratio { border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.mq-videos__item iframe { border: 0; }
.mq-videos__item span { display: block; margin-top: .55rem; color: var(--mq-text-muted); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mq-seasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.25rem; }
.mq-seasons__poster {
    display: grid;
    place-items: center;
    aspect-ratio: 2 / 3;
    margin-bottom: .55rem;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mq-bg-raised);
    color: var(--mq-text-muted);
    font-size: 2rem;
    box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
.mq-seasons__poster img { width: 100%; height: 100%; object-fit: cover; }
.mq-seasons__item b { display: block; font-size: .92rem; font-weight: 600; }
.mq-seasons__item small { color: var(--mq-text-muted); font-size: .78rem; }

.mq-detail__side { position: sticky; top: calc(var(--mq-nav-h) + 1.25rem); display: grid; gap: 1.25rem; }
.mq-detail__panel {
    padding: 1.4rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    border: 1px solid var(--mq-border);
}
.mq-detail__panel h3 { margin: 0 0 1rem; color: var(--mq-accent); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mq-providers { display: flex; flex-wrap: wrap; gap: .6rem; }
.mq-providers__item img { display: block; width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.mq-detail__panel-note { margin: .9rem 0 0; color: var(--mq-text-muted); font-size: .78rem; line-height: 1.5; }
.mq-detail__dl { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; margin: 0; font-size: .9rem; }
.mq-detail__dl dt { color: var(--mq-text-muted); font-weight: 500; }
.mq-detail__dl dd { margin: 0; text-align: right; font-weight: 600; }

.mq-detail__main { min-width: 0; }   /* let the cast scroller scroll instead of widening the page */
@media (max-width: 991.98px) {
    .mq-detail__body { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .mq-detail__side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 2rem; }
}
@media (max-width: 767.98px) {
    .mq-detail__hero { min-height: 0; }
    .mq-detail__hero-inner { grid-template-columns: 1fr; padding: 2rem 1.25rem 2.25rem; gap: 1.25rem; }
    .mq-detail__poster { width: 46%; max-width: 200px; }
    .mq-detail__title { font-size: clamp(36px, 10vw, 56px); }
    .mq-detail__actions .update { flex: 1 1 auto; justify-content: center; }
    .mq-videos { grid-template-columns: 1fr; }
    .mq-detail__h2 { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mq-detail__backdrop, .mq-detail__poster img, .mq-detail__info { animation: none; }
}