/* ==========================================================================
   Lightboxd — Design Tokens
   Every colour in the app comes from the variables below, so a new theme or
   palette is one more [data-theme="..."] block that redefines them. Rules:
   - Component CSS, and inline styles written by app.js / index.html, use
     var(--token) only; no hex/rgb literals outside these blocks.
   - Exceptions, by design: black in mask-image gradients (masks only read
     alpha, it never shows as a colour), third-party brand marks (the Google
     sign-in logo), and the Lightboxd logo's own fill.
   - Tokens in the "Fixed" group mean the same in every theme: they sit on
     artwork (posters, backdrops, banners), which doesn't change with it.
   ========================================================================== */

:root {
    /* Surfaces, darkest to lightest */
    --canvas: #090a0d;                  /* Page background */
    --paper: #121318;                   /* Cards, panels, windows */
    --surface-sunken: #0c0d11;          /* Recessed areas, image placeholders */
    --surface-alt: #1a1b22;             /* Inputs, pills, dropdown triggers, boxes on --paper */
    --surface-hover: #22242e;           /* Hover state of the above */
    --surface-active: #2b2d39;          /* Pressed / selected state */
    --surface-elevated: #232530;        /* Popovers and floating menus */

    /* Text: three tiers */
    --text-primary: #f4f4f6;            /* Titles, body text, active controls */
    --text-secondary: #d1d3dc;          /* Longer reading text: synopses, reviews */
    --text-muted: #9ba0ad;              /* Metadata, labels, placeholders, quiet icons (WCAG AA on --paper) */

    /* Accent */
    --accent: #3b82f6;                  /* Sapphire: tuned to avoid chromostereopsis, 7.2:1 contrast */
    --accent-soft: rgba(59, 130, 246, 0.14);  /* Accent-tinted backgrounds */
    --accent-text: #60a5fa;             /* Accent-coloured text and icons */
    --on-accent: #ffffff;               /* Text on an accent (or other status colour) fill */

    /* Status colours: each has a base, a -soft background and a -text colour */
    --danger: #991b1b;                  /* Destructive button fill */
    --danger-hover: #b91c1c;
    --danger-soft: rgba(248, 113, 113, 0.14);
    --danger-text: #f87171;             /* Errors, destructive text and icons */

    --gold: #f59e0b;                    /* Star ratings and scores */
    --gold-soft: rgba(245, 158, 11, 0.15);
    --gold-text: #fbbf24;

    --emerald: #10b981;                 /* Success, watched */
    --emerald-soft: rgba(16, 185, 129, 0.15);
    --emerald-text: #34d399;

    --tag-purple: #6366f1;              /* Custom lists and tags */
    --tag-purple-soft: rgba(99, 102, 241, 0.15);
    --tag-purple-text: #a5b4fc;

    /* Borders: the design is frameless, so these are transparent; they
       exist so a theme (or the high-contrast block below) can turn every
       edge on at once. */
    --border: transparent;
    --border-strong: transparent;       /* Hover / focus / selected edges */

    /* Translucent layers */
    --tint-1: rgba(255, 255, 255, 0.04);  /* Barely-there wash */
    --tint-2: rgba(255, 255, 255, 0.08);  /* Subtle wash, dividers */
    --tint-3: rgba(255, 255, 255, 0.16);  /* Visible wash, rings */
    --glass-bg: rgba(18, 19, 24, 0.85);   /* Sticky nav bar, floating bars */
    --glass-bg-dense: rgba(18, 19, 24, 0.95);
    --overlay: rgba(4, 4, 8, 0.88);       /* Backdrop behind windows and popovers */
    --modal-backdrop: rgba(4, 4, 8, 0.94); /* Behind full modals: no blur, so a touch denser */

    /* Shadows */
    --shadow-color: rgba(0, 0, 0, 0.45);  /* For one-off shadow shapes */
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-popover: 0 16px 40px rgba(0, 0, 0, 0.85);
    --shadow-modal: 0 25px 80px rgba(0, 0, 0, 0.95);

    /* Fixed (same in every theme): controls and labels on artwork */
    --on-image: #ffffff;                /* Text / icons on a scrim */
    --on-image-ink: #0b0c10;            /* Text on a solid --on-image chip */
    --scrim-weak: rgba(0, 0, 0, 0.3);
    --scrim: rgba(0, 0, 0, 0.5);
    --scrim-strong: rgba(0, 0, 0, 0.7);

    /* Type */
    --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Radius, by element size */
    --radius-card: 20px;
    --radius-pill: 18px;
    --radius-nested: 10px;
    --radius-sm: 6px;

    /* Page column: shared by the header row and .main-content so their
       edges line up. Side padding grows with the viewport so wide monitors
       don't end up with content pressed against a thin gutter. */
    --content-max: 1920px;
    --page-pad-x: clamp(24px, 3vw, 64px);
}

[data-theme="light"] {
    --canvas: #f0f1f5;
    --paper: #ffffff;
    --surface-sunken: #f7f8fa;
    --surface-alt: #e4e6eb;
    --surface-hover: #dadce3;
    --surface-active: #cfd2dc;
    --surface-elevated: #ffffff;

    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #5c6577;              /* 6.5:1 on --paper */

    --accent: #2563eb;
    --accent-soft: rgba(37, 99, 235, 0.08);
    --accent-text: #1d4ed8;
    --on-accent: #ffffff;

    --danger: #991b1b;
    --danger-hover: #b91c1c;
    --danger-soft: rgba(220, 38, 38, 0.08);
    --danger-text: #b91c1c;

    --gold: #d97706;
    --gold-soft: rgba(217, 119, 6, 0.12);
    --gold-text: #b45309;

    --emerald: #059669;
    --emerald-soft: rgba(5, 150, 105, 0.12);
    --emerald-text: #047857;

    --tag-purple: #6366f1;
    --tag-purple-soft: rgba(99, 102, 241, 0.12);
    --tag-purple-text: #4f46e5;

    --border: transparent;
    --border-strong: transparent;

    --tint-1: rgba(0, 0, 0, 0.04);
    --tint-2: rgba(0, 0, 0, 0.08);
    --tint-3: rgba(0, 0, 0, 0.16);
    --glass-bg: rgba(240, 241, 245, 0.85);
    --glass-bg-dense: rgba(240, 241, 245, 0.95);
    --overlay: rgba(15, 23, 42, 0.40);
    --modal-backdrop: rgba(15, 23, 42, 0.62);

    --shadow-color: rgba(15, 23, 42, 0.12);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.05);
    --shadow-popover: 0 4px 14px rgba(0, 0, 0, 0.08), 0 16px 36px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.10), 0 24px 64px rgba(0, 0, 0, 0.12);
}

/* Graphite: 90s tech hardware -- matte black-slate casing, gray-blue bezels,
   eggshell silk-screen text, and a Walkman-era amber for the accent.
   Surfaces, text, tints, borders, danger and backdrops follow the palette the
   user specified; hover/active/sunken surfaces are derived from it. The
   palette's warm glow (--tint-3) is the same hue as --danger, so the accent
   is an amber instead, to keep primary and destructive actions apart.
   --text-muted is lightened from the given graphite tone so small text clears
   WCAG AA on --paper (4.5:1), and the --danger button fill is deepened from
   the given paprika so its text does too (4.7:1; hover goes deeper, 5.1:1). */
[data-theme="graphite"] {
    --canvas: #131518;
    --paper: #1A1D23;
    --surface-sunken: #0F1114;
    --surface-alt: #232730;
    --surface-hover: #2B303A;
    --surface-active: #343A45;
    --surface-elevated: #232730;

    --text-primary: #ECE9E2;
    --text-secondary: #8C97A5;
    --text-muted: #7A8594;

    --accent: #E8963A;
    --accent-soft: rgba(232, 150, 58, 0.14);
    --accent-text: #F2AE5C;
    --on-accent: #15110A;

    --danger: #B04329;                  /* Deepened from the given paprika so text on it reads (4.7:1) */
    --danger-hover: #A93F27;
    --danger-soft: rgba(216, 88, 59, 0.15);
    --danger-text: #FCAE9B;

    --gold: #E3B04B;
    --gold-soft: rgba(227, 176, 75, 0.15);
    --gold-text: #F2CB77;

    --emerald: #4FB0A0;
    --emerald-soft: rgba(79, 176, 160, 0.15);
    --emerald-text: #86D1C3;

    --tag-purple: #8E84D8;
    --tag-purple-soft: rgba(142, 132, 216, 0.16);
    --tag-purple-text: #B8B0F0;

    --border: transparent;
    --border-strong: transparent;

    --tint-1: rgba(140, 151, 165, 0.07);
    --tint-2: rgba(140, 151, 165, 0.14);
    --tint-3: rgba(224, 90, 58, 0.18);
    --glass-bg: rgba(26, 29, 35, 0.85);
    --glass-bg-dense: rgba(26, 29, 35, 0.95);
    --overlay: rgba(10, 12, 15, 0.82);
    --modal-backdrop: rgba(10, 12, 15, 0.93);
    --scrim: rgba(19, 21, 24, 0.75);

    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-popover: 0 16px 40px rgba(0, 0, 0, 0.8);
    --shadow-modal: 0 25px 80px rgba(0, 0, 0, 0.9);
}

/* Increase Contrast / prefers-contrast: more. Every card, input, pill and
   popover already carries `border: 1px solid var(--border)`, so giving the
   two border tokens a value here turns edges on everywhere at once. */
@media (prefers-contrast: more) {
    :root {
        --border: rgba(255, 255, 255, 0.22);
        --border-strong: rgba(255, 255, 255, 0.4);
    }

    [data-theme="light"] {
        --border: rgba(15, 23, 42, 0.22);
        --border-strong: rgba(15, 23, 42, 0.4);
    }

    [data-theme="graphite"] {
        --border: rgba(140, 151, 165, 0.35);
        --border-strong: rgba(140, 151, 165, 0.55);
    }
}


*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
}

/* The reset above removes outline everywhere; without this, every element
   made keyboard-focusable (custom nav triggers, dropdown buttons, the
   bulk-select checkbox overlay) would be a real but invisible tab stop —
   a WCAG 2.4.7 failure. Only draws for keyboard focus, not mouse/touch. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Scrollbars are hidden everywhere — the page, every modal, every internally
   scrolling panel — without disabling scrolling itself. Applied once,
   globally, rather than per-element, so no scrollable surface (present or
   future) needs its own copy of this. !important so a component can't
   quietly bring a visible scrollbar back. */
* {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* legacy Edge/IE */
}

*::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, and other WebKit/Blink browsers */
    width: 0 !important;
    height: 0 !important;
}

a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

html {
    overflow-y: scroll;
    overflow-x: hidden;
    /* Belt-and-suspenders alongside overflow-x:hidden: touch browsers don't
       always treat overflow:hidden as a hard block on touch-drag panning the
       way they do a mouse/scrollbar, so a few px of stray horizontal
       overflow (a rounding error, a future full-bleed element) could still
       let a page be dragged sideways on a real touchscreen even though it
       can't be scrolled that way with a mouse. Restricting every page to
       vertical-only panning here removes that gap app-wide instead of
       needing to catch it per-page. */
    touch-action: pan-y;
}

/* overflow-x lives on <html> above, not here: setting only overflow-x on
   body (with overflow-y left at its default `visible`) makes the UA compute
   body's overflow-y as `auto` per the CSS Overflow spec, turning body into a
   second, non-scrolling "scroll container" — which silently breaks
   position:sticky for every sticky element inside it (the whole page stops
   sticking to anything). Keep body's overflow untouched so <html> stays the
   one true scrolling ancestor. */
body {
    background-color: var(--canvas);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.43;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* App Container Layout */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

/* ==========================================================================
   Centered Top Navigation Bar (Equal Balanced Spacing)
   ========================================================================== */
.top-nav-bar {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--glass-bg-dense);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--page-pad-x);
    width: 100%;
}

.top-nav-center-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* .main-content's cap includes its padding; this one sits inside the
       bar's padding, so subtract it to land on the same edges. */
    max-width: calc(var(--content-max) - 2 * var(--page-pad-x));
    margin: 0 auto;
    gap: 20px;
}

.nav-menu-centered {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    isolation: isolate;
}

.nav-slider-pill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px var(--tint-2);
    z-index: 1;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2), width 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    will-change: transform, width;
}

.nav-menu-centered.is-dragging .nav-slider-pill {
    transition: none !important;
}

.nav-menu-centered.is-dragging {
    cursor: grabbing;
}

.nav-menu-centered.is-dragging .nav-item {
    cursor: grabbing;
}

.nav-item {
    position: relative;
    z-index: 2;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: transparent !important;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
}

.nav-item svg {
    flex-shrink: 0;
    display: block;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-item span {
    display: inline-block;
    line-height: 1;
}

.nav-item:hover {
    color: var(--text-primary);
}

.nav-item.active {
    color: var(--text-primary);
}

.nav-controls-right {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 12px;
    min-width: 0;
}

/* Header Search */
.header-search-box {
    display: flex;
    align-items: center;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    /* Shrinks before anything else in the bar does. */
    flex: 0 1 280px;
    min-width: 150px;
    transition: border-color 0.15s ease;
}

.header-search-box:focus-within {
    border-color: var(--border-strong);
    background: var(--paper);
}

.header-search-box svg {
    color: var(--text-muted);
    margin-right: 10px;
    flex-shrink: 0;
}

.header-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-primary);
}

.header-search-input::placeholder {
    color: var(--text-muted);
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

#fav-picker-modal .modal-window {
    display: flex;
    flex-direction: column;
    max-height: 55vh;
    overflow: hidden;
}

#fav-picker-modal .modal-header,
#fav-picker-modal .fav-picker-search-bar {
    flex-shrink: 0;
}

#fav-picker-modal .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Notification Dropdown */
.notif-wrapper {
    position: relative;
}

.notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    background-color: var(--danger-text);
    border-radius: 50%;
    border: 1px solid var(--paper);
    display: none;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spin-icon {
    display: inline-block;
    animation: spin 1s linear infinite;
    transform-origin: center;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    background: var(--paper);
    border: none;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-popover);
    padding: 16px;
    z-index: 1000;
    display: none;
    animation: fadeIn 0.15s ease;
}

.notif-dropdown.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.notif-header h4 {
    font-size: 13.5px;
    font-weight: 600;
}

.notif-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
}

.notif-item {
    padding: 10px 12px;
    background: var(--tint-1);
    border: none;
    border-radius: var(--radius-nested);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.notif-item:hover {
    background: var(--tint-2);
}

.notif-item.unread {
    background: var(--tint-1);
}

.notif-item-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.notif-item-msg {
    color: var(--text-muted);
    line-height: 1.35;
}

.notif-item-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Single Unified Profile Header Trigger */
.unified-profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 5px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.15s ease;
}

.unified-profile-btn:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.unified-profile-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-hover);
}

.unified-profile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ==========================================================================
   Main Content Workspace (Centered with Equal Margins)
   ========================================================================== */
.main-content {
    flex: 1;
    padding: 32px var(--page-pad-x);
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
}

/* Toolbar & Filter Rows — sticks directly below the top nav bar so filters,
   sort, and edit stay reachable while the card grid scrolls beneath them. */
.toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 24px;
    padding: 16px 0 12px;
    width: 100%;
    position: sticky;
    top: 64px;
    z-index: 850;
    background: var(--canvas);
}

.filter-pills-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pill-btn {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pill-btn:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.pill-btn.active {
    background: var(--text-primary);
    color: var(--canvas);
    border: 1px solid transparent;
    font-weight: 600;
    box-shadow: 0 1px 4px var(--tint-3);
}

.controls-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-select {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.custom-select:hover {
    background-color: var(--surface-alt);
    border-color: var(--border-strong);
}

.custom-select:focus {
    border-color: var(--border-strong);
}

#fav-picker-sort-btn,
#add-to-list-picker-type-btn,
#add-to-list-picker-sort-btn {
    height: 36px;
    background-color: var(--surface-alt);
    border: none;
    border-radius: 8px;
    padding: 0 12px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#fav-picker-sort-btn:hover,
#add-to-list-picker-type-btn:hover,
#add-to-list-picker-sort-btn:hover {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

select.custom-select {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    appearance: none;
    -webkit-appearance: none;
}

select.custom-select option {
    background: var(--paper);
    color: var(--text-primary);
    padding: 8px 12px;
}

/* Custom Dropdown Popover Menus (Types, Sort, Filters) */
.sort-menu-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--surface-elevated);
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-popover);
    padding: 6px;
    min-width: 160px;
    z-index: 600;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fadeIn 0.12s ease;
}

.type-dropdown-wrapper .sort-menu-popover {
    left: 0;
    right: auto;
}

.sort-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s ease;
}

.sort-menu-item:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.sort-menu-item.active {
    background: var(--surface-active);
    color: var(--text-primary);
    font-weight: 600;
}

