/* ═════════════════════════════════════════════════════════════════════════
   FilmParty — LIGHT THEME
   Loaded last; every rule is scoped to :root[data-theme="light"], so the dark
   theme is untouched by construction (not by convention).

   WHY AN OVERRIDE SHEET AND NOT A REWRITE
   The dark stylesheets encode ~5.5k literal colours whose MEANING depends on
   the property they land in: a low-alpha white is a *fill* in `background`, a
   *hairline* in `border`, a *specular edge* in `box-shadow`. Light mode is not
   the inverse of those — white-on-white is nothing — and some whites (a label
   on a gradient CTA, a caption over a poster) must stay white. Rewriting them
   in place would risk the dark theme for no gain; scoping the light values
   here keeps one source of truth per theme and makes every decision reviewable.

   THE MATERIAL (Apple, WWDC25 "Meet Liquid Glass" + HIG)
   Light glass = heavy backdrop blur + a saturation boost on what's behind +
   a light tint + a specular top edge, with SHADOW — not a border — carrying
   the separation. Tokens live in variables.css; this file applies them.

   Colours come from tokens. Add a token before adding a literal here.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Reusable glass recipe ──────────────────────────────────────────────── */
:root[data-theme="light"] {
    --fp-lg-backdrop: blur(var(--fp-glass-blur)) saturate(var(--fp-glass-saturate)) brightness(var(--fp-glass-brightness));
}

/* =======================================================================
   1. SHELL
   ==================================================================== */

/* The ambient pools are tuned for a near-black page; on white they turn to
   muddy smears, so light mode uses a much cleaner wash. */
:root[data-theme="light"] body {
    background:
        radial-gradient(ellipse 82% 54% at 50% -10%, rgba(47, 123, 255, 0.07) 0%, transparent 56%),
        radial-gradient(ellipse 40% 30% at 92% 6%, rgba(36, 190, 235, 0.06) 0%, transparent 52%),
        radial-gradient(ellipse 36% 28% at 6% 96%, rgba(255, 48, 79, 0.045) 0%, transparent 50%),
        linear-gradient(180deg, #ffffff 0%, var(--fp-page-bg) 38%, var(--fp-page-bg-deep) 100%);
    background-color: var(--fp-page-bg);
    background-attachment: fixed;
    color: var(--fp-text);
}

:root[data-theme="light"] ::selection {
    background: rgba(47, 123, 255, 0.20);
    color: var(--fp-text);
}

/* Scrollbars — the dark ones disappear against a light page. */
:root[data-theme="light"] * {
    scrollbar-color: rgba(15, 23, 42, 0.26) transparent;
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.22);
    border-radius: 999px;
}
:root[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }

/* =======================================================================
   2. FLOATING CHROME — topbar, bottom island, drawers
   The one place Apple keeps truly translucent. Blur + saturation do the
   work; the shadow separates it from the content scrolling underneath.
   ==================================================================== */

/* The glass belongs to the PLATE. The island's own element carries the pill —
   its children are bare links, and giving them a background turns one island
   into five floating pills. Target the plate, and only the plate. */
:root[data-theme="light"] .topbar-glass,
:root[data-theme="light"] .mobile-bottom-nav,
:root[data-theme="light"] .fp-bottom-nav,
:root[data-theme="light"] .search-drawer,
:root[data-theme="light"] .fp-am-island {
    background:
        linear-gradient(180deg, var(--fp-specular) 0%, transparent 46%, rgba(15, 23, 42, 0.04) 100%),
        var(--fp-chrome-fill) !important;
    border-color: var(--fp-chrome-border) !important;
    -webkit-backdrop-filter: var(--fp-lg-backdrop) !important;
    backdrop-filter: var(--fp-lg-backdrop) !important;
    box-shadow:
        inset 0 1px 0 var(--fp-specular-strong),
        var(--fp-chrome-shadow) !important;
}

