/**
 * Home Trending + Latest surface presets (driven by body[data-home-sections-preset] from admin).
 * Classic defaults on :root; Midnight + Shell harmony on body[data-home-sections-preset]. (Multi-value vars cannot be var() fallbacks.)
 * Load after header-brand.css, before trending-home.css / latest-home.css.
 */

:root {
    --home-section-surface: linear-gradient(
        105deg,
        rgba(69, 10, 10, 0.97) 0%,
        rgba(15, 10, 12, 0.96) 38%,
        rgba(12, 8, 14, 0.98) 100%
    );
    --home-section-border: rgba(245, 158, 11, 0.22);
    --home-section-box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(245, 158, 11, 0.08);
    --home-section-panel-radials: radial-gradient(ellipse 70% 55% at 100% 0%, rgba(185, 28, 28, 0.18), transparent 55%),
        radial-gradient(ellipse 50% 40% at 0% 100%, rgba(245, 158, 11, 0.1), transparent 50%);
    --home-section-trend-accent-bg: linear-gradient(180deg, #f472b6 0%, #e11d48 45%, #991b1b 100%);
    --home-section-trend-accent-shadow: 0 0 12px rgba(244, 63, 94, 0.35);
    --home-section-latest-title-gradient: linear-gradient(100deg, #fff7ed 10%, #fde68a 45%, #fbbf24 85%);
    --home-section-latest-meta-color: rgba(254, 243, 199, 0.75);
    --home-section-latest-cta-color: #fffbeb;
    --home-section-latest-cta-bg: linear-gradient(135deg, rgba(185, 28, 28, 0.55), rgba(127, 29, 29, 0.65));
    --home-section-latest-cta-border: rgba(245, 158, 11, 0.35);
    --home-section-latest-cta-shadow: 0 8px 28px rgba(185, 28, 28, 0.28);
    --home-section-latest-cta-hover-border: rgba(251, 191, 36, 0.55);
    --home-section-latest-cta-hover-shadow: 0 12px 36px rgba(185, 28, 28, 0.38);
    --home-section-trend-scrollbar-thumb: linear-gradient(90deg, #b91c1c, #f59e0b);
    --home-section-trend-scrollbar-pair: rgba(245, 158, 11, 0.55) rgba(30, 10, 10, 0.5);
    --home-section-trend-top-card-shadow: 0 18px 50px rgba(185, 28, 28, 0.35), 0 0 0 1px rgba(245, 158, 11, 0.25);
    --home-section-trend-ribbon-bg: linear-gradient(135deg, #fde68a, #f59e0b);
    --home-section-trend-ribbon-color: #1c0a0a;
    --home-section-trend-card-border: rgba(245, 158, 11, 0.18);
    --home-section-trend-card-shadow: 0 14px 44px rgba(0, 0, 0, 0.42);
    --home-section-trend-card-border-hover: rgba(245, 158, 11, 0.4);
    --home-section-trend-card-shadow-hover: 0 22px 56px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(185, 28, 28, 0.35);
    --home-section-trend-rank-bg: rgba(69, 10, 10, 0.82);
    --home-section-trend-rank-border: rgba(245, 158, 11, 0.3);
    --home-section-trend-rank-color: #fffbeb;
    --home-section-trend-overlay-gradient: linear-gradient(to top, rgba(28, 10, 10, 0.94) 0%, rgba(40, 12, 12, 0.4) 50%, transparent 100%);
    --home-section-trend-title-color: rgba(255, 247, 237, 0.92);
    --home-section-trend-meta-color: rgba(254, 243, 199, 0.85);
    --home-section-trend-pill-bg: rgba(185, 28, 28, 0.35);
    --home-section-trend-pill-border: rgba(245, 158, 11, 0.35);
    --home-section-trend-pill-color: #fef3c7;
    --home-section-trend-views-color: rgba(253, 230, 138, 0.9);
    --home-section-pagination-bg: rgba(24, 10, 12, 0.75);
    --home-section-pagination-color: #fef3c7;
    --home-section-pagination-border: rgba(245, 158, 11, 0.22);
    --home-section-pagination-active-bg: linear-gradient(135deg, rgba(185, 28, 28, 0.85), rgba(127, 29, 29, 0.9));
    --home-section-pagination-active-border: rgba(251, 191, 36, 0.45);
    --home-section-pagination-active-color: #fffbeb;
    --home-section-pagination-active-shadow: 0 8px 28px rgba(185, 28, 28, 0.35);

    /* Watch page — Liquid Glass (slate / ice); home trending can stay classic warm */
    --watch-backdrop-blur: 20px;
    --watch-backdrop-blur-mobile: 12px;
    --watch-breadcrumb-blur: 18px;
    --watch-hero-chip-bg: rgba(15, 23, 42, 0.55);
    --watch-hero-chip-border: rgba(148, 163, 184, 0.2);
    --watch-hero-chip-color: rgba(226, 232, 240, 0.88);
    --watch-rail-eyebrow-color: rgba(148, 163, 184, 0.75);
    --watch-rail-title-color: var(--watch-section-header-color, #bae6fd);
    --watch-rail-header-border: rgba(148, 163, 184, 0.14);
    --watch-rail-action-color: #7dd3fc;
    --watch-rail-action-border: rgba(56, 189, 248, 0.28);
    --watch-rail-action-bg: rgba(15, 23, 42, 0.35);
    --watch-story-strong: rgba(248, 250, 252, 0.95);
    --watch-page-radials: radial-gradient(ellipse 70% 52% at 100% 0%, rgba(56, 189, 248, 0.14), transparent 56%),
        radial-gradient(ellipse 48% 38% at 0% 100%, rgba(37, 99, 235, 0.1), transparent 52%);
    --watch-main-shell-bg: linear-gradient(
        168deg,
        rgba(15, 23, 42, 0.78) 0%,
        rgba(8, 12, 26, 0.9) 46%,
        rgba(4, 8, 20, 0.96) 100%
    );
    --watch-main-shell-border: rgba(186, 198, 218, 0.22);
    --watch-main-shell-shadow: 0 28px 64px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(56, 189, 248, 0.16);
    --watch-main-shell-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --watch-player-frame-border: rgba(148, 163, 184, 0.14);
    --watch-player-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --watch-info-bg: linear-gradient(180deg, rgba(11, 18, 32, 0.92) 0%, rgba(6, 10, 22, 0.97) 100%);
    --watch-title-gradient: linear-gradient(105deg, #f0f9ff 0%, #bae6fd 38%, #7dd3fc 100%);
    --watch-title-fallback: #f0f9ff;
    --watch-title-accent-line: linear-gradient(90deg, #38bdf8, rgba(56, 189, 248, 0.28), transparent);
    --watch-title-accent-glow: rgba(56, 189, 248, 0.22);
    --watch-meta-pill-bg: rgba(15, 23, 42, 0.55);
    --watch-meta-pill-border: rgba(56, 189, 248, 0.22);
    --watch-meta-pill-color: #e0f2fe;
    --watch-meta-pill-hover-border: rgba(125, 211, 252, 0.42);
    --watch-meta-pill-hover-color: #f0f9ff;
    --watch-panel-bg: linear-gradient(
        158deg,
        rgba(12, 18, 36, 0.58) 0%,
        rgba(8, 12, 28, 0.72) 100%
    );
    --watch-panel-border: rgba(186, 198, 218, 0.2);
    --watch-panel-shadow: 0 20px 52px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --watch-panel-radials: radial-gradient(ellipse 78% 50% at 100% 0%, rgba(37, 99, 235, 0.16), transparent 56%);
    --watch-section-header-color: #bae6fd;
    --watch-section-header-border: rgba(148, 163, 184, 0.14);
    --watch-story-color: rgba(186, 230, 253, 0.86);
    --watch-breadcrumb-bg: rgba(15, 23, 42, 0.52);
    --watch-breadcrumb-border: rgba(186, 198, 218, 0.2);
    --watch-breadcrumb-chevron: rgba(148, 163, 184, 0.55);
    --watch-breadcrumb-current: rgba(241, 245, 249, 0.95);
    --watch-info-row-border: rgba(148, 163, 184, 0.1);
    --watch-action-bg: rgba(15, 23, 42, 0.45);
    --watch-action-border: rgba(56, 189, 248, 0.18);
    --watch-action-color: rgba(240, 249, 255, 0.96);
    --watch-action-hover-bg: rgba(30, 58, 138, 0.32);
    --watch-series-head-color: #7dd3fc;
    --watch-pill-btn-color: #e0f2fe;
    --watch-pill-btn-bg: color-mix(in srgb, var(--shell-accent, #38bdf8) 16%, transparent);
    --watch-pill-btn-border: color-mix(in srgb, var(--shell-accent, #38bdf8) 36%, transparent);
    --watch-quality-bg: color-mix(in srgb, var(--shell-accent, #38bdf8) 22%, transparent);
    --watch-quality-color: #bae6fd;
    --watch-quality-border: color-mix(in srgb, var(--shell-accent, #38bdf8) 40%, transparent);
}

body[data-home-sections-preset="midnight_blue"] {
    --home-section-surface: linear-gradient(
        118deg,
        rgba(10, 16, 32, 0.98) 0%,
        rgba(15, 23, 42, 0.97) 42%,
        rgba(6, 11, 26, 0.99) 100%
    );
    --home-section-border: rgba(56, 189, 248, 0.2);
    --home-section-box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(56, 189, 248, 0.09);
    --home-section-panel-radials: radial-gradient(ellipse 72% 58% at 100% 0%, rgba(37, 99, 235, 0.24), transparent 56%),
        radial-gradient(ellipse 52% 42% at 0% 100%, rgba(14, 165, 233, 0.14), transparent 52%);
    --home-section-trend-accent-bg: linear-gradient(180deg, #7dd3fc 0%, #2563eb 48%, #1e3a8a 100%);
    --home-section-trend-accent-shadow: 0 0 14px rgba(56, 189, 248, 0.38);
    --home-section-latest-title-gradient: linear-gradient(100deg, #e0f2fe 8%, #7dd3fc 42%, #38bdf8 88%);
    --home-section-latest-meta-color: rgba(186, 230, 253, 0.72);
    --home-section-latest-cta-color: #f0f9ff;
    --home-section-latest-cta-bg: linear-gradient(135deg, rgba(30, 64, 175, 0.72), rgba(15, 23, 42, 0.92));
    --home-section-latest-cta-border: rgba(56, 189, 248, 0.35);
    --home-section-latest-cta-shadow: 0 8px 28px rgba(37, 99, 235, 0.38);
    --home-section-latest-cta-hover-border: rgba(125, 211, 252, 0.52);
    --home-section-latest-cta-hover-shadow: 0 12px 36px rgba(37, 99, 235, 0.48);
    --home-section-trend-scrollbar-thumb: linear-gradient(90deg, #1d4ed8, #38bdf8);
    --home-section-trend-scrollbar-pair: rgba(56, 189, 248, 0.55) rgba(15, 23, 42, 0.55);
    --home-section-trend-top-card-shadow: 0 18px 50px rgba(37, 99, 235, 0.32), 0 0 0 1px rgba(56, 189, 248, 0.22);
    --home-section-trend-ribbon-bg: linear-gradient(135deg, #bae6fd, #38bdf8);
    --home-section-trend-ribbon-color: #0f172a;
    --home-section-trend-card-border: rgba(56, 189, 248, 0.16);
    --home-section-trend-card-shadow: 0 14px 44px rgba(0, 0, 0, 0.48);
    --home-section-trend-card-border-hover: rgba(125, 211, 252, 0.38);
    --home-section-trend-card-shadow-hover: 0 22px 56px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(37, 99, 235, 0.35);
    --home-section-trend-rank-bg: rgba(15, 23, 42, 0.88);
    --home-section-trend-rank-border: rgba(56, 189, 248, 0.28);
    --home-section-trend-rank-color: #f0f9ff;
    --home-section-trend-overlay-gradient: linear-gradient(to top, rgba(8, 15, 35, 0.94) 0%, rgba(15, 30, 60, 0.42) 50%, transparent 100%);
    --home-section-trend-title-color: rgba(240, 249, 255, 0.94);
    --home-section-trend-meta-color: rgba(186, 230, 253, 0.82);
    --home-section-trend-pill-bg: rgba(30, 64, 175, 0.45);
    --home-section-trend-pill-border: rgba(56, 189, 248, 0.32);
    --home-section-trend-pill-color: #e0f2fe;
    --home-section-trend-views-color: rgba(125, 211, 252, 0.92);
    --home-section-pagination-bg: rgba(15, 23, 42, 0.78);
    --home-section-pagination-color: #e0f2fe;
    --home-section-pagination-border: rgba(56, 189, 248, 0.22);
    --home-section-pagination-active-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.88), rgba(15, 23, 42, 0.95));
    --home-section-pagination-active-border: rgba(125, 211, 252, 0.45);
    --home-section-pagination-active-color: #f0f9ff;
    --home-section-pagination-active-shadow: 0 8px 28px rgba(37, 99, 235, 0.4);

    --watch-backdrop-blur: 22px;
    --watch-backdrop-blur-mobile: 12px;
    --watch-breadcrumb-blur: 18px;
    --watch-hero-chip-bg: rgba(15, 23, 42, 0.52);
    --watch-hero-chip-border: rgba(148, 163, 184, 0.2);
    --watch-hero-chip-color: rgba(226, 232, 240, 0.9);
    --watch-rail-eyebrow-color: rgba(148, 163, 184, 0.72);
    --watch-rail-title-color: var(--watch-section-header-color, #bae6fd);
    --watch-rail-header-border: rgba(148, 163, 184, 0.13);
    --watch-rail-action-color: #7dd3fc;
    --watch-rail-action-border: rgba(56, 189, 248, 0.3);
    --watch-rail-action-bg: rgba(15, 23, 42, 0.4);
    --watch-story-strong: rgba(248, 250, 252, 0.96);
    --watch-page-radials: var(--home-section-panel-radials);
    --watch-main-shell-bg: linear-gradient(
        168deg,
        rgba(11, 18, 38, 0.82) 0%,
        rgba(7, 11, 28, 0.92) 48%,
        rgba(3, 6, 18, 0.97) 100%
    );
    --watch-main-shell-border: rgba(186, 210, 230, 0.22);
    --watch-main-shell-shadow: 0 32px 68px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(56, 189, 248, 0.16);
    --watch-main-shell-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --watch-player-frame-border: rgba(125, 211, 252, 0.14);
    --watch-player-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --watch-info-bg: linear-gradient(180deg, rgba(10, 16, 32, 0.94) 0%, rgba(5, 8, 20, 0.98) 100%);
    --watch-title-gradient: linear-gradient(105deg, #f0f9ff 0%, #bae6fd 35%, #7dd3fc 100%);
    --watch-title-fallback: #f0f9ff;
    --watch-title-accent-line: linear-gradient(90deg, #38bdf8, rgba(56, 189, 248, 0.25), transparent);
    --watch-title-accent-glow: rgba(56, 189, 248, 0.2);
    --watch-meta-pill-bg: rgba(15, 23, 42, 0.52);
    --watch-meta-pill-border: rgba(56, 189, 248, 0.24);
    --watch-meta-pill-color: #e0f2fe;
    --watch-meta-pill-hover-border: rgba(125, 211, 252, 0.42);
    --watch-meta-pill-hover-color: #f0f9ff;
    --watch-panel-bg: linear-gradient(
        158deg,
        rgba(10, 16, 34, 0.55) 0%,
        rgba(6, 10, 24, 0.7) 100%
    );
    --watch-panel-border: rgba(186, 210, 230, 0.19);
    --watch-panel-shadow: 0 22px 56px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --watch-panel-radials: radial-gradient(ellipse 78% 52% at 100% 0%, rgba(37, 99, 235, 0.18), transparent 56%);
    --watch-section-header-color: #bae6fd;
    --watch-section-header-border: rgba(148, 163, 184, 0.13);
    --watch-story-color: rgba(186, 230, 253, 0.86);
    --watch-breadcrumb-bg: rgba(15, 23, 42, 0.52);
    --watch-breadcrumb-border: rgba(186, 210, 230, 0.2);
    --watch-breadcrumb-chevron: rgba(148, 163, 184, 0.55);
    --watch-breadcrumb-current: rgba(241, 245, 249, 0.95);
    --watch-info-row-border: rgba(148, 163, 184, 0.1);
    --watch-action-bg: rgba(15, 23, 42, 0.48);
    --watch-action-border: rgba(56, 189, 248, 0.18);
    --watch-action-color: rgba(240, 249, 255, 0.96);
    --watch-action-hover-bg: rgba(30, 58, 138, 0.34);
    --watch-series-head-color: #7dd3fc;
    --watch-pill-btn-color: #e0f2fe;
    --watch-pill-btn-bg: color-mix(in srgb, var(--shell-accent, #38bdf8) 16%, transparent);
    --watch-pill-btn-border: color-mix(in srgb, var(--shell-accent, #38bdf8) 36%, transparent);
    --watch-quality-bg: color-mix(in srgb, var(--shell-accent, #38bdf8) 22%, transparent);
    --watch-quality-color: #bae6fd;
    --watch-quality-border: color-mix(in srgb, var(--shell-accent, #38bdf8) 40%, transparent);
}

/**
 * Shell harmony — dark Trending/Latest + watch chrome tied to slate shell + inline --accent-color (admin Primary).
 * Light mode home cards stay global (theme-modes.css); light watch tweaks mirror midnight_blue preset.
 */
body[data-home-sections-preset="shell_harmony"] {
    --home-section-surface: linear-gradient(
        118deg,
        rgba(11, 17, 32, 0.98) 0%,
        rgba(15, 23, 42, 0.97) 44%,
        rgba(6, 10, 22, 0.99) 100%
    );
    --home-section-border: color-mix(in srgb, var(--accent-color, #38bdf8) 26%, rgba(148, 163, 184, 0.22));
    --home-section-box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 color-mix(in srgb, var(--accent-color, #38bdf8) 12%, transparent);
    --home-section-panel-radials: radial-gradient(ellipse 72% 58% at 100% 0%, color-mix(in srgb, var(--accent-color, #38bdf8) 28%, rgba(37, 99, 235, 0.2)), transparent 56%),
        radial-gradient(ellipse 52% 42% at 0% 100%, rgba(14, 165, 233, 0.13), transparent 52%);
    --home-section-trend-accent-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent-color, #38bdf8) 22%, #e0f2fe) 0%,
        var(--accent-color, #38bdf8) 48%,
        color-mix(in srgb, var(--accent-color, #38bdf8) 42%, #0f172a) 100%
    );
    --home-section-trend-accent-shadow: 0 0 14px color-mix(in srgb, var(--accent-color, #38bdf8) 45%, transparent);
    --home-section-latest-title-gradient: linear-gradient(
        100deg,
        #f8fafc 6%,
        color-mix(in srgb, var(--accent-color, #38bdf8) 32%, #bae6fd) 42%,
        color-mix(in srgb, var(--accent-color, #38bdf8) 48%, #7dd3fc) 88%
    );
    --home-section-latest-meta-color: rgba(186, 230, 253, 0.74);
    --home-section-latest-cta-color: #f0f9ff;
    --home-section-latest-cta-bg: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent-color, #38bdf8) 55%, rgba(30, 64, 175, 0.85)),
        rgba(15, 23, 42, 0.92)
    );
    --home-section-latest-cta-border: color-mix(in srgb, var(--accent-color, #38bdf8) 38%, rgba(56, 189, 248, 0.35));
    --home-section-latest-cta-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color, #38bdf8) 35%, rgba(0, 0, 0, 0.5));
    --home-section-latest-cta-hover-border: color-mix(in srgb, var(--accent-color, #38bdf8) 55%, rgba(125, 211, 252, 0.45));
    --home-section-latest-cta-hover-shadow: 0 12px 36px color-mix(in srgb, var(--accent-color, #38bdf8) 42%, rgba(0, 0, 0, 0.55));
    --home-section-trend-scrollbar-thumb: linear-gradient(90deg, color-mix(in srgb, var(--accent-color, #38bdf8) 55%, #1e3a8a), #38bdf8);
    --home-section-trend-scrollbar-pair: color-mix(in srgb, var(--accent-color, #38bdf8) 42%, rgba(56, 189, 248, 0.5)) rgba(15, 23, 42, 0.55);
    --home-section-trend-top-card-shadow: 0 18px 50px color-mix(in srgb, var(--accent-color, #38bdf8) 22%, rgba(0, 0, 0, 0.45)), 0 0 0 1px color-mix(in srgb, var(--accent-color, #38bdf8) 35%, rgba(148, 163, 184, 0.2));
    --home-section-trend-ribbon-bg: linear-gradient(135deg, #bae6fd, color-mix(in srgb, var(--accent-color, #38bdf8) 40%, #38bdf8));
    --home-section-trend-ribbon-color: #0f172a;
    --home-section-trend-card-border: color-mix(in srgb, var(--accent-color, #38bdf8) 22%, rgba(148, 163, 184, 0.12));
    --home-section-trend-card-shadow: 0 14px 44px rgba(0, 0, 0, 0.48);
    --home-section-trend-card-border-hover: color-mix(in srgb, var(--accent-color, #38bdf8) 45%, rgba(125, 211, 252, 0.35));
    --home-section-trend-card-shadow-hover: 0 22px 56px rgba(0, 0, 0, 0.52), 0 0 0 1px color-mix(in srgb, var(--accent-color, #38bdf8) 38%, rgba(37, 99, 235, 0.25));
    --home-section-trend-rank-bg: rgba(15, 23, 42, 0.88);
    --home-section-trend-rank-border: color-mix(in srgb, var(--accent-color, #38bdf8) 32%, rgba(148, 163, 184, 0.2));
    --home-section-trend-rank-color: #f0f9ff;
    --home-section-trend-overlay-gradient: linear-gradient(to top, rgba(8, 15, 35, 0.94) 0%, rgba(15, 30, 60, 0.42) 50%, transparent 100%);
    --home-section-trend-title-color: rgba(240, 249, 255, 0.94);
    --home-section-trend-meta-color: rgba(186, 230, 253, 0.82);
    --home-section-trend-pill-bg: color-mix(in srgb, var(--accent-color, #38bdf8) 35%, rgba(30, 64, 175, 0.42));
    --home-section-trend-pill-border: color-mix(in srgb, var(--accent-color, #38bdf8) 35%, rgba(56, 189, 248, 0.28));
    --home-section-trend-pill-color: #e0f2fe;
    --home-section-trend-views-color: rgba(125, 211, 252, 0.92);
    --home-section-pagination-bg: rgba(15, 23, 42, 0.78);
    --home-section-pagination-color: #e0f2fe;
    --home-section-pagination-border: color-mix(in srgb, var(--accent-color, #38bdf8) 28%, rgba(148, 163, 184, 0.16));
    --home-section-pagination-active-bg: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent-color, #38bdf8) 72%, rgba(37, 99, 235, 0.9)),
        rgba(15, 23, 42, 0.95)
    );
    --home-section-pagination-active-border: color-mix(in srgb, var(--accent-color, #38bdf8) 48%, rgba(125, 211, 252, 0.4));
    --home-section-pagination-active-color: #f0f9ff;
    --home-section-pagination-active-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color, #38bdf8) 38%, rgba(0, 0, 0, 0.45));

    --watch-backdrop-blur: 22px;
    --watch-backdrop-blur-mobile: 12px;
    --watch-breadcrumb-blur: 18px;
    --watch-hero-chip-bg: rgba(15, 23, 42, 0.52);
    --watch-hero-chip-border: rgba(148, 163, 184, 0.2);
    --watch-hero-chip-color: rgba(226, 232, 240, 0.9);
    --watch-rail-eyebrow-color: rgba(148, 163, 184, 0.72);
    --watch-rail-title-color: var(--watch-section-header-color, color-mix(in srgb, var(--accent-color, #38bdf8) 18%, #bae6fd));
    --watch-rail-header-border: rgba(148, 163, 184, 0.13);
    --watch-rail-action-color: color-mix(in srgb, var(--accent-color, #38bdf8) 35%, #7dd3fc);
    --watch-rail-action-border: color-mix(in srgb, var(--accent-color, #38bdf8) 42%, rgba(56, 189, 248, 0.28));
    --watch-rail-action-bg: rgba(15, 23, 42, 0.4);
    --watch-story-strong: rgba(248, 250, 252, 0.96);
    --watch-page-radials: var(--home-section-panel-radials);
    --watch-main-shell-bg: linear-gradient(
        168deg,
        rgba(11, 18, 38, 0.82) 0%,
        rgba(7, 11, 28, 0.92) 48%,
        rgba(3, 6, 18, 0.97) 100%
    );
    --watch-main-shell-border: rgba(186, 210, 230, 0.22);
    --watch-main-shell-shadow: 0 32px 68px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--accent-color, #38bdf8) 22%, rgba(56, 189, 248, 0.14));
    --watch-main-shell-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --watch-player-frame-border: rgba(125, 211, 252, 0.14);
    --watch-player-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --watch-info-bg: linear-gradient(180deg, rgba(10, 16, 32, 0.94) 0%, rgba(5, 8, 20, 0.98) 100%);
    --watch-title-gradient: linear-gradient(
        105deg,
        #f0f9ff 0%,
        color-mix(in srgb, var(--accent-color, #38bdf8) 25%, #bae6fd) 38%,
        color-mix(in srgb, var(--accent-color, #38bdf8) 45%, #7dd3fc) 100%
    );
    --watch-title-fallback: #f0f9ff;
    --watch-title-accent-line: linear-gradient(90deg, var(--accent-color, #38bdf8), color-mix(in srgb, var(--accent-color, #38bdf8) 35%, transparent), transparent);
    --watch-title-accent-glow: color-mix(in srgb, var(--accent-color, #38bdf8) 35%, transparent);
    --watch-meta-pill-bg: rgba(15, 23, 42, 0.52);
    --watch-meta-pill-border: color-mix(in srgb, var(--accent-color, #38bdf8) 35%, rgba(56, 189, 248, 0.22));
    --watch-meta-pill-color: #e0f2fe;
    --watch-meta-pill-hover-border: rgba(125, 211, 252, 0.42);
    --watch-meta-pill-hover-color: #f0f9ff;
    --watch-panel-bg: linear-gradient(158deg, rgba(10, 16, 34, 0.55) 0%, rgba(6, 10, 24, 0.7) 100%);
    --watch-panel-border: rgba(186, 210, 230, 0.19);
    --watch-panel-shadow: 0 22px 56px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --watch-panel-radials: radial-gradient(ellipse 78% 52% at 100% 0%, color-mix(in srgb, var(--accent-color, #38bdf8) 28%, rgba(37, 99, 235, 0.16)), transparent 56%);
    --watch-section-header-color: color-mix(in srgb, var(--accent-color, #38bdf8) 22%, #bae6fd);
    --watch-section-header-border: rgba(148, 163, 184, 0.13);
    --watch-story-color: rgba(186, 230, 253, 0.86);
    --watch-breadcrumb-bg: rgba(15, 23, 42, 0.52);
    --watch-breadcrumb-border: rgba(186, 210, 230, 0.2);
    --watch-breadcrumb-chevron: rgba(148, 163, 184, 0.55);
    --watch-breadcrumb-current: rgba(241, 245, 249, 0.95);
    --watch-info-row-border: rgba(148, 163, 184, 0.1);
    --watch-action-bg: rgba(15, 23, 42, 0.48);
    --watch-action-border: color-mix(in srgb, var(--accent-color, #38bdf8) 38%, rgba(56, 189, 248, 0.16));
    --watch-action-color: rgba(240, 249, 255, 0.96);
    --watch-action-hover-bg: color-mix(in srgb, var(--accent-color, #38bdf8) 28%, rgba(30, 58, 138, 0.32));
    --watch-series-head-color: color-mix(in srgb, var(--accent-color, #38bdf8) 40%, #7dd3fc);
    --watch-pill-btn-color: #e0f2fe;
    --watch-pill-btn-bg: color-mix(in srgb, var(--accent-color, #38bdf8) 16%, transparent);
    --watch-pill-btn-border: color-mix(in srgb, var(--accent-color, #38bdf8) 36%, transparent);
    --watch-quality-bg: color-mix(in srgb, var(--accent-color, #38bdf8) 22%, transparent);
    --watch-quality-color: #bae6fd;
    --watch-quality-border: color-mix(in srgb, var(--accent-color, #38bdf8) 40%, transparent);
}