/* Bulk Triage Floating Bar */
.bulk-bar {
    background: var(--surface-alt);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-card);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    box-shadow: var(--shadow-popover);
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.bulk-actions-group {
    display: flex;
    gap: 8px;
}

/* ==========================================================================
   Buttons & Badges
   ========================================================================== */
.btn {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
    border: none;
    outline: none;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--text-primary);
    color: var(--canvas);
}

.btn-primary:hover {
    background-color: var(--text-primary);
}

.btn-secondary {
    background-color: var(--surface-alt);
    color: var(--text-primary);
    border: none;
}

.btn-secondary:hover {
    background-color: var(--surface-hover);
}

.btn-outline {
    background: var(--surface-alt);
    border: none;
    color: var(--text-primary);
}

.btn-outline:hover {
    background: var(--surface-hover);
}

.btn-destructive {
    background-color: var(--danger);
    border: 1px solid var(--danger);
    color: var(--text-primary);
    font-weight: 500;
}

.btn-destructive:hover {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
    color: var(--text-primary);
}

.btn-destructive:active {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-pill);
    background: var(--paper);
    border: none;
    color: var(--text-primary);
}

.btn-icon:hover {
    background: var(--surface-hover);
    border: none;
}

.section-label-sm {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.badge-solid {
    background: var(--text-primary);
    color: var(--canvas);
}

.badge-soft {
    background: var(--surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.badge-outline {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.badge-date-gate {
    background: var(--surface-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    font-weight: 600;
}

/* ==========================================================================
   Cards Grid & Title Cards
   ========================================================================== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 20px;
    width: 100%;
}

/* --- Home tab ---
   Rows of flat tiles grouped by spacing alone: no card surface, no shadow,
   no eyebrow labels. The heading is the only chrome and doubles as the link
   to the full view. */
.home-section + .home-section {
    margin-top: 40px;
}

.home-section:empty {
    display: none;
}

/* A hidden first section (Rate what you finished with nothing to rate)
   mustn't push the next one down: it keeps its place in the DOM, so the
   sibling rule above would otherwise still add the gap. */
.home-section:first-child:empty + .home-section {
    margin-top: 0;
}

.home-section-head {
    margin-bottom: 14px;
}

.home-section-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
}

.home-section-link h2,
.home-section-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin: 0;
    color: var(--text-primary);
}

.home-section-link svg {
    color: var(--text-muted);
    transition: transform 0.15s ease, color 0.15s ease;
}

.home-section-link:hover svg {
    color: var(--text-primary);
    transform: translateX(2px);
}

.home-empty {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Rate what you finished: one title at a time from the Stremio sync, laid
   out flat like the rest of Home (no card surface). */
.home-rate-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.home-rate-count {
    font-size: 13px;
    color: var(--text-muted);
}

/* The one Home element with a surface: it's a task, not a browsing row.
   With artwork, the title's banner sits behind a flat scrim and the text
   switches to the fixed on-image colours so it reads in every theme. */
.home-rate-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-radius: var(--radius-card);
    background: var(--paper);
    box-shadow: var(--shadow-card);
}

/* With artwork the card is a banner strip (about 3:1-4:1 on desktop), tall
   enough to recognise the title but short enough that Continue Watching
   still shows above the fold on a 768px-tall laptop. The poster, title and
   controls sit along its bottom edge. Phones size it to the content. */
.home-rate-card.has-backdrop {
    --rate-h: clamp(240px, 24vw, 320px);
    height: var(--rate-h);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* On a banner the poster runs its full height, inset by the card padding
   (20px) at top and bottom alike; its width follows from the 2:3 shape. */
.home-rate-card.has-backdrop .home-rate {
    flex: 1;
    grid-template-columns: calc((var(--rate-h) - 40px) * 2 / 3) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto;
}

.home-rate-card.has-backdrop .home-rate-poster {
    width: 100%;
    height: 100%;
    align-self: stretch;
}

/* Title, date and type beside the top of the poster; the score row stays
   along the bottom. */
.home-rate-card.has-backdrop .home-rate-info {
    align-self: start;
    padding-right: 44px;
}

/* The X, styled like the profile banner's buttons (.profile-banner-btn). */
.home-rate-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
}

.home-rate-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Backdrops put faces and titles above centre; keep those in frame. */
    object-position: center 30%;
    /* A light frosted-glass softening so the poster and controls stand out
       while the art stays recognisable. A blur on the image itself, not
       backdrop-filter glass; the slight scale keeps the blurred edges from
       fading in at the card's rim. */
    filter: blur(5px);
    transform: scale(1.05);
}

.home-rate-scrim {
    position: absolute;
    inset: 0;
    background: var(--scrim);
}

/* Desktop: poster on the left, title over the score row beside it.
   Phones (below): poster + title on top, the score row full width under
   them so the slider is long enough to aim with a thumb. */
.home-rate {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
        "poster info"
        "poster score"
        "poster error";
    column-gap: 18px;
    align-items: end;
}

.has-backdrop .home-rate-title {
    color: var(--on-image);
}

.has-backdrop .home-rate-sub {
    color: var(--on-image);
}

.home-rate-poster {
    grid-area: poster;
    width: 96px;
    aspect-ratio: 2 / 3;
    padding: 0;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-sunken);
    cursor: pointer;
}

.home-rate-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-rate-info {
    grid-area: info;
    min-width: 0;
}

.home-rate-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-rate-sub {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

.home-rate-score {
    grid-area: score;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

/* A flat slider: a quiet track, a gold fill (.home-rate-fill, sized from
   app.js) and a gold thumb. The native range is restyled rather than
   accent-coloured, since browsers outline an accent-coloured track. */
.home-rate-track {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 24px;
    display: flex;
    align-items: center;
}

.home-rate-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 3px;
    background: var(--tint-3);
}

.home-rate-fill {
    position: absolute;
    left: 0;
    height: 6px;
    border-radius: 3px;
    background: var(--gold);
    pointer-events: none;
}

.home-rate-slider {
    position: relative;
    width: 100%;
    height: 24px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.home-rate-slider:focus {
    outline: none;
}

.home-rate-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border: none;
}

.home-rate-slider::-moz-range-track {
    height: 6px;
    background: transparent;
    border: none;
}

.home-rate-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: none;
    border-radius: 50%;
    background: var(--gold);
}

.home-rate-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: var(--gold);
}

.home-rate-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--gold-soft);
}

.home-rate-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--gold-soft);
}

.home-rate-input.form-input {
    width: 64px;
    flex-shrink: 0;
    color: var(--gold-text);
    font-weight: 600;
}

.home-rate-error {
    grid-area: error;
    font-size: 12px;
    color: var(--danger-text);
    margin: 6px 0 0;
}

.home-rate-error:empty {
    display: none;
}

/* Slider takes the row; the score box sits right before the buttons. */
.home-rate-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 480px) {
    .home-rate-card,
    .home-rate-card.has-backdrop {
        height: auto;
        min-height: 0;
        padding: 16px;
    }

    /* Poster with the title, date and type beside its top edge; the score
       row full width underneath. */
    .home-rate,
    .home-rate-card.has-backdrop .home-rate {
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "poster info"
            "score score"
            "error error";
        column-gap: 14px;
        align-items: start;
    }

    .home-rate-poster,
    .home-rate-card.has-backdrop .home-rate-poster {
        width: 64px;
        height: auto;
        align-self: start;
    }

    .home-rate-title {
        font-size: 17px;
        letter-spacing: 0;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .home-rate-sub {
        font-size: 13px;
    }

    /* Keep the title clear of the X in the corner. */
    .home-rate-info {
        padding-right: 36px;
    }

    .home-rate-score {
        margin-top: 14px;
        gap: 10px;
    }

    .home-rate-track {
        flex-basis: calc(100% - 66px);
    }

    .home-rate-input.form-input {
        width: 56px;
        height: 34px;
        padding: 0;
    }

    /* Normal-size buttons, right-aligned on their own line. */
    .home-rate-actions {
        flex-basis: 100%;
        justify-content: flex-end;
    }
}

/* Touch screens: a slightly bigger thumb and a taller, invisible hit area,
   so the slider is easy to grab without looking any bigger. */
@media (pointer: coarse) {
    .home-rate-track,
    .home-rate-slider {
        height: 36px;
    }

    .home-rate-slider::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
        margin-top: -7px;
    }

    .home-rate-slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
    }
}

/* Desktop: one line of tiles. Rows after the first get zero height and are
   clipped, so the row always ends on a whole tile at any width; the heading
   link goes to the complete list. */
.home-row {
    display: grid;
    column-gap: 16px;
    row-gap: 0;
    grid-template-rows: auto;
    grid-auto-rows: 0;
    overflow: hidden;
}

/* Minimum tile widths scale with the viewport so tiles stay large enough
   to read at a glance on big monitors without dropping to 2-3 per row on a
   laptop: roughly 4-5 wide tiles (~325-350px) and 7-8 posters (~180-215px)
   per row from 1440px up to the 1920px column cap. */
.home-row-wide {
    grid-template-columns: repeat(auto-fill, minmax(clamp(280px, 18vw, 340px), 1fr));
}

.home-row-poster {
    grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 10.5vw, 210px), 1fr));
}

/* Continue Watching, Calendar, Recently Watched: one scrolling line instead of
   a clipped one (app.js enhanceHomeScrollRow). Tiles have a fixed width, so a
   partly visible last tile plus the faded edge signal there's more; they snap
   to whole tiles. Arrow buttons sit centred on the 16:9 images and appear on
   hover, only toward a side with more to see. */
.home-scroller {
    position: relative;
}

.home-scroll-btn {
    display: none;
}

@media (min-width: 769px) {
    .home-scroller {
        --home-wide-tile: clamp(300px, 22vw, 360px);
        --home-row-fade: 96px;
    }

    .home-row.home-row-scroll {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        /* No scroll snapping on desktop: with trackpads and Shift+wheel it
           fought the gesture (pulling back, jumping a tile). The arrow
           buttons land on tile edges by themselves (app.js scrollHomeRow). */
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .home-row-scroll::-webkit-scrollbar {
        display: none;
    }

    .home-row-scroll > .home-tile {
        flex: 0 0 var(--home-wide-tile);
    }

    .home-scroller-poster {
        --home-poster-tile: clamp(160px, 11vw, 210px);
    }

    .home-scroller-poster .home-row-scroll > .home-tile {
        flex-basis: var(--home-poster-tile);
    }

    .home-scroller.can-next .home-row-scroll {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--home-row-fade)), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - var(--home-row-fade)), transparent);
    }

    .home-scroller.can-prev .home-row-scroll {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--home-row-fade));
        mask-image: linear-gradient(to right, transparent, #000 var(--home-row-fade));
    }

    .home-scroller.can-prev.can-next .home-row-scroll {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--home-row-fade), #000 calc(100% - var(--home-row-fade)), transparent);
        mask-image: linear-gradient(to right, transparent, #000 var(--home-row-fade), #000 calc(100% - var(--home-row-fade)), transparent);
    }

    .home-scroll-btn {
        position: absolute;
        /* Centre of a 16:9 image: half of (tile width × 9/16). */
        top: calc(var(--home-wide-tile) * 9 / 32);
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--surface-elevated);
        color: var(--text-primary);
        box-shadow: var(--shadow-popover);
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%);
        transition: opacity 0.15s ease, background 0.15s ease;
    }

    /* Posters are 2:3: centre is three quarters of the tile width down. */
    .home-scroller-poster .home-scroll-btn {
        top: calc(var(--home-poster-tile) * 3 / 4);
    }

    .home-scroll-btn.prev {
        left: 8px;
    }

    .home-scroll-btn.next {
        right: 8px;
    }

    .home-scroll-btn:hover {
        background: var(--surface-hover);
    }

    .home-scroller:hover.can-prev .home-scroll-btn.prev,
    .home-scroller:hover.can-next .home-scroll-btn.next,
    .home-scroller.can-prev .home-scroll-btn.prev:focus-visible,
    .home-scroller.can-next .home-scroll-btn.next:focus-visible {
        opacity: 1;
        pointer-events: auto;
    }
}

/* No hover on touch screens: the arrows would never show, and swiping works. */
@media (hover: none) {
    .home-scroll-btn {
        display: none !important;
    }
}

.home-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}

.home-tile-placeholder {
    cursor: default;
    pointer-events: none;
}

.home-tile-media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-nested);
    overflow: hidden;
    background: var(--surface-sunken);
}

.home-row-poster .home-tile-media {
    aspect-ratio: 2 / 3;
}

.home-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Portrait posters standing in for a missing backdrop crop to faces,
       not to the middle of the body. */
    object-position: center 25%;
    display: block;
    transition: opacity 0.15s ease;
}

.home-tile:hover .home-tile-media img {
    opacity: 0.85;
}

.home-tile-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--scrim);
}

.home-tile-progress span {
    display: block;
    height: 100%;
    background: var(--accent);
}

.home-tile-flag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--scrim);
    /* Sits on artwork, not on a themed surface, so it stays light-on-dark
       in both themes. */
    color: var(--on-image);
    font-size: 12.5px;
    font-weight: 600;
}

.home-tile-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.home-tile-text {
    min-width: 0;
    flex: 1;
}

.home-tile-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-tile-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-tile-sub .dot {
    color: var(--text-muted);
}

.home-tile-score {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.home-tile-score svg {
    width: 14px;
    height: 14px;
    color: var(--gold);
}

/* +N new episodes since the show was started: a label, not a control. A
   circle for single digits (min-width = height), stretching to a pill for
   larger counts; centred against the title + episode lines. */
.home-new-badge {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 7px;
    box-sizing: border-box;
    border-radius: 16px;
    background: var(--surface-alt);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .home-section + .home-section {
        margin-top: 28px;
    }

    .home-section-link h2,
    .home-section-title {
        font-size: 17px;
    }

    .home-tile-title {
        font-size: 13.5px;
    }

    .home-tile-sub {
        font-size: 12px;
    }

    .home-tile-flag {
        font-size: 11.5px;
    }

    /* Mobile: rows scroll sideways and run to the screen edge, so the next
       tile peeks in as the cue that there's more. Both overflow axes are set
       so this stays a self-contained scroller (see design_philosophy.md §5.4). */
    .home-row {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0 calc(-1 * var(--content-pad-x));
        padding: 0 var(--content-pad-x);
        scroll-padding: 0 var(--content-pad-x);
    }

    .home-row::-webkit-scrollbar {
        display: none;
    }

    .home-row > .home-tile {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* Two and a third 16:9 tiles in view. 100% is the row's content box;
       the visible strip also includes its right padding (the row runs to
       the screen edge), less the two gaps between the visible tiles. */
    .home-row-wide > .home-tile {
        width: calc((100% + var(--content-pad-x) - 2 * 12px) / 2.333);
    }

    .home-row-poster > .home-tile {
        width: 34%;
    }
}

.media-card {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.media-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-popover);
}

.card-poster-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    background: var(--surface-sunken);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.media-card:hover .card-poster-img {
    transform: scale(1.03);
}

.card-badge-top-right {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid var(--border-strong);
    z-index: 2;
}

/* Bulk-select tap target over a poster: the markup renders
   .bulk-check-overlay (a div + svg checkmark, toggled by JS), not a real
   checkbox input — .card-bulk-checkbox below is unused and kept only in
   case older markup referencing it still exists. */
.bulk-check-overlay {
    position: absolute;
    bottom: 6px;
    left: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid var(--tint-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bulk-check-overlay svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.bulk-check-overlay:hover {
    border-color: var(--tint-3);
    background: var(--scrim);
}

.bulk-check-overlay.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.card-bulk-checkbox {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    padding: 6px;
    box-sizing: border-box;
    accent-color: var(--text-primary);
    z-index: 2;
    cursor: pointer;
}

.card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-title {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    line-height: 1.25;
    margin: 0 0 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-title:hover {
    text-decoration: underline;
}

.card-meta-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.meta-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-meta-line .dot {
    color: var(--text-muted);
}

.card-rating-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-secondary);
    font-weight: 500;
}

.card-rating-inline svg {
    color: var(--gold);
}

.episode-tag {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.card-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.card-actions-row .btn-primary {
    flex: 1;
    background: var(--text-primary);
    color: var(--canvas);
    border: none;
    border-radius: 8px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.card-actions-row .btn-primary:hover {
    background: var(--text-primary);
    opacity: 0.95;
}

.card-actions-row .btn-icon {
    background: var(--surface-alt);
    border: none;
    border-radius: 8px;
    height: 36px;
    width: 36px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.card-actions-row .btn-icon:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
    border: none;
}

/* Track Button (Aligned with Simplified CSS System & Unified Theme Matching) */
.btn-track {
    width: 100%;
    height: 36px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--text-primary);
    color: var(--canvas);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: var(--shadow-card);
}

.btn-track svg {
    color: currentColor;
    stroke: currentColor;
}

.btn-track:hover {
    background: var(--text-primary);
    color: var(--canvas);
    transform: translateY(-1px);
    box-shadow: var(--shadow-popover);
}

.btn-track:active {
    transform: translateY(0);
}

/* Standardized Card Context Popover */
.card-menu-popover {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: var(--paper);
    border: none;
    border-radius: 10px;
    box-shadow: var(--shadow-popover);
    padding: 5px;
    min-width: 150px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fadeIn 0.12s ease;
}

.card-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.12s ease;
}

.card-menu-item:hover {
    background: var(--surface-alt);
    color: var(--text-primary);
}

.card-menu-item.active {
    color: var(--text-primary);
    font-weight: 600;
}

.card-menu-item.danger {
    color: var(--danger);
}

.card-menu-item.danger:hover {
    background: var(--danger-soft);
}

/* Centered Score & Date Layout (no calendar icon, no star) */
.score-date-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    padding: 8px 0;
}

.score-field-wrap, .date-field-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.score-field-wrap .form-label, .date-field-wrap .form-label {
    text-align: center;
    width: 100%;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 500;
}

.input-center {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spin-icon {
    animation: spin 1s linear infinite;
}


/* Remove number input spinners */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] {
    -moz-appearance: textfield;
}

.input-no-calendar {
    text-align: center;
}

.input-no-calendar::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.input-no-calendar::-webkit-inner-spin-button,
.input-no-calendar::-webkit-clear-button {
    display: none;
}

.card-scores-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 11.5px;
}