/* Children stay transparent — no size, spacing or position is touched. */
:root[data-theme="light"] .mobile-bottom-nav > *,
:root[data-theme="light"] .fp-bottom-nav > * {
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Icons/labels inside the chrome. */
:root[data-theme="light"] .mobile-bottom-nav a,
:root[data-theme="light"] .mobile-bottom-nav button,
:root[data-theme="light"] .topbar-glass .fp-am-topicon,
:root[data-theme="light"] .topbar-left a,
:root[data-theme="light"] .topbar-right a {
    color: var(--fp-text-soft) !important;
}
:root[data-theme="light"] .mobile-bottom-nav a.active,
:root[data-theme="light"] .mobile-bottom-nav .active {
    color: var(--fp-accent) !important;
}

/* Shortcut discs (profile «یافتن بقیه» / «تماشای گروهی» / «دعوت دوستان» /
   «لیست جدید»). The dark theme draws a ~15% wash of the hue behind a PALE
   glyph (stroke="#DCE9FF" etc.) — two pale things stacked, which vanishes on a
   light page. Light mode does what iOS does: a SOLID saturated disc with a
   white glyph. Order is fixed in the markup, so nth-of-type keeps each item's
   own hue instead of flattening them all to one colour. Size/geometry
   untouched — colour only. */
:root[data-theme="light"] .fp-am-circle .ring {
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14) !important;
}
:root[data-theme="light"] .fp-am-circle:nth-of-type(1) .ring { background: #2F7BFF !important; }
:root[data-theme="light"] .fp-am-circle:nth-of-type(2) .ring { background: #EC3A86 !important; }
:root[data-theme="light"] .fp-am-circle:nth-of-type(3) .ring { background: #17B890 !important; }
:root[data-theme="light"] .fp-am-circle:nth-of-type(4) .ring { background: #7C5CFF !important; }

/* the glyph rides on the saturated disc, so it goes white and solid */
:root[data-theme="light"] .fp-am-circle .ring svg [stroke],
:root[data-theme="light"] .fp-am-circle .ring svg { stroke: #fff !important; }
:root[data-theme="light"] .fp-am-circle .ring svg [fill]:not([fill="none"]) { fill: #fff !important; }

:root[data-theme="light"] .fp-am-circle span:not(.ring) { color: var(--fp-text-soft); }

/* =======================================================================
   3. APP-MATCH DESIGN SYSTEM (.fp-am-*) — the 8 rebuilt user pages

   app-match.css carries its own `--am-*` token set (it mirrors the Android
   app's tokens 1:1). Re-pointing those is the highest-leverage move in the
   whole light theme: one block rethemes every rule that reads a token, and
   only the handful that hardcode a literal need naming below.
   ==================================================================== */

:root[data-theme="light"] {
    --am-bg-top: #ffffff;
    --am-bg-deep: var(--fp-page-bg-deep);
    --am-bg: var(--fp-page-bg);
    --am-surface: var(--fp-surface-7);
    --am-surface-2: var(--fp-surface-5);

    --am-text: var(--fp-text);
    --am-text-2: var(--fp-text-soft);
    --am-text-3: var(--fp-text-muted);

    /* Brand hues darkened just enough to clear AA as text on white. The
       gradients (--am-follow) keep their original colours — white text on
       them is already high-contrast. */
    --am-red: var(--fp-danger);
    --am-blue: var(--fp-accent);
    --am-green: var(--fp-success);
    --am-gold: var(--fp-gold);

    --am-glass: var(--fp-surface-2);
    --am-glass-strong: var(--fp-surface-3);
    --am-glass-08: var(--fp-surface-1);
    --am-glass-border: var(--fp-hairline);
    --am-glass-border-soft: var(--fp-hairline-faint);
    --am-well: var(--fp-well);
}

/* --- surfaces ---------------------------------------------------------- */
:root[data-theme="light"] .fp-am-group,
:root[data-theme="light"] .fp-am-card,
:root[data-theme="light"] .fp-am-panel,
:root[data-theme="light"] .fp-am-usermore-menu,
:root[data-theme="light"] .fp-am-kebab-menu {
    background: var(--fp-surface-6);
    border-color: var(--fp-hairline);
    box-shadow: inset 0 1px 0 var(--fp-specular), var(--fp-shadow-md);
}

/* Glass buttons: white film → real light surface with a lit top edge. */
:root[data-theme="light"] .fp-am-btn {
    background: linear-gradient(180deg, var(--fp-surface-7), var(--fp-surface-5));
    border-color: var(--fp-hairline);
    color: var(--fp-text);
    box-shadow: inset 0 1px 0 var(--fp-specular), var(--fp-shadow-sm);
}
:root[data-theme="light"] .fp-am-circle,
:root[data-theme="light"] .fp-am-chip {
    background: var(--fp-surface-4);
    border-color: var(--fp-hairline);
}
/* NOTE: .fp-am-tab is an underline tab (transparent, with a gradient bar),
   not a pill — it must NOT be given a surface here or its shape changes. Its
   colours come from --am-text-2 / the rule below. */

/* --- text: flip everything that sits on glass -------------------------- */
:root[data-theme="light"] .fp-am-name,
:root[data-theme="light"] .fp-am-stat b,
:root[data-theme="light"] .fp-am-tab.active,
:root[data-theme="light"] .fp-am-histrow .m .t,
:root[data-theme="light"] .fp-am-comment-stats b,
:root[data-theme="light"] .fp-am-userbar-title strong,
:root[data-theme="light"] .public-modern-profile .profile-section-head h2,
:root[data-theme="light"] .fp-am-set-head h1,
:root[data-theme="light"] .fp-am-back,
:root[data-theme="light"] .fp-am-srow .st .tt,
:root[data-theme="light"] .fp-am-note-body,
:root[data-theme="light"] .fp-am-comment-body,
:root[data-theme="light"] .fp-am-usermore-btn,
:root[data-theme="light"] .fp-am-usermore-menu button,
:root[data-theme="light"] .fp-am-kebab-btn,
:root[data-theme="light"] .fp-am-kebab-item {
    color: var(--fp-text);
}

:root[data-theme="light"] .fp-am-bio,
:root[data-theme="light"] .fp-am-stat span,
:root[data-theme="light"] .fp-am-circle span,
:root[data-theme="light"] .fp-am-srow .st .ts {
    color: var(--fp-text-soft);
}

:root[data-theme="light"] .fp-am-social-line,
:root[data-theme="light"] .fp-am-nolists,
:root[data-theme="light"] .fp-am-srow .chev,
:root[data-theme="light"] .fp-am-search svg {
    color: var(--fp-text-muted);
}

:root[data-theme="light"] .fp-am-search input::placeholder,
:root[data-theme="light"] .fp-am-inline-form input::placeholder {
    color: var(--fp-text-faint);
}

/* «دلخواه» + «تاریخچه» card surfaces.
   These two panels build their cards from HARD-CODED white-on-dark glass
   (rgba(255,255,255,.043) / .08) instead of the --am-glass tokens the rest of
   the dashboard uses, so the light-theme token remap skips them: on a light
   page the fill stays a near-invisible white while the text flips dark, which
   is exactly the "broken background" on these two tabs. Give them the same
   light glass every other dashboard card gets. (Dark is untouched — scoped to
   the light root.) */
:root[data-theme="light"] .fp-am-histrow {
    background: var(--fp-surface-1);
    border-color: var(--fp-hairline);
}
:root[data-theme="light"] .fp-am-histrow .p,
:root[data-theme="light"] .fp-am-poster .p {
    background: var(--fp-surface-3);
    border-color: var(--fp-hairline);
}

/* Rows/dividers. */
:root[data-theme="light"] .fp-am-srow + .fp-am-srow,
:root[data-theme="light"] .fp-am-session + .fp-am-session,
:root[data-theme="light"] .fp-am-group > * + * {
    border-top-color: var(--fp-hairline-faint);
}
:root[data-theme="light"] .fp-am-srow:active,
:root[data-theme="light"] .fp-am-kebab-item:hover,
:root[data-theme="light"] .fp-am-usermore-menu button:hover {
    background: var(--fp-well-soft);
}

/* Group captions. */
:root[data-theme="light"] .fp-am-glabel {
    color: var(--fp-text-muted);
}

/* --- iOS-style settings icon squares -----------------------------------
   Dark uses a 30%→14% tint of the row's hue behind a white glyph. On a light
   page that reads as a pastel smudge, so light mode goes to a SOLID hue —
   exactly what iOS Settings does — keeping the white glyph at full contrast. */
:root[data-theme="light"] .fp-am-isq {
    background: rgb(var(--t));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

/* --- keep-white: anything on a brand gradient or solid accent ----------- */
:root[data-theme="light"] .fp-am-follow,
:root[data-theme="light"] .fp-am-save,
:root[data-theme="light"] .fp-am-edit-save,
:root[data-theme="light"] .fp-am-btn.fp-am-btn-primary,
:root[data-theme="light"] .fp-am-seg button.is-active,
:root[data-theme="light"] .fp-am-seg button.active,
:root[data-theme="light"] .fp-am-gender input:checked + span,
:root[data-theme="light"] .fp-am-edit-cover span {
    color: var(--fp-text-on-media);
}
/* …and their surfaces must not inherit the glass overrides above. */
:root[data-theme="light"] .fp-am-btn.fp-am-btn-primary {
    background: linear-gradient(105deg, #FFB347, #FF7A45 34%, #FF4D7B 70%, #E02E8A);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(224, 46, 138, 0.28);
}

/* Toast keeps its dark plate — a dark chip on a light page reads as "system". */
:root[data-theme="light"] .fp-am-savedhint {
    box-shadow: var(--fp-shadow-lg);
}

/* --- fields / wells ----------------------------------------------------- */
:root[data-theme="light"] .fp-am-search,
:root[data-theme="light"] .fp-am-inline-form input,
:root[data-theme="light"] .fp-am-2fa-row input,
:root[data-theme="light"] .fp-am-rowselect,
:root[data-theme="light"] .fp-am-seg {
    background: var(--fp-well);
    border-color: var(--fp-hairline);
    color: var(--fp-text);
}
:root[data-theme="light"] .fp-am-2fa-row input { color: var(--fp-text); }
:root[data-theme="light"] .fp-am-2fa-msg,
:root[data-theme="light"] .fp-am-sessions-loading,
:root[data-theme="light"] .fp-am-sessions-empty { color: var(--fp-text-soft); }
:root[data-theme="light"] .fp-am-session-info .nm { color: var(--fp-text); }
:root[data-theme="light"] .fp-am-session-info .mt { color: var(--fp-text-muted); }

/* Focus ring — visible on light, and never removed. */
:root[data-theme="light"] .fp-am-search:focus-within,
:root[data-theme="light"] .fp-am-inline-form input:focus {
    border-color: var(--fp-accent-border);
    box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.14);
}

/* Page-level ambient washes are tuned to glow on near-black; over a light page
   the same pools read as a coloured haze. Neutralise them — the shell's own
   wash (section 1) already carries the depth. */
:root[data-theme="light"] .profile-modern-page,
:root[data-theme="light"] .public-modern-profile,
:root[data-theme="light"] .fp-shell,
:root[data-theme="light"] .shell-page {
    background-image: none !important;
    background-color: transparent !important;
}

/* Mask-painted icon fonts inside the island paint with background-color. */
:root[data-theme="light"] .fp-bottom-nav__icon,
:root[data-theme="light"] .fp-bottom-nav__icon::before,
:root[data-theme="light"] .fp-bottom-nav__icon::after {
    color: inherit;
}
:root[data-theme="light"] .fp-bottom-nav__link { color: var(--fp-text-soft); }
:root[data-theme="light"] .fp-bottom-nav__link.active { color: var(--fp-accent); }

/* =======================================================================
   3b. ICONS CARRY NO CHROME
   Rule for the whole light theme: an icon is a glyph, never a chip. No fill,
   no rim, no shadow around it — the icon's own colour does all the work.
   (The generator can re-introduce a box when the dark sheet had one; this
   block runs after it and strips them back off.)
   ==================================================================== */
/* Specificity is deliberately high: several of these icons are also styled by
   JS-injected inline sheets (e.g. the topbar size-lock) that would otherwise
   outrank a plain scoped rule and put the frame back. */
html:root[data-theme="light"] body .wishlist-heart,
html:root[data-theme="light"] body .js-wishlist-toggle,
html:root[data-theme="light"] body .fp-bottom-nav__icon,
html:root[data-theme="light"] body .fp-am-topicon,
html:root[data-theme="light"] body .topbar-icon,
html:root[data-theme="light"] body .search-open-btn,
html:root[data-theme="light"] body .desktop-menu-btn,
html:root[data-theme="light"] body .notification-bell,
html:root[data-theme="light"] body .notification-bell-btn,
html:root[data-theme="light"] body .notification-bell-shell,
html:root[data-theme="light"] body .carousel-nav,
html:root[data-theme="light"] body .fp-am-kebab-btn,
html:root[data-theme="light"] body .fp-am-usermore-btn,
/* NOTE the :not(...btn) guards. Without them this matched BUTTONS whose class
   merely contains "icon" (e.g. .fp-stream-icon-btn) and stripped the glass off
   the control itself, leaving an empty disc. Only bare glyph elements here. */
html:root[data-theme="light"] body [class*="-icon"]:not([class*="-iconbox"]):not([class*="btn"]):not(button):not(a),
html:root[data-theme="light"] body [class*="icon-"]:not([class*="iconbox"]):not([class*="btn"]):not(button):not(a) {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    /* An icon is a glyph, not secondary text — it never inherits a muted ramp
       step, or it reads as disabled. */
    color: var(--fp-icon) !important;
    opacity: 1 !important;
}

/* Chrome icons sit on glass and must be the strongest of all. */
:root[data-theme="light"] .topbar-glass .fp-am-topicon,
:root[data-theme="light"] .topbar-left .search-open-btn,
:root[data-theme="light"] .topbar-right .desktop-menu-btn,
:root[data-theme="light"] .notification-bell-btn {
    color: var(--fp-icon-strong) !important;
}
/* Inline SVGs inherit, so a stroke/fill of currentColor picks the above up. */
:root[data-theme="light"] .topbar-glass svg,
:root[data-theme="light"] .fp-am-topicon svg,
:root[data-theme="light"] .search-open-btn svg,
:root[data-theme="light"] .notification-bell-btn svg,
:root[data-theme="light"] .desktop-menu-btn svg {
    color: var(--fp-icon-strong) !important;
    stroke: currentColor;
    opacity: 1 !important;
}
/* SVGs never cast a shadow of their own. */
:root[data-theme="light"] svg { filter: none !important; }

/* The topbar icon chips are driven by their own token set in
   topbar-scroll-unified.css (`--fp-topbar-chip-*`), applied with !important
   from inside @media/high-specificity rules — so the honest fix is to answer
   at the token level rather than out-shout them. Light mode dissolves the chip
   entirely: glyph only, no plate, no rim, per the no-box rule. */
:root[data-theme="light"] .topbar-glass,
:root[data-theme="light"] html body .filmparty-home > .topbar-glass:not(.is-scrolled),
:root[data-theme="light"] .topbar-glass:not(.is-scrolled),
:root[data-theme="light"] .topbar-glass.is-scrolled {
    --fp-topbar-chip-idle-bg: transparent;
    --fp-topbar-chip-idle-border: transparent;
    --fp-topbar-chip-bg: transparent;
    --fp-topbar-chip-border: transparent;
    --fp-topbar-chip-blur: none;
}

/* =======================================================================
   3c. THE ISLAND — iOS Liquid Glass, with a lens on the active tab
   The selected item gets a real refracting lens: a bright, saturated puck
   that scales in on a spring, exactly like the app's GlassLens. Only paint
   and transform — the island's box, height and spacing are untouched, so
   nothing moves.
   ==================================================================== */
:root[data-theme="light"] .mobile-bottom-nav,
:root[data-theme="light"] .fp-bottom-nav {
    /* Matched to the iOS tab bar: a NEUTRAL GREY frost, not a white wash — the
       grey is what lets dark glyphs read and keeps the bar distinct from the
       page. Blur + saturation still pull colour up from whatever scrolls under. */
    background:
        linear-gradient(180deg, rgba(238, 239, 243, 0.88) 0%, rgba(228, 230, 236, 0.84) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -1px 0 rgba(15, 23, 42, 0.06),
        0 1px 3px rgba(15, 23, 42, 0.10),
        0 14px 36px rgba(15, 23, 42, 0.16) !important;
}

/* THE LENS — matched to the iOS tab bar (App Store / Apple Music): a capsule
   that covers the WHOLE item, sitting behind the glyph, while the glyph itself
   takes the accent colour. It is `inset`-anchored to the item, so it can never
   drift off-centre the way an absolutely-sized puck does. */
:root[data-theme="light"] .fp-bottom-nav__link,
:root[data-theme="light"] .mobile-bottom-nav a {
    position: relative;
    isolation: isolate;
}
:root[data-theme="light"] .fp-bottom-nav__link::before,
:root[data-theme="light"] .mobile-bottom-nav a::before {
    content: "";
    position: absolute;
    inset: 3px 5px;                 /* hugs the item — icon AND label */
    border-radius: 999px;
    opacity: 0;
    transform: scale(0.72);
    transform-origin: 50% 50%;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.74));
    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 3px rgba(15, 23, 42, 0.10);
    transition:
        transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 200ms ease;
}
:root[data-theme="light"] .fp-bottom-nav__link.active::before,
:root[data-theme="light"] .mobile-bottom-nav a.active::before {
    opacity: 1;
    transform: scale(1);
}

/* Inactive glyphs: SOLID and clearly dark — never a faint wash. */
:root[data-theme="light"] .fp-bottom-nav__link,
:root[data-theme="light"] .fp-bottom-nav__link .fp-bottom-nav__icon,
:root[data-theme="light"] .fp-bottom-nav__link .fp-bottom-nav__svg,
:root[data-theme="light"] .mobile-bottom-nav a {
    color: #3C4654 !important;
}
/* Active: the glyph takes the brand accent, like the target's blue/pink tab. */
:root[data-theme="light"] .fp-bottom-nav__link.active,
:root[data-theme="light"] .fp-bottom-nav__link.active .fp-bottom-nav__icon,
:root[data-theme="light"] .fp-bottom-nav__link.active .fp-bottom-nav__svg,
:root[data-theme="light"] .mobile-bottom-nav a.active {
    color: #E0286F !important;
}
:root[data-theme="light"] .fp-bottom-nav__svg { stroke-width: 1.9; }

@media (prefers-reduced-motion: reduce) {
    :root[data-theme="light"] .fp-bottom-nav__link::before,
    :root[data-theme="light"] .mobile-bottom-nav a::before { transition: none; }
}

/* =======================================================================
   3d. MOVIE PAGE BACKDROP
   The movie page is a blurred film still (.movie-bg) under a scrim
   (.movie-bg-overlay) with glass panels floating on top. The dark scrim keeps
   the whole page dark no matter what the panels do, so light mode swaps it for
   a light veil — which is the most Liquid-Glass surface on the site: real
   photographic colour diffusing up through frosted white.
   ==================================================================== */
/* A 0.82 veil over a dark still averages out to GREY MUD — light enough to
   ruin white text, dark enough to ruin dark text. The veil has to commit: it
   is essentially opaque, and the film's colour survives only as a faint wash
   through the still underneath. */
:root[data-theme="light"] .movie-bg-overlay {
    background-color: rgba(243, 246, 251, 0.965) !important;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(47, 123, 255, 0.09), transparent 44%),
        radial-gradient(circle at 0% 100%, rgba(255, 48, 79, 0.06), transparent 46%) !important;
}
:root[data-theme="light"] .movie-bg {
    opacity: 0.30;
    filter: saturate(150%) brightness(120%);
}

/* The title / meta / CTA text sits on the light glass panel, not on the
   still, so it flips. (These live in minified, !important, @media-nested
   rules inside movies/show.php, hence the explicit list.) */
:root[data-theme="light"] .movie-info-content h1 { color: var(--fp-text) !important; }
:root[data-theme="light"] .movie-info-content h1 .yr { color: var(--fp-text-muted) !important; }
:root[data-theme="light"] .fp-am-mv-fa { color: var(--fp-text-soft) !important; }
:root[data-theme="light"] .fp-am-metacol b { color: var(--fp-text) !important; }
:root[data-theme="light"] .fp-am-metacol span { color: var(--fp-text-muted) !important; }
:root[data-theme="light"] .movie-title-fa,
:root[data-theme="light"] .movie-info-head .movie-title-en { color: var(--fp-text) !important; }

/* SAFETY NET — everything inside the movie page's glass panel sits on light
   glass, so nothing in it may stay white. Scoped to the panel (never the
   banner/poster), and set on the containers so children inherit rather than
   being forced, which would flatten deliberate accent colours. */
:root[data-theme="light"] .movie-glass-panel,
:root[data-theme="light"] .movie-main-info,
:root[data-theme="light"] .movie-info-content,
:root[data-theme="light"] .movie-info-head,
:root[data-theme="light"] .movie-description,
:root[data-theme="light"] .movie-extra-panel,
:root[data-theme="light"] .movie-floating-page > section { color: var(--fp-text); }

:root[data-theme="light"] .movie-glass-panel p,
:root[data-theme="light"] .movie-glass-panel li,
:root[data-theme="light"] .movie-description,
:root[data-theme="light"] .movie-description * { color: var(--fp-text-soft) !important; }

/* Genre chips: a real tinted chip with a readable label, not a pale wash. */
:root[data-theme="light"] .movie-genre-row span,
:root[data-theme="light"] .movie-genre-chip,
:root[data-theme="light"] .movie-meta-row span {
    background-color: rgba(47, 123, 255, 0.10) !important;
    border-color: rgba(47, 123, 255, 0.30) !important;
    color: #1a4fae !important;
}

/* Ghost/outline actions (پیشنهاد به دوستان, افزودن به پروفایل, دیده شد). */
:root[data-theme="light"] .movie-user-actions-centered a,
:root[data-theme="light"] .movie-user-actions-centered button,
:root[data-theme="light"] .movie-ghost-btn,
:root[data-theme="light"] .movie-seen-btn {
    color: var(--fp-text) !important;
    border-color: var(--fp-hairline-strong) !important;
    background-color: var(--fp-surface-4) !important;
}

/* Dark glass panels the generator left alone (their fills are dark rgba, which
   it only converts to a "well", not to a raised surface). On a light page they
   read as holes, so they become light glass. */
:root[data-theme="light"] .fp-rate-panel,
:root[data-theme="light"] .fp-stream-icon-btn.is-friends,
:root[data-theme="light"] .fp-stream-icon-btn.is-watch,
:root[data-theme="light"] .fp-dl-panel,
:root[data-theme="light"] .fp-info-panel {
    background-color: var(--fp-surface-5) !important;
    border-color: var(--fp-hairline) !important;
    color: var(--fp-text) !important;
    box-shadow: inset 0 1px 0 var(--fp-specular), var(--fp-shadow-sm) !important;
}
:root[data-theme="light"] .fp-rate-panel *,
:root[data-theme="light"] .fp-rate-panel .fp-rate-label { color: var(--fp-text-soft) !important; }
:root[data-theme="light"] .fp-rate-panel .fp-rate-score,
:root[data-theme="light"] .fp-rate-panel b,
:root[data-theme="light"] .fp-rate-panel strong { color: var(--fp-gold) !important; }
/* the stars keep their gold; only the empty ones go to a visible grey */
:root[data-theme="light"] .fp-rate-stars svg,
:root[data-theme="light"] .fp-rate-stars i { color: #c9a13a; }

/* Placeholders must be readable, not ghosts. */
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder { color: var(--fp-text-muted) !important; opacity: 1; }

/* Stream buttons: keep the brand rim, flip the label so it is legible. */
:root[data-theme="light"] .fp-stream-icon-btn,
:root[data-theme="light"] .fp-stream-icon-btn .fp-sbtn-text,
:root[data-theme="light"] .fp-sbtn-text { color: var(--fp-text) !important; }
:root[data-theme="light"] .fp-stream-icon-btn svg,
:root[data-theme="light"] .fp-stream-icon-btn .fp-icon {
    color: var(--fp-icon-strong) !important;
    background-color: var(--fp-icon-strong);
}
:root[data-theme="light"] .fp-stream-icon-btn.is-disabled,
:root[data-theme="light"] .fp-stream-icon-btn.is-disabled .fp-sbtn-text { color: var(--fp-text-faint) !important; }

/* =======================================================================
   3e. PAGE SHELLS THAT PAINT THEIR OWN DARK BACKDROP
   A few pages set a near-black base plus coloured radial pools directly on a
   wrapper (the generator leaves gradients alone, since a gradient is not a
   token swap). Light mode replaces the base and keeps the pools as a faint
   tint, so the page reads as the same design in daylight.
   ==================================================================== */
:root[data-theme="light"] .fp-subx-page,
:root[data-theme="light"] .fp-wallet-page,
:root[data-theme="light"] .fp-wp-page,
:root[data-theme="light"] .watch-party-page {
    background-color: var(--fp-page-bg) !important;
    background-image:
        radial-gradient(circle at 18% 10%, rgba(255, 79, 123, 0.10), transparent 42%),
        radial-gradient(circle at 84% 6%, rgba(47, 123, 255, 0.10), transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(190, 80, 165, 0.07), transparent 46%) !important;
    color: var(--fp-text);
}

/* Referral/invite card on the subscription page — its copy is set on bare
   <p>/<a> inside a gradient card, so it needs naming explicitly. */
:root[data-theme="light"] [class*="fp-subx-referral"] p,
:root[data-theme="light"] [class*="fp-subx-referral"] a,
:root[data-theme="light"] [class*="fp-subx-referral"] span,
:root[data-theme="light"] [class*="fp-subx-invite"] p,
:root[data-theme="light"] [class*="fp-subx-invite"] a { color: var(--fp-text-soft) !important; }
:root[data-theme="light"] .fp-subx-referral-gift-note,
:root[data-theme="light"] .fp-subx-referral-stats,
:root[data-theme="light"] .fp-subx-referral-stats.muted { color: var(--fp-text-muted) !important; }
:root[data-theme="light"] .fp-subx-plan-sub,
:root[data-theme="light"] .fp-subx-plan p,
:root[data-theme="light"] [class*="fp-subx"] .muted { color: var(--fp-text-muted) !important; }

/* =======================================================================
   4. CONTENT SURFACES — cards, posters, sections
   ==================================================================== */

:root[data-theme="light"] .movie-card,
:root[data-theme="light"] .fp-card,
:root[data-theme="light"] .glass-card,
:root[data-theme="light"] .profile-section,
:root[data-theme="light"] .fp-section {
    background: var(--fp-surface-6);
    border-color: var(--fp-hairline);
    box-shadow: inset 0 1px 0 var(--fp-specular), var(--fp-shadow-sm);
}

/* A poster is media: its scrim and its overlaid text stay as they are, or the
   title becomes unreadable against the artwork. */
:root[data-theme="light"] .movie-card__title,
:root[data-theme="light"] .movie-card .title {
    color: var(--fp-text);
}
:root[data-theme="light"] .movie-card__meta,
:root[data-theme="light"] .movie-card .meta {
    color: var(--fp-text-muted);
}

/* Skeletons. */
:root[data-theme="light"] .skeleton,
:root[data-theme="light"] .is-loading {
    background: var(--fp-skeleton);
}

/* =======================================================================
   5. MENUS, SHEETS, MODALS
   ==================================================================== */

:root[data-theme="light"] .glass-modal-card,
:root[data-theme="light"] .fp-sheet,
:root[data-theme="light"] .fp-wp-sheet,
:root[data-theme="light"] .dropdown-menu,
:root[data-theme="light"] .desktop-menu {
    background: var(--fp-panel);
    border-color: var(--fp-hairline);
    color: var(--fp-text);
    box-shadow: inset 0 1px 0 var(--fp-specular), var(--fp-shadow-lg);
}

/* Scrims stay dark — they exist to focus attention, in either theme. */

/* =======================================================================
   6. ICONS
   Most glyphs are inline SVG using `currentColor`, so they follow the text
   colours above automatically. These are the ones that hardcode a light
   value and would otherwise vanish on a white surface.
   ==================================================================== */

:root[data-theme="light"] svg[stroke="#fff"],
:root[data-theme="light"] svg[stroke="#ffffff"],
:root[data-theme="light"] svg[stroke="white"] { stroke: currentColor; }

:root[data-theme="light"] svg[fill="#fff"]:not([fill-rule]),
:root[data-theme="light"] svg[fill="#ffffff"]:not([fill-rule]),
:root[data-theme="light"] svg[fill="white"]:not([fill-rule]) { fill: currentColor; }

/* Many glyphs are a bare <svg><path/></svg> with no fill/stroke of their own,
   so they fall back to the UA default (black) or to a white the dark theme set.
   Binding both to currentColor makes every one of them follow the icon colour
   — this is what stops glyphs disappearing into a light surface. */
:root[data-theme="light"] .fp-sbtn-ico svg,
:root[data-theme="light"] .fp-sbtn-ico svg path,
:root[data-theme="light"] button svg:not([fill]):not([stroke]) path:not([fill]),
:root[data-theme="light"] a svg:not([fill]):not([stroke]) path:not([fill]) {
    fill: currentColor;
}
:root[data-theme="light"] .fp-sbtn-ico { color: var(--fp-icon-strong); }

/* MASK-BASED ICONS (.fp-icon) PAINT WITH background-color — the glyph IS the
   background. Clearing it (as the no-box rule does for chip-style icons) does
   not remove a box, it removes the ICON. So they are excluded above and given
   their colour here instead. */
:root[data-theme="light"] .fp-icon,
:root[data-theme="light"] [class^="fp-icon-"],
:root[data-theme="light"] [class*=" fp-icon-"] {
    background-color: var(--fp-icon) !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Glyphs sitting on media/accent keep their light fill. */
:root[data-theme="light"] .fp-am-isq svg,
:root[data-theme="light"] .fp-am-btn-primary svg,
:root[data-theme="light"] .fp-am-follow svg,
:root[data-theme="light"] [class*="overlay"] svg,
:root[data-theme="light"] .movie-card svg.on-poster { color: #fff; stroke: #fff; }

/* =======================================================================
   7. STATUS / ACCENT TEXT
   The dark theme's pastel status colours (#ff8a9b, #ffcf5a) are tuned for a
   black backdrop and fail contrast on white; the tokens carry darker
   equivalents that pass AA.
   ==================================================================== */

:root[data-theme="light"] .fp-am-usermore-menu form button,
:root[data-theme="light"] .fp-am-logout a,
:root[data-theme="light"] .fp-am-edit-cover-del button,
:root[data-theme="light"] .fp-am-session-out { color: var(--fp-danger); }

:root[data-theme="light"] .fp-am-giftplus-btn { color: var(--fp-gold); }

:root[data-theme="light"] .fp-am-session-out {
    background: var(--fp-danger-fill);
    border-color: var(--fp-danger-border);
}

/* =======================================================================
   8. MEDIA CONTEXTS THAT MUST NOT FLIP
   Anything drawn over artwork or video keeps its dark-on-light-proof
   treatment: player chrome, hero banners, poster overlays.
   ==================================================================== */

/* These are deliberately NOT flipped anywhere above — listed here so the
   omission reads as a decision rather than an oversight. Player chrome, hero
   banners and poster overlays sit on artwork, so they keep light-on-dark
   treatment in both themes. */
:root[data-theme="light"] .fp-hero-title,
:root[data-theme="light"] .fp-hero-meta,
:root[data-theme="light"] .stream-player .ctl,
:root[data-theme="light"] .stream-player button { color: var(--fp-text-on-media); }