/* ==========================================================================
   RED SEAT INDEX — Premium UI System
   Cinematic red/silver/charcoal aesthetic, glassmorphism, ambient depth.
   ========================================================================== */

:root {
    --red: #C8102E;
    --silver: #A8A9AD;
    --red-soft: rgba(200, 16, 46, 0.55);
    --red-glow: rgba(200, 16, 46, 0.35);
    --red-faint: rgba(200, 16, 46, 0.08);

    /* Aliases so old var() refs still resolve */
    --neon: #C8102E;
    --neon-2: #A8A9AD;
    --neon-soft: rgba(200, 16, 46, 0.55);
    --neon-glow: rgba(200, 16, 46, 0.35);
    --neon-faint: rgba(200, 16, 46, 0.08);

    --bg-0: #0e0e11;          /* deepest */
    --bg-1: #16161a;          /* page */
    --bg-2: #1c1c22;          /* surface */
    --bg-3: #222228;          /* raised */
    --surface: rgba(22, 22, 32, 0.72);
    --surface-strong: rgba(22, 22, 32, 0.92);
    --hairline: rgba(255, 255, 255, 0.07);
    --hairline-2: rgba(200, 16, 46, 0.25);

    --text: #F0F0F0;
    --text-dim: rgba(240, 240, 240, 0.82);
    --text-mute: rgba(240, 240, 240, 0.66);

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
    --shadow-md: 0 6px 18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
    --shadow-lg: 0 18px 48px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.35);
    --shadow-glow: 0 0 0 1px var(--hairline-2), 0 12px 40px rgba(200,16,46,.18);

    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html, body {
    background: var(--bg-1);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(1100px 700px at 8% -10%, rgba(200,16,46,.08), transparent 60%),
        radial-gradient(900px 600px at 110% 8%, rgba(168,169,173,.05), transparent 60%),
        radial-gradient(800px 600px at 50% 110%, rgba(200,16,46,.05), transparent 60%),
        linear-gradient(180deg, #0e0e11 0%, #16161a 50%, #0e0e11 100%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .rsi-logo, .filmbot-logo, .hero-title, .display-1, .display-2, .display-3 {
    font-family: 'Bebas Neue', 'Inter', sans-serif;
    letter-spacing: .05em;
}

p, li, td, th, label, input, select, textarea, button, .lead {
    font-family: 'Inter', system-ui, sans-serif;
}

a { color: var(--silver); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--red); }

::selection { background: var(--red); color: #fff; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(200,16,46,.35), rgba(168,169,173,.25));
    border-radius: 10px;
    border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ---------- Background ambient layer ---------- */
.background-animation {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.background-animation::before,
.background-animation::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .25;
    animation: float 18s ease-in-out infinite;
}
.background-animation::before {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(200,16,46,.35), transparent 65%);
    top: -120px; left: -120px;
}
.background-animation::after {
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(168,169,173,.20), transparent 65%);
    bottom: -180px; right: -160px;
    animation-delay: -9s;
}

@keyframes float {
    0%, 100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(40px,-30px) scale(1.08); }
}

.grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(200,16,46,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,16,46,.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    opacity: .55;
}
.grid-line { display: none; }

/* ---------- Layout ---------- */
.content-wrapper {
    min-height: calc(100vh - 200px);
    padding: 2.5rem 0 4rem;
}

.container, .container-fluid { position: relative; z-index: 1; }

/* ---------- Navbar ---------- */
.navbar {
    background: rgba(14, 14, 17, 0.82);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--hairline-2);
    padding: .85rem 0;
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
    position: relative;
    z-index: 1040;
}
.navbar .container,
.navbar .container-fluid { z-index: 1041; }

.navbar-brand { padding: 0; }

.rsi-logo, .filmbot-logo {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 1.65rem;
    background: linear-gradient(90deg, #fff 0%, #E8929E 40%, #C8102E 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 4px;
}
.metrics-text {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--silver);
    letter-spacing: 5px;
    opacity: .9;
}
.tagline {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: .68rem;
    color: var(--text-mute);
    font-style: italic;
    letter-spacing: 1.2px;
    margin-top: 3px;
}

.navbar .nav-link {
    color: var(--text) !important;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 1.5px;
    padding: .6rem 1.1rem !important;
    border-radius: 8px;
    transition: all .25s var(--ease);
    position: relative;
}
.navbar .nav-link:hover { color: var(--red) !important; background: var(--red-faint); }
.navbar .nav-link.active {
    color: var(--red) !important;
    background: linear-gradient(180deg, rgba(200,16,46,.16), rgba(200,16,46,.06));
    box-shadow: inset 0 -2px 0 var(--red);
}

html .navbar .dropdown-menu,
html .dropdown-menu,
.dropdown-menu.show,
.dropdown-menu {
    --bs-dropdown-bg: #111118;
    --bs-dropdown-link-color: #F0F0F0;
    --bs-dropdown-link-hover-bg: rgba(200,16,46,.14);
    --bs-dropdown-link-hover-color: #C8102E;
    background-color: #111118 !important;
    background-image: linear-gradient(180deg, rgba(200,16,46,.06), transparent 70%) !important;
    background-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(200, 16, 46, 0.28) !important;
    border-radius: 14px !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.75),
        0 6px 20px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(200, 16, 46, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    padding: 0.5rem !important;
    margin-top: 0.5rem !important;
    opacity: 1 !important;
    z-index: 1050 !important;
}
.dropdown-item {
    color: var(--text) !important;
    border-radius: 8px;
    padding: .55rem .85rem !important;
    font-size: .9rem;
    transition: all .2s var(--ease);
}
.dropdown-item:hover, .dropdown-item.active {
    background: linear-gradient(90deg, rgba(200,16,46,.18), rgba(200,16,46,.04)) !important;
    color: var(--red) !important;
}
.dropdown-item i { color: var(--silver); width: 18px; }

/* ---------- Hero ---------- */
.hero-section { text-align: center; padding: 3.5rem 0 2rem; }

.hero-title {
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 400;
    margin-bottom: 1rem;
    background: linear-gradient(120deg, #FFFFFF 0%, #E8929E 35%, #C8102E 70%, #A8A9AD 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: .06em;
    line-height: 1.1;
    filter: drop-shadow(0 0 24px rgba(200,16,46,.18));
}

.hero-tagline, .lead {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    color: var(--text-dim);
    margin-bottom: 1.75rem;
    letter-spacing: .02em;
    font-weight: 400;
}

/* ---------- Cards / glassmorphism ---------- */
.card {
    background: linear-gradient(180deg, rgba(28,28,36,.78), rgba(22,22,26,.78));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    color: var(--text);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    position: relative;
}
.card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(200,16,46,.08), transparent 40%);
    pointer-events: none;
    opacity: .6;
}
.card:hover {
    transform: translateY(-4px);
    border-color: var(--hairline-2);
    box-shadow: var(--shadow-glow), var(--shadow-md);
}
.card-header {
    background: linear-gradient(180deg, rgba(200,16,46,.08), transparent);
    border-bottom: 1px solid var(--hairline-2);
    color: var(--text);
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
    padding: 1rem 1.25rem;
}
.card-body { padding: 1.25rem; }
.card-footer {
    background: rgba(0,0,0,.18);
    border-top: 1px solid var(--hairline);
    padding: .85rem 1.25rem;
}
.card-title { font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; }

/* Anchor cards (full-tile clickable) */
a .card .card-title { color: var(--text); transition: color .2s var(--ease); }
a:hover .card .card-title { color: var(--red); }
a .card .card-text { color: var(--text-dim); }

/* ---------- Buttons ---------- */
.btn {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
    padding: .65rem 1.4rem;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all .25s var(--ease);
    text-transform: uppercase;
    font-size: .9rem;
    position: relative;
    isolation: isolate;
}
.btn:focus, .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(200,16,46,.35);
}