.score-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--text-secondary);
}

.score-imdb { color: var(--gold); }
.score-rt { color: var(--danger-text); }
.score-user { color: var(--accent-text); }

.card-progress-box {
    margin-bottom: 10px;
}

.progress-track {
    width: 100%;
    height: 4px;
    background: var(--surface-alt);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-fill {
    height: 100%;
    background: var(--text-secondary);
    border-radius: 2px;
}

.progress-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}

.card-actions-row {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: none;
}

/* ==========================================================================
   Release Calendar Grid
   ========================================================================== */

.cal-matrix-scroll-wrapper {
    width: 100%;
    overflow: visible;
}

.cal-event-time {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.7;
    margin-left: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Non-current day pills: subtle borderless look matching the date color */
.cal-cell:not(.cal-cell-today) .cal-event-pill {
    background: var(--tint-1);
    border: none;
}

.cal-cell:not(.cal-cell-today) .cal-event-title {
    color: var(--text-muted);
}

/* Current day pills: crisp pure white matching today's date */
.cal-cell-today .cal-event-pill {
    background: var(--tint-2);
    border: none;
}

.cal-cell-today .cal-event-title {
    color: var(--text-primary);
    font-weight: 600;
}

/* Hover state: clean seamless background highlight */
.cal-event-pill:hover,
.cal-cell:not(.cal-cell-today) .cal-event-pill:hover {
    background: var(--tint-3);
    border: none;
}

.cal-event-pill:hover .cal-event-title,
.cal-cell:not(.cal-cell-today) .cal-event-pill:hover .cal-event-title {
    color: var(--text-primary);
}

/* ==========================================================================
/* ==========================================================================
   Viewing Insights & Cinema DNA Visuals
   ========================================================================== */
.insights-identity-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.insights-persona-hero {
    background: var(--paper);
    border-radius: var(--radius-card);
    padding: 22px 24px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.persona-info-left {
    flex: 1;
}

.persona-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    margin-bottom: 8px;
}

.persona-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.persona-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
}

.persona-traits-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.persona-trait-chip {
    background: var(--surface-alt);
    border-radius: var(--radius-nested);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 105px;
}

.persona-trait-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.persona-trait-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

/* 4-Column Quick Metrics Grid */
.insights-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.insight-metric-card {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.metric-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.metric-card-lbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.metric-card-val {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.metric-card-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.35;
}

/* 3-Column Creators & Eras Grid */
.insights-triplet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.taste-card {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px;
    box-shadow: var(--shadow-card);
}

.insights-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.insights-card-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.insights-card-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin: 2px 0 0 0;
}

.insights-card-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0 0 14px 0;
    line-height: 1.4;
}

/* Critic Gap List */
.critic-gap-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.critic-gap-item {
    background: var(--surface-alt);
    border-radius: var(--radius-nested);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: background 0.15s ease, transform 0.12s ease;
}

.critic-gap-item:hover {
    background: var(--surface-hover);
    transform: translateY(-1px);
}

.critic-gap-left-col {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.critic-gap-poster {
    width: 44px;
    height: 62px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--canvas);
}

.critic-gap-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.critic-gap-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.critic-gap-scores-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    white-space: nowrap;
}

.critic-gap-diff-line {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    margin-top: 1px;
    white-space: nowrap;
}

.diff-val {
    font-weight: 700;
    font-size: 12px;
}

.diff-val.positive {
    color: var(--emerald-text);
}

.diff-val.negative {
    color: var(--danger-text);
}

.diff-tag {
    color: var(--text-muted);
    font-size: 11px;
}

.critic-gap-comment-col {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.critic-gap-speech-bubble {
    background: var(--surface-alt);
    border-radius: 8px;
    padding: 12px 18px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.critic-gap-quote-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
    font-style: italic;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.watch-log-entry.selected-review,
.community-review-entry.selected-review {
    background: var(--surface-elevated) !important;
}

@media (max-width: 768px) {
    .critic-gap-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .critic-gap-left-col {
        width: 100%;
    }
    .critic-gap-comment-col {
        width: 100%;
    }
}

/* Scorecard Lists */
.scorecard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scorecard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: var(--surface-alt);
    border-radius: var(--radius-nested);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s ease;
}

.scorecard-row:hover {
    background: var(--surface-hover);
}

.scorecard-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.scorecard-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scorecard-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.scorecard-score {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--surface-hover);
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Rating Histogram */
.histogram-container {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 100px;
    padding-top: 10px;
}

.histogram-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.histogram-bar {
    width: 100%;
    background: var(--text-muted);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.3s ease, background 0.15s ease;
}

.histogram-bar:hover {
    background: var(--text-primary);
}

.histogram-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Lightboxd Wrapped Card */
.wrapped-card {
    background: var(--paper);
    color: var(--text-primary);
    border-radius: var(--radius-card);
    padding: 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wrapped-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.wrapped-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 2px 0 0 0;
}

.wrapped-years-selector {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--surface-alt);
    padding: 3px 4px;
    border-radius: var(--radius-pill);
}

.wrapped-nav-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.wrapped-nav-btn:hover:not(:disabled) {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.wrapped-nav-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

.wrapped-year-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.wrapped-year-btn:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.wrapped-year-btn.active {
    background: var(--surface-hover);
    color: var(--text-primary);
    font-weight: 600;
}

.wrapped-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.wrapped-stat-item {
    background: var(--surface-alt);
    border-radius: var(--radius-nested);
    padding: 12px 14px;
}

.wrapped-stat-val {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.wrapped-stat-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

/* ==========================================================================
   Modals & Drawers
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* No backdrop-filter: a 24px blur across the whole viewport made Chrome
       tile the effect, which showed hard-edged seams at some window sizes
       and flickered while the overlay faded in over animated content (e.g.
       a GIF or video banner). --modal-backdrop is a denser per-theme tint to make up
       for the blur. */
    background: var(--modal-backdrop);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s ease;
    will-change: opacity, visibility;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-window {
    background: var(--paper);
    border: none;
    border-radius: 16px;
    width: 100%;
    max-width: 740px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-modal);
    transform: scale(0.97) translateZ(0);
    transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    contain: layout style paint;
}

.modal-overlay.active .modal-window {
    transform: scale(1) translateZ(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px 24px;
    border-bottom: none;
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 10;
    flex-shrink: 0;
}

.modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.btn-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-close:hover {
    background: var(--surface-alt);
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    /* Scrolling past the end of a window's content stops there instead of
       carrying on into the page behind it. */
    overscroll-behavior: contain;
}

/* ==========================================================================
   Expanded Title Detail Modal Styling (Reference Template Matching)
   ========================================================================== */
/* Title window: pinned near the top instead of centred. Its height changes
   as the full details arrive (reviews, cast, scores), and a centred window
   jumped to re-centre each time; pinned, new content only extends it
   downward. Phones use the full-screen layout instead. */
@media (min-width: 769px) {
    #detail-modal {
        align-items: flex-start;
        padding-top: 6vh;
    }
}

.detail-modal-window {
    max-width: 760px;
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: none;
    border-radius: 16px;
    box-shadow: var(--shadow-modal);
    font-family: var(--font-sans);
}

/* Layered Log Watch Modal on Top of Expanded Card */
#rewatch-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: var(--overlay) !important;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

#rewatch-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#rewatch-modal .modal-window {
    background: var(--paper) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-modal) !important;
    position: relative !important;
    z-index: 100000 !important;
}

#rewatch-modal .form-textarea,
#rewatch-modal .form-input {
    background: var(--surface-alt);
    color: var(--text-primary);
    transition: background 0.15s ease, color 0.15s ease;
}

#rewatch-modal .form-textarea:focus,
#rewatch-modal .form-input:focus {
    background: var(--surface-hover);
}

.detail-modal-window .modal-header {
    padding: 20px 28px 16px 28px;
    border-bottom: none;
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 10;
}

.detail-modal-window .modal-body {
    padding: 4px 28px 28px 28px;
}

.detail-hero-grid {
    display: grid;
    /* minmax(0, …): a bare 1fr can't shrink below its content's min width,
       which pushed the modal wider than the screen on phones. */
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 0;
}

.detail-poster-wrap {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-popover);
}

.detail-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.detail-overview-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Desktop: the column is as tall as the poster, and the scores, status row
   and stepper always sit at its bottom -- where a long synopsis puts them --
   so a short synopsis leaves the gap above them, not below. The synopsis
   keeps its own size, so "More" stays on its last line. */
@media (min-width: 769px) {
    .detail-overview-col > .scores-triplet-grid {
        margin-top: auto;
    }
}

.meta-pills-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.detail-synopsis {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
    overflow: hidden;
}

/* fitDetailSynopsis() (app.js) sets max-height to whole lines when the text
   is cut short and un-hides "More", which sits at the right end of the last
   visible line; its background fades the text out behind it. Same font and
   line-height as the synopsis so it lines up with that line. */
.detail-synopsis-wrap {
    position: relative;
    min-width: 0;
}

.detail-synopsis-more {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 0 0 56px;
    border: none;
    background: linear-gradient(to right, transparent, var(--paper) 44px);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 600;
    cursor: pointer;
}

.detail-synopsis-more:hover {
    text-decoration: underline;
}

.synopsis-modal-window {
    max-width: 560px;
}

.synopsis-modal-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    white-space: pre-line;
}

/* Cast & Crew pills */
/* One row that scrolls sideways (app.js bindCastRowScroll maps the mouse
   wheel onto it); edges fade where there's more to scroll to. Both overflow
   axes are set so it stays a self-contained scroller (§5.4). */
.cast-crew-wrap {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.cast-crew-wrap::-webkit-scrollbar {
    display: none;
}

.cast-crew-wrap > * {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Fade width is a variable: wide on desktop, where there's no swipe
   gesture to discover the scroll, narrower on phones where space is tight. */
.cast-crew-wrap {
    --cast-fade: 140px;
}

.cast-crew-wrap.fade-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--cast-fade)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--cast-fade)), transparent);
}

.cast-crew-wrap.fade-left {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--cast-fade));
    mask-image: linear-gradient(to right, transparent, #000 var(--cast-fade));
}

.cast-crew-wrap.fade-left.fade-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--cast-fade), #000 calc(100% - var(--cast-fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--cast-fade), #000 calc(100% - var(--cast-fade)), transparent);
}

@media (max-width: 768px) {
    .cast-crew-wrap {
        --cast-fade: 56px;
    }
}

.person-pill {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 14px;
    border-radius: 18px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}

.person-pill:hover {
    background: var(--surface-active);
}

/* Status control row under aggregated scores — matching squared-off size & heights */
.status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

/* Modal Status Selector Button — Completely seamless with dark surface (var(--surface-alt)) */
.modal-status-btn {
    width: 100%;
    height: 36px;
    background: var(--surface-alt);
    border: none;
    border-radius: 8px;
    padding: 0 14px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.modal-status-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.modal-status-chevron {
    color: var(--text-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.modal-status-btn.open .modal-status-chevron {
    transform: rotate(180deg);
}

/* Modal Status Popover Menu */
.modal-status-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface-elevated);
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-popover);
    padding: 6px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fadeIn 0.12s ease;
}

.modal-status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s ease;
}

.modal-status-item:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.modal-status-item.active {
    background: var(--surface-active);
    color: var(--text-primary);
    font-weight: 600;
}

.status-row .btn-icon-destructive {
    background: var(--surface-alt);
    border: none;
    color: var(--text-muted);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.status-row .btn-icon-destructive:hover {
    background: var(--danger);
    color: var(--text-primary);
}

/* Progress stepper (under the status row): Season and Episode boxes, each
   one line, "− Season 2 / 3 +", the same 36px height and corner radius as
   the Watching / + List / delete controls above. The number is a typeable
   field sized to its digits (inline width in ch) so the label/value/total
   group stays centred between the buttons. */
.modal-episode-stepper-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
}

.progress-box {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 0 2px;
    background: var(--surface-alt);
    border-radius: 8px;
}

.progress-box-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.progress-box-btn:hover:not(:disabled) {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.progress-box-btn:disabled {
    opacity: 0.28;
    cursor: not-allowed;
}

.progress-box-center {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    cursor: text;
}

.progress-box-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
    user-select: none;
}

.progress-box-input {
    min-width: 1ch;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    box-sizing: content-box;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.progress-box-input:hover,
.progress-box-input:focus {
    background: var(--surface-hover);
    /* Pads the highlight without shifting the digits. */
    box-shadow: 0 0 0 3px var(--surface-hover);
    outline: none;
}

.progress-box-of {
    margin-left: -2px;
    font-size: 12.5px;
    color: var(--text-muted);
    user-select: none;
}

@media (max-width: 768px) {
    /* The overview column is ~230px on a phone; two boxes side by side
       would crowd the buttons, so they stack. */
    .modal-episode-stepper-row {
        flex-direction: column;
    }

    .progress-box {
        flex: 0 0 auto;
    }

    .progress-box-btn {
        width: 36px;
        height: 36px;
    }

    /* iOS zooms the page when a field under 16px is focused (§5.3). */
    .progress-box-input {
        font-size: 16px;
    }
}

.modal-list-btn {
    height: 36px;
    background: var(--surface-alt);
    border: none;
    border-radius: 8px;
    padding: 0 14px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.modal-list-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.modal-list-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 250px;
    background: var(--surface-elevated);
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-popover);
    padding: 6px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fadeIn 0.12s ease;
}

.modal-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s ease;
}

.modal-list-item:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.modal-list-item.in-list {
    color: var(--text-primary);
    font-weight: 600;
    background: var(--surface-active);
}

/* Detail Sections — Matching Symmetrical Vertical Spacing */
.detail-section {
    padding-top: 0;
    margin-top: 0;
}

.detail-section-bordered {
    border-top: none;
    border-bottom: none;
    margin-top: 22px;
    padding-top: 22px;
    padding-bottom: 22px;
    margin-bottom: 22px;
}

.section-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Review Tabs */
.review-tabs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.review-tabs {
    display: flex;
    gap: 4px;
    background: var(--surface-alt);
    border: none;
    border-radius: 8px;
    padding: 3px;
}

.review-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.review-tab.active {
    background: var(--surface-elevated);
    color: var(--text-primary);
}

.review-tab-panel.hidden {
    display: none;
}

/* Review Action Controls Header */
.review-actions-group {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

/* Review Sort Button — Crisp Rounded Button Next to [+] */
.review-sort-btn {
    height: 32px;
    border-radius: 8px;
    background: var(--surface-alt);
    border: none;
    color: var(--text-primary);
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.review-sort-btn:hover {
    background: var(--surface-elevated);
    color: var(--text-primary);
}

.review-sort-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    bottom: auto;
    background: var(--surface-alt);
    border: none;
    border-radius: 10px;
    box-shadow: 0 12px 36px var(--shadow-color);
    padding: 4px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fadeIn 0.12s ease;
}

/* Review Add [+] Button — Rounded Square */
.review-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.review-add-btn:hover {
    background: var(--surface-elevated);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* Triplet Scores */
.scores-triplet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.score-card {
    background: var(--surface-alt);
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
}

.score-card-val {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.score-card-lbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

/* Graphite's muted on --surface-alt is 3.99:1, under the 4.5:1 small text
   needs; secondary there is 5.05:1. Dark (6.56:1) and Light (4.69:1) pass. */
[data-theme="graphite"] .score-card-lbl {
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    /* Three score cards share the ~230px phone column; the default padding
       and gap left "METACRITIC" wider than its card. */
    .scores-triplet-grid {
        gap: 6px;
    }

    .score-card {
        padding: 9px 4px;
    }

    /* 11px is the smallest text Apple allows on phones. Uppercase
       "METACRITIC" doesn't fit a third of the column at that size, so phones
       show the names as written ("IMDb", "AniList", "Metacritic"). */
    .score-card-lbl {
        font-size: 11px;
        letter-spacing: 0;
        text-transform: none;
    }
}

/* Reviews Container — Independent Hover Scrolling with Overscroll Containment */
.reviews-vertical-peek-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding-top: 2px;
    padding-bottom: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reviews-vertical-peek-list::-webkit-scrollbar {
    display: none;
}

/* Watch History & Community Reviews Entries */
.watch-log-entry,
.community-review-entry {
    background: var(--surface-alt);
    border: none;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.15s ease;
}

.watch-log-entry:hover,
.community-review-entry:hover {
    background: var(--surface-alt);
}

.watch-log-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.watch-log-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.star-rating {
    color: var(--text-primary);
    font-weight: 700;
}

.watch-log-review {
    font-size: 13px;
    font-style: italic;
    color: var(--text-secondary);
    margin-top: 8px;
    margin-bottom: 0;
    line-height: 1.5;
}

.watch-log-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-icon-btn {
    background: transparent;
    border: none;
    padding: 3px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s ease, transform 0.12s ease;
    line-height: 1;
}

.review-icon-btn:hover {
    color: var(--text-primary);
    transform: scale(1.1);
}

.review-icon-btn.danger:hover {
    color: var(--danger-text);
}

.community-review-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.community-review-source {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Friends Review Actions & Replies Thread */
.friend-review-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.reply-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.reply-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--surface-elevated);
}

.reply-collapse-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.reply-collapse-btn:hover {
    color: var(--text-primary);
    background: var(--surface-elevated);
}

.collapse-chevron {
    transition: transform 0.18s ease;
    color: var(--text-muted);
}

.reply-collapse-btn:hover .collapse-chevron {
    color: var(--text-primary);
}

.reply-collapse-btn.collapsed .collapse-chevron {
    transform: rotate(-90deg);
}

.reply-count-badge {
    font-size: 11px;
    font-weight: 700;
    background: var(--surface-elevated);
    color: var(--text-primary);
    padding: 1px 6px;
    border-radius: 10px;
    line-height: 1.2;
}

.review-replies-thread {
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review-reply-item {
    background: var(--surface-alt);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background 0.15s ease;
}

.review-reply-item:hover {
    background: var(--surface-alt);
}

.reply-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reply-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.reply-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.reply-handle {
    font-size: 11px;
    color: var(--text-muted);
}

.reply-date {
    font-size: 11px;
    color: var(--text-muted);
}

.reply-content {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 2px 0 0 0;
    word-break: break-word;
}

/* Inline Reply Form */
.friend-reply-form {
    margin-top: 8px;
    animation: fadeIn 0.15s ease;
}

.reply-form-inner {
    background: var(--surface-alt);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reply-textarea {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12.5px;
    line-height: 1.4;
    resize: none;
    min-height: 38px;
}

.reply-textarea::placeholder {
    color: var(--text-muted);
}

.reply-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

/* Franchise Saga Timeline */
.franchise-next-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-alt);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.franchise-next-card:hover {
    background: var(--surface-hover);
}

.franchise-next-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--text-primary);
    color: var(--canvas);
    font-size: 13px;
    flex-shrink: 0;
}

.franchise-next-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.franchise-next-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.franchise-timeline {
    display: flex;
    flex-direction: column;
}

.franchise-entry {
    display: flex;
    gap: 14px;
    cursor: pointer;
}

.franchise-entry-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 12px;
    flex-shrink: 0;
}

.franchise-entry-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.franchise-entry-dot.status-completed {
    background: var(--text-primary);
}

.franchise-entry-dot.status-plan_to_watch {
    background: transparent;
    border: 2px solid var(--text-primary);
    width: 6px;
    height: 6px;
}

.franchise-entry-dot.status-unwatched {
    background: var(--surface-elevated);
}

.franchise-entry-line {
    width: 1px;
    flex: 1;
    background: var(--surface-active);
    margin-top: 4px;
}

.franchise-entry:last-child .franchise-entry-line {
    display: none;
}

.franchise-entry-body {
    padding-bottom: 18px;
    min-width: 0;
}

.franchise-entry:last-child .franchise-entry-body {
    padding-bottom: 0;
}

.franchise-entry-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.franchise-entry-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.franchise-entry-current-tag {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--canvas);
    background: var(--text-primary);
    padding: 2px 7px;
    border-radius: 8px;
}

.franchise-entry-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* User Profile Modal Layout - Unified Profile Card & Settings Window */
.profile-modal-window {
    width: 1120px !important;
    max-width: 95vw !important;
    height: auto;
    max-height: 90vh !important;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    border-radius: var(--radius-card);
    clip-path: inset(0 round var(--radius-card));
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    isolation: isolate;
    background: var(--paper);
    border: none;
    display: flex;
    flex-direction: column;
}

#profile-card-view {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Keep its full height so .profile-modal-window scrolls; shrinking to
       fit the window let overflow: hidden clip a tall profile instead. */
    flex-shrink: 0;
    background: transparent;
    overflow: hidden;
}

#profile-settings-view {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
}

/* Three-column so the title is genuinely centered against two
   differently-sized side controls (a text+icon "Profile" button vs a bare
   close icon) — a plain flex `space-between` visually off-centers it toward
   whichever side is narrower. */
.settings-header-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.settings-header-side {
    display: flex;
    align-items: center;
}

.settings-header-side-left {
    justify-content: flex-start;
}

.settings-header-side-right {
    justify-content: flex-end;
}

#settings-scroll-body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Sticks to the bottom of the scrollable viewport while there's more
   content below (a sticky element settles into normal flow — no longer
   overlapping anything — once scrolling actually reaches it), fading the
   last row so it's clear the list continues rather than looking abruptly
   cut off right above the Save/Cancel footer. */
.settings-scroll-fade-bottom {
    position: sticky;
    bottom: 0;
    height: 22px;
    margin-top: -22px;
    background: linear-gradient(to top, var(--paper) 15%, transparent 100%);
    pointer-events: none;
}

#settings-action-footer {
    position: relative;
}

/* Phones only: the settings body scrolls under the footer there, and the
   shadow marks the edge. On desktop it drew a stray dark band. */
@media (max-width: 768px) {
    #settings-action-footer {
        box-shadow: 0 -8px 12px -8px var(--shadow-color);
    }
}

#settings-scroll-body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, WebKit */
    width: 0;
    height: 0;
    background: transparent;
}

.profile-modal-banner-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    background: transparent;
    cursor: default;
    z-index: 1;
    overflow: hidden;
}

.profile-modal-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--scrim) 0%, transparent 40%, var(--scrim) 100%);
    pointer-events: none;
}

.profile-banner-upload-overlay {
    position: absolute;
    inset: 0;
    background: var(--scrim-strong);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 2;
}

.profile-banner-upload-hint {
    background: transparent;
    color: var(--on-image) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.profile-banner-upload-hint svg {
    stroke: var(--on-image);
}

.media-edit-active .profile-modal-banner-wrapper {
    cursor: pointer;
}

.media-edit-active .profile-modal-banner-wrapper:hover .profile-banner-upload-overlay {
    opacity: 1;
}

.media-edit-active .profile-modal-banner-wrapper:has(.profile-banner-top-right:hover) .profile-banner-upload-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
}

.profile-banner-top-right {
    position: absolute;
    top: 14px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.profile-banner-top-left {
    position: absolute;
    top: 14px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.profile-banner-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--on-image) !important;
    background: var(--scrim);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    border-radius: var(--radius-pill);
    clip-path: inset(0 round var(--radius-pill));
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    padding: 4px 10px;
    margin-right: 4px;
    transform: translateZ(0);
}

.profile-banner-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    clip-path: inset(0 round 50%);
    background: var(--scrim);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    color: var(--on-image) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.profile-banner-btn svg {
    stroke: var(--on-image);
}

.profile-banner-btn:hover {
    background: var(--scrim-strong);
    color: var(--on-image) !important;
    transform: scale(1.05) translateZ(0);
}

.profile-banner-btn:hover svg {
    stroke: var(--on-image);
}

.profile-banner-btn.active {
    background: var(--on-image);
    color: var(--on-image-ink) !important;
}

.profile-banner-btn.active svg {
    stroke: var(--on-image-ink);
}

.profile-banner-action-btn {
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-banner-action-btn.cancel {
    background: var(--scrim);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--on-image) !important;
    border: none;
    border-radius: var(--radius-pill);
    clip-path: inset(0 round var(--radius-pill));
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.profile-banner-action-btn.cancel:hover {
    background: var(--scrim-strong);
    color: var(--on-image) !important;
    transform: scale(1.03) translateZ(0);
}

.profile-banner-action-btn.save {
    background: var(--on-image);
    color: var(--on-image-ink);
    font-weight: 700;
    border: none;
}

.profile-banner-action-btn.save:hover {
    background: var(--on-image);
    opacity: 0.9;
    transform: scale(1.03);
}

.profile-modal-content {
    padding: 0 24px 24px 24px;
    position: relative;
    z-index: 8;
}

.profile-avatar-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: -60px;
    margin-bottom: 14px;
    position: relative;
    z-index: 10;
}

.profile-avatar-wrapper {
    position: relative;
    display: inline-block;
    cursor: default;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 8px 24px var(--shadow-color);
    transform: translateZ(0);
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.profile-modal-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--paper);
    outline: none;
    object-fit: cover;
    background: var(--surface-alt);
    display: block;
    box-sizing: border-box;
}

.profile-avatar-upload-hint {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: var(--scrim-strong);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--on-image) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
    border: none;
    outline: none;
    pointer-events: none;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.profile-avatar-upload-hint svg {
    stroke: var(--on-image);
}

.media-edit-active .profile-avatar-wrapper {
    cursor: pointer;
}

.media-edit-active .profile-avatar-wrapper:hover .profile-avatar-upload-hint {
    opacity: 1;
}

.stats-blocks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.stat-block {
    background: var(--surface-alt);
    border: none;
    border-radius: var(--radius-nested);
    padding: 16px;
    text-align: center;
}

/* Your own profile's stats open Viewing Insights (openInsightsFromProfile). */
.stats-blocks-grid.is-linked {
    cursor: pointer;
}

.stats-blocks-grid.is-linked .stat-block {
    transition: background 0.15s ease;
}

.stats-blocks-grid.is-linked .stat-block:hover {
    background: var(--surface-hover);
}

.stats-blocks-grid.is-linked:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: var(--radius-nested);
}

.stat-block-value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 4px;
}

.stat-block-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Form Controls */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-label a {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.form-input, .form-textarea, .form-select {
    width: 100%;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.custom-dropdown-btn {
    width: 100%;
    height: 36px;
    background: var(--surface-alt);
    border: none;
    border-radius: 8px;
    padding: 0 14px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
    outline: none;
}

.custom-dropdown-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.custom-dropdown-btn .custom-dropdown-chevron {
    color: var(--text-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.custom-dropdown-btn.open .custom-dropdown-chevron {
    transform: rotate(180deg);
}

.custom-settings-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: 100%;
    min-width: 180px;
    background: var(--surface-elevated);
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-popover);
    padding: 6px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fadeIn 0.12s ease;
}

.custom-settings-popover .sort-menu-item {
    font-size: 12.5px;
    font-weight: 500;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 12px;
    padding-right: 36px !important;
    height: 38px;
    line-height: 22px;
    cursor: pointer;
}

.form-select:hover {
    background-color: var(--surface-hover);
}

.form-select:focus {
    background-color: var(--surface-hover);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.form-select option {
    background: var(--surface-alt);
    color: var(--text-primary);
    padding: 8px 12px;
}

[data-theme="light"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="light"] .form-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="light"] .form-select option {
    background: var(--paper);
    color: var(--text-primary);
}

.form-textarea {
    border-radius: var(--radius-nested);
    resize: vertical;
    min-height: 80px;
}

.form-input:focus, .form-textarea:focus {
    background-color: var(--surface-hover);
    border: none;
}

/* API Key Input with Integrated Eye Toggle */
.api-key-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.api-key-input-wrapper .form-input {
    padding-right: 38px;
}

/* API key / token fields use type="text" (not "password") on purpose --
   Chrome only offers to save a field as a login credential when it's a
   real password input, and API keys aren't logins. This CSS masks the
   value visually (dots, like a password field) while it stays a plain
   text input underneath, so the save-password prompt never triggers.
   toggleApiKeyVisibility() adds/removes this class to show/hide the value. */
.masked-secret-input {
    -webkit-text-security: disc;
    text-security: disc;
}

.btn-eye-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 6px;
    margin: 0;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
    z-index: 2;
}

.btn-eye-toggle:hover {
    color: var(--text-primary);
    background: var(--tint-2);
}

/* Live API Key Outline Validation States */
.api-key-input-invalid {
    border-color: var(--danger-text) !important;
    box-shadow: 0 0 0 1px var(--danger-text) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Confirmation Modal Specific Layering */
#confirm-modal {
    z-index: 2500;
    background: var(--overlay);
    backdrop-filter: blur(8px);
}

#confirm-modal .modal-window {
    border: none;
    box-shadow: 0 24px 64px var(--shadow-color);
}

/* User Profile Modal Sections (Bio, Favorites, Recommendations, Friends) */

.profile-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: none;
}

.profile-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

/* Horizontal Poster Cards for Favorites (Single 5-Card Row) */
.profile-media-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.profile-media-card {
    background: var(--surface-alt);
    border: none;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    display: flex;
    flex-direction: column;
}

.profile-media-card:hover {
    transform: translateY(-3px);
    background: var(--surface-hover);
    border: none;
    box-shadow: 0 8px 24px var(--shadow-color);
}

.profile-media-poster-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    background: var(--surface-alt);
}

.profile-media-poster {
    width: 100%;
    height: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    background: var(--surface-alt);
    display: block;
}

.profile-media-body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.profile-media-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.profile-media-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* In-Place Favorite Slots in Edit Mode */
.profile-slot-empty-card {
    width: 100%;
    aspect-ratio: 2/3;
    background: var(--surface-alt);
    border: 1px dashed var(--tint-3);
    border-radius: 10px;
    clip-path: inset(0 round 10px);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
    position: relative;
    user-select: none;
}

.profile-slot-empty-card:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

/* Minimalist Inline Username Edit Input (Non-bulky) */
.profile-inline-input {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-strong);
    padding: 0 2px 2px 2px;
    outline: none;
    border-radius: 0;
    transition: border-color 0.15s ease;
}

.profile-inline-input:focus {
    border-bottom-color: var(--text-primary);
}

.profile-slot-filled-card {
    width: 100%;
    aspect-ratio: 2/3;
    position: relative;
    background: transparent;
    border-radius: 10px;
    clip-path: inset(0 round 10px);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    isolation: isolate;
    overflow: hidden;
    cursor: grab;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    user-select: none;
    border: none;
}

.profile-slot-filled-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-color);
}

.profile-slot-filled-card .profile-media-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
    display: block;
}

/* Horizontal Sliding Reorder Feedback */
.fav-slot-sliding {
    box-shadow: 0 12px 36px var(--shadow-color) !important;
    cursor: grabbing !important;
    z-index: 30 !important;
    transition: none !important;
    opacity: 0.95 !important;
}

/* Disabled Title in Picker */
.profile-media-card.disabled-fav-slot {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.profile-media-card.disabled-fav-slot:hover {
    transform: none;
    box-shadow: none;
    background: var(--surface-alt);
}

/* Blurry Overlay with + Button on Non-Empty Slots */
.profile-slot-blur-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--scrim);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    clip-path: inset(0 round 10px);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s ease;
    border-radius: 10px;
    z-index: 5;
    border: none;
    overflow: hidden;
}

.profile-slot-filled-card:hover .profile-slot-blur-overlay {
    background: var(--scrim-weak);
}

.profile-slot-plus-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--text-primary);
    color: var(--surface-sunken);
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px var(--shadow-color);
    transition: transform 0.15s ease, background 0.15s ease;
}

.profile-slot-empty-card:hover .profile-slot-plus-btn,
.profile-slot-filled-card:hover .profile-slot-plus-btn {
    transform: scale(1.12);
    background: var(--text-primary);
}

.profile-slot-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Frameless Section Action Icon Buttons (+ New List, + Add Friend) */
.profile-section-icon-btn {
    background: transparent;
    border: none;
    padding: 3px 6px;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease;
    line-height: 1;
}

.profile-section-icon-btn svg {
    stroke: currentColor;
}

.profile-section-icon-btn:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
    transform: scale(1.15);
}

/* Custom Lists Horizontally Scrollable Row (Hidden Scrollbars, Fluid Scroll) */
.profile-lists-scroll-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
}

.profile-lists-scroll-row:active {
    cursor: grabbing;
}

.profile-lists-scroll-row::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.profile-list-card {
    flex: 0 0 250px;
    background: var(--surface-alt);
    border: none;
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    user-select: none;
}

.profile-list-card:hover {
    transform: translateY(-3px);
    background: var(--surface-hover);
    border: none;
}

.profile-list-card .list-collage {
    height: 90px;
    border-radius: 8px;
}

/* Friends List (Single 4-Friend Row) */
.profile-friends-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.profile-friend-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-alt);
    border: none;
    border-radius: 10px;
    padding: 8px 10px;
    transition: background 0.15s ease;
}

.profile-friend-card:hover {
    background: var(--surface-hover);
    border: none;
}

.profile-friend-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: none;
}

.profile-friend-info {
    flex: 1;
    min-width: 0;
}

.profile-friend-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-friend-status {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* Friend cards are buttons that open the friend's profile. */
button.profile-friend-card {
    width: 100%;
    min-width: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.profile-friend-info > span {
    display: block;
}

.profile-friends-heading-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.profile-section-link-btn {
    background: transparent;
    border: none;
    padding: 3px 6px;
    border-radius: 4px;
    font: inherit;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.profile-section-link-btn:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.friends-count-badge {
    display: inline-block;
    min-width: 16px;
    padding: 1px 5px;
    margin-left: 4px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    vertical-align: 1px;
}

/* Shown on the profile banner when a friend action is refused. */
.profile-friend-error {
    align-self: center;
    max-width: 260px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: var(--scrim);
    color: var(--on-image);
    font-size: 11.5px;
    line-height: 1.3;
}

/* Friends window */
.friends-modal-window {
    max-width: 480px;
    width: 90%;
    max-height: 70vh;
}

.friends-modal-header {
    padding: 16px 20px 6px 20px;
    border-bottom: none;
    flex-shrink: 0;
}

.friends-search-bar {
    padding: 8px 20px 4px 20px;
    flex-shrink: 0;
}

.friends-search-field {
    position: relative;
}

.friends-search-field .search-input {
    width: 100%;
    font-size: 13px;
    padding: 8px 10px 8px 32px;
    background: var(--surface-alt);
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
}

.friends-search-field svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.friends-feedback {
    margin: 8px 2px 0 2px;
    font-size: 12px;
    color: var(--text-secondary);
}

.friends-feedback.is-error {
    color: var(--danger-text);
}

#friends-search-results:not(:empty) {
    margin-top: 8px;
}

.friends-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 20px 4px 20px;
    flex-shrink: 0;
}

.friends-modal-body {
    padding: 8px 20px 20px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.friends-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.friends-group-label {
    margin: 10px 2px 6px 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.friends-group-label:first-child {
    margin-top: 2px;
}

.friends-empty {
    margin: 10px 2px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.friend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-nested);
    background: var(--surface-alt);
    transition: background 0.15s ease;
}

.friend-row:hover {
    background: var(--surface-hover);
}

.friend-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.friend-row-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.friend-row-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.friend-row-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-row-handle {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-row-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Rows sit on --surface-alt, the secondary button's own colour: step it up a tone. */
.friend-row .btn-secondary {
    background: var(--surface-hover);
}

.friend-row .btn-secondary:hover,
.friend-row:hover .btn-secondary {
    background: var(--surface-active);
}

.friend-row-state {
    font-size: 12px;
    color: var(--text-muted);
    padding: 0 6px;
}

/* Compact buttons in friend rows and the notification bell */
.btn.friend-action {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
}

/* Friend's name on a title page review: opens their profile. */
/* A friend's name on a title page review: styled by .community-review-author,
   a button so it can open their profile. */
.friend-review-author {
    padding: 0;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.friend-review-author:hover {
    text-decoration: underline;
}

/* A small heading inside a dropdown menu (Settings > Profile Visibility > Friends can see) */
.popover-section-label {
    padding: 10px 12px 4px 12px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.notif-item-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

/* Related cards in the title window (loadDetailRelated): 56px tall -- above
   Apple's 44pt touch target -- with the cover flush on the leading edge and
   three tight lines of text. Two per row on desktop, one on phones. 8px
   between heading and cards and between cards; 20px to Cast & Crew, whose
   own bordered spacing would otherwise stack with this section's. */
.detail-related {
    margin-top: 20px;
}

.detail-related .section-heading {
    margin-bottom: 8px;
}

.detail-related:not([hidden]) + .detail-section-bordered {
    margin-top: 0;
    padding-top: 20px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.related-card {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    min-width: 0;
    padding: 0 12px 0 0;
    background: var(--surface-alt);
    border: none;
    border-radius: var(--radius-nested);
    overflow: hidden;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.related-card:hover {
    background: var(--surface-hover);
}

.related-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.related-cover {
    width: 40px;
    height: 56px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--surface-hover);
}

.related-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.related-line {
    font-size: 11px;
    line-height: 14px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-line.is-mine {
    color: var(--text-secondary);
}

/* Graphite's muted on --surface-alt is 3.99:1, under the 4.5:1 11px text
   needs (as .score-card-lbl). */
[data-theme="graphite"] .related-line {
    color: var(--text-secondary);
}

[data-theme="graphite"] .related-line.is-mine {
    color: var(--text-primary);
}

.related-type {
    font-weight: 600;
}

.related-type.is-main {
    color: var(--accent-text);
}

.related-sep {
    margin: 0 4px;
}

.related-title {
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* An empty prequel or sequel slot keeps the other in its column on desktop. */
.related-slot-empty {
    min-height: 56px;
}

@media (max-width: 768px) {
    .related-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* One column: nothing to hold in place. */
    .related-slot-empty {
        display: none;
    }
}

/* "Dub airing · E12" under a tracker card's meta line: an anime AniList
   calls Finished (the Japanese broadcast ended) whose dub is still coming
   out. Same quiet tone as the meta line above it. */
.card-dub-airing {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Undo after a progress change. Toasts are off app-wide; this is the one
   transient bar, and only ever for progress. */
.undo-bar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 3200;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 6px 6px 6px 16px;
    background: var(--surface-elevated);
    color: var(--text-primary);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-popover);
    font-size: 13px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.undo-bar.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.undo-bar-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.undo-bar-btn {
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    color: var(--accent-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.undo-bar-btn:hover {
    background: var(--surface-hover);
}

@media (max-width: 768px) {
    .undo-bar {
        bottom: calc(54px + env(safe-area-inset-bottom, 0px) + 12px);
    }

    /* Title window on phones: Apple's touch target is 44x44 pt, and these
       controls draw at 32-36px. An invisible ::after grows each one's hit
       area to 44px without changing how it looks. Where buttons sit 8px
       apart in a row, the extension stays within half that gap (4px) so
       neighbours never overlap. */
    #detail-modal .btn-close,
    #detail-modal .modal-status-btn,
    #detail-modal .modal-list-btn,
    #detail-modal .btn-icon-destructive,
    #detail-modal .progress-box-btn,
    #detail-modal .review-sort-btn,
    #detail-modal .review-add-btn {
        position: relative;
    }

    #detail-modal .btn-close::after,
    #detail-modal .modal-status-btn::after,
    #detail-modal .modal-list-btn::after,
    #detail-modal .btn-icon-destructive::after,
    #detail-modal .progress-box-btn::after,
    #detail-modal .review-sort-btn::after,
    #detail-modal .review-add-btn::after {
        content: '';
        position: absolute;
    }

    /* 32 -> 44 */
    #detail-modal .btn-close::after {
        inset: -6px;
    }

    /* 36 -> 44 */
    #detail-modal .modal-status-btn::after,
    #detail-modal .modal-list-btn::after,
    #detail-modal .btn-icon-destructive::after,
    #detail-modal .progress-box-btn::after {
        inset: -4px;
    }

    /* 32 tall -> 44; 4px sideways */
    #detail-modal .review-sort-btn::after,
    #detail-modal .review-add-btn::after {
        inset: -6px -4px;
    }
}

@media (max-width: 768px) {
    .profile-friends-list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Line up with the mobile .modal-body side padding. */
    .friends-search-bar,
    .friends-tabs {
        padding-left: calc(env(safe-area-inset-left, 0px) + 16px);
        padding-right: calc(env(safe-area-inset-right, 0px) + 16px);
    }

    .friends-modal-body {
        padding-top: 8px !important;
    }

    .btn.friend-action,
    .profile-section-link-btn {
        min-height: 36px;
    }
}

/* 5 Favorite Slots Picker in Settings */
.setting-slots-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.setting-slot-card {
    background: var(--paper);
    border: none;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.setting-slot-card.has-title {
    border: none;
    background: var(--paper);
}

.setting-slot-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}

.setting-slot-thumb {
    width: 52px;
    height: 76px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--surface-sunken);
    margin-bottom: 6px;
}

.setting-slot-empty-thumb {
    width: 52px;
    height: 76px;
    border-radius: 6px;
    background: var(--surface-sunken);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 20px;
    margin-bottom: 6px;
}

.setting-slot-select {
    width: 100%;
    font-size: 11px;
    padding: 3px 4px;
    height: 26px;
    background: var(--surface-alt);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
}

/* Custom Lists Grid (Lists Tab) */
.lists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.list-card {
    background: var(--surface-alt);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    border: none;
}

.list-card:hover {
    transform: translateY(-3px);
    background: var(--surface-hover);
    box-shadow: 0 8px 24px var(--shadow-color);
}

.list-collage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--paper);
    padding: 4px;
}

.list-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.list-card-pin-btn {
    background: transparent;
    border: none;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.12s ease, opacity 0.15s ease;
    flex-shrink: 0;
    line-height: 1;
    opacity: 0.45;
}

.list-card:hover .list-card-pin-btn {
    opacity: 0.8;
}

.list-card-pin-btn:hover {
    color: var(--text-primary);
    opacity: 1 !important;
    transform: scale(1.15);
}

.list-card-pin-btn.pinned {
    color: var(--text-primary);
    opacity: 1 !important;
}

.list-card-pin-btn.pinned:hover {
    color: var(--text-secondary);
    transform: scale(1.15);
}

/* Responsive adjustments */
/* The top bar stays on one line at every desktop width (it's a fixed 64px
   tall, so wrapping squashed two rows into it; not wrapping used to spill
   past the window between ~1025 and 1200px and shift the page sideways).
   It tightens in steps instead: short tab labels, then tighter tabs and an
   avatar-only profile button, then text-only tabs. Phones (<= 768px) have
   their own header. */
/* Scoped under .nav-item to outrank `.nav-item span { display: inline-block }`. */
.nav-item .nav-label-short {
    display: none;
}

@media (max-width: 1200px) {
    .nav-item .nav-label-full {
        display: none;
    }
    .nav-item .nav-label-short {
        display: inline-block;
    }
}

@media (min-width: 769px) and (max-width: 1000px) {
    .top-nav-center-container {
        gap: 12px;
    }
    .nav-item {
        padding: 7px 11px;
    }
    .unified-profile-name {
        display: none;
    }
    .unified-profile-btn {
        padding: 4px;
    }
}

@media (min-width: 769px) and (max-width: 880px) {
    .nav-item svg {
        display: none;
    }
}

@media (max-width: 1024px) {
    /* The profile's three stats stay side by side at every width. */
    .taste-columns-grid, .wrapped-grid, .insights-identity-grid, .insights-triplet-grid {
        grid-template-columns: 1fr;
    }
    .insights-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .insights-metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Release Calendar View
   ========================================================================== */
.calendar-card {
    background: var(--paper);
    border-radius: var(--radius-card, 14px);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

/* Three-column layout so the month/year is genuinely centered regardless of
   how wide "Today" or the refresh control are on either side — a plain
   flex `space-between` can't center a middle element against two
   differently-sized siblings. */
.cal-header-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
}

.cal-header-side {
    display: flex;
    align-items: center;
}

.cal-header-side-left {
    justify-content: flex-start;
}

.cal-header-side-right {
    justify-content: flex-end;
}

.cal-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.cal-nav-arrow {
    flex-shrink: 0;
}

.cal-month-heading {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary, var(--text-primary));
    margin: 0;
    letter-spacing: -0.3px;
    text-align: center;
    min-width: 168px;
}

.cal-grid-header {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, var(--text-muted));
}

.cal-grid-cells {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.cal-cell {
    background: var(--surface-alt);
    border: none;
    border-radius: 8px;
    min-height: 110px;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    transition: background 0.15s ease;
}

.cal-cell:hover {
    background: var(--surface-hover);
}

.cal-cell-muted {
    background: var(--surface-alt);
    border: none;
    opacity: 0.3;
}

.cal-cell-today {
    background: var(--surface-alt) !important;
    border: none !important;
}

.cal-cell-today .cal-cell-day-num {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    background: transparent !important;
    width: auto;
    height: auto;
    border-radius: 0;
    display: inline-block;
}

.cal-cell-day-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.cal-event-pill {
    background: var(--tint-1);
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.cal-event-pill:hover {
    background: var(--tint-2);
    color: var(--text-primary);
}

.cal-event-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
}

/* ==========================================================================
   Skeleton Loading Animation & Layout
   ========================================================================== */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-shimmer {
    background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-hover) 50%, var(--surface-sunken) 100%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
}

.skeleton-card {
    background: var(--paper, var(--paper));
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
    position: relative;
    pointer-events: none;
    user-select: none;
}

.skeleton-poster {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 14px 14px 0 0;
}

.skeleton-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-line {
    border-radius: 4px;
    height: 12px;
}

.skeleton-line-title {
    width: 78%;
    height: 14px;
    border-radius: 4px;
}

.skeleton-line-meta {
    width: 45%;
    height: 11px;
    border-radius: 4px;
}

.skeleton-line-btn {
    width: 100%;
    height: 32px;
    border-radius: 8px;
    margin-top: 4px;
}

/* ==========================================================================
   Import & Conflict Resolution Manager Modal Styling
   ========================================================================== */
.conflict-modal-window {
    max-width: 760px;
    width: 94vw;
    max-height: 88vh;
    background: var(--surface-sunken);
    border: none;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-popover);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-sans);
}

.conflict-stats-bar {
    background: var(--tint-1);
    border: none;
    border-radius: var(--radius-nested);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.conflict-item-card {
    background: var(--surface-sunken);
    border: none;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: all 0.15s ease;
}

.conflict-item-card:hover {
    background: var(--surface-alt);
}

.conflict-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0 12px 0;
}

.conflict-box {
    border-radius: var(--radius-nested);
    padding: 10px 12px;
    font-size: 12px;
}

.conflict-box-local {
    background: var(--tint-1);
    border: none;
}

.conflict-box-imported {
    background: var(--tag-purple-soft);
    border: none;
}

.conflict-box-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.conflict-decision-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    border: none;
    background: var(--tint-1);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.conflict-decision-pill:hover {
    background: var(--tint-2);
    color: var(--text-primary);
}

.conflict-decision-pill.active-local {
    background: var(--emerald-soft) !important;
    border: none !important;
    color: var(--emerald-text) !important;
}

.conflict-decision-pill.active-imported {
    background: var(--tag-purple-soft) !important;
    border: none !important;
    color: var(--tag-purple-text) !important;
}

.pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.pill-dot.green {
    background: var(--emerald);
}

.pill-dot.indigo {
    background: var(--tag-purple);
}

.pill-dot.amber {
    background: var(--gold-text);
}

/* Import Completion & Success View */
.import-success-card {
    text-align: center;
    padding: 24px 20px 20px 20px;
}

.import-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    max-width: 480px;
    margin: 20px auto 24px auto;
}

.import-breakdown-item {
    background: var(--tint-1);
    border: none;
    border-radius: var(--radius-nested);
    padding: 10px 8px;
    text-align: center;
}

.import-breakdown-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.import-breakdown-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}

.btn-inline-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    vertical-align: baseline;
}
.btn-inline-link:hover {
    color: var(--text-primary);
}

/* ==========================================================================
   Recommended For You Design System & Chips
   ========================================================================== */
.rec-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.rec-match-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--scrim) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--on-image) !important;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border: none !important;
    border-radius: var(--radius-pill);
    clip-path: inset(0 round var(--radius-pill));
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    z-index: 2;
    box-shadow: 0 2px 8px var(--shadow-color);
    transition: background 0.15s ease, transform 0.15s ease;
}

.rec-match-badge:hover {
    background: var(--scrim-strong) !important;
    color: var(--on-image) !important;
}

.rec-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
    min-height: 22px;
}

.rec-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

.rec-chip-icon {
    font-size: 11px;
    line-height: 1;
}

.rec-empty-container {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px;
    background: var(--paper);
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    margin: 12px 0;
    box-shadow: var(--shadow-card);
}

.rec-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
    opacity: 0.85;
}

.rec-empty-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.2px;
}

.rec-empty-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    max-width: 460px;
    line-height: 1.5;
    margin: 0 0 22px;
}

/* ==========================================================================
   Mobile-Only Elements Default (Strict Desktop Isolation)
   ========================================================================== */
.mobile-nav-brand {
    display: none;
}

.mobile-bottom-nav {
    display: none;
}

.mobile-nav-slider-pill {
    display: none !important;
}

#btn-mobile-search {
    display: none !important;
}

.mobile-search-bar {
    display: none !important;
}

.mobile-header-spacer {
    display: none !important;
}

#btn-profile-notifs {
    display: none !important;
}

.mobile-text {
    display: none !important;
}

.desktop-text {
    display: inline !important;
}

.cal-cell-mobile-date {
    display: none !important;
}

.cal-mobile-no-events {
    display: none !important;
}

.filter-pills-slider {
    display: none !important;
}

/* Class selector (not #id) so the mobile override below — which must also use
   a class selector to matter here — can actually win on specificity+source
   order; an #id base rule was silently beating it regardless of !important,
   leaving the agenda permanently hidden and a dead empty gap on mobile. */
.cal-mobile-agenda {
    display: none !important;
}

.cal-has-events-dot {
    display: none !important;
}

/* Cover thumbnails in calendar cells are the phone layout's stand-in for
   the title pills; desktop keeps the pills. */
.cal-cell-posters {
    display: none;
}

/* Mobile Search Page is strictly hidden on desktop */
@media (min-width: 769px) {
    #tab-search {
        display: none !important;
    }
}

.cal-today-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cal-more-pill {
    display: none;
}

.cal-today-btn:hover {
    background: var(--surface-alt);
    color: var(--text-primary);
}

/* ==========================================================================
   Mobile Responsive Styles (Screen width <= 768px)
   Strictly isolated to mobile screens to preserve 100% desktop appearance
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Base & Viewport */
    body {
        font-size: 13.5px;
        -webkit-tap-highlight-color: transparent;
    }

    .main-content {
        /* Full-bleed elements (.calendar-card) cancel this exact side padding
           via a negative margin — read from the same variable so the two can
           never drift apart the way a second hardcoded 12px did before,
           which left a few px of horizontal overflow (and, with it, a
           side-to-side pan the whole rest of the app doesn't have) once this
           padding shrank at the 420px breakpoint below but that hardcoded
           value didn't follow. */
        --content-pad-x: 12px;
        padding: 12px calc(env(safe-area-inset-right, 0px) + var(--content-pad-x)) calc(env(safe-area-inset-bottom, 0px) + 84px) calc(env(safe-area-inset-left, 0px) + var(--content-pad-x)) !important;
        max-width: 100% !important;
        /* No overflow-x here: <html> already clips horizontal overflow
           page-wide, and setting it here (without a matching overflow-y)
           would turn .main-content into a phantom scroll container that
           breaks position:sticky for .toolbar-row inside it. */
    }

    /* 2. Top Header Bar (Brand on left, Search button + PFP avatar on right) */
    .top-nav-bar {
        /* Fixed (not auto) so --mobile-nav-height below stays exact: 36px
           avatar button + 8px top/bottom padding = 52px content height. */
        height: calc(env(safe-area-inset-top, 0px) + 52px) !important;
        padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
        padding-bottom: 8px !important;
        padding-left: calc(env(safe-area-inset-left, 0px) + 14px) !important;
        padding-right: calc(env(safe-area-inset-right, 0px) + 14px) !important;
        position: sticky;
        top: 0;
        z-index: 900;
    }

    .top-nav-center-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
    }

    /* Site Name & Logo on the left of mobile top nav bar */
    .mobile-nav-brand {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        cursor: pointer !important;
        user-select: none;
        text-decoration: none;
        flex-shrink: 0 !important;
    }

    .mobile-brand-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mobile-brand-title {
        font-size: 17.5px !important;
        font-weight: 700 !important;
        letter-spacing: -0.4px !important;
        color: var(--text-primary) !important;
    }

    /* Hide desktop center tabs with slider pill */
    .nav-menu-centered {
        display: none !important;
    }

    /* Right Action Controls: Search button + User profile avatar button */
    .nav-controls-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    /* Hide desktop search box on mobile (turned into mobile search button) */
    .header-search-box {
        display: none !important;
    }

    /* Mobile Search Button in Nav Bar */
    #btn-mobile-search.mobile-search-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: var(--surface-alt) !important;
        border: none !important;
        color: var(--text-primary) !important;
        padding: 0 !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        transition: background 0.15s ease, transform 0.1s ease !important;
    }

    #btn-mobile-search.mobile-search-btn:hover {
        background: var(--surface-hover) !important;
    }

    #btn-mobile-search.mobile-search-btn:active {
        transform: scale(0.92);
    }

    /* Mobile Search Overlay Bar (Active when search button tapped) */
    .mobile-search-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
        padding-bottom: 8px;
        padding-left: calc(env(safe-area-inset-left, 0px) + 12px);
        padding-right: calc(env(safe-area-inset-right, 0px) + 12px);
        background: var(--paper);
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 1000;
        box-shadow: 0 4px 16px var(--shadow-color);
    }

    .mobile-search-box {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--surface-alt);
        border-radius: var(--radius-pill);
        padding: 0 12px;
        height: 38px;
        box-sizing: border-box;
    }

    .mobile-search-input {
        flex: 1;
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: 16px !important;
        outline: none;
        min-width: 0;
    }

    .mobile-search-clear-btn {
        background: transparent;
        border: none;
        color: var(--text-muted);
        font-size: 13px;
        cursor: pointer;
        padding: 4px;
        line-height: 1;
    }

    .mobile-search-cancel-btn {
        background: transparent;
        border: none;
        color: var(--accent);
        font-size: 14.5px;
        font-weight: 600;
        cursor: pointer;
        padding: 4px 6px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Hide Notifications Bell from mobile header */
    .notif-wrapper {
        display: none !important;
    }

    /* Notifications button in Profile Modal Banner */
    #btn-profile-notifs {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* User Profile Trigger: Clean Circle with User Avatar.
       No `display` override here: `updateAuthUI()` toggles this element's
       inline `display` between 'flex' (signed in) and 'none' (signed out via
       an *inline* style, so a plain `!important` here would always win and
       show the avatar even while signed out, alongside the Sign In button. */
    #header-user-btn.unified-profile-btn {
        flex-shrink: 0 !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        border: none !important;
        background: transparent !important;
        overflow: visible !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.15s ease;
        position: relative !important;
    }

    #header-user-btn.unified-profile-btn:active {
        transform: scale(0.92);
    }

    #header-user-avatar.unified-profile-avatar {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
    }

    #header-username.unified-profile-name {
        display: none !important;
    }

    #header-signin-btn {
        flex-shrink: 0 !important;
        height: 34px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    /* Notifications Dropdown Full Width Safe Clamping */
    .notif-dropdown {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + 54px) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 3100 !important;
    }

    /* 3. Mobile Bottom Navigation Bar (Stays above full-page modals) */
    /* 3. Mobile Bottom Navigation Bar (Stays above full-page modals) */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(54px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--glass-bg-dense);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 24px var(--shadow-color);
        z-index: 2900 !important;
        align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        touch-action: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    .mobile-nav-slider-pill {
        display: block !important;
        position: absolute;
        top: 5px;
        left: 0;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 5px);
        background: var(--tint-2);
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        border-radius: 12px;
        pointer-events: none;
        z-index: 0;
        will-change: transform, width;
    }

    .mobile-bottom-nav.is-dragging .mobile-nav-slider-pill {
        transition: none !important;
    }

    .mobile-nav-item {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: transparent !important;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 5px 0;
        position: relative !important;
        z-index: 1 !important;
        transition: color 0.15s ease, transform 0.1s ease;
        -webkit-tap-highlight-color: transparent;
        user-select: none !important;
        -webkit-user-select: none !important;
        touch-action: none !important;
    }

    .mobile-nav-item svg {
        flex-shrink: 0;
        transition: transform 0.15s ease;
    }

    .mobile-nav-item span {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.1px;
        line-height: 1;
    }

    .mobile-nav-item:active {
        transform: scale(0.92);
    }

    .mobile-nav-item.active {
        color: var(--text-primary);
    }

    .mobile-nav-item.active svg {
        stroke-width: 2.3;
        transform: translateY(-1px);
    }

    /* 4. Filter Pills Static in Place with Sliding Liquid Highlight */
    .toolbar-row {
        margin-bottom: 14px !important;
        gap: 10px !important;
        top: calc(env(safe-area-inset-top, 0px) + 52px) !important;
        padding: 10px 0 8px !important;
    }

    .mobile-text {
        display: inline !important;
    }

    .desktop-text {
        display: none !important;
    }

    .filter-pills-group {
        display: flex !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
        overflow-x: hidden !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        touch-action: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .filter-pills-slider {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        background: var(--surface-hover);
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        border-radius: var(--radius-pill);
        pointer-events: none;
        z-index: 0;
        will-change: transform, width, height;
    }

    .filter-pills-group.is-dragging .filter-pills-slider {
        transition: none !important;
    }

    .filter-pills-group .pill-btn {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 7px 2px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-align: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: var(--radius-pill) !important;
        position: relative !important;
        z-index: 1 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .filter-pills-group .pill-btn.active {
        background: transparent !important;
        border-color: transparent !important;
        color: var(--text-primary) !important;
    }

    /* Controls Group (Equal Width Types & Sort Dropdowns, Pen Icon for Edit) */
    .controls-group {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .type-dropdown-wrapper,
    .sort-dropdown-wrapper {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .type-dropdown-wrapper .custom-select,
    .sort-dropdown-wrapper .custom-select {
        width: 100% !important;
        padding: 7px 8px !important;
        font-size: 12px !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    .controls-group #btn-toggle-bulk {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border-radius: var(--radius-pill) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }

    #sort-btn-label {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* 5. Bulk Toolbar */
    .bulk-bar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
        padding: 12px 14px !important;
        border-radius: 12px !important;
    }

    .bulk-actions-group {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .bulk-actions-group .btn {
        flex: 1;
        min-width: calc(50% - 4px);
        font-size: 11.5px !important;
        padding: 6px 8px !important;
    }

    /* 6. Cards Grid (2-Column Mobile Media Grid) */
    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100%;
    }

    .media-card {
        border-radius: 12px !important;
    }

    .card-body {
        padding: 10px 10px 12px !important;
    }

    .card-title {
        font-size: 13px !important;
        margin-bottom: 3px !important;
        line-height: 1.25;
    }

    .card-meta-line {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    .card-actions-row {
        gap: 5px !important;
    }

    .card-actions-row .btn-primary {
        height: 32px !important;
        font-size: 11.5px !important;
        padding: 0 8px !important;
    }

    .card-actions-row .btn-icon {
        height: 32px !important;
        width: 32px !important;
    }

    .card-badge-top-right {
        top: 6px !important;
        right: 6px !important;
        font-size: 11px !important;
        padding: 2px 7px !important;
    }

    /* 7. Release Calendar: Native Mobile Agenda / Release Feed View */
    #tab-calendar .calendar-card,
    .calendar-card {
        margin-left: calc(-1 * (env(safe-area-inset-left, 0px) + var(--content-pad-x, 12px))) !important;
        margin-right: calc(-1 * (env(safe-area-inset-right, 0px) + var(--content-pad-x, 12px))) !important;
        /* Cancels .main-content's own 12px top padding so the card's --paper
           background sits flush against the sticky nav bar instead of
           leaving a visible strip of the darker --canvas page background
           between them — a seam that doesn't appear on other tabs, since
           their sticky toolbar-row fills that same strip with a matching
           background the moment the page loads. */
        margin-top: -12px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        padding: 10px 8px !important;
    }

    .cal-header-bar {
        gap: 4px !important;
        margin-bottom: 10px !important;
        padding: 0 2px !important;
    }

    .cal-header-center {
        gap: 6px !important;
    }

    .cal-nav-arrow {
        width: 30px !important;
        height: 30px !important;
    }

    .cal-header-side-right .btn-icon {
        width: 30px !important;
        height: 30px !important;
    }

    .cal-month-heading {
        font-size: 15px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }

    .cal-today-btn {
        padding: 3px 8px !important;
        font-size: 11px !important;
        height: 26px !important;
        line-height: 1 !important;
    }

    /* Calendar matrix wrapper fits 100% of mobile screen without horizontal scroll */
    .cal-matrix-scroll-wrapper {
        width: 100% !important;
        overflow: visible !important;
    }

    .cal-grid-header {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        padding-bottom: 4px !important;
        margin-bottom: 4px !important;
        border-bottom: 1px solid var(--border) !important;
    }

    /* 7. Release Calendar: Shorter Squares to Fit Vertically on Mobile */
    .cal-grid-cells {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 2.5px !important;
    }

    .cal-cell {
        min-height: 48px !important;
        height: auto !important;
        max-height: 60px !important;
        padding: 2.5px 2px !important;
        border-radius: 5px !important;
        background: var(--surface-alt) !important;
        border: 1px solid var(--border) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        cursor: pointer !important;
        position: relative !important;
        overflow: hidden !important;
        gap: 1.5px !important;
        transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .cal-cell:active {
        transform: scale(0.97);
    }

    .cal-cell-muted {
        opacity: 0.15 !important;
        background: transparent !important;
        border-color: transparent !important;
        pointer-events: none !important;
    }

    .cal-cell-today {
        border-color: var(--accent) !important;
        background: var(--surface-hover) !important;
    }

    .cal-cell-day-num {
        display: block !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        text-align: left !important;
        line-height: 1 !important;
        margin: 0 0 1px 1px !important;
    }

    .cal-cell-today .cal-cell-day-num {
        color: var(--accent) !important;
        font-weight: 800 !important;
    }

    /* Selected Day Highlight */
    .cal-cell-selected {
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 1.5px var(--accent), 0 2px 8px var(--shadow-color) !important;
    }

    .cal-cell-selected .cal-cell-day-num {
        color: var(--accent) !important;
        font-weight: 800 !important;
    }

    .cal-has-events-dot {
        display: none !important;
    }

    .cal-cell-mobile-date,
    .cal-mobile-no-events {
        display: none !important;
    }

    /* Event pills inside calendar cell showing the name of media */
    .cal-event-pill {
        display: block !important;
        background: var(--tint-2) !important;
        border-radius: 3px !important;
        padding: 1px 2.5px !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
        cursor: pointer !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        transition: background 0.15s ease !important;
    }

    .cal-event-pill:hover,
    .cal-event-pill:active {
        background: var(--surface-hover) !important;
    }

    .cal-cell-selected .cal-event-pill {
        background: var(--tint-3) !important;
    }

    .cal-event-title {
        display: block !important;
        font-size: 8px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        line-height: 1.15 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .cal-event-time {
        display: none !important;
    }

    .cal-event-overflow {
        display: none !important;
    }

    .cal-more-pill {
        display: block !important;
        font-size: 7.5px !important;
        font-weight: 700 !important;
        color: var(--accent-text) !important;
        background: var(--accent-soft) !important;
        border-radius: 2.5px !important;
        padding: 0.5px 1.5px !important;
        text-align: center !important;
        cursor: pointer !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    /* Mobile Calendar Agenda (Phone App Style Selected Date Schedule) */
    .cal-mobile-agenda {
        display: flex !important;
        flex-direction: column !important;
        margin-top: 10px !important;
        padding-top: 14px !important;
    }

    .cal-agenda-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 10px !important;
    }

    .cal-agenda-date {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
    }

    .cal-agenda-count {
        font-size: 11.5px !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        background: var(--surface-alt) !important;
        padding: 3px 8px !important;
        border-radius: var(--radius-pill) !important;
    }

    .cal-agenda-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Month Feed: the calendar grid above stays put — only this panel
       scrolls, in its own bounded box, instead of the whole page. Opens
       already anchored near "today" with a faded partial peek of the prior
       (hidden, already-aired) card at the top as the scroll-up affordance. */
    .cal-agenda-feed-wrapper {
        position: relative !important;
    }

    #cal-feed-scroll {
        max-height: min(52vh, 440px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }

    #cal-feed-scroll::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .cal-agenda-feed-fade {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        height: 28px !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    .cal-agenda-feed-fade-top {
        top: 0 !important;
        background: linear-gradient(to bottom, var(--paper) 15%, transparent 100%) !important;
        opacity: 0 !important;
        transition: opacity 0.15s ease !important;
    }

    /* Toggled via classList (not inline style) — an inline `style.opacity`
       assignment from JS cannot win against the !important opacity above,
       so visibility has to be driven by a class whose own rule also carries
       !important to match the specificity/cascade it's overriding. */
    .cal-agenda-feed-fade-top.is-visible {
        opacity: 1 !important;
    }

    .cal-agenda-feed-fade-bottom {
        bottom: 0 !important;
        background: linear-gradient(to top, var(--paper) 15%, transparent 100%) !important;
        opacity: 0 !important;
        transition: opacity 0.15s ease !important;
    }

    .cal-agenda-feed-fade-bottom.is-visible {
        opacity: 1 !important;
    }

    .cal-agenda-today-divider {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 4px 0 !important;
    }

    .cal-agenda-today-divider::before,
    .cal-agenda-today-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--accent-soft);
    }

    .cal-agenda-today-divider span {
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        color: var(--accent-text) !important;
    }

    .cal-agenda-card {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 8px 12px 8px 8px !important;
        background: var(--surface-alt) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        transition: background 0.15s ease, transform 0.1s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .cal-agenda-card:active {
        background: var(--surface-hover) !important;
        transform: scale(0.98);
    }

    .cal-agenda-poster {
        width: 40px !important;
        height: 56px !important;
        border-radius: 6px !important;
        object-fit: cover !important;
        background: var(--canvas) !important;
        flex-shrink: 0 !important;
    }

    .cal-agenda-info {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .cal-agenda-card-title {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .cal-agenda-meta {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .cal-agenda-badge {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--accent-text) !important;
        background: var(--accent-soft) !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
    }

    .cal-agenda-time {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 11px !important;
        color: var(--text-muted) !important;
    }

    .cal-agenda-arrow {
        color: var(--text-muted) !important;
        flex-shrink: 0 !important;
    }

    .cal-agenda-empty {
        padding: 16px 12px !important;
        background: var(--surface-alt) !important;
        border-radius: 10px !important;
        text-align: center !important;
    }

    .cal-agenda-empty-text {
        font-size: 12.5px !important;
        color: var(--text-muted) !important;
        margin: 0 0 10px 0 !important;
    }

    .cal-agenda-jumps {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .cal-jump-label {
        font-size: 11px !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .cal-jump-chips {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .cal-jump-chip {
        min-width: 28px !important;
        height: 28px !important;
        padding: 0 6px !important;
        border-radius: var(--radius-pill) !important;
        background: var(--surface-hover) !important;
        color: var(--text-primary) !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background 0.15s ease !important;
    }

    .cal-jump-chip:hover,
    .cal-jump-chip:active {
        background: var(--accent) !important;
        color: var(--on-accent) !important;
    }

    .cal-agenda-mode-pills {
        display: flex !important;
        align-items: center !important;
        background: var(--surface-alt) !important;
        border-radius: var(--radius-pill) !important;
        padding: 2px !important;
        gap: 2px !important;
    }

    .cal-mode-pill {
        padding: 4px 10px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border: none !important;
        background: transparent !important;
        color: var(--text-muted) !important;
        border-radius: var(--radius-pill) !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
        text-align: center !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .cal-mode-pill.active {
        background: var(--surface-hover) !important;
        color: var(--text-primary) !important;
    }

    .cal-track-tag {
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 2px 5px !important;
        border-radius: 4px !important;
        letter-spacing: 0.4px !important;
        line-height: 1 !important;
        display: inline-block !important;
    }

    .cal-track-tag.dub {
        background: var(--accent-soft) !important;
        color: var(--accent-text) !important;
    }

    .cal-track-tag.sub {
        background: var(--tag-purple-soft) !important;
        color: var(--tag-purple-text) !important;
    }

    .cal-agenda-date-badge {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        background: var(--surface-hover) !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
    }

    /* Dedicated Mobile Search Page (#tab-search) */
    #tab-search.active {
        display: block !important;
    }

    #tab-search {
        padding-bottom: 24px !important;
    }

    .mobile-search-page-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .mobile-search-page-header {
        width: 100% !important;
    }

    .mobile-search-page-input-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        background: var(--surface-alt) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-pill) !important;
        padding: 0 14px !important;
        height: 44px !important;
        box-sizing: border-box !important;
        transition: border-color 0.15s ease, background 0.15s ease !important;
    }

    .mobile-search-page-input-wrapper:focus-within {
        border-color: var(--accent) !important;
        background: var(--surface-hover) !important;
    }

    .search-page-icon {
        color: var(--text-muted) !important;
        flex-shrink: 0 !important;
    }

    .mobile-search-page-input {
        flex: 1 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        color: var(--text-primary) !important;
        font-size: 16px !important;
        min-width: 0 !important;
    }

    .mobile-search-page-clear-btn {
        background: transparent !important;
        border: none !important;
        color: var(--text-muted) !important;
        font-size: 14px !important;
        cursor: pointer !important;
        padding: 4px !important;
        line-height: 1 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-search-filter-chips {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
    }

    .mobile-search-filter-chips::-webkit-scrollbar {
        display: none !important;
    }

    .mobile-search-chip {
        padding: 6px 14px !important;
        border-radius: var(--radius-pill) !important;
        background: var(--surface-alt) !important;
        border: 1px solid var(--border) !important;
        color: var(--text-muted) !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        transition: all 0.15s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-search-chip.active {
        background: var(--text-primary) !important;
        color: var(--paper) !important;
        border-color: var(--text-primary) !important;
    }

    .mobile-search-count-bar {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        margin-top: 4px !important;
    }

    .mobile-search-empty-state {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        margin-top: 6px !important;
    }

    .mobile-search-section-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 0 10px 0 !important;
    }

    .mobile-search-genre-chips {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .genre-chip {
        padding: 7px 13px !important;
        border-radius: var(--radius-pill) !important;
        background: var(--surface-alt) !important;
        border: 1px solid var(--border) !important;
        color: var(--text-primary) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: background 0.15s ease, border-color 0.15s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .genre-chip:hover,
    .genre-chip:active {
        background: var(--surface-hover) !important;
        border-color: var(--accent) !important;
        color: var(--accent) !important;
    }

    /* 8. Discover & Insights Mobile Layout */
    .insights-identity-grid,
    .insights-triplet-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .insights-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .wrapped-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .taste-card {
        padding: 16px !important;
    }

    .critic-gap-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .critic-gap-left-col,
    .critic-gap-comment-col {
        width: 100% !important;
    }

    /* 9. Lists View */
    .lists-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #single-list-view .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* 10. Modals: Full Screen on Mobile (User Profile, Title Details, Pickers) while keeping bottom nav visible */
    .modal-overlay {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* All popup modals take up the screen above the bottom navigation bar on mobile */
    .modal-window,
    .detail-modal-window,
    .profile-modal-window,
    #rewatch-modal .modal-window,
    #list-detail-modal .modal-window,
    #create-list-modal .modal-window,
    #person-modal .modal-window,
    #fav-picker-modal .modal-window,
    #add-to-list-picker-modal .modal-window,
    #conflict-modal .modal-window,
    #auth-modal .modal-window,
    #google-setup-modal .modal-window,
    #onboarding-modal .modal-window {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100dvh - 54px - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100dvh - 54px - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-shadow: none !important;
        transform: none !important;
        z-index: 2000 !important;
    }

    /* Modal headers sticky at top with notch/Dynamic Island clearance */
    .modal-header,
    .detail-modal-window .modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
        padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
        padding-left: calc(env(safe-area-inset-left, 0px) + 16px) !important;
        padding-right: calc(env(safe-area-inset-right, 0px) + 16px) !important;
        padding-bottom: 12px !important;
        background: var(--paper) !important;
        flex-shrink: 0 !important;
    }

    .modal-body,
    .detail-modal-window .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-top: 14px !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
        padding-left: calc(env(safe-area-inset-left, 0px) + 16px) !important;
        padding-right: calc(env(safe-area-inset-right, 0px) + 16px) !important;
    }

    /* Title Details Modal Layout */
    .detail-hero-grid {
        display: grid !important;
        grid-template-columns: 95px minmax(0, 1fr) !important;
        gap: 14px !important;
        margin-bottom: 12px !important;
    }

    .detail-poster-wrap {
        width: 95px !important;
        border-radius: 8px !important;
    }

    .detail-overview-col {
        gap: 8px !important;
    }

    .detail-synopsis {
        grid-column: 1 / -1;
        font-size: 13px !important;
        line-height: 1.48 !important;
        margin-top: 4px;
    }

    .detail-synopsis-more {
        font-size: 13px;
        line-height: 1.48;
    }

    .status-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cast-crew-wrap {
        gap: 6px !important;
    }

    .person-pill {
        padding: 5px 10px !important;
        font-size: 11.5px !important;
    }

    /* User Profile Full Screen View.
       clip-path independently clips the element's rendered shape regardless
       of border-radius, and the desktop rule's `clip-path: inset(0 round
       var(--radius-card))` was never reset here — so even though the shared
       full-screen modal rule sets border-radius:0, the corners (most visible
       at the bottom, where this should sit flush above the bottom nav) still
       rendered rounded via the un-reset clip-path. */
    .profile-modal-window {
        clip-path: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .profile-modal-banner-wrapper {
        height: 150px !important;
    }

    .profile-banner-top-right {
        top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
        right: calc(env(safe-area-inset-right, 0px) + 14px) !important;
    }

    .profile-banner-top-left {
        top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
        left: calc(env(safe-area-inset-left, 0px) + 14px) !important;
    }

    .profile-avatar-row {
        margin-top: -42px !important;
        margin-bottom: 10px !important;
    }

    .profile-modal-avatar {
        width: 80px !important;
        height: 80px !important;
        border-width: 3px !important;
    }

    .profile-modal-content {
        padding: 0 calc(env(safe-area-inset-right, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 24px) calc(env(safe-area-inset-left, 0px) + 16px) !important;
    }

    .stats-blocks-grid {
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .stat-block {
        padding: 10px 6px !important;
    }

    .stat-block-value {
        font-size: 18px !important;
    }

    .stat-block-label {
        font-size: 11px !important;
    }

    /* Settings View: 1-Column Responsive Stacking in Full Screen */
    #profile-settings-view {
        padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px) !important;
        padding-left: calc(env(safe-area-inset-left, 0px) + 16px) !important;
        padding-right: calc(env(safe-area-inset-right, 0px) + 16px) !important;
    }

    #settings-action-footer {
        margin-top: 16px !important;
        padding-top: 16px !important;
    }

    /* Icon-only back button once the "Profile" label is hidden — matches the
       compact circular treatment used for other icon-only mobile controls
       (calendar refresh, bulk-edit pen) instead of a rectangle sized for
       text it no longer contains. */
    #btn-settings-back {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }

    #profile-settings-view div[style*="grid-template-columns: 1fr 1fr 1fr"],
    #profile-settings-view div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Form Inputs Mobile Font Size to Prevent iOS Safari Auto-Zoom */
    .form-input, .form-textarea, .form-select, .search-input {
        font-size: 16px !important;
    }

    /* Rewatch / Watch Logger Modal in Full Screen */
    .score-date-row {
        display: flex;
        gap: 10px;
    }

    .score-field-wrap, .date-field-wrap {
        flex: 1;
    }

    .score-field-wrap input, .date-field-wrap input {
        width: 100% !important;
    }

    /* EXCEPT: Confirmation Dialog ("Are you sure?") stays a centered floating popup */
    #confirm-modal {
        bottom: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        z-index: 3000 !important;
    }

    #confirm-modal .modal-window {
        position: relative !important;
        inset: auto !important;
        bottom: auto !important;
        width: 90% !important;
        max-width: 380px !important;
        height: auto !important;
        max-height: 80vh !important;
        border-radius: 16px !important;
        margin: auto !important;
        box-shadow: var(--shadow-modal) !important;
        z-index: 3050 !important;
    }

    #confirm-modal .modal-header {
        padding-top: 20px !important;
    }

    /* EXCEPT: Sign In / Sign Up stays a centered floating card too — its form
       content never fills a full phone screen, so stretching it edge-to-edge
       just leaves a large dead black area below the fields. */
    #auth-modal {
        bottom: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        padding: calc(env(safe-area-inset-top, 0px) + 20px) calc(env(safe-area-inset-right, 0px) + 20px) calc(env(safe-area-inset-bottom, 0px) + 20px) calc(env(safe-area-inset-left, 0px) + 20px) !important;
    }

    #auth-modal .modal-window {
        position: relative !important;
        inset: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 40px) !important;
        border-radius: 16px !important;
        margin: auto !important;
        box-shadow: var(--shadow-modal) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 3050 !important;
    }
}

/* Mobile release calendar, styled to match the desktop grid: rounded
   --surface-alt tiles with no borders or glow, muted day numbers with
   today's in bold white, soft --tint pills for metadata. Phones show cover
   thumbnails in the tiles in place of the (unreadable at this width) title
   pills. */
@media (max-width: 768px) {
    /* --- Grid --- */
    .cal-grid-header {
        border-bottom: none !important;
        margin-bottom: 2px !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.4px !important;
    }

    .cal-grid-cells {
        gap: 3px !important;
    }

    .cal-cell,
    .cal-cell-today,
    .cal-cell-selected {
        min-height: 58px !important;
        max-height: 64px !important;
        padding: 5px 4px 4px !important;
        gap: 4px !important;
        align-items: stretch !important;
        background: var(--surface-alt) !important;
        border: none !important;
        border-radius: 6px !important;
        box-shadow: none !important;
    }

    .cal-cell-muted {
        background: var(--surface-alt) !important;
        opacity: 0.3 !important;
    }

    .cal-cell-selected {
        background: var(--surface-active) !important;
    }

    .cal-cell:active {
        transform: none;
        background: var(--surface-hover) !important;
    }

    .cal-cell-day-num,
    .cal-cell-today .cal-cell-day-num,
    .cal-cell-selected .cal-cell-day-num {
        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 0 0 1px !important;
        border-radius: 0 !important;
        background: transparent !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        color: var(--text-muted) !important;
        text-align: left !important;
    }

    .cal-cell-selected .cal-cell-day-num {
        color: var(--text-primary) !important;
    }

    .cal-cell-today .cal-cell-day-num {
        color: var(--text-primary) !important;
        font-weight: 800 !important;
    }

    .cal-cell-past:not(.cal-cell-selected) .cal-cell-posters {
        opacity: 0.45;
    }

    .cal-cell .cal-event-pill,
    .cal-cell .cal-more-pill {
        display: none !important;
    }

    .cal-cell-posters {
        display: flex;
        align-items: flex-start;
        gap: 2px;
        min-height: 0;
    }

    .cal-cell-posters img {
        width: 19px;
        height: 28px;
        border-radius: 3px;
        object-fit: cover;
        background: var(--canvas);
    }

    .cal-cell-posters-more {
        align-self: center;
        font-size: 10px;
        font-weight: 600;
        color: var(--text-muted);
    }

    /* --- Agenda header --- */
    .cal-mobile-agenda {
        margin-top: 6px !important;
        padding-top: 14px !important;
    }

    .cal-agenda-header {
        margin-bottom: 8px !important;
    }

    .cal-agenda-date {
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    .cal-agenda-count {
        background: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        font-size: 12px !important;
        font-weight: 500 !important;
    }

    /* Day / Month: a segmented pill in the same tints as the grid pills. */
    .cal-agenda-mode-pills {
        background: var(--surface-alt) !important;
        border-radius: var(--radius-pill) !important;
        padding: 3px !important;
        gap: 2px !important;
    }

    .cal-mode-pill,
    .cal-mode-pill.active {
        padding: 5px 12px !important;
        border-radius: var(--radius-pill) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    .cal-mode-pill {
        background: transparent !important;
        color: var(--text-muted) !important;
    }

    .cal-mode-pill.active {
        background: var(--tint-2) !important;
        color: var(--text-primary) !important;
    }

    /* --- Release rows --- */
    .cal-agenda-list,
    #cal-feed-scroll.cal-agenda-list {
        gap: 6px !important;
    }

    /* --- One-screen layout ---
       While the Calendar tab is open the page itself doesn't scroll: the
       calendar card fills exactly the space between the top bar and the
       bottom nav (dvh, so it tracks the phone's collapsing address bar and
       any resize with no JS), and the release list below the grid takes
       whatever height is left and is the only thing that scrolls. */
    html:has(#tab-calendar.active),
    body:has(#tab-calendar.active) {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    .main-content:has(> #tab-calendar.active) {
        padding-bottom: 0 !important;
    }

    #tab-calendar .calendar-card {
        height: calc(100dvh - (env(safe-area-inset-top, 0px) + 52px) - (54px + env(safe-area-inset-bottom, 0px))) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #tab-calendar .cal-header-bar,
    #tab-calendar .cal-matrix-scroll-wrapper {
        flex: none !important;
    }

    #tab-calendar .cal-mobile-agenda {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    #tab-calendar .cal-agenda-header {
        flex: none !important;
    }

    #tab-calendar .cal-agenda-feed-wrapper,
    #tab-calendar .cal-mobile-agenda > .cal-agenda-list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    #tab-calendar .cal-mobile-agenda > .cal-agenda-list {
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    #tab-calendar .cal-agenda-feed-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    #cal-feed-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overscroll-behavior: contain !important;
    }

    .cal-agenda-card {
        gap: 12px !important;
        padding: 8px 10px 8px 8px !important;
        background: var(--surface-alt) !important;
        border: none !important;
        border-radius: 8px !important;
    }

    .cal-agenda-card:active {
        background: var(--surface-hover) !important;
        transform: none;
    }

    .cal-agenda-poster {
        width: 36px !important;
        height: 52px !important;
        border-radius: 5px !important;
    }

    .cal-agenda-card-title {
        font-size: 13.5px !important;
        font-weight: 600 !important;
    }

    .cal-agenda-meta {
        gap: 5px !important;
    }

    .cal-agenda-chip {
        background: var(--tint-1);
        color: var(--text-secondary);
        border-radius: 6px;
        padding: 3px 7px;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
    }

    .cal-agenda-arrow {
        display: none !important;
    }

    .cal-agenda-empty {
        background: var(--surface-alt) !important;
        border-radius: 8px !important;
        padding: 14px 12px !important;
        text-align: center !important;
    }

    .cal-agenda-empty-text {
        margin: 0 !important;
        font-size: 12.5px !important;
    }

    /* --- Month feed day groups --- */
    .cal-feed-day {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .cal-feed-day-head {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 10px 2px 0;
    }

    .cal-feed-day:first-child .cal-feed-day-head {
        padding-top: 0;
    }

    .cal-feed-day-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .cal-feed-day-rel {
        font-size: 11.5px;
        font-weight: 500;
        color: var(--text-muted);
    }

    .cal-feed-day-past .cal-feed-day-label {
        color: var(--text-muted);
    }

    .cal-feed-day-past .cal-agenda-card {
        opacity: 0.55;
    }

    /* Today, when nothing releases: a tile the same shape as a release row,
       under the same kind of day header as every other date. */
    .cal-feed-empty-tile {
        padding: 12px;
        background: var(--surface-alt);
        border-radius: 8px;
        font-size: 12.5px;
        color: var(--text-muted);
    }
}


/* Extra small mobile screens (width <= 420px) */
@media (max-width: 420px) {
    .main-content {
        /* Redeclaring the variable (not padding-left/right directly) keeps
           .calendar-card's negative-margin full-bleed in sync automatically
           — see the --content-pad-x definition at the 768px breakpoint. */
        --content-pad-x: 8px;
    }

    .cards-grid {
        gap: 8px !important;
    }

    .card-title {
        font-size: 12.5px !important;
    }

    .controls-group .type-dropdown-wrapper .custom-select,
    .controls-group .sort-dropdown-wrapper .custom-select {
        font-size: 11px !important;
        padding: 6px 4px !important;
    }

    .controls-group #btn-toggle-bulk {
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   Touch-Device Hover Reset
   Touch browsers can apply a `:hover` match on tap and leave it matched
   until something else is tapped, since there's no real "mouse left the
   element" event — the button visually stays highlighted after the tap
   ends. `:active` already provides correct, transient tap feedback via
   `transition`, so on devices with no real hover capability we reset each
   interactive element's `:hover` declarations back to its resting-state
   values, letting :active take over as the only "pressed" signal.
   Same selectors/specificity as each rule above, just declared later, so no
   !important is needed to win — this must stay the last block in the file.
   ========================================================================== */
@media (hover: none) {
    .nav-item:hover,
    .unified-profile-btn:hover {
        background: var(--surface-alt);
        border-color: var(--border);
    }

    .pill-btn:hover {
        color: var(--text-muted);
        background: var(--surface-alt);
    }

    .custom-select:hover {
        background-color: var(--paper);
        border-color: var(--border);
    }

    .btn-primary:hover {
        background-color: var(--text-primary);
    }

    .btn-secondary:hover {
        background-color: var(--surface-alt);
    }
}




/* ==========================================================================
   Release Calendar: Day / Month agenda on desktop
   The same agenda phones show under the grid (renderMobileCalendarAgenda),
   placed as a column beside the grid on wide screens and under it on
   narrower ones. Visual language matches the grid: --surface-alt tiles,
   soft --tint pills, no borders.
   ========================================================================== */
@media (min-width: 769px) {
    .cal-mobile-agenda {
        display: flex !important;
        flex-direction: column;
        min-width: 0;
        margin-top: 20px;
    }

    .cal-cell {
        cursor: pointer;
    }

    .cal-cell-selected,
    .cal-cell-today.cal-cell-selected {
        background: var(--surface-active) !important;
    }

    .cal-cell-selected .cal-cell-day-num {
        color: var(--text-primary);
    }

    .cal-agenda-header {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    .cal-agenda-date {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .cal-agenda-count {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-muted);
    }

    .cal-agenda-mode-pills {
        display: flex;
        align-items: center;
        flex: none;
        background: var(--surface-alt);
        border-radius: var(--radius-pill);
        padding: 3px;
        gap: 2px;
    }

    .cal-mode-pill {
        padding: 5px 12px;
        border: none;
        border-radius: var(--radius-pill);
        background: transparent;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .cal-mode-pill:hover {
        color: var(--text-primary);
    }

    .cal-mode-pill.active {
        background: var(--tint-2);
        color: var(--text-primary);
    }

    .cal-agenda-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .cal-mobile-agenda > .cal-agenda-list,
    .cal-agenda-feed-wrapper {
        flex: 1 1 auto;
        min-height: 0;
    }

    .cal-mobile-agenda > .cal-agenda-list {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .cal-agenda-feed-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
    }

    #cal-feed-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .cal-agenda-feed-fade {
        position: absolute;
        left: 0;
        right: 0;
        height: 28px;
        pointer-events: none;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .cal-agenda-feed-fade-top {
        top: 0;
        background: linear-gradient(to bottom, var(--paper) 15%, transparent 100%);
    }

    .cal-agenda-feed-fade-bottom {
        bottom: 0;
        background: linear-gradient(to top, var(--paper) 15%, transparent 100%);
    }

    .cal-agenda-feed-fade.is-visible {
        opacity: 1;
    }

    .cal-agenda-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px 8px 8px;
        background: var(--surface-alt);
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .cal-agenda-card:hover {
        background: var(--surface-hover);
    }

    .cal-agenda-poster {
        width: 40px;
        height: 58px;
        flex-shrink: 0;
        border-radius: 5px;
        object-fit: cover;
        background: var(--canvas);
    }

    .cal-agenda-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .cal-agenda-card-title {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cal-agenda-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .cal-agenda-chip {
        background: var(--tint-1);
        color: var(--text-secondary);
        border-radius: 6px;
        padding: 3px 7px;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
    }

    .cal-agenda-arrow {
        display: none;
    }

    .cal-agenda-empty {
        background: var(--surface-alt);
        border-radius: 8px;
        padding: 14px 12px;
        text-align: center;
    }

    .cal-agenda-empty-text {
        margin: 0;
        font-size: 12.5px;
        color: var(--text-muted);
    }

    .cal-feed-day {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .cal-feed-day-head {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 10px 2px 0;
    }

    .cal-feed-day:first-child .cal-feed-day-head {
        padding-top: 0;
    }

    .cal-feed-day-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .cal-feed-day-rel {
        font-size: 11.5px;
        font-weight: 500;
        color: var(--text-muted);
    }

    .cal-feed-day-past .cal-feed-day-label {
        color: var(--text-muted);
    }

    .cal-feed-day-past .cal-agenda-card {
        opacity: 0.55;
    }

    .cal-feed-empty-tile {
        padding: 12px;
        background: var(--surface-alt);
        border-radius: 8px;
        font-size: 12.5px;
        color: var(--text-muted);
    }

    /* Narrower desktop windows: agenda sits under the grid, feed in a box. */
    #cal-feed-scroll,
    .cal-mobile-agenda > .cal-agenda-list {
        max-height: 460px;
    }
}

/* Wide screens: agenda as a column beside the grid, exactly as tall as it.
   `contain: size` stops the agenda's own content from growing the row, so
   the grid alone sets the height and the list scrolls inside that. */
@media (min-width: 1100px) {
    .calendar-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 24px;
    }

    .cal-header-bar {
        grid-column: 1 / -1;
    }

    .cal-matrix-scroll-wrapper {
        grid-column: 1;
        grid-row: 2;
    }

    .cal-mobile-agenda {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
        contain: size;
    }

    #cal-feed-scroll,
    .cal-mobile-agenda > .cal-agenda-list {
        max-height: none;
    }

    .calendar-card {
        grid-template-rows: auto 1fr;
    }
}

/* ==========================================================================
   Recommended / Insights page header (tab-recommendations)
   ========================================================================== */
.recs-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.recs-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.recs-page-heading {
    min-width: 0;
}

.recs-page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}

.recs-page-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* The card a profile stat opened: lit like a hovered stat until the user
   next interacts with the page (focusPendingInsight), then eased back. */
#recs-view-taste [data-insight] {
    transition: background-color 0.4s ease;
}

#recs-view-taste .insight-focus {
    background-color: var(--surface-hover) !important;
}

@media (max-width: 768px) {
    .recs-page-header {
        gap: 10px;
        margin-bottom: 14px;
    }

    .recs-page-title {
        font-size: 17px;
    }

    .recs-page-subtitle {
        font-size: 12px;
    }
}

/* While any modal is open (profile, settings, title details...), the page
   behind it stays put: only the modal scrolls. */
html:has(.modal-overlay.active),
body:has(.modal-overlay.active) {
    overflow: hidden !important;
}

.modal-overlay {
    overscroll-behavior: contain;
}

/* ==========================================================================
   Release Calendar on desktop: fill the window
   The card is at least as tall as the space under the top nav (64px nav +
   32px page padding above and below), and the week rows share whatever
   height that leaves, so a short month doesn't end halfway down an empty
   page. Taller content (six-week months, busy days) still grows the card.
   ========================================================================== */
@media (min-width: 769px) {
    #tab-calendar .calendar-card {
        min-height: calc(100vh - 128px);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    #tab-calendar .cal-matrix-scroll-wrapper {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    #tab-calendar .cal-grid-cells {
        flex: 1 1 auto;
        grid-auto-rows: minmax(110px, 1fr);
    }

    /* Each day cell is a size container, so its pills show the air time
       whenever that cell is wide enough and drop it (keeping the title)
       only when it isn't -- regardless of window size or the agenda column. */
    .cal-cell[data-cal-day] {
        container-type: inline-size;
    }

    @container (max-width: 150px) {
        .cal-event-time {
            display: none;
        }
    }
}

@media (min-width: 1100px) {
    #tab-calendar .calendar-card {
        display: grid;
    }
}