.btn-primary, .btn-success {
    background: linear-gradient(135deg, #E8929E 0%, #C8102E 50%, #8B0A1E 100%);
    color: #fff !important;
    border: none;
    box-shadow: 0 6px 18px rgba(200,16,46,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover, .btn-success:hover {
    transform: translateY(-2px);
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(200,16,46,.45), inset 0 1px 0 rgba(255,255,255,.35);
    filter: brightness(1.08);
}
.btn-primary:active, .btn-success:active { transform: translateY(0); }

.btn-outline-primary, .btn-outline-success {
    background: rgba(200,16,46,.04);
    color: var(--red) !important;
    border: 1px solid var(--red-soft);
}
.btn-outline-primary:hover, .btn-outline-success:hover {
    background: rgba(200,16,46,.16);
    color: var(--red) !important;
    border-color: var(--red);
    box-shadow: 0 8px 22px rgba(200,16,46,.25);
    transform: translateY(-2px);
}

.btn-secondary, .btn-outline-secondary {
    background: rgba(255,255,255,.04);
    color: var(--text) !important;
    border: 1px solid var(--hairline);
}
.btn-secondary:hover, .btn-outline-secondary:hover {
    background: rgba(200,16,46,.10);
    border-color: var(--hairline-2);
    color: var(--red) !important;
    transform: translateY(-2px);
}

.btn-danger {
    background: linear-gradient(135deg, #FF6B6B, #E03E3E);
    border: none;
    color: #fff;
    box-shadow: 0 6px 18px rgba(224,62,62,.30);
}
.btn-danger:hover { transform: translateY(-2px); filter: brightness(1.08); }

.btn-sm { padding: .4rem .9rem; font-size: .8rem; border-radius: 8px; }
.btn-lg { padding: .9rem 1.8rem; font-size: 1rem; border-radius: 12px; }

/* ---------- Forms ---------- */
.form-control, .form-select, .search-bar, input[type="text"], input[type="email"], input[type="password"], textarea, select {
    background: rgba(14,14,17,.55) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--text) !important;
    border-radius: 10px !important;
    padding: .7rem 1rem !important;
    font-family: 'Inter', sans-serif !important;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.form-control:focus, .form-select:focus, .search-bar:focus,
input:focus, textarea:focus, select:focus {
    background: rgba(14,14,17,.75) !important;
    border-color: var(--red-soft) !important;
    box-shadow: 0 0 0 4px rgba(200,16,46,.15) !important;
    outline: none !important;
    color: var(--text) !important;
}
.form-control::placeholder, .search-bar::placeholder { color: var(--text-mute); }
.form-label { color: var(--text-dim); font-weight: 500; letter-spacing: .03em; margin-bottom: .35rem; }
.form-text { color: var(--text-mute); }

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23C8102E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .9rem center !important;
    background-size: 14px !important;
    padding-right: 2.5rem !important;
}

/* ---------- Search ---------- */
.search-container {
    position: relative;
    max-width: 560px;
    margin: 0 auto 2rem;
}
.search-bar {
    width: 100%;
    padding: 1rem 3rem 1rem 1.4rem !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    background: rgba(14,14,17,.7) !important;
    border: 1px solid var(--hairline-2) !important;
    box-shadow: var(--shadow-sm);
}
.search-bar:focus { box-shadow: 0 0 0 4px rgba(200,16,46,.18), 0 8px 24px rgba(0,0,0,.4) !important; }
.search-icon {
    position: absolute; right: 18px; top: 50%;
    transform: translateY(-50%);
    color: var(--red);
    cursor: pointer;
    font-size: 1.05rem;
    transition: transform .2s var(--ease);
}
.search-icon:hover { transform: translateY(-50%) scale(1.15); }

.suggestions-container {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px);
    background: var(--surface-strong);
    backdrop-filter: blur(14px);
    border: 1px solid var(--hairline-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 320px; overflow-y: auto;
    z-index: 1000;
    padding: .35rem;
    display: none;
}
.suggestion-item {
    padding: .65rem .9rem;
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    border: none !important;
    transition: background .15s var(--ease);
    font-size: .95rem;
}
.suggestion-item:hover { background: rgba(200,16,46,.14); color: var(--red); }

/* ---------- Tables ---------- */
.table {
    color: var(--text);
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--text);
    --bs-table-hover-bg: rgba(200,16,46,.06);
    --bs-table-hover-color: var(--text);
    --bs-table-border-color: var(--hairline);
    --bs-table-accent-bg: transparent;
    background: transparent;
}
.table > :not(caption) > * > * {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: inherit;
}
.table thead th {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--red) !important;
    border: none !important;
    border-bottom: 1px solid var(--hairline-2) !important;
    padding: 1rem .9rem !important;
    background: linear-gradient(180deg, rgba(200,16,46,.08), rgba(200,16,46,.02)) !important;
}
.table tbody th, .table tbody td {
    border: none !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding: 1rem .9rem !important;
    color: var(--text-dim) !important;
    vertical-align: middle;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}
.table tbody th {
    font-family: 'Bebas Neue', sans-serif;
    color: var(--text) !important;
    font-weight: 400;
    width: 70px;
    letter-spacing: 1px;
}
.table tbody tr { transition: background-color .2s var(--ease); }
.table tbody tr:hover th,
.table tbody tr:hover td {
    background: rgba(200,16,46,.06) !important;
    color: var(--text) !important;
}
.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: none !important; }

/* Pull table tight against the card edges */
.card .card-body > .table-responsive,
.card .card-body > .table { margin: -.25rem -.25rem 0; }
.card .card-body > .table-responsive .table { margin: 0; }

/* Film links inside tables */
.film-link, a.film-link {
    color: var(--text) !important;
    font-weight: 500;
    transition: color .2s var(--ease);
}
.film-link:hover, a.film-link:hover { color: var(--red) !important; }

/* ---------- Score / badges ---------- */
.score-display {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    color: var(--red);
    text-shadow: 0 0 14px rgba(200,16,46,.45);
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    font-size: 1.1rem;
}
.score-overall { font-size: 1.15rem; }

.badge {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: 1.5px;
    padding: .4em .7em;
    border-radius: 6px;
    font-size: .78rem;
}
.bg-info {
    background: linear-gradient(135deg, rgba(200,16,46,.22), rgba(168,169,173,.16)) !important;
    color: var(--red) !important;
    border: 1px solid var(--hairline-2);
}
.bg-secondary {
    background: rgba(255,255,255,.06) !important;
    color: var(--text-dim) !important;
    border: 1px solid var(--hairline);
    font-weight: 400;
}

/* List groups (parameter sidebar) */
.list-group { background: transparent; border: none; gap: .25rem; display: flex; flex-direction: column; }
.list-group-item {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-dim) !important;
    border-radius: 8px !important;
    padding: .6rem .85rem !important;
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    transition: all .2s var(--ease);
}
.list-group-item:hover {
    background: rgba(200,16,46,.08) !important;
    color: var(--text) !important;
    border-color: var(--hairline) !important;
}
.list-group-item.active, .list-group-item-action.active {
    background: linear-gradient(90deg, rgba(200,16,46,.22), rgba(200,16,46,.06)) !important;
    color: var(--red) !important;
    border-color: var(--hairline-2) !important;
    font-weight: 600;
}

/* ---------- Alerts ---------- */
.alert {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
    background: var(--surface);
    color: var(--text);
    padding: 1rem 1.15rem;
}
.alert-info {
    border-color: var(--hairline-2);
    background: linear-gradient(180deg, rgba(200,16,46,.10), rgba(200,16,46,.02));
    color: var(--text);
}
.alert-warning {
    border-color: rgba(255, 196, 87, .35);
    background: linear-gradient(180deg, rgba(255,196,87,.10), rgba(255,196,87,.02));
    color: #FFD58A;
}
.alert-danger {
    border-color: rgba(255, 99, 99, .35);
    background: linear-gradient(180deg, rgba(255,99,99,.10), rgba(255,99,99,.02));
    color: #FFB3B3;
}
.alert-success {
    border-color: var(--hairline-2);
    background: linear-gradient(180deg, rgba(200,16,46,.14), rgba(200,16,46,.02));
    color: var(--red);
}

/* ---------- Awards ---------- */
.award-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 84px; height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #F5A0AD, #C8102E 50%, #8B0A1E 100%);
    box-shadow: 0 0 0 3px rgba(200,16,46,.18), 0 8px 30px rgba(200,16,46,.45);
    margin-bottom: 1rem;
}
.award-badge i { font-size: 2.2rem; color: #fff; }
.award-title { font-weight: 400; margin-bottom: .35rem; color: var(--red); letter-spacing: .06em; }
.award-film { font-weight: 600; font-size: 1.15rem; color: var(--text); }

/* ---------- Version timeline ---------- */
.timeline { position: relative; max-width: 880px; margin: 0 auto; padding: 1rem 0; }
.timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--red-soft) 10%, var(--silver) 50%, var(--red-soft) 90%, transparent);
    top: 0; bottom: 0; left: 50%; margin-left: -1px;
    box-shadow: 0 0 14px rgba(200,16,46,.35);
}
.timeline-item { position: relative; margin-bottom: 3rem; }
.timeline-content {
    position: relative;
    width: 45%;
    padding: 1.4rem 1.6rem;
    background: linear-gradient(180deg, rgba(28,28,36,.85), rgba(22,22,26,.85));
    backdrop-filter: blur(10px);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    transition: all .3s var(--ease);
}
.timeline-content:hover {
    border-color: var(--hairline-2);
    box-shadow: var(--shadow-glow), var(--shadow-md);
    transform: translateY(-3px);
}
.timeline-content::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    background: radial-gradient(circle, #E8929E, #C8102E);
    border: 3px solid var(--bg-1);
    border-radius: 50%;
    top: 24px;
    box-shadow: 0 0 16px rgba(200,16,46,.6);
}
.timeline-item:nth-child(odd) .timeline-content { margin-left: auto; }
.timeline-item:nth-child(odd) .timeline-content::after { left: -52px; }
.timeline-item:nth-child(even) .timeline-content::after { right: -52px; }
.timeline-version {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    color: var(--red);
    letter-spacing: .06em;
    margin-bottom: .25rem;
    font-size: 1.6rem;
    text-shadow: 0 0 18px rgba(200,16,46,.35);
}
.timeline-content ul { padding-left: 1.1rem; color: var(--text-dim); }
.timeline-content ul li { margin-bottom: .25rem; }

/* ---------- Footer ---------- */
.footer {
    background: rgba(14, 14, 17, 0.82);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--hairline-2);
    padding: 2rem 0;
    color: var(--text-dim);
    margin-top: 3rem;
}
.footer .tagline { font-style: italic; opacity: .8; font-size: .85rem; }

/* ---------- Progress bars ---------- */
.progress {
    background: rgba(14,14,17,.6) !important;
    border: 1px solid var(--hairline);
    border-radius: 999px !important;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
    height: 26px;
}
.progress-bar {
    background: linear-gradient(90deg, #E8929E, #C8102E 50%, #A8A9AD) !important;
    color: #fff !important;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: 1.5px;
    box-shadow: 0 0 18px rgba(200,16,46,.45);
}
.progress-bar.bg-success { background: linear-gradient(90deg, #E8929E, #C8102E 50%, #A8A9AD) !important; }

/* ---------- Modal ---------- */
.modal-content, .modal-content.bg-dark {
    background: #1c1c22 !important;
    background-image: linear-gradient(180deg, rgba(200,16,46,.06), transparent 60%) !important;
    border: 1px solid var(--hairline-2) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text);
    box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.modal-header, .modal-footer {
    border-color: var(--hairline) !important;
}
.btn-close {
    filter: invert(1) brightness(1.4);
    opacity: .7;
}
.btn-close:hover { opacity: 1; }

/* ---------- Loader ---------- */
.loading-circle {
    width: 18px; height: 18px;
    margin-right: 10px;
    border: 2.5px solid rgba(200,16,46,.3);
    border-top: 2.5px solid #C8102E;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
}
.loading-circle:not(.d-none) { display: inline-block !important; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-border.d-none { display: none !important; }

/* ---------- Misc utilities ---------- */
.text-muted { color: var(--text-mute) !important; }
.hover-glow { box-shadow: var(--shadow-glow), var(--shadow-md) !important; border-color: var(--hairline-2) !important; }

hr { border-color: var(--hairline); opacity: 1; }

/* film-card specific */
.film-card { display: flex; flex-direction: column; height: 100%; }
.film-card .card-title a { color: var(--text); font-family: 'Bebas Neue', sans-serif; }
.film-card:hover .card-title a { color: var(--red); }

/* parameter list */
.parameter-item {
    cursor: pointer;
    padding: .55rem .85rem;
    border-radius: 8px;
    transition: all .2s var(--ease);
    color: var(--text-dim);
}
.parameter-item:hover, .parameter-item.active {
    background: rgba(200,16,46,.10);
    color: var(--red);
}

/* sentiment voting */
.vote-buttons { display: flex; gap: .5rem; margin-top: .5rem; }
.vote-button {
    background: rgba(200,16,46,.08);
    border: 1px solid var(--hairline);
    color: var(--text-dim);
    padding: .35rem .7rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    transition: all .2s var(--ease);
}
.vote-button:hover { background: rgba(200,16,46,.18); color: var(--text); }
.vote-button.selected {
    background: linear-gradient(135deg, rgba(200,16,46,.30), rgba(168,169,173,.18));
    border-color: var(--red-soft);
    color: var(--red);
}
.vote-notice { font-size: .8rem; color: var(--text-mute); margin-top: .5rem; }
.sentiment-stats { display: flex; flex-direction: column; gap: .5rem; }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .hero-title { font-size: clamp(1.9rem, 7vw, 2.6rem); }
    .hero-tagline, .lead { font-size: 1rem; }

    .timeline::before { left: 22px; }
    .timeline-content { width: calc(100% - 60px); margin-left: 60px !important; }
    .timeline-item:nth-child(odd) .timeline-content::after,
    .timeline-item:nth-child(even) .timeline-content::after {
        left: -42px; right: auto;
    }

    .navbar .nav-link { padding: .65rem .85rem !important; font-size: .9rem; }
    .navbar-collapse {
        background: var(--surface-strong);
        backdrop-filter: blur(14px);
        border: 1px solid var(--hairline-2);
        border-radius: var(--radius);
        margin-top: .75rem;
        padding: .75rem;
    }
}

@media (max-width: 576px) {
    .rsi-logo, .filmbot-logo { font-size: 1.3rem; letter-spacing: 3px; }
    .metrics-text { font-size: 1rem; letter-spacing: 3px; }
    .tagline { font-size: .6rem; }
    .navbar { padding: .65rem 0; }
    .content-wrapper { padding: 1.5rem 0 3rem; }
    .card-body { padding: 1rem; }
    .btn { padding: .6rem 1.1rem; font-size: .82rem; }
    .hero-section { padding: 2rem 0 1rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   FILM DETAIL PAGE  (fd-* layout)
   ════════════════════════════════════════════════════════════════════ */

/* ── Body / page shell ─────────────────────────────────────── */
body.fd-page {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
body.fd-page .content-wrapper {
  flex: 1;
  padding: 0 !important;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.fd-page .footer { display: none !important; }

/* ── Shell (left + main side by side) ────────────────────────── */
.fd-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

/* ── Left column ─────────────────────────────────────────────── */
.fd-left {
  width: 210px;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,.25);
  border-right: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}

/* Tab switch */
.fd-tab-switch {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.fd-tab-btn {
  flex: 1;
  padding: .45rem .3rem;
  font-size: .62rem;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  color: rgba(234,247,232,.35);
  cursor: pointer;
  transition: background .2s, color .2s;
  border-bottom: 2px solid transparent;
}
.fd-tab-btn:hover { color: rgba(234,247,232,.7); background: rgba(255,255,255,.04); }
.fd-tab-active { color: #C8102E !important; border-bottom-color: #C8102E !important; }

/* Card wrap */
.fd-card-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: .5rem;
}
.fd-card-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
  border-radius: 8px;
  transition: transform .3s;
}
.fd-card-wrap:hover img { transform: scale(1.02); }
.fd-card-hover-label {
  position: absolute;
  bottom: .75rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.65);
  color: rgba(234,247,232,.6);
  font-size: .6rem;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: .08em;
  padding: .2rem .55rem;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
  pointer-events: none;
}
.fd-card-wrap:hover .fd-card-hover-label { opacity: 1; }
.fd-card-missing {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  color: rgba(234,247,232,.25);
  font-size: .7rem;
  font-family: 'Inter', sans-serif;
  text-align: center;
  padding: 1.5rem;
}

/* Awards strip */
.fd-awards-strip {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .5rem .6rem;
  border-top: 1px solid rgba(255,255,255,.06);
  justify-content: center;
  max-height: 190px;
  overflow-y: auto;
}
.fd-awards-strip img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 4px;
  transition: transform .2s;
}
.fd-awards-strip img:hover { transform: scale(1.1); }

/* ── Main area ───────────────────────────────────────────────── */
.fd-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── RSI Score Panel ─────────────────────────────────────────── */
.fd-panel-score {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Top strip ───────────────────────────────────────────────── */
.fd-top {
  flex-shrink: 0;
  padding: .55rem 1rem .4rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.15);
}

/* Title row */
.fd-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .3rem;
}
.fd-title-group {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex: 1;
  min-width: 0;
}
.fd-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #EAF7E8;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-year {
  font-family: 'Orbitron', sans-serif;
  font-size: .7rem;
  color: rgba(234,247,232,.5);
  white-space: nowrap;
}
.fd-original-title {
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  color: rgba(234,247,232,.45);
  font-style: italic;
  margin: .1rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-info-tip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: rgba(234,247,232,.3);
  font-size: .72rem;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  flex-shrink: 0;
  transition: color .2s;
  white-space: nowrap;
}
.fd-info-tip:hover { color: rgba(200,16,46,.7); text-decoration: none; }
.fd-learn-label { font-size: .6rem; letter-spacing: .04em; }

.fd-title-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.fd-rsi-score {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, #C8102E, #FF4D6D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.fd-action-btn {
  background: rgba(200,16,46,.1);
  border: 1px solid rgba(200,16,46,.25);
  color: rgba(234,247,232,.6);
  padding: .3rem .5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .75rem;
  transition: all .2s;
}
.fd-action-btn:hover { background: rgba(200,16,46,.2); color: #EAF7E8; border-color: rgba(200,16,46,.5); }

/* Info chips */
.fd-info-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .3rem;
}
.fd-chip {
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(234,247,232,.65);
  padding: .15rem .45rem;
  border-radius: 4px;
  white-space: nowrap;
}
.fd-chip-rating { border-color: rgba(200,16,46,.3); color: #FF8080; background: rgba(200,16,46,.07); }
.fd-chip-bo     { border-color: rgba(80,200,80,.25); color: rgba(150,240,140,.8); background: rgba(50,180,50,.07); }
.fd-chip-sm     { font-size: .6rem; padding: .1rem .35rem; }

/* Plot row */
.fd-plot-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .3rem;
}
.fd-plot {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  color: rgba(234,247,232,.55);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.fd-details-toggle {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(234,247,232,.4);
  font-family: 'Orbitron', sans-serif;
  font-size: .58rem;
  letter-spacing: .06em;
  padding: .2rem .45rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
.fd-details-toggle:hover { border-color: rgba(200,16,46,.4); color: rgba(234,247,232,.7); }

/* Details drawer */
.fd-details-drawer {
  margin-bottom: .3rem;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  padding: .4rem .6rem;
}
.fd-drawer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.fd-drawer-sec {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.fd-drawer-label {
  font-family: 'Orbitron', sans-serif;
  font-size: .55rem;
  letter-spacing: .08em;
  color: rgba(234,247,232,.35);
  text-transform: uppercase;
  margin-bottom: .15rem;
}
.fd-drawer-text {
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  color: rgba(234,247,232,.55);
}

/* Confidence row */
.fd-conf-row {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.fd-conf-label {
  font-family: 'Orbitron', sans-serif;
  font-size: .58rem;
  letter-spacing: .07em;
  color: rgba(234,247,232,.3);
  text-transform: uppercase;
}
#fd-conf-pct { font-family: 'Inter', sans-serif; font-size: .75rem; color: rgba(234,247,232,.6); }

/* ── Parameter Grid ──────────────────────────────────────────── */
.fd-param-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  overflow: hidden;
}
.fd-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.05);
  min-width: 0;
  overflow: hidden;
}
.fd-col:last-child { border-right: none; }

/* Column header */
.fd-col-hdr {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .5rem;
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.fd-col-num {
  font-family: 'Orbitron', sans-serif;
  font-size: .55rem;
  color: rgba(200,16,46,.7);
  min-width: 1em;
}
.fd-col-name {
  flex: 1;
  font-family: 'Orbitron', sans-serif;
  font-size: .58rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(234,247,232,.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-col-wt {
  font-family: 'Orbitron', sans-serif;
  font-size: .55rem;
  color: rgba(200,16,46,.5);
  flex-shrink: 0;
}

/* Parameter rows */
.fd-prow {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .22rem .5rem;
  border-bottom: 1px solid rgba(255,255,255,.025);
  cursor: pointer;
  transition: background .15s;
  min-width: 0;
}
.fd-prow:hover { background: rgba(200,16,46,.08); }
.fd-prow-hl   { background: rgba(50,160,50,.1) !important; border-left: 2px solid rgba(80,200,80,.4); }
.fd-prow-num  { font-size: .58rem; color: rgba(234,247,232,.25); min-width: 1.4em; flex-shrink: 0; }
.fd-prow-name {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: .64rem;
  color: rgba(234,247,232,.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.fd-prow-score {
  font-family: 'Orbitron', sans-serif;
  font-size: .64rem;
  font-weight: 700;
  color: rgba(234,247,232,.85);
  flex-shrink: 0;
}
.fd-score-hi { color: #7FD99F; }
.fd-score-lo { color: #FF7070; }

/* Category average footer */
.fd-col-avg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .25rem .5rem;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.15);
  flex-shrink: 0;
}
.fd-col-avg span:first-child {
  font-family: 'Orbitron', sans-serif;
  font-size: .52rem;
  letter-spacing: .08em;
  color: rgba(234,247,232,.25);
  text-transform: uppercase;
}
.fd-col-avg-val {
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  color: rgba(234,247,232,.6);
}

/* ── Final Score Column ──────────────────────────────────────── */
.fd-col-final {
  background: rgba(0,0,0,.18);
}
.fd-final-row {
  display: flex;
  align-items: center;
  padding: .22rem .45rem;
  gap: .25rem;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.fd-final-cat {
  font-family: 'Orbitron', sans-serif;
  font-size: .52rem;
  letter-spacing: .06em;
  color: rgba(200,16,46,.6);
  min-width: 2.2em;
}
.fd-final-eq {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  color: rgba(234,247,232,.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-final-sub {
  font-family: 'Orbitron', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  color: rgba(234,247,232,.7);
  flex-shrink: 0;
}

/* Overall RSI score box */
.fd-overall-box {
  margin: .5rem .45rem .4rem;
  padding: .5rem .5rem;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(200,16,46,.15), rgba(200,16,46,.05));
  border: 1px solid rgba(200,16,46,.3);
  text-align: center;
}
.fd-ov-label {
  font-family: 'Orbitron', sans-serif;
  font-size: .52rem;
  letter-spacing: .1em;
  color: rgba(200,16,46,.7);
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.fd-ov-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  background: linear-gradient(135deg, #C8102E, #FF4D6D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

/* Genre score boxes */
.fd-genre-box {
  margin: .2rem .45rem 0;
  padding: .3rem .45rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all .2s;
}
.fd-genre-box:hover { border-color: rgba(200,16,46,.3); background: rgba(200,16,46,.06); }
.fd-genre-active { border-color: rgba(80,200,80,.4) !important; background: rgba(50,160,50,.1) !important; }
.fd-genre-name {
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  color: rgba(234,247,232,.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-genre-score {
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  color: rgba(234,247,232,.75);
  flex-shrink: 0;
  margin-left: .3rem;
}

/* ── Bottom Bar ──────────────────────────────────────────────── */
.fd-bottom-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  padding: .25rem 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.2);
}
.fd-meta {
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  color: rgba(234,247,232,.35);
}
.fd-meta strong { color: rgba(234,247,232,.6); }
.fd-meta-dot { color: rgba(255,255,255,.15); font-size: .55rem; }

/* ── DNA Panel ───────────────────────────────────────────────── */
.fd-panel-dna {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: .6rem .9rem .6rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Parameter Detail Modal ──────────────────────────────────── */
.fd-param-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.fd-param-modal {
  background: linear-gradient(160deg, rgba(14,18,26,.97) 0%, rgba(8,12,18,.97) 100%);
  border: 1px solid rgba(200,16,46,.25);
  border-radius: 14px;
  padding: 1.5rem;
  width: min(520px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.fd-param-close {
  position: absolute;
  top: .75rem; right: 1rem;
  background: transparent;
  border: none;
  color: rgba(234,247,232,.4);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  transition: color .2s;
}
.fd-param-close:hover { color: #EAF7E8; }
.fd-pm-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.fd-pm-name {
  font-family: 'Orbitron', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: #EAF7E8;
  letter-spacing: .03em;
  line-height: 1.3;
}
.fd-pm-score {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  background: linear-gradient(135deg, #C8102E, #FF4D6D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}
.fd-pm-runs { margin-bottom: .75rem; }
.fd-pm-realised-potential { margin-bottom: .75rem; }
.fd-pm-rp-label {
  font-family: 'Orbitron', sans-serif;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200,16,46,.7);
  margin-bottom: .35rem;
}
.fd-pm-rp-value {
  font-family: 'Orbitron', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: #eaf7e8;
  letter-spacing: .03em;
}
.fd-pm-runs-label,
.fd-pm-just-label,
.fd-pm-sent-label,
.fd-pm-vote-label {
  font-family: 'Orbitron', sans-serif;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200,16,46,.7);
  margin-bottom: .35rem;
}
.fd-pm-just { margin-bottom: .75rem; }
.fd-pm-just p { font-family: 'Inter', sans-serif; font-size: .8rem; color: rgba(234,247,232,.65); line-height: 1.55; margin: 0; }
.fd-pm-sentiment { margin-bottom: .75rem; }
.fd-pm-sent-bars { display: flex; flex-direction: column; gap: .35rem; }
.fd-pm-sent-row { display: flex; align-items: center; gap: .6rem; }
.fd-pm-sent-lbl { font-family: 'Inter', sans-serif; font-size: .7rem; color: rgba(234,247,232,.5); min-width: 3.5em; }
.fd-pm-sent-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; }
.fd-pm-sent-bar-fill { height: 100%; background: linear-gradient(90deg, #C8102E, #FF4D6D); border-radius: 3px; transition: width .4s; }
.fd-pm-sent-pct { font-family: 'Orbitron', sans-serif; font-size: .6rem; color: rgba(234,247,232,.5); min-width: 2.5em; text-align: right; }
.fd-pm-votes { margin-top: .5rem; }

/* ════════════════════════════════════════════════════════════════════
   CARD FLIP MODAL  (was in film_detail extra_head; now global)
   ════════════════════════════════════════════════════════════════════ */
.card-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 1500;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}
.card-modal[style*="display: block"] { display: flex !important; }
.modal-close {
  position: fixed;
  top: 1.25rem; right: 1.5rem;
  font-size: 2rem;
  color: rgba(234,247,232,.5);
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  transition: color .2s;
}
.modal-close:hover { color: #EAF7E8; }
.card-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.card-flip-container {
  width: min(340px, 85vw);
  aspect-ratio: 2/3;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .6s;
}
.card-flip-container.show-back  { transform: rotateY(180deg); }
.card-flip-container.show-shimmer { transform: rotateY(0deg); }
.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}
.card-face img { width: 100%; height: 100%; object-fit: cover; }
.card-back { transform: rotateY(180deg); }
/* Shimmer face: hidden by default regardless of display, shown only via show-shimmer */
.card-shimmer {
  display: none !important;
  background: linear-gradient(135deg, #1a0a2e, #2d1b4e);
  z-index: 5;
}
.card-flip-container.show-shimmer .card-shimmer {
  display: block !important;
}
.shimmer-glow .card-shimmer {
  animation: shimmerPulse 2s ease-in-out infinite;
}
@keyframes shimmerPulse {
  0%,100% { box-shadow: 0 0 30px rgba(160,80,255,.3); }
  50%      { box-shadow: 0 0 60px rgba(160,80,255,.7), 0 0 100px rgba(80,160,255,.3); }
}
.flip-instruction {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: rgba(234,247,232,.4);
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
}
.flip-instruction i { font-size: .7rem; }

/* ════════════════════════════════════════════════════════════════════
   FilmPrint / DNA  fp-* styles
   ════════════════════════════════════════════════════════════════════ */
.fp-sub-tab-wrap { display: flex; gap: .5rem; }
.fp-sub-tab-btn {
  padding: .35rem 1rem;
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(234,247,232,.4);
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s;
}
.fp-sub-tab-btn.active { border-color: rgba(200,16,46,.5); color: #C8102E; background: rgba(200,16,46,.08); }
.fp-sub-tab-btn:hover:not(.active) { border-color: rgba(255,255,255,.2); color: rgba(234,247,232,.7); }

.fp-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; gap: 1rem; }
.fp-spinner { width: 40px; height: 40px; border: 3px solid rgba(200,16,46,.15); border-top-color: #C8102E; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fp-loading p { color: rgba(234,247,232,.4); font-family: 'Inter', sans-serif; font-size: .85rem; margin: 0; }

.fp-hero { display: flex; align-items: center; justify-content: space-around; margin-bottom: 1.5rem; padding: 1rem; background: rgba(0,0,0,.2); border-radius: 10px; border: 1px solid rgba(255,255,255,.06); }
.fp-rating-block, .fp-match-block { text-align: center; }
.fp-rating-label, .fp-match-label { font-family: 'Orbitron', sans-serif; font-size: .6rem; letter-spacing: .1em; color: rgba(200,16,46,.7); text-transform: uppercase; margin-bottom: .35rem; }
.fp-rating-value { font-family: 'Orbitron', sans-serif; font-size: 2.2rem; font-weight: 900; background: linear-gradient(135deg, #C8102E, #FF4D6D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.fp-rating-sub { font-family: 'Inter', sans-serif; font-size: .7rem; color: rgba(234,247,232,.35); margin-top: .3rem; }
.fp-match-value { font-family: 'Orbitron', sans-serif; font-size: 1.8rem; font-weight: 900; color: #7FD99F; line-height: 1; }
.fp-match-label-sub { font-family: 'Inter', sans-serif; font-size: .65rem; color: rgba(234,247,232,.35); margin-top: .3rem; }

.fp-sub-count { font-family: 'Inter', sans-serif; font-size: .75rem; color: rgba(234,247,232,.35); margin-bottom: .75rem; }

.fp-dna-card { background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: .75rem 1rem; margin-bottom: .75rem; }
.fp-dna-category-heading { font-family: 'Orbitron', sans-serif; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(200,16,46,.6); margin-bottom: .6rem; }

.fp-slider-row { margin-bottom: .5rem; }
.fp-slider-name { font-family: 'Inter', sans-serif; font-size: .72rem; color: rgba(234,247,232,.6); display: block; margin-bottom: .25rem; }
.fp-slider-bar-row { display: flex; align-items: center; gap: .4rem; }
.fp-slider-label { font-family: 'Inter', sans-serif; font-size: .62rem; color: rgba(234,247,232,.3); white-space: nowrap; }
.fp-slider-label.right { text-align: right; }
.fp-bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 4px; position: relative; overflow: visible; }
.fp-bar-fill { height: 100%; background: linear-gradient(90deg, rgba(200,16,46,.5), rgba(200,16,46,.8)); border-radius: 4px; }
.fp-bar-dot { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; background: #C8102E; border-radius: 50%; border: 2px solid rgba(234,247,232,.8); box-shadow: 0 0 6px rgba(200,16,46,.6); pointer-events: none; }

.fp-meter-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.fp-meter-icon { font-size: 1.1rem; }
.fp-meter-label { font-family: 'Inter', sans-serif; font-size: .72rem; color: rgba(234,247,232,.5); min-width: 9em; }
.fp-meter-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; }
.fp-meter-bar-fill { height: 100%; background: linear-gradient(90deg, rgba(200,16,46,.5), rgba(200,16,46,.8)); }
.fp-meter-pct { font-family: 'Orbitron', sans-serif; font-size: .6rem; color: rgba(234,247,232,.4); min-width: 2.5em; text-align: right; }

.fp-login-prompt { text-align: center; padding: 2rem; color: rgba(234,247,232,.4); font-family: 'Inter', sans-serif; }

.fp-enjoyment-wrap { background: rgba(200,16,46,.06); border: 1px solid rgba(200,16,46,.15); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; text-align: center; }
.fp-enjoy-label { font-family: 'Orbitron', sans-serif; font-size: .6rem; letter-spacing: .1em; color: rgba(200,16,46,.7); text-transform: uppercase; margin-bottom: .4rem; }
.fp-enjoy-value { font-family: 'Orbitron', sans-serif; font-size: 2rem; font-weight: 900; color: #C8102E; line-height: 1; margin-bottom: .5rem; }
.fp-enjoy-range { width: 100%; accent-color: #C8102E; }

.fp-range-row { margin-bottom: .6rem; }
.fp-range-labels { display: flex; justify-content: space-between; align-items: center; margin-bottom: .2rem; }
.fp-range-end { font-family: 'Inter', sans-serif; font-size: .6rem; color: rgba(234,247,232,.3); }
.fp-range-name { font-family: 'Inter', sans-serif; font-size: .7rem; color: rgba(234,247,232,.6); }
.fp-range-val { font-family: 'Orbitron', sans-serif; font-size: .65rem; color: #C8102E; }
.fp-range { width: 100%; accent-color: #C8102E; }

.fp-reaction-wrap { display: flex; flex-wrap: wrap; gap: .5rem; }
.fp-reaction-toggle { display: flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; cursor: pointer; transition: all .2s; background: transparent; }
.fp-reaction-toggle:hover { border-color: rgba(200,16,46,.3); background: rgba(200,16,46,.06); }
.fp-reaction-toggle.selected { border-color: rgba(200,16,46,.5); background: rgba(200,16,46,.12); }
.fp-reaction-icon { font-size: 1rem; }
.fp-reaction-label { font-family: 'Inter', sans-serif; font-size: .7rem; color: rgba(234,247,232,.6); }

.fp-save-btn { display: block; width: 100%; margin-top: 1rem; padding: .6rem; font-family: 'Orbitron', sans-serif; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(135deg, rgba(200,16,46,.3), rgba(200,16,46,.15)); border: 1px solid rgba(200,16,46,.4); border-radius: 8px; color: #EAF7E8; cursor: pointer; transition: all .25s; }
.fp-save-btn:hover { background: linear-gradient(135deg, rgba(200,16,46,.45), rgba(200,16,46,.25)); box-shadow: 0 4px 20px rgba(200,16,46,.3); }
.fp-save-btn:disabled { opacity: .5; cursor: wait; }

.fp-comparison-note { font-family: 'Inter', sans-serif; font-size: .72rem; color: rgba(234,247,232,.35); margin-bottom: .75rem; }
.fp-delta-badge { font-family: 'Orbitron', sans-serif; font-size: .55rem; padding: .1rem .3rem; border-radius: 3px; margin-left: .35rem; }
.fp-delta-pos { background: rgba(50,180,50,.15); color: #7FD99F; }
.fp-delta-neg { background: rgba(200,16,46,.12); color: #FF8080; }
.fp-delta-neu { background: rgba(255,255,255,.06); color: rgba(234,247,232,.35); }

/* ══════════════════════════════════════════════════════════════
   DNA TAB — Grid Redesign
   ══════════════════════════════════════════════════════════════ */

/* Main flex column that fills the panel */
.fp-dna-grid {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 7px;
}

/* ── Top row: 4 stat boxes ─────────────────────────────────── */
.fp-top-row {
  display: grid;
  grid-template-columns: 1.1fr 2.4fr 1.1fr;
  gap: 7px;
  flex-shrink: 0;
}

.fp-stat-box {
  background: rgba(14,14,17,.6);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fp-stat-box-4 { justify-content: space-between; }

/* Compact variant for the two side boxes */
.fp-stat-box-side {
  padding: 8px 10px;
}
.fp-stat-box-side .fp-stat-eyebrow { margin-bottom: 3px; }
.fp-stat-box-side .fp-stat-numwrap { margin-bottom: 2px; }
.fp-stat-box-side .fp-stat-num     { font-size: 1.45rem; }

.fp-stat-eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .65rem;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.38);
  margin-bottom: 5px;
}

.fp-stat-numwrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.fp-stat-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
}

.fp-stat-denom {
  font-size: .8rem;
  color: rgba(255,255,255,.3);
  font-family: 'Inter', sans-serif;
}

.fp-stat-foot {
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  color: rgba(255,255,255,.35);
  line-height: 1.35;
}

.fp-match-green { color: #4ade80 !important; }

.fp-coming-chip {
  display: inline-block;
  background: rgba(168,169,173,.12);
  color: var(--silver);
  font-size: .56rem;
  padding: 1px 5px;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  letter-spacing: .4px;
  vertical-align: middle;
}

/* ── Magic CTA Box (middle of top row) ──────────────────────── */
.fp-cta-box {
  position: relative;
  background: linear-gradient(135deg,
    rgba(28,4,12,.92) 0%,
    rgba(14,14,20,.88) 42%,
    rgba(5,10,28,.92) 100%);
  border: 1px solid rgba(200,16,46,.22);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: border-color .4s ease, box-shadow .4s ease;
  min-width: 0;
}
.fp-cta-box:hover {
  border-color: rgba(200,16,46,.5);
  box-shadow: 0 0 40px rgba(200,16,46,.1), inset 0 0 40px rgba(200,16,46,.04);
}
/* Radial glow in center */
.fp-cta-box::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 70%; height: 90%;
  background: radial-gradient(ellipse at center, rgba(200,16,46,.09) 0%, transparent 68%);
  pointer-events: none;
  animation: fp-cta-glow 3s ease-in-out infinite;
}
@keyframes fp-cta-glow {
  0%, 100% { opacity: .55; }
  50%       { opacity: 1;   }
}
/* Sweep shimmer */
.fp-cta-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 36%,
    rgba(255,255,255,.042) 50%,
    transparent 64%
  );
  animation: fp-shimmer-sweep 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fp-shimmer-sweep {
  0%   { transform: translateX(-130%); }
  55%  { transform: translateX(230%);  }
  100% { transform: translateX(230%);  }
}
.fp-cta-inner {
  position: relative;
  text-align: center;
  padding: 12px 28px;
  z-index: 1;
}
.fp-cta-icon {
  display: block;
  font-size: 1.5rem;
  color: rgba(200,16,46,.75);
  margin-bottom: 5px;
  animation: fp-icon-pulse 2.6s ease-in-out infinite;
}
@keyframes fp-icon-pulse {
  0%, 100% { opacity: .6;  transform: scale(1);    }
  50%       { opacity: 1;   transform: scale(1.13); }
}
.fp-cta-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(200,16,46,.35);
}
.fp-cta-sub {
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  color: rgba(255,255,255,.38);
  margin: 0 0 12px;
  line-height: 1.45;
  max-width: 320px;
}
.fp-cta-btn {
  display: inline-block;
  background: linear-gradient(135deg, #C8102E 0%, #9b0a22 100%);
  color: #ffffff !important;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .9rem;
  letter-spacing: 2px;
  padding: .38rem 1.5rem;
  border-radius: 22px;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 16px rgba(200,16,46,.45);
}
.fp-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(200,16,46,.65);
  color: #ffffff !important;
}
/* Logged-in "coming soon" variant — muted */
.fp-cta-box-auth .fp-cta-title {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  letter-spacing: 1.2px;
}
.fp-cta-box-auth .fp-cta-sub {
  margin-bottom: 8px;
}

/* ── Matching engine: compact result inside the CTA box ──────── */
.fp-cta-result {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 10px 18px;
  width: 100%;
}
.fp-cta-eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .6rem;
  letter-spacing: 1.6px;
  color: rgba(255,255,255,.42);
  margin-bottom: 1px;
}
.fp-cta-bignum {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 26px rgba(200,16,46,.45);
}
.fp-cta-bignum .fp-cta-pct {
  font-size: 1.1rem;
  color: var(--red);
  margin-left: 2px;
}
.fp-cta-sub2 {
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  color: rgba(255,255,255,.4);
  margin: 3px 0 6px;
  min-height: .7rem;
}
.fp-cta-mini {
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 9px;
}
.fp-cta-mini strong { color: var(--red); font-weight: 700; }
.fp-cta-mini .fp-cta-dot { opacity: .35; margin: 0 6px; }
.fp-cta-why {
  background: none;
  border: 1px solid rgba(200,16,46,.4);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .76rem;
  letter-spacing: 1.4px;
  padding: .3rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.fp-cta-why:hover { background: rgba(200,16,46,.18); border-color: var(--red); }
.fp-cta-box-auth .fp-cta-btn { cursor: pointer; border: none; }

/* ── Matching engine: detail modal ──────────────────────────── */
.fp-match-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5,5,8,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.fp-match-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(135deg, rgba(28,4,12,.97) 0%, rgba(14,14,20,.97) 45%, rgba(5,10,28,.97) 100%);
  border: 1px solid rgba(200,16,46,.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(200,16,46,.08);
  padding: 1.6rem 1.6rem 1.3rem;
}
.fp-match-close {
  position: absolute;
  top: 10px; right: 14px;
  background: none; border: none;
  color: rgba(255,255,255,.5);
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
  transition: color .2s ease;
}
.fp-match-close:hover { color: var(--red); }
.fp-match-eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .72rem;
  letter-spacing: 2px;
  color: rgba(255,255,255,.45);
  margin-bottom: .4rem;
}
.fp-match-hero {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1rem;
}
.fp-match-hero-num {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 30px rgba(200,16,46,.5);
}
.fp-match-hero-num .fp-match-hero-pct { font-size: 1.4rem; color: var(--red); }
.fp-match-conf {
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  margin-bottom: .45rem;
}
.fp-match-genres { display: flex; flex-wrap: wrap; gap: 5px; }
.fp-match-genre-chip {
  display: inline-block;
  background: rgba(200,16,46,.14);
  border: 1px solid rgba(200,16,46,.3);
  color: #f2c2ca;
  font-size: .66rem;
  letter-spacing: .4px;
  padding: 2px 9px;
  border-radius: 20px;
}
.fp-match-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 1.1rem;
}
.fp-match-stat {
  background: rgba(14,14,17,.55);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  text-align: center;
}
.fp-match-stat-num {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--red);
  line-height: 1;
}
.fp-match-stat-lbl {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .76rem;
  letter-spacing: 1.4px;
  color: rgba(255,255,255,.7);
  margin-top: 5px;
}
.fp-match-stat-sub {
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  color: rgba(255,255,255,.4);
  margin-top: 2px;
}
.fp-match-drivers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.fp-match-driver-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .82rem;
  letter-spacing: 1px;
  margin-bottom: .5rem;
}
.fp-match-driver-title i { margin-right: 5px; }
.fp-driver-pos { color: #4ade80; }
.fp-driver-neg { color: #f7a23b; }
.fp-match-driver-list {
  list-style: none;
  padding: 0; margin: 0;
}
.fp-match-driver-list li {
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  line-height: 1.4;
  color: rgba(240,240,240,.78);
  padding: .35rem 0 .35rem .85rem;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.fp-match-driver-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .7rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.fp-driver-pos + .fp-match-driver-list li::before { background: #4ade80; }
.fp-driver-neg + .fp-match-driver-list li::before { background: #f7a23b; }
.fp-match-driver-empty {
  color: rgba(255,255,255,.35) !important;
  font-style: italic;
}
.fp-match-driver-empty::before { display: none; }
.fp-match-foot {
  font-family: 'Inter', sans-serif;
  font-size: .64rem;
  color: rgba(255,255,255,.32);
  text-align: center;
  border-top: 1px solid var(--hairline);
  padding-top: .8rem;
}
@media (max-width: 560px) {
  .fp-match-hero-num { font-size: 2.6rem; }
  .fp-match-drivers { grid-template-columns: 1fr; }
}

/* Enjoyment range in stat box 1 (My DNA mode) */
.fp-enjoy-range-new {
  width: 100%;
  margin-top: 8px;
  height: 4px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(200,16,46,.5) 50%, rgba(200,16,46,.1) 50%);
}
.fp-enjoy-range-new::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: var(--red);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(200,16,46,.55);
}
.fp-enjoy-range-new::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--red);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* Vote meters in stat box 4 (community mode) */
.fp-vote-meter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.fp-vote-meter-label {
  font-family: 'Inter', sans-serif;
  font-size: .64rem;
  color: rgba(255,255,255,.5);
  width: 38px;
  flex-shrink: 0;
}
.fp-vote-meter-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: hidden;
}
.fp-vote-meter-fill {
  height: 100%;
  background: var(--red);
  border-radius: 4px;
}
.fp-vote-meter-pct {
  font-family: 'Orbitron', sans-serif;
  font-size: .58rem;
  color: rgba(255,255,255,.55);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}
.fp-vote-total {
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  color: rgba(255,255,255,.38);
  margin-top: 5px;
}
.fp-vote-total strong { color: rgba(255,255,255,.7); }
.fp-vote-no-data {
  font-size: .68rem;
  color: rgba(255,255,255,.3);
  font-style: italic;
  padding: 4px 0;
}

/* Reactions in stat box 4 (My DNA mode) */
.fp-react-compact {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}
.fp-react-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: .62rem !important;
  padding: 5px 0 !important;
  flex: 1 !important;
  border-radius: 8px !important;
}

/* New Save button */
.fp-save-btn-new {
  display: block;
  width: 100%;
  padding: 7px 10px;
  background: linear-gradient(135deg, rgba(200,16,46,.35), rgba(200,16,46,.18));
  border: 1px solid rgba(200,16,46,.4);
  border-radius: 7px;
  color: #EAF7E8;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .8rem;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all .2s;
}
.fp-save-btn-new:hover { background: linear-gradient(135deg, rgba(200,16,46,.5), rgba(200,16,46,.3)); box-shadow: 0 3px 14px rgba(200,16,46,.3); }
.fp-save-btn-new:disabled { opacity: .5; cursor: wait; }

.fp-save-status-msg {
  text-align: center;
  font-size: .68rem;
  min-height: .9em;
  margin-top: 4px;
}

/* Login prompt inline in stat box 4 */
.fp-login-prompt-inline { font-family: 'Inter', sans-serif; }

/* ── Slider grid: 3 × 2 category cards ─────────────────────── */
.fp-slider-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 7px;
  flex: 1;
  min-height: 0;
}

.fp-cat-card {
  background: rgba(14,14,17,.6);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  overflow: hidden;
}

.fp-cat-head {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .68rem;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding-bottom: 5px;
  margin-bottom: 2px;
  flex-shrink: 0;
}

.fp-cat-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  justify-content: space-evenly;
}

/* ── Individual slider rows ─────────────────────────────────── */
.fp-cat-slider { display: flex; flex-direction: column; gap: 3px; }

.fp-cat-slider-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.fp-cat-slider-name {
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  color: rgba(255,255,255,.65);
  text-align: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-cat-slider-end {
  font-family: 'Inter', sans-serif;
  font-size: .55rem;
  color: rgba(255,255,255,.28);
  flex-shrink: 0;
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-end-r { text-align: right; }

/* Passive community track */
.fp-cat-track {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,.07);
  border-radius: 4px;
}
.fp-cat-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(200,16,46,.45), rgba(200,16,46,.75));
  border-radius: 4px;
}
.fp-cat-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px; height: 9px;
  background: var(--red);
  border-radius: 50%;
  border: 1.5px solid rgba(14,14,17,.9);
  box-shadow: 0 0 5px rgba(200,16,46,.65);
}

/* Interactive range (My DNA mode) */
.fp-cat-range {
  width: 100%;
  height: 4px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
  display: block;
  background: linear-gradient(90deg, rgba(200,16,46,.6) 50%, rgba(200,16,46,.12) 50%);
}
.fp-cat-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 11px;
  background: var(--red);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(200,16,46,.6);
}
.fp-cat-range::-moz-range-thumb {
  width: 11px; height: 11px;
  background: var(--red);
  border: none; border-radius: 50%;
  cursor: pointer;
}

.fp-cat-val {
  font-family: 'Orbitron', monospace;
  font-size: .52rem;
  color: rgba(200,16,46,.8);
  margin-left: 2px;
}

/* Ghost track — community baseline shown beneath user's interactive slider */
.fp-cat-ghost-track {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,.04);
  border-radius: 3px;
  margin-top: 2px;
}
.fp-cat-ghost-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  background: rgba(234,247,232,.18);
  border-radius: 3px;
}
.fp-cat-ghost-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7px; height: 7px;
  background: rgba(234,247,232,.35);
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(234,247,232,.2);
}

/* ── Sub-tab styling overrides ──────────────────────────────── */
.fp-sub-tab-wrap { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Responsive stack at narrow widths ──────────────────────── */
@media (max-width: 767px) {
  .fp-top-row { grid-template-columns: 1fr 1fr; }
  .fp-cta-box  { grid-column: 1 / -1; }
  .fp-slider-grid { grid-template-columns: 1fr; grid-template-rows: auto; overflow-y: auto; }
}

/* ════════════════════════════════════════════════════════════════════
   Film Detail Page — Layout v2 refinements
   ════════════════════════════════════════════════════════════════════ */

/* ── Top strip ── */
.fd-top {
  flex-shrink: 0;
  padding: .65rem 1.25rem .5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.15);
}

/* ── Title row ── */
.fd-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .4rem;
}
.fd-title-group {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 1;
  min-width: 0;
}
.fd-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #EAF7E8;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.fd-year {
  font-family: 'Orbitron', sans-serif;
  font-size: .85rem;
  color: rgba(234,247,232,.4);
  white-space: nowrap;
  flex-shrink: 0;
}
.fd-original-title {
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  color: rgba(234,247,232,.45);
  font-style: italic;
  margin: .15rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── RSI score with label ── */
.fd-rsi-score-wrap {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  flex-shrink: 0;
}
/* ── Realised Potential display (film-level) ── */
.fd-realised-potential-wrap {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin-top: .25rem;
  flex-shrink: 0;
}
.fd-rp-label {
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  color: rgba(234,247,232,.5);
  white-space: nowrap;
}
.fd-rp-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(234,247,232,.85);
  letter-spacing: .02em;
}
.fd-rsi-score-label {
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: rgba(234,247,232,.6);
  white-space: nowrap;
}
.fd-rsi-score {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  background: linear-gradient(135deg, #C8102E, #FF4D6D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Title right actions ── */
.fd-title-right {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
}

/* ── Watchlist text button ── */
.fd-watchlist-text-btn {
  background: rgba(200,16,46,.08);
  border: 1px solid rgba(200,16,46,.28);
  color: rgba(234,247,232,.7);
  padding: .32rem .75rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: all .2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.fd-watchlist-text-btn:hover { background: rgba(200,16,46,.18); color: #EAF7E8; border-color: rgba(200,16,46,.5); }
.fd-watchlist-text-btn.active { background: rgba(200,16,46,.22); color: #EAF7E8; border-color: rgba(200,16,46,.55); }

.fd-seen-text-btn {
  background: rgba(30,120,80,.08);
  border: 1px solid rgba(30,180,100,.28);
  color: rgba(234,247,232,.7);
  padding: .32rem .75rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: all .2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.fd-seen-text-btn:hover { background: rgba(30,180,100,.18); color: #EAF7E8; border-color: rgba(30,180,100,.5); }
.fd-seen-text-btn.active { background: rgba(30,180,100,.22); color: #EAF7E8; border-color: rgba(30,180,100,.55); }

/* ── Info bar (labeled sections) ── */
.fd-info-bar {
  display: flex;
  align-items: stretch;
  margin-bottom: .38rem;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  overflow: hidden;
}
.fd-info-sec {
  flex: 1;
  min-width: 0;
  padding: .28rem .55rem;
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  gap: .08rem;
}
.fd-info-sec:last-child { border-right: none; }
.fd-info-sec-lbl {
  font-family: 'Inter', sans-serif;
  font-size: .56rem;
  color: rgba(234,247,232,.27);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.fd-info-sec-val {
  font-family: 'Inter', sans-serif;
  font-size: .73rem;
  color: rgba(234,247,232,.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Plot ── */
.fd-plot {
  -webkit-line-clamp: 1;
}

/* ── Column headers ── */
.fd-col-hdr {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .48rem .65rem;
  background: rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.fd-col-num {
  font-family: 'Orbitron', sans-serif;
  font-size: .95rem;
  font-weight: 900;
  color: #C8102E;
  min-width: .7em;
  line-height: 1;
}
.fd-col-name {
  flex: 1;
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(234,247,232,.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.fd-col-wt {
  font-family: 'Orbitron', sans-serif;
  font-size: .6rem;
  color: rgba(200,16,46,.55);
  flex-shrink: 0;
}

/* ── Parameter rows — fill column height evenly ── */
.fd-prow {
  flex: 1;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .12rem .55rem;
  border-bottom: 1px solid rgba(255,255,255,.025);
  cursor: pointer;
  transition: background .15s;
  min-width: 0;
  overflow: hidden;
}
.fd-prow-num {
  font-size: .62rem;
  color: rgba(234,247,232,.22);
  min-width: 1.3em;
  flex-shrink: 0;
}
.fd-prow-name {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: .69rem;
  color: rgba(234,247,232,.78);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.fd-prow-score {
  font-family: 'Orbitron', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: rgba(234,247,232,.85);
  flex-shrink: 0;
}

/* ── Category avg — stacked, larger number ── */
.fd-col-avg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5rem .4rem;
  margin-top: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  flex-shrink: 0;
  gap: .08rem;
}
.fd-col-avg-lbl {
  font-family: 'Orbitron', sans-serif;
  font-size: .48rem;
  letter-spacing: .08em;
  color: rgba(234,247,232,.25);
  text-transform: uppercase;
  text-align: center;
}
.fd-col-avg-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  color: rgba(234,247,232,.82);
  line-height: 1;
  text-align: center;
}

/* ── Final score rows ── */
.fd-final-row {
  flex: 1;
  min-height: 22px;
  display: flex;
  align-items: center;
  padding: .15rem .5rem;
  gap: .25rem;
  border-bottom: 1px solid rgba(255,255,255,.03);
  overflow: hidden;
}
.fd-final-cat {
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  color: rgba(234,247,232,.48);
  min-width: 5.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-final-eq {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  color: rgba(234,247,232,.45);
  white-space: nowrap;
  overflow: hidden;
}
.fd-final-sub {
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  color: rgba(234,247,232,.72);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Overall box ── */
.fd-overall-box {
  margin: .4rem .45rem .3rem;
  padding: .45rem .45rem;
}
.fd-ov-label { font-size: .55rem; margin-bottom: .15rem; }
.fd-ov-val { font-size: 1.55rem; }

/* ── Genre boxes ── */
.fd-genre-box {
  margin: .12rem .45rem 0;
  padding: .28rem .4rem;
}
.fd-genre-name { font-size: .62rem; }
.fd-genre-score { font-size: .72rem; }

/* ── Bottom bar ── */
.fd-bottom-bar {
  padding: .3rem 1rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  overflow: hidden;
}
.fd-meta {
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  color: rgba(234,247,232,.4);
  white-space: nowrap;
}
.fd-meta-dot {
  color: rgba(234,247,232,.15);
  font-size: .65rem;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   Film Detail Page — Layout v3: genre in left col, fixed row heights,
   red scores, delineated rows, centered RSI score
   ════════════════════════════════════════════════════════════════════ */

/* ── Title row — 3-part layout so RSI Score sits in the middle ── */
.fd-title-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .4rem;
}
.fd-title-group {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  /* no flex:1 here — let it be natural width */
  flex-shrink: 1;
}
.fd-title-row > .fd-rsi-score-wrap {
  flex: 1;                    /* takes up the middle space */
  display: flex;
  align-items: baseline;
  justify-content: center;    /* centers RSI Score horizontally */
  gap: .35rem;
}
.fd-title-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
}

/* ── Tiny awards overlay inside card wrap ── */
.fd-awards-tiny {
  position: absolute;
  bottom: .6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .2rem;
  z-index: 3;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 90%;
  pointer-events: none;
}
.fd-awards-tiny img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  object-fit: cover;
  filter: brightness(.9);
}

/* ── Genre pill badges in left column ── */
.fd-genre-strip {
  flex-shrink: 0;
  display: flex;
  gap: .45rem;
  padding: .5rem .5rem .55rem;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.06);
}
.fd-genre-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(200,16,46,.25);
  border-radius: 50%;
  width: 68px;
  height: 68px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  gap: .05rem;
  flex-shrink: 0;
}
.fd-genre-pill:hover { border-color: rgba(200,16,46,.55); background: rgba(200,16,46,.08); }
.fd-genre-pill.active { border-color: rgba(200,16,46,.7); background: rgba(200,16,46,.12); }
.fd-genre-pill-name {
  font-family: 'Orbitron', sans-serif;
  font-size: .45rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(234,247,232,.45);
  text-align: center;
  line-height: 1.1;
}
.fd-genre-pill-score {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  color: #C8102E;
  line-height: 1;
}

/* ── Parameter rows — fixed universal height ── */
.fd-prow {
  flex: none;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: 0 .55rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
  transition: background .15s;
  min-width: 0;
  overflow: hidden;
}
/* alternating row tint for delineation */
.fd-col > .fd-prow:nth-child(odd)  { background: rgba(255,255,255,.012); }
.fd-col > .fd-prow:nth-child(even) { background: rgba(0,0,0,.08); }
.fd-prow:hover { background: rgba(200,16,46,.09) !important; }
.fd-prow-hl   { background: rgba(50,160,50,.1) !important; border-left: 2px solid rgba(80,200,80,.4); }

/* ── Parameter scores — red ── */
.fd-prow-score {
  font-family: 'Orbitron', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: #C8102E;
  flex-shrink: 0;
}
/* keep hi/lo as brighter/darker red variants */
.fd-score-hi { color: #FF4444; }
.fd-score-lo { color: #991020; }

/* ── Spacer that fills dead space below shorter columns ── */
.fd-col-spacer { flex: 1; }

/* ── Final score column — stat rows ── */
.fd-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .38rem .6rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  flex-shrink: 0;
  gap: .5rem;
}
.fd-stat-lbl {
  font-family: 'Orbitron', sans-serif;
  font-size: .5rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(234,247,232,.3);
}
.fd-stat-val {
  font-family: 'Orbitron', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  color: rgba(234,247,232,.7);
  flex-shrink: 0;
}

/* ── Weighted mean display ── */
.fd-weighted-mean {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .75rem .5rem .5rem;
  background: linear-gradient(135deg, rgba(200,16,46,.12), rgba(200,16,46,.06));
  border: 1px solid rgba(200,16,46,.25);
  border-radius: 8px;
  margin: .4rem .45rem;
}
.fd-wm-label {
  font-family: 'Orbitron', sans-serif;
  font-size: .52rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200,16,46,.6);
  margin-bottom: .2rem;
}
.fd-wm-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #C8102E, #FF4D6D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .15rem;
}
.fd-wm-sub {
  font-family: 'Inter', sans-serif;
  font-size: .6rem;
  color: rgba(234,247,232,.3);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ── Final rows get flex:none so they don't stretch ── */
.fd-final-row {
  flex: none;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  display: flex;
  align-items: center;
}
.fd-col-final > .fd-final-row:nth-child(odd)  { background: rgba(255,255,255,.012); }
.fd-col-final > .fd-final-row:nth-child(even) { background: rgba(0,0,0,.08); }

/* ════════════════════════════════════════════════════════════════════
   Film Detail Page — Layout v4 fixes
   ════════════════════════════════════════════════════════════════════ */

/* Fix 1: Awards — bottom-right of card */
.fd-awards-tiny {
  position: absolute;
  bottom: .55rem;
  right: .45rem;
  left: auto;
  transform: none;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  gap: .18rem;
  z-index: 10;
  max-width: 70%;
  pointer-events: auto;
}
.fd-awards-tiny img {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  object-fit: cover;
  cursor: default;
}

/* Fix 2: Category Avg — always anchored to bottom of column */
.fd-col-avg {
  margin-top: auto !important;
}

/* Fix 3: Universal row height — 45px */
.fd-prow {
  flex: none !important;
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
}
.fd-final-row {
  flex: none !important;
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
}

/* ════════════════════════════════════════════════════════════════════
   Film Detail — Left column v5: card natural height + sub-genre area
   ════════════════════════════════════════════════════════════════════ */

/* Card-wrap: shrink to image's natural height so awards overlay the image */
.fd-card-wrap {
  flex: 0 0 auto !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.fd-card-wrap img {
  height: auto !important;
  object-fit: fill !important;
  object-position: unset !important;
}

/* Sub-genre area: fills remaining left-column space below the card */
.fd-subgenre-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: .55rem .6rem .4rem;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .3rem .25rem;
}
.fd-subgenre-label {
  width: 100%;
  font-family: 'Orbitron', sans-serif;
  font-size: .47rem;
  letter-spacing: .1em;
  color: rgba(234,247,232,.22);
  text-transform: uppercase;
  margin-bottom: .15rem;
}
.fd-subgenre-genre-label {
  width: 100%;
  font-family: 'Orbitron', sans-serif;
  font-size: .47rem;
  letter-spacing: .1em;
  color: rgba(200,16,46,.55);
  text-transform: uppercase;
  margin-bottom: .1rem;
  margin-top: .35rem;
}
.fd-subgenre-genre-label:first-child {
  margin-top: 0;
}
.fd-subgenre-pill {
  font-size: .58rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  padding: .18rem .5rem;
  border-radius: 10px;
  border: 1px solid rgba(200,16,46,.35);
  color: rgba(234,247,232,.6);
  background: rgba(200,16,46,.07);
  white-space: nowrap;
  letter-spacing: .02em;
}

/* ── Shimmer CTA (film detail left column) ───────────────────────── */
.fd-shimmer-cta {
  padding: .55rem .6rem .5rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.fd-shimmer-btn {
  width: 100%;
  background: linear-gradient(270deg, #7b2ff7, #e040fb, #ff4081, #7b2ff7);
  background-size: 300% 300%;
  animation: shimmerPulse 3s ease infinite;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .04em;
  padding: .45rem .75rem;
  border-radius: 50px;
  cursor: pointer;
  transition: opacity .2s;
}
.fd-shimmer-btn:hover  { opacity: .85; }
.fd-shimmer-btn:disabled { opacity: .45; animation: none; cursor: not-allowed; }
.fd-shimmer-progress {
  margin-top: .5rem;
}
.fd-shimmer-bar-wrap {
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .3rem;
}
.fd-shimmer-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7b2ff7, #e040fb, #ff4081);
  border-radius: 999px;
  transition: width .5s ease;
}
.fd-shimmer-msg {
  font-size: .62rem;
  color: rgba(230,180,255,.7);
  font-family: 'Inter', sans-serif;
}