/* Desktop top bar: three columns with equal outer tracks, so the tab group
   sits on the page's true centre. As a flex row with `margin: auto` it was
   centred only in the space left of the search/profile group, which pushed
   it left by half that group's width. */
@media (min-width: 769px) {
    .top-nav-center-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }

    .top-nav-center-container > .nav-menu-centered {
        grid-column: 2;
        margin: 0;
    }

    .top-nav-center-container > .nav-controls-right {
        grid-column: 3;
        justify-self: end;
    }
}

/* Month feed fades are set instantly when the list is first drawn or
   re-anchored (scrollFeedToUpcomingAnchor); the transition only applies to
   changes while the user scrolls. */
.cal-feed-no-anim .cal-agenda-feed-fade {
    transition: none !important;
}

/* ==========================================================================
   Phones: keep text and icons sharp
   These layer-promotion tricks make mobile browsers rasterize an element as
   a bitmap, often at the wrong scale (e.g. the 0.97 a modal opens from) or
   at a fractional pixel offset, and never redo it at full resolution --
   which read as blurry text/icons in the top bar, the profile card's
   buttons and the Settings view. Rounded clipping is still handled by
   clip-path / overflow on these elements. The avatar keeps its mask: it
   clips a possible video profile picture to a circle in Safari.
   ========================================================================== */
@media (max-width: 768px) {
    /* --glass-bg-dense is ~95% opaque, so the blur was barely visible. */
    .top-nav-bar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .modal-window {
        will-change: auto !important;
    }

    .profile-modal-window,
    .profile-banner-btn,
    .profile-banner-badge,
    .profile-banner-action-btn {
        -webkit-mask-image: none !important;
    }

    .profile-banner-btn,
    .profile-banner-btn:hover,
    .profile-banner-badge,
    .profile-banner-action-btn,
    .profile-banner-action-btn.cancel,
    .profile-banner-action-btn.cancel:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   Phones: calendar artwork at a readable size (Apple HIG: artwork you can
   recognise at a glance; 44pt+ touch targets)
   Grid: a day with releases shows its cover filling the whole cell, with
   the date on a scrim and "+N" when more than one show airs -- ~5x the
   area of the old 19x28 thumbnails without making the grid any taller.
   Month/Day list: 44x66 covers, 15px titles, 12px pills.
   ========================================================================== */
@media (max-width: 768px) {
    .cal-cell[data-cal-day] {
        position: relative !important;
        overflow: hidden !important;
    }

    .cal-cell .cal-cell-posters {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
    }

    .cal-cell .cal-cell-posters img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        object-fit: cover;
        box-shadow: none;
    }

    .cal-cell .cal-cell-posters img:nth-of-type(n + 2) {
        display: none;
    }

    /* Scrim so the date stays legible on any artwork. */
    .cal-cell .cal-cell-posters::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, var(--scrim-strong) 0%, transparent 55%);
    }

    .cal-cell .cal-cell-posters-more {
        position: absolute;
        right: 3px;
        bottom: 3px;
        z-index: 1;
        padding: 1px 5px;
        border-radius: 6px;
        background: var(--scrim-strong);
        color: var(--on-image);
        font-size: 10px;
        font-weight: 600;
        line-height: 1.4;
    }

    .cal-cell .cal-cell-day-num {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Dates over artwork: white for legibility on the scrim, but softened
       to the same quiet weight as the plain grey dates -- full-strength
       bold white stays reserved for today. Past days recede further. */
    .cal-cell:has(.cal-cell-posters) .cal-cell-day-num {
        color: var(--on-image) !important;
        font-weight: 600 !important;
        opacity: 0.72;
    }

    .cal-cell-past:has(.cal-cell-posters):not(.cal-cell-selected) .cal-cell-day-num {
        opacity: 0.5;
    }

    .cal-cell-today:has(.cal-cell-posters) .cal-cell-day-num,
    .cal-cell-selected:has(.cal-cell-posters) .cal-cell-day-num {
        opacity: 1;
    }

    .cal-cell-today:has(.cal-cell-posters) .cal-cell-day-num {
        font-weight: 800 !important;
    }

    /* Selected day with artwork: its lighter tile is hidden under the
       cover, so mark it with a thin neutral inner edge instead. */
    .cal-cell-selected:has(.cal-cell-posters) {
        box-shadow: inset 0 0 0 2px var(--text-primary) !important;
    }

    .cal-cell-selected:has(.cal-cell-posters) .cal-cell-posters {
        border-radius: inherit;
    }

    /* --- Month / Day list rows --- */
    .cal-agenda-card {
        gap: 12px !important;
        padding: 8px 12px 8px 8px !important;
        min-height: 82px !important;
    }

    .cal-agenda-poster {
        width: 44px !important;
        height: 66px !important;
        border-radius: 6px !important;
    }

    .cal-agenda-card-title {
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    .cal-agenda-meta {
        gap: 6px !important;
    }

    .cal-agenda-chip {
        font-size: 12px;
        padding: 3px 8px;
    }

    .cal-feed-day-label {
        font-size: 13px;
    }

    .cal-feed-day-rel {
        font-size: 12px;
    }
}

/* Calendar Day / Month list: larger cover art (phones and desktop). On
   desktop the agenda column is widened to suit, and titles may wrap to two
   lines instead of truncating. */
@media (max-width: 768px) {
    .cal-agenda-poster {
        width: 68px !important;
        height: 102px !important;
        border-radius: 8px !important;
    }

    .cal-agenda-card {
        min-height: 118px !important;
        gap: 14px !important;
    }
}

@media (min-width: 769px) {
    .cal-agenda-poster {
        width: 80px;
        height: 120px;
        border-radius: 8px;
    }

    .cal-agenda-card {
        gap: 16px;
        padding: 10px 14px 10px 10px;
    }

    .cal-agenda-card-title {
        font-size: 14.5px;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

@media (min-width: 1100px) {
    .calendar-card {
        grid-template-columns: minmax(0, 1fr) 400px;
    }
}

/* Month feed fades overlap the list's edges by 1px: flush-aligned, device-
   pixel rounding on high-density screens could leave a hairline of the
   partly scrolled card showing above the top fade (or below the bottom). */
.cal-agenda-feed-fade-top {
    top: -1px !important;
}

.cal-agenda-feed-fade-bottom {
    bottom: -1px !important;
}