/* ---START style.css (CORRECTED - Indicator Span, Label Padding) --- */

/* --- General & Dark Theme --- */
:root {
    --background-color: #08060b;  /* Very dark with subtle purple tint */
    --card-background: #151218;   /* Dark with hint of purple */
    --header-background: #1a1a1a;
    --text-primary: #f1f1f1;
    --text-secondary: #cccccc;
    --text-muted: #aaaaaa;
    --accent-color: #7e57c2;
    --accent-color-light: #a381d8;
    --border-color: #333;
    --input-background: #282828;
    --input-border: #444;
    --hover-highlight: #777;
    --button-subtle-bg: #2d2d2d;
    --button-subtle-hover-bg: #444;
    --error-color: #ff8a80; /* Light red for errors */
    --error-background: rgba(255, 138, 128, 0.1); /* Faint red bg for error messages */
    --success-background: #284a29;
    --success-text: #c8e6c9;
    --success-border: #52a355;
    --font-primary: 'Nunito', sans-serif; /* For headers/titles */
    --font-secondary: 'Roboto', sans-serif; /* Base body text */
    --font-display: 'Lato', sans-serif;  /* For specific elements like card titles/labels */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    margin: 0;
    color: var(--text-primary);
    /* Dark purple gradient base with diagonal lines overlay */
    background: 
        /* Diagonal lines on top */
        repeating-linear-gradient(
            105deg,
            transparent,
            transparent 15px,
            rgba(255, 255, 255, 0.04) 15px,
            rgba(255, 255, 255, 0.04) 16px,
            transparent 16px
        ),
        /* Animated dark purple gradient underneath */
        linear-gradient(
            135deg,
            #08060b 0%,
            #0f0a14 30%,
            #08060b 50%,
            #0a0810 70%,
            #08060b 100%
        );
    background-size: auto, 400% 400%;
    animation: subtleGradientShift 25s ease infinite;
}

@keyframes subtleGradientShift {
    0% { background-position: 0 0, 0% 50%; }
    50% { background-position: 0 0, 100% 50%; }
    100% { background-position: 0 0, 0% 50%; }
}

/* When the profile page is open, reduce background noise so it reads like a full page (not a modal). */
body.profile-open {
    background: #08060b;
    animation: none;
}

/* Profile should feel like an app page: hide the marketing/site footer while in /profile. */
body.profile-open #site-footer {
    display: none;
}

/* ==========================================================
   Debug: center overlay (enable via `?debugCenter=1`)
   ========================================================== */
/* Prefer DOM overlays over body::before (more reliable across browsers) */
#debug-center-line,
#debug-container-line,
#debug-qpr01-line {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 2px;
    z-index: 999999;
    pointer-events: none;
}
#debug-center-line { background: rgba(233, 30, 99, 0.70); }
#debug-container-line { background: rgba(46, 204, 113, 0.70); }
#debug-qpr01-line { background: rgba(126, 87, 194, 0.85); }

#debug-center-badge {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 1000000;
    pointer-events: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 8px 10px;
    backdrop-filter: blur(6px);
}
body.debug-center .question[data-question-id="QPR01"] {
    outline: 2px solid rgba(126, 87, 194, 0.9);
    outline-offset: 2px;
}
body.debug-center #prediction-interaction-area,
body.debug-center #single-question-container,
body.debug-center #profile-content-pane {
    outline: 1px dashed rgba(255, 255, 255, 0.25);
    outline-offset: -1px;
}

/* ==========================================================
   QPR01 optical centering (Profile + MPM + GOM)
   When a right-side scrollbar is present, true-center content can look ~half-scrollbar-width left.
   We correct ONLY while QPR01 is visible, so other questions/layouts are unaffected.
   ========================================================== */

/* Profile: shift the available padding while QPR01 is the active question */
#profile-view .category-questions-container:has(.question.profile-question-item.is-carousel-active[data-question-id="QPR01"]) {
    padding-left: calc(var(--scrollbar-width, 0px) / 2);
    padding-right: 0;
}

/* MPM: shift interaction area slightly right while QPR01 is on screen */
#prediction-interaction-area:has(.question[data-question-id="QPR01"]) {
    padding-left: calc(75px + (var(--scrollbar-width, 0px) / 2));
    padding-right: 75px;
}

/* GOM: shift single-question container while QPR01 is on screen */
#single-question-container:has(.question.single-question-active[data-question-id="QPR01"]) {
    padding-left: calc(65px + (var(--scrollbar-width, 0px) / 2));
    padding-right: 65px;
}

/* === Profile-only carousel for category questions (do not affect MPM/GOM) === */
#profile-view .profile-question-carousel-controls.hidden { display: none !important; }
#profile-view .profile-question-carousel-controls {
    /* MPM-like overlay: arrows float at left/right of the active question block */
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* Profile carousel arrows: reuse the same arrow buttons as MPM (nav-arrow-button). */
#profile-view .profile-question-carousel-controls .nav-arrow-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
#profile-view .carousel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}

/* Position arrows relative to the active question block (set via JS vars) */
#profile-view .profile-question-carousel-controls .carousel-prev,
#profile-view .profile-question-carousel-controls .carousel-next {
    position: absolute;
    top: var(--profile-carousel-y, 50%);
    transform: translateY(-50%);
    pointer-events: auto;
}
#profile-view .profile-question-carousel-controls .carousel-prev { left: var(--profile-carousel-prev-x, 22px); }
#profile-view .profile-question-carousel-controls .carousel-next { left: var(--profile-carousel-next-x, calc(100% - 66px)); }
#profile-view .carousel-dots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#profile-view .carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    padding: 0;
}
#profile-view .carousel-dot.active {
    background: rgba(163, 129, 216, 0.95);
}
#profile-view .question.profile-question-item.is-carousel-hidden {
    display: none !important;
}

/* Profile-only: default to vertically centering the active question (non-favorites).
   This removes the need for per-question centering tweaks (e.g., QPR08). */
#profile-view .category-questions-container:has(.question.profile-question-item.is-carousel-active):not(:has(.tiered-favorites-component)) {
    justify-content: center;
    align-items: center;
}

/* === Profile-only: QPR01 should match MPM Scale5 layout (vertical stacked buttons) === */
/* Center the whole block (question + answers) in the available space for Emotions & Intensity */
#profile-view .category-questions-container:has(.question.profile-question-item.is-carousel-active[data-question-id="QPR01"]) {
    /* Center the active QPR01 question within the remaining content area */
    justify-content: center;
    align-items: center;
}
#profile-view .question.profile-question-item.is-carousel-active[data-question-id="QPR01"] {
    /* Keep the overall block comfortably sized; we align prompt + answers via inner max-width. */
    width: min(760px, 100%);
    margin-top: 0;
    margin-bottom: 0;
}
#profile-view .question.profile-question-item[data-question-id="QPR01"] .profile-question-text {
    text-align: center;
    width: 100%;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

/* Profile-only: remove required asterisk (MPM/GOM unaffected) */
#profile-view .required-indicator {
    display: none !important;
}

/* === Profile-only (non-favorites): shared “clean + symmetrical” column layout === */
/* Apply to all profile questions except the tiered favorites surfaces. */
#profile-view .question.profile-question-item:not(:has(.tiered-favorites-component)) {
    --profile-answer-column-width: 580px;
}

/* Keep prompt aligned to the same column as the answers. */
#profile-view .question.profile-question-item:not(:has(.tiered-favorites-component)) > label.profile-question-text:not(.sr-only) {
    width: 100%;
    max-width: var(--profile-answer-column-width);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
    text-align: center;
}

/* Vertical “MPM-style” Scale5 cards in profile */
#profile-view .question.profile-question-item:not(:has(.tiered-favorites-component)) .scale5-container.profile-scale5--mpm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    max-width: var(--profile-answer-column-width);
    width: 100%;
    margin: 0 auto 20px auto;
    padding: 0;
}
#profile-view .question.profile-question-item:not(:has(.tiered-favorites-component)) .scale5-container.profile-scale5--mpm .scale5-label {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 84px;
    font-size: 1.15em;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    box-shadow: none;
    transform: none;
}
#profile-view .question.profile-question-item:not(:has(.tiered-favorites-component)) .scale5-container.profile-scale5--mpm .scale5-label:hover {
    background-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}
#profile-view .question.profile-question-item:not(:has(.tiered-favorites-component)) .scale5-container.profile-scale5--mpm .scale5-label:has(input:checked) {
    background-color: var(--accent-color);
    color: white;
    transform: none;
}
#profile-view .question.profile-question-item:not(:has(.tiered-favorites-component)) .scale5-container.profile-scale5--mpm .scale5-label span br {
    display: none;
}

/* Radio / checkbox: keep a single centered column */
#profile-view .question.profile-question-item:not(:has(.tiered-favorites-component)) .profile-input-area .radio-label,
#profile-view .question.profile-question-item:not(:has(.tiered-favorites-component)) .profile-input-area .checkbox-label {
    width: 100%;
    max-width: var(--profile-answer-column-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    justify-content: center;
}
#profile-view .question.profile-question-item:not(:has(.tiered-favorites-component)) .profile-input-area .checkbox-group {
    width: 100%;
    max-width: var(--profile-answer-column-width);
    margin-left: auto;
    margin-right: auto;
}

#profile-view .question.profile-question-item[data-question-id="QPR01"] .scale5-container.profile-scale5--mpm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    max-width: 580px;
    width: 100%;
    margin: 0 auto 20px auto;
    padding: 0;
}
#profile-view .question.profile-question-item[data-question-id="QPR01"] .scale5-container.profile-scale5--mpm .scale5-label {
    width: 100%;
    box-sizing: border-box; /* critical: prevent padding from making cards wider than container */
    height: auto;
    min-height: 84px;
    font-size: 1.15em;
    padding: 20px 18px;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    box-shadow: none;
    transform: none;
}
#profile-view .question.profile-question-item[data-question-id="QPR01"] .scale5-container.profile-scale5--mpm .scale5-label:hover {
    background-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: none;
}
#profile-view .question.profile-question-item[data-question-id="QPR01"] .scale5-container.profile-scale5--mpm .scale5-label:has(input:checked) {
    background-color: var(--accent-color);
    color: white;
    box-shadow: none;
    transform: none;
}
#profile-view .question.profile-question-item[data-question-id="QPR01"] .scale5-container.profile-scale5--mpm .scale5-label span {
    font-size: 1.15em;
    margin-top: 0;
    font-weight: 500;
}
#profile-view .question.profile-question-item[data-question-id="QPR01"] .scale5-container.profile-scale5--mpm .scale5-label span br {
    display: none;
}

/* Profile should behave like an "app page": prevent body scroll so panes handle scrolling.
   IMPORTANT: do NOT apply this while a modal is open (avoids impacting MPM / other modals). */
body.profile-open:not(.modal-open) {
    overflow: hidden;
}

/* The global header has a default margin-bottom for home. In /profile, that creates a visible "gap"
   and also breaks our viewport height math (causing bottom clipping). */
body.profile-open header {
    margin-bottom: 0;
}

/* In profile, remove the nav drop shadow (more "app page", less "floating header"). */
body.profile-open header {
    box-shadow: none;
}

/* Ensure views take up remaining space so footer sits at bottom on short pages */
.view {
    flex: 1 0 auto;
}

/* ============================= */
/* Static Pages (Footer Routes)  */
/* ============================= */
.static-page {
    width: 100%;
    padding: 30px 30px 60px;
    box-sizing: border-box;
}

.static-page-inner {
    max-width: 980px;
    margin: 0 auto;
    /* Solid dark background with subtle radial glow */
    background: 
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(126, 87, 194, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(126, 87, 194, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, rgba(18, 18, 22, 0.98) 0%, rgba(12, 12, 16, 0.99) 100%);
    border: 1px solid rgba(126, 87, 194, 0.18);
    border-radius: 18px;
    padding: 24px 22px;
    box-shadow: 
        0 18px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.static-back-link {
    display: inline-block;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 14px;
}

.static-back-link:hover {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: underline;
}

#static-page-title {
    font-family: var(--font-primary);
    margin: 0 0 10px 0;
}

.static-page-content {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
}

.static-page-content h2 {
    margin-top: 18px;
}

.static-page-content a {
    color: rgba(255, 255, 255, 0.92);
}

/* ============================= */
/* Coming Soon Template          */
/* ============================= */

/* Hide default back link and title when using coming soon template */
.static-page-content:has(.coming-soon-template) ~ #static-page-title,
.static-page-inner:has(.coming-soon-template) > .static-back-link,
.static-page-inner:has(.coming-soon-template) > #static-page-title {
    display: none;
}

.coming-soon-template {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px 56px;
}

/* Minimal back button */
.coming-soon-back {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-family: var(--font-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    background: transparent;
    border: none;
    transition: color 0.2s ease;
}

.coming-soon-back:hover {
    color: rgba(255, 255, 255, 0.85);
}

.coming-soon-back svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform 0.2s ease;
}

.coming-soon-back:hover svg {
    transform: translateX(-3px);
}

.coming-soon-icon-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 28px;
}

/* Animated glow ring */
.coming-soon-icon-wrap::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        var(--accent-color) 25%,
        transparent 50%,
        var(--accent-color-light) 75%,
        transparent 100%
    );
    animation: coming-soon-spin 4s linear infinite;
    opacity: 0.35;
}

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

.coming-soon-icon-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(126, 87, 194, 0.18), rgba(163, 129, 216, 0.08));
    border: 1px solid rgba(126, 87, 194, 0.35);
    border-radius: 50%;
    backdrop-filter: blur(8px);
}

.coming-soon-icon-inner svg {
    width: 56px;
    height: 56px;
    fill: none;
    stroke: var(--accent-color-light);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.coming-soon-label {
    display: inline-block;
    padding: 6px 18px;
    margin-bottom: 18px;
    font-family: var(--font-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-color-light));
    border-radius: 999px;
    box-shadow: 0 4px 18px rgba(126, 87, 194, 0.35);
}

.coming-soon-headline {
    font-family: var(--font-primary);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px;
    line-height: 1.25;
}

.coming-soon-subtext {
    max-width: 420px;
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 32px;
}

.coming-soon-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 36px;
}

.coming-soon-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    transition: border-color 0.2s, background 0.2s;
}

.coming-soon-feature:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

.coming-soon-feature svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent-color-light);
    stroke-width: 2;
    fill: none;
}

.coming-soon-notify {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px;
    background: rgba(126, 87, 194, 0.08);
    border: 1px solid rgba(126, 87, 194, 0.22);
    border-radius: 14px;
    max-width: 380px;
}

.coming-soon-notify-text {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin: 0;
}

.coming-soon-notify-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-color-light));
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 16px rgba(126, 87, 194, 0.3);
}

.coming-soon-notify-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(126, 87, 194, 0.4);
}

.coming-soon-notify-link svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .coming-soon-template {
        padding: 32px 16px 40px;
    }
    .coming-soon-icon-wrap {
        width: 100px;
        height: 100px;
    }
    .coming-soon-icon-inner svg {
        width: 44px;
        height: 44px;
    }
    .coming-soon-headline {
        font-size: 1.35rem;
    }
    .coming-soon-features {
        flex-direction: column;
        align-items: stretch;
    }
    .coming-soon-notify {
        padding: 18px;
    }
}

/* Platform logos in coming soon features */
.coming-soon-platform-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* App Store Badges */
.coming-soon-app-stores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.app-store-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    cursor: not-allowed;
    opacity: 0.7;
    transition: opacity 0.2s, border-color 0.2s;
}

.app-store-badge:hover {
    opacity: 0.85;
    border-color: rgba(255, 255, 255, 0.22);
}

.app-store-badge img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.app-store-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.1;
}

.app-store-small {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.app-store-big {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

/* ============================= */
/* Footer (IMDb-inspired)        */
/* ============================= */
#site-footer {
    width: 100%;
    padding: 34px 0 26px;
    /* Keep the site-wide diagonal background visible (no footer "black box") */
    background: transparent;
    border-top: none; /* remove divider line */
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 22px;
    box-sizing: border-box;
}

.footer-inner a {
    text-decoration: none;
}

.footer-top {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.footer-card {
    /* More IMDb-like: narrower card */
    width: min(520px, 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-decoration: none !important;
    padding: 16px 18px;
    border-radius: 16px;
    /* Solid black interior (no diagonal lines) + subtle “presence” glow */
    background: #000;
    background-image: radial-gradient(120% 140% at 20% 10%, rgba(163, 129, 216, 0.26), transparent 58%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 18px 52px rgba(0, 0, 0, 0.50),
        0 0 0 1px rgba(163, 129, 216, 0.22),
        0 0 44px rgba(163, 129, 216, 0.20);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.footer-card:hover {
    transform: translateY(-1px);
    background: #000;
    background-image: radial-gradient(120% 140% at 20% 10%, rgba(163, 129, 216, 0.34), transparent 58%);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(163, 129, 216, 0.28),
        0 0 64px rgba(163, 129, 216, 0.28);
    text-decoration: none !important;
}

.footer-card-title {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 2px;
    text-decoration: none !important;
}

.footer-app-platforms {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.footer-platform-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.7;
    transition: opacity 0.2s;
}

.footer-card:hover .footer-platform-logo {
    opacity: 0.95;
}

/* Legacy badge styles - keeping for backward compatibility */
.footer-platform-badge-legacy {
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.2px;
}

.footer-platform-text {
    line-height: 1;
}

.footer-card-subtitle {
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.92rem;
    font-weight: 600;
}

.footer-qr {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    overflow: hidden;
}

.footer-qr-svg {
    width: 62px;
    height: 62px;
    display: block;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 22px;
    margin: 18px 0 18px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    font-weight: 650;
    font-size: 0.98rem;
}

.footer-links a:hover {
    color: rgba(255, 255, 255, 0.95);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo-img {
    height: 42px;
    width: auto;
    opacity: 0.82;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}

.footer-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
}

@media (max-width: 560px) {
    .footer-card {
        padding: 14px 14px;
    }
    .footer-qr {
        width: 58px;
        height: 58px;
    }
    .footer-qr-svg {
        width: 52px;
        height: 52px;
    }
    .footer-links {
        gap: 12px 16px;
    }
    .footer-links a {
        font-size: 0.95rem;
    }
    .footer-logo-img {
        height: 36px;
    }
}

/* Prevent background scrolling when modal is open */
body.modal-open {
    overflow: hidden;
}

h1, h2, h3 {
    color: var(--text-primary);
    margin-bottom: 0.8em;
}

#home-view {
    width: 100%; /* Take full available width from parent (body) */
    margin-left: auto;   /* Center the block if max-width is hit */
    margin-right: auto;  /* Center the block if max-width is hit */
    
    /* This padding creates space INSIDE #home-view, around your sections */
    padding: 20px 30px; /* Example: 20px top/bottom, 30px left/right "gutters" */
                       /* Adjust these L/R values for desired space from screen edge */
    
    box-sizing: border-box; 
}

/* Section header with icon */
#home-view > section > .section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px 0;
}

.section-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Default h2 - used for main page sections */
#home-view > section > .section-header > h2,
#home-view > section > h2 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    border: none;
}

/* Section subtitle with vertical accent bar and chevron */
#home-view > section > .section-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    padding-left: 10px;
    letter-spacing: 0.01em;
    position: relative;
}

/* Shorter accent bar using pseudo-element */
#home-view > section > .section-subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: linear-gradient(to bottom, var(--accent-color), #e91e63);
    border-radius: 2px;
}

/* Chevron after subtitle */
#home-view > section > .section-subtitle::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    opacity: 0.7;
}

/* Default paragraph style */
p {
    color: var(--text-secondary);
    margin-top: 0;
    margin-bottom: 0.5em;
}

a {
    color: var(--accent-color-light);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

main {
    padding: 20px;
    max-width: 1600px;
    margin: 0 auto;
}

/* --- Header, Logo, Tagline, Search --- */
header {
    display: flex; /* Use flexbox for header layout */
    justify-content: space-between; /* Space out logo, search, nav */
    align-items: flex-start;
    padding: 10px 30px; /* Adjust padding */
    /* Deep purple flow gradient */
    background: linear-gradient(90deg, #1a1a1a 0%, #2d1f47 50%, #1a1a1a 100%);
    margin-bottom: 0; /* Changed from 30px to 0, #profile-view will handle its own top margin */
    gap: 20px; /* Add gap between header items */
    /* --- REMOVED conflicting properties --- */
    border-bottom: none;
    /* background-image: none; <-- REMOVED */
    /* background-origin: initial; <-- REMOVED (reset by background shorthand) */
    /* background-clip: initial; <-- REMOVED (reset by background shorthand) */
    /* --- End Removal --- */
    box-shadow: none;
    flex-shrink: 0; /* Prevent header from shrinking if content below is too large */
    position: sticky; /* Or 'fixed' if you prefer, this is important */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100; 
    box-sizing: border-box; 
}

/* Base style for ALL view containers */
.view {
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative; /* Position needed for z-index to apply */
    z-index: 10;      /* Example z-index */
}

/* Utility class to hide elements */
.hidden {
    display: none !important; /* Use !important to override base .view style */
}

/* --- END ADDITION --- */

#logo-container {
    margin-bottom: 15px;
}

#tagline {
    font-size: 1.4em;
    color: var(--accent-color-light);
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 25px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
#tagline strong {
     font-weight: 700;
}

#search-wrapper {
    max-width: 850px;
    margin: 0 auto;
}

#search-container {
    display: flex;
    /* justify-content: center; <--- REMOVE: Not needed with relative positioning */
    align-items: center;
    gap: 10px;
    position: relative; /* <<< ADD: Needed for absolute icon positioning */
}

#search-input {
    flex-grow: 1;
    padding: 9px 45px 9px 20px; /* <<< UPDATED: Increase right padding for icon */
    border: 1px solid transparent; /* <<< CHANGED: Make border transparent by default */
    border-radius: 25px; /* Keep rounding */
    /* --- UPDATED Background and Text Color --- */
    background-color: rgba(0, 0, 0, 0.25); /* Semi-transparent dark */
    color: var(--text-primary); /* Brighter text */
    text-shadow: none; /* Ensure no text shadow on input/placeholder */
    font-size: 1em;
    transition: box-shadow 0.2s ease, background-color 0.2s ease; /* Updated transition */
    outline: none; /* Remove default outline */
}
#search-input::placeholder {
    color: var(--text-primary);
    font-style: italic;
    opacity: 0.85;
    text-shadow: none;
    transition: opacity 0.15s ease;
}

/* Hide placeholder on focus - just show cursor */
#search-input:focus::placeholder {
    opacity: 0;
}
#search-input:focus {
    outline: none;
    background-color: rgba(0, 0, 0, 0.4);
    border-color: transparent;
    /* --- ADJUSTED: Remove the outer glow part --- */
    box-shadow: 0 0 0 2px var(--accent-color-light); /* Only keep inner border effect */
    /* Removed: , 0 0 8px rgba(163, 129, 216, 0.4); */
    /* --- END ADJUSTMENT --- */
}

#search-icon-button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    /* --- CHANGE THIS LINE --- */
    color: var(--text-primary); /* Use primary text color (near white) */
    /* --- END CHANGE --- */
    border-radius: 50%;
    transition: color 0.2s ease, background-color 0.2s ease;
}

#search-icon-button svg {
    display: block; /* Prevent extra space */
    width: 20px; /* Control icon size */
    height: 20px;
}

#search-icon-button:hover {
    color: var(--text-primary); /* Brighter icon on hover */
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background highlight */
}

#search-icon-button:focus {
    outline: none; /* Keep removing default outline */
    color: var(--text-primary); /* Keep brighter icon color on focus for visual feedback */
    /* Remove the box-shadow property entirely */
    /* box-shadow: 0 0 0 2px var(--accent-color-light); */
    background-color: rgba(255, 255, 255, 0.15); /* Optional: Slightly enhance the background highlight on focus */
}

/* --- Search Clear Button --- */
#search-clear-button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0.6;
    transition: opacity 0.15s ease, color 0.15s ease;
}

#search-clear-button:hover {
    opacity: 1;
    color: var(--text-primary);
}

#search-clear-button:active {
    transform: translateY(-50%) scale(0.92);
}

#search-clear-button.hidden {
    display: none;
}

#search-clear-button svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* Hide search icon when clear button is visible */
#search-container.has-value #search-icon-button {
    display: none;
}

/* --- Custom Recent Searches Dropdown --- */
/* Search bar "grows" to include recent searches - one unified element */
#recent-searches-dropdown {
    position: absolute;
    top: calc(100% - 1px); /* Overlap by 1px to hide any seam */
    left: 0;
    right: 0;
    margin-top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(163, 129, 216, 0.4); /* Subtle accent border */
    border-top: none; /* No top border - seamless with input */
    border-radius: 0 0 22px 22px;
    overflow: hidden;
    z-index: 1000;
}

#recent-searches-dropdown.hidden {
    display: none;
}

/* When dropdown is open, search input merges with it */
#search-container.dropdown-open #search-input {
    border-radius: 22px 22px 0 0;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(163, 129, 216, 0.4);
    border-bottom: none;
    box-shadow: none;
}

#recent-searches-list {
    padding: 8px 0;
}

.recent-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background-color 0.12s ease;
    color: var(--text-secondary);
    font-size: 0.95em;
}

.recent-search-item:hover {
    background: rgba(126, 87, 194, 0.15);
    color: var(--text-primary);
}

.recent-search-item:active {
    background: rgba(126, 87, 194, 0.25);
}

/* Clock icon for recent searches */
.recent-search-item::before {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.recent-search-item:hover::before {
    opacity: 0.8;
}

/* Clear button for individual items */
.recent-search-clear {
    margin-left: auto;
    padding: 4px 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75em;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
    border-radius: 4px;
}

.recent-search-item:hover .recent-search-clear {
    opacity: 1;
}

.recent-search-clear:hover {
    color: var(--error-color);
    background: rgba(255, 138, 128, 0.1);
}

/* Empty state */
.recent-searches-empty {
    padding: 16px 18px;
    color: var(--text-muted);
    font-size: 0.9em;
    font-style: italic;
    text-align: center;
}

/* Header for the dropdown */
.recent-searches-header {
    padding: 10px 18px 6px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 4px;
}

/* --- Section Styling (For main page sections) --- */
section:not(.modal) { /* Exclude modal from default section margin */
    margin-bottom: 40px;
    position: relative; /* For absolute positioned children like arrows */
}

/* --- Horizontal Scrolling Media Lists --- */
.media-list-wrapper {
    position: relative;
    margin: 0 -10px; /* Allow arrows to slightly overlap */
    padding: 0 10px; /* Counteract negative margin */
}

.media-list {
    display: flex;
    overflow-x: auto;
    overflow-y: visible; /* Allow cards to lift up on hover without clipping */
    padding-top: 8px; /* Room for card lift on hover */
    padding-bottom: 20px; /* Prevent bottom content clipping */
    gap: 18px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */

    /* --- Hide Standard Scrollbar --- */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
/* Webkit Scrollbar Styles */
.media-list::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
    /* You can also use width/height: 0; */
    /* width: 0; */
    /* height: 0; */
}

/* Base styles for media items and 'more' card */
.media-item, .more-item {
    border-radius: 12px;   /* <<< Keep Shared Radius */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 200px;          /* Keep Shared Width */
    flex-shrink: 0;
    display: flex;         /* Keep Shared Flex */
    flex-direction: column;/* Keep Shared Flex Direction */
    min-height: 480px;     /* Keep Shared Min Height */
    position: relative;    /* Keep for pseudo-elements/positioning */
    box-sizing: border-box;/* Good practice */
}

/* --- Media Item Specific Styles --- */
.media-item {
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    /* Remove or adjust min-height to allow growth */
    /* min-height: 480px; */
    min-height: 430px; /* Start slightly smaller */
    height: auto; /* Let content determine height */
    position: relative;
    box-sizing: border-box;
    background-color: var(--card-background); /* Re-ensure background color */
    text-align: left;
    overflow: hidden; /* Keep overflow hidden */
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Hover effect for standard media item */
.media-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5); /* Reduced shadow */
    &::before { /* Show glow */
        opacity: 0.6;
    }
}
/* --- End Media Item Specific --- */

/* --- More Item Specific Styles --- */
.more-item {
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 0.03em;
    color: #fff;
    box-shadow: none;
    
    /* Subtle border */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Translucent gradient with dark purple hints */
    background: linear-gradient(
        145deg,
        rgba(80, 60, 100, 0.25) 0%,
        rgba(30, 28, 38, 0.7) 50%,
        rgba(60, 50, 80, 0.2) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* Smooth transitions */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.more-item:hover {
    transform: translateY(-4px);
    border-color: rgba(126, 87, 194, 0.4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    background: linear-gradient(
        145deg,
        rgba(90, 70, 120, 0.35) 0%,
        rgba(35, 32, 45, 0.8) 50%,
        rgba(70, 55, 95, 0.3) 100%
    );
}
/* --- End More Item Specific --- */

/* --- Gradient Glow Hover Effect --- */
.media-item::before { /* Create the pseudo-element for the glow */
    content: '';
    position: absolute;
    top: -3px; bottom: -3px; /* Adjust offset for border thickness */
    left: -3px; right: -3px;
    z-index: -1; /* Place it behind the card content */
    border-radius: 15px; /* Slightly larger radius than the card */
    background: conic-gradient( /* Or linear-gradient - experiment! */
        from 90deg at 50% 50%,
        var(--accent-color),       /* Purple */
        #e91e63,                   /* Pinkish (example) */
        #ff9800,                   /* Orange (example) */
        var(--accent-color-light), /* Lighter Purple/Accent */
        var(--accent-color)        /* Loop back to Purple */
    );
    filter: blur(8px); /* Apply blur for the glow effect */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out; /* Smooth fade */
    pointer-events: none; /* Don't interfere with clicks */
}

.media-item:hover::before {
    opacity: 0.6; /* Fade in the glow on hover */
}

.media-item > img {
    width: 100%; height: 300px; object-fit: cover; display: block;
    /* border-radius: 8px 8px 0 0; */ /* Current */
    border-radius: 12px 12px 0 0;   /* <<< Updated top corners */
    margin: 0;
}

.media-item .item-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows container to grow */
    justify-content: flex-start;
    overflow: hidden;
    /* Add transition for smooth height change */
    transition: height 0.3s ease-out;
}

.media-item h3 {
    font-family: 'Lato', sans-serif; /* <<< ADD THIS LINE */
    font-weight: 700;              /* <<< ADD/ADJUST: Explicitly use bold weight */
    font-size: 0.98em;              /* Keep or adjust size */
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0 0 5px 0;
    /* Limit title to 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em;
    flex-shrink: 0;
}

.media-item .ratings-container {
    /* --- Styles for when HIDDEN --- */
    display: flex; /* Use Flex */
    flex-direction: column; /* Stack bars vertically */
    gap: 6px; /* Space between bars */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0 5px; /* Only side padding when hidden */
    box-sizing: border-box;
    transition: opacity 0.2s ease-out 0.1s,
                max-height 0.3s ease-out 0.1s,
                padding-top 0.3s ease-out 0.1s,
                padding-bottom 0.3s ease-out 0.1s,
                border-top-width 0.3s ease-out 0.1s;
    pointer-events: none;
    width: 100%;
    border-top: 0px solid transparent; /* Start border transparent */
}
/* Webkit Scrollbar for Ratings */
.media-item .ratings-container::-webkit-scrollbar { width: 5px; }
.media-item .ratings-container::-webkit-scrollbar-track { background: var(--card-background); }
.media-item .ratings-container::-webkit-scrollbar-thumb { background-color: var(--input-border) ; border-radius: 3px; border: 1px solid var(--card-background); }


.media-item .rating-logo {
    height: 11px;
    width: auto;
    margin-right: 4px;
    vertical-align: middle;
    object-fit: contain;
    flex-shrink: 0;
}

.media-item .rating-label { /* For text labels like RT, MC */
    font-weight: bold;
    color: var(--text-secondary);
    margin-right: 5px;
    min-width: 30px; /* Align values */
    display: inline-block;
    flex-shrink: 0;
}

/* --- Styles for Hiding/Showing Secondary Ratings --- */
.media-item .rating-line.secondary-rating {
    opacity: 0;
    max-height: 0;
    margin: 0 !important; /* Ensure no margin when hidden */
    padding: 0;
    border-top: none;
    overflow: hidden;
    transition: opacity 0.2s ease-out 0.1s,
                max-height 0.3s ease-out 0.1s,
                margin 0.3s ease-out 0.1s, /* Add margin to transition */
                padding 0.3s ease-out 0.1s;
    pointer-events: none;
}

.media-item:hover .ratings-container {
    opacity: 1;
    max-height: 130px; /* <<< REDUCED max-height for shorter bars */
    padding-top: 10px;
    padding-bottom: 12px;
    padding-left: 5px;
    padding-right: 5px;
    border-top: 1px solid var(--input-border);
    pointer-events: auto;
    margin: 0;
}

.rating-bar-track {
    position: relative;
    width: 100%;
    height: 18px; /* Keep smaller height */
    background-color: transparent;
    border-radius: 0;
    /* --- CHANGE: Make visible for mask testing --- */
    overflow: visible;
    border: none;
    margin-bottom: 2px;
}

/* --- TRY 3 --- */
.rating-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 0%; /* Width set inline */
    border-radius: 9px; /* Keep fully rounded */
    /* Base color/classes MUST be applied here */
    background-color: var(--text-muted);
    transition: width 0.4s ease-out;
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding-left: 25px; /* Keep base padding-left (may need adjustment) */
    padding-right: 30px;
    z-index: 1; /* Below logo */
}
/* Mask for TMDb (Assume wider logo, shift mask center slightly right) */
.rating-bar-fill.fill-tmdb {
    -webkit-mask-image: radial-gradient(ellipse 35px 23px at 20px 50%, transparent 0%, transparent 68%, black 75%); /* <<< X = 14px */
    mask-image: radial-gradient(ellipse 35px 23px at 20px 50%, transparent 0%, transparent 68%, black 75%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
}

/* Mask for IMDb (Assume slightly narrower than TMDb, shift less) */
.rating-bar-fill.fill-imdb {
    -webkit-mask-image: radial-gradient(ellipse 35px 23px at 18px 50%, transparent 0%, transparent 68%, black 75%); /* <<< X = 14px */
    mask-image: radial-gradient(ellipse 35px 23px at 18px 50%, transparent 0%, transparent 68%, black 75%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
}

/* Mask for RT & MC (Assume narrowest logos, use original 'Try 3' position or shift slightly left) */
.rating-bar-fill.fill-rt-fresh,
.rating-bar-fill.fill-rt-rotten,
.rating-bar-fill.fill-mc-high,
.rating-bar-fill.fill-mc-medium,
.rating-bar-fill.fill-mc-low {
    -webkit-mask-image: radial-gradient(ellipse 20px 18px at 12px 50%, transparent 0%, transparent 68%, black 75%); /* <<< X = 12px (Base from Try 3) */
    mask-image: radial-gradient(ellipse 20px 18px at 12px 50%, transparent 0%, transparent 68%, black 75%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
}
/* --- NEW: Add Pseudo-element for the curve --- */
.rating-bar-fill::before {
    content: '';
    position: absolute;
    left: -1px; /* Slightly overlap left edge */
    top: 0;
    bottom: 0;
    width: 18px; /* <<< Width of the curve area (approx logo width + desired curve extent) - ADJUST */
    /* --- Create curve using border-radius --- */
    /* Make it the SAME color as the parent fill bar */
    background-color: inherit; /* Inherit from parent's fill color class */
    /* Curve the top-right and bottom-right corners */
    border-top-right-radius: 9px; /* Half the bar height */
    border-bottom-right-radius: 9px; /* Half the bar height */
    /* --- Hide left side (straight edge) --- */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    z-index: 1; /* Below score text, above main fill maybe (or same level) */

    /* Ensure it inherits the actual fill color dynamically */
    /* Note: Direct inheritance of parent's background might not work reliably across browsers
       if parent uses classes. We might need JS or duplicating color classes. */
    /* Let's rely on the class-based coloring applied to .rating-bar-fill itself for now */
}
/* --- Color Class Application (Needs careful testing) --- */
/* Apply fill colors to the MAIN .rating-bar-fill element.
   The ::before element should pick these up via 'inherit' if supported,
   or we need to duplicate the color rules for .rating-bar-fill::before */

   .rating-bar-fill.fill-imdb { background-color: #f5c518; }
   .rating-bar-fill.fill-tmdb { background-color: #01d277; }
   .rating-bar-fill.fill-rt-fresh { background-color: #fa320a; }
   .rating-bar-fill.fill-rt-rotten { background-color: #639e4f; }
   .rating-bar-fill.fill-mc-high { background-color: #66cc33; }
   .rating-bar-fill.fill-mc-medium { background-color: #ffcc33; }
   .rating-bar-fill.fill-mc-low { background-color: #ff6666; }
   /* --- End Color Classes --- */
   .rating-bar-track .rating-logo {
    position: absolute;
    left: 5px; /* Indent logo slightly */
    top: 50%;
    transform: translateY(-50%);
    height: 14px; /* Control visual logo size */
    width: auto;
    background-color: transparent; /* Ensure transparent */
    padding: 0;
    z-index: 2; /* <<< ABOVE the fill bar */
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); /* Keep shadow for floating */
    border-radius: 0;
    box-sizing: content-box;
}
/* Find and Modify this rule */
.rating-bar-track .rating-logo img {
    height: 14px; /* Control visual logo size */
    width: auto;
    display: block;
    object-fit: contain;
    margin-left: 5px; /* Indent image slightly from the left edge */
    /* --- Remove relative positioning and z-index (not needed) --- */
    /* position: relative; */
    /* z-index: 2; */
 }
/* RT logo specific adjustment if needed */
.rating-bar-track .rating-logo.rt-rating-logo img {
    height: 16px; /* Adjust if needed */
 }

 .rating-score-text {
    position: absolute;
    right: 8px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1; /* Relative to fill bar context */
    background-color: transparent;
    padding: 1px 0px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0px 0px 3px rgba(0,0,0,0.9), 0px 0px 1px rgba(0,0,0,1);
    pointer-events: none;
}

/* Find and Confirm these color rules target only .rating-bar-fill */
.rating-bar-fill.fill-imdb { background-color: #f5c518; }
.rating-bar-fill.fill-tmdb { background-color: #01d277; }
.rating-bar-fill.fill-rt-fresh { background-color: #fa320a; }
.rating-bar-fill.fill-rt-rotten { background-color: #639e4f; }
.rating-bar-fill.fill-mc-high { background-color: #66cc33; }
.rating-bar-fill.fill-mc-medium { background-color: #ffcc33; }
.rating-bar-fill.fill-mc-low { background-color: #ff6666; }

/* --- END NEW BAR RULES --- */
/* --- End Secondary Rating Styles --- */

.predict-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    width: auto;
    max-width: 95%;
    margin-top: 8px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    padding: 8px 15px;
    /* Dark with purple glow hint */
    background: #1a1520;
    color: var(--text-secondary);
    border: 1px solid rgba(126, 87, 194, 0.2);
    box-shadow: inset 0 0 12px rgba(126, 87, 194, 0.1);
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.predict-card-button .button-text {
    line-height: 1;
    display: inline-block; /* Ensure it behaves correctly in flex */
    transition: transform 0.3s ease-out; /* Transition the text's position */
    /* transform: translateX(0); */ /* Explicit initial state - not needed */
}
.predict-card-button .button-sparkle-icon {
    display: inline-block;
    width: 0px; /* <<< START HIDDEN: Zero width */
    height: 16px; /* Keep height */
    background-image: url('assets/images/ai-sparkle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0; /* <<< START HIDDEN: Invisible */
    transform: scale(0.5) rotate(0deg); /* Start small and not rotated */
    transform-origin: center center;
    vertical-align: middle;
    overflow: hidden; /* Hide content when width is 0 */
    /* Transition width, opacity, and transform */
    transition: width 0.3s ease-out 0.1s, opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s; /* Delay appearance slightly */
    /* Add animation transition separately */
    /* transition: ... animation 2s linear infinite 0.4s; <<< REMOVED */
}

/* Hover effect on CARD -> affects BUTTON and ICON span/img */
.media-item:hover .predict-card-button {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color-light);
    box-shadow: 0 0 8px rgba(163, 129, 216, 0.5);
    transform: scale(1.03);
    gap: 6px;
    /* margin-top: 8px; <<< REMOVE this explicit hover margin */
}

/* Shift Text Left on Card Hover */
.media-item:hover .predict-card-button .button-text {
    transform: translateX(-5px); /* <<< SHIFT TEXT LEFT (Adjust amount as needed) */
    /* Nudge slightly left to compensate for icon + gap appearing */
}

/* Show and Spin Sparkle Icon on Card Hover */
.media-item:hover .predict-card-button .button-sparkle-icon {
    width: 16px; /* <<< Reveal width */
    opacity: 1;  /* Make visible */
    transform: scale(1) rotate(0deg); /* <<< Scale up, reset rotation for animation */
    /* Apply spinning animation AFTER it appears */
    animation: spin 1.5s linear infinite 0.3s; /* name, duration, timing, iterations, delay */
}
/* --- Keep Keyframes for Continuous Spin --- */
@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}
.media-item:hover .predict-card-button {
     background: #251a30;
     border-color: rgba(126, 87, 194, 0.4);
     box-shadow: inset 0 0 16px rgba(126, 87, 194, 0.2);
     color: var(--text-primary);
}

/* NEW: Styling for the minimal CTA links container */
.cta-links-container {
    display: flex;
    align-items: center; /* Keep vertical alignment */
    /* --- USE space-between --- */
    justify-content: space-between; /* Pushes items fully left/right */
    gap: 10px; /* Gap if they ever get close */
    margin-top: auto; /* Keep at bottom */
    /* --- Padding controls OUTER space (esp. left) --- */
    padding: 10px 5px 5px 8px; /* T R B L - More padding on Left */
    flex-shrink: 0;
    width: 100%;
}

/* Find and Modify this rule */
/* Find and Modify this rule */
.cta-link {
    display: inline-flex;
    align-items: center;
    /* --- REMOVE Flex sizing/specific justification --- */
    /* flex-grow: 1; */
    /* flex-basis: 0; */
    /* text-align: center; */
    /* justify-content: center; */ /* Let specific rules handle if needed */
    /* --- Keep other styles --- */
    gap: 4px;
    background: none;
    border: none;
    padding: 5px;
    margin: 0; /* Reset margin here */
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    text-decoration: none;
    position: relative;
    overflow: visible;
}
/* Remove the simple background hover from the main button */
.watch-link {
    /* Add margin to push it away from the very right edge */
    margin-right: 17px; /* <<< Adjust this value (e.g., 3px, 5px, 8px) until spacing looks symmetrical to trailer */
    /* Ensure justify-content is default (or center) if needed */
     justify-content: center; /* Or remove if default works */
}
.cta-link .cta-icon {
    display: block;
    height: 22px; /* <<< ADJUST this base height if trailer.svg looks too small/big */
    width: auto; /* Keep auto width for aspect ratio */
    object-fit: contain;
    transition: transform 0.2s ease-out;
    /* Make sure fill/color is handled correctly */
    /* If trailer.svg doesn't use currentColor, you might need specific filter/fill: */
    /* fill: currentColor; */ /* This won't work directly on IMG */
}
.trailer-link .cta-icon { /* Targets the cta-icon specifically within trailer-link */
    height: 19px; /* <<< Set the desired SMALLER height for the trailer icon */
    /* Optional: Adjust width if needed, usually auto is fine */
    /* width: 16px; */
}

/* Base style for the background circle (hidden initially) */
.watch-link::before {
    content: '';
    position: absolute;
    /* Center the circle behind the icon */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center precisely */
    /* --- SET SIZE (Larger than the icon area) --- */
    width: 44px;  /* <<< Adjust size as needed */
    height: 44px; /* <<< Make width/height equal for circle */
    /* --- Style the circle --- */
    background-color: rgba(163, 129, 216, 0.15); /* Highlight color */
    border-radius: 50%; /* Make it circular */
    /* --- Hide initially --- */
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8); /* Optional: start smaller */
    /* --- Transition --- */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    /* --- Position behind icon --- */
    z-index: -1;
    pointer-events: none; /* Don't interfere with clicks */
}

/* Hover state: Show the circle */
.watch-link:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Scale to full size */
}
/* --- END NEW RULES --- */

.cta-link svg {
    width: 0.9em; /* Icon size relative to font */
    height: 0.9em;
    fill: currentColor; /* Icon takes text color */
    margin-bottom: -0.1em; /* Fine-tune vertical alignment */
    flex-shrink: 0;
}

.cta-link:hover {
    color: var(--accent-color-light); /* <<< Make icon potentially change to this color */
    text-decoration: none;
}

.watch-link:hover {
    color: var(--accent-color-light); /* Keep optional icon color change */
    /* Ensure NO background or border-radius is applied directly here */
    background-color: transparent !important; /* Force transparent */
    border-radius: 0 !important; /* Force no rounding */
}
.watch-link:hover .cta-icon {
    transform: scale(1.15); /* Apply slight scale */
}

.cta-link:focus {
     outline: none;
     color: var(--accent-color-light);
     /* Optional: add subtle ring if needed for accessibility focus */
     /* box-shadow: 0 0 0 2px rgba(163, 129, 216, 0.5); */
     /* border-radius: 4px; */
}

/* Specific styling maybe not needed now */
.trailer-link {
    justify-content: flex-start; /* Align Trailer content (icon + text) LEFT */
    gap: 10px; /* <<< Adjust this value (5px to 10px) as desired */
}
.trailer-link span {
    font-family: 'Lato', sans-serif;
    /* Optional: Adjust weight or size if needed to match other Lato usage */
    font-weight: 700;
    /* font-size: 1em; /* Relative to parent .cta-link font-size */
}
.watch-link {
    justify-content: flex-end; /* Align Watch content (icon) RIGHT */
}

.cta-button.small svg {
    /* Icon size is controlled by font-size + width/height="1em" in SVG */
    margin-bottom: -0.1em; /* Fine-tune vertical alignment */
    flex-shrink: 0;
}

.cta-button.small:hover {
    background-color: var(--button-subtle-hover-bg);
    border-color: var(--hover-highlight);
    color: var(--text-primary);
}

/* Optional: Slightly different styling for trailer vs watch? */
.cta-button.trailer-button {
    /* background-color: rgba(var(--accent-color-rgb), 0.1); */ /* Example */
    /* color: var(--accent-color-light); */
}
.cta-button.watch-button {
    /* Maybe a different color/style */
}
.cta-button.large-cta {
    padding: 15px 40px;
    font-size: 1.15em;
    border-radius: 28px;
}

/* 'More' Card Styling - intentionally left empty, styles defined earlier */

/* --- Scroll Arrows (IMDb-style) --- */
.scroll-arrow {
    position: absolute;
    top: 120px; /* Fixed position - won't move when cards expand */
    z-index: 10;
    
    /* IMDb-style contained background */
    width: 44px;
    height: 80px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    
    /* Center the chevron */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Hide the text content (< and >) from HTML */
    font-size: 0;
    color: transparent;
    
    /* Visible by default */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    
    /* Smooth transitions */
    transition: opacity 0.2s ease, background 0.2s ease;
    
    cursor: pointer;
    padding: 0;
}

/* Chevron icon using CSS */
.scroll-arrow::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
}

.scroll-arrow.left-arrow::before {
    transform: rotate(135deg);
    margin-left: 4px;
}

.scroll-arrow.right-arrow::before {
    transform: rotate(-45deg);
    margin-right: 4px;
}

/* Positioning - flush to edges */
.scroll-arrow.left-arrow { 
    left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.scroll-arrow.right-arrow { 
    right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Hover state */
.scroll-arrow:hover {
    background: rgba(0, 0, 0, 0.85);
}

/* Disabled state - at scroll limits */
.scroll-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* Hidden state (no overflow / at scroll limit) */
.scroll-arrow.hidden {
    display: none !important;
}

/* Focus state for accessibility */
.scroll-arrow:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}


/* --- Search Results --- */
#search-results-section {
    /* Elegant gradient from deep purple-tinted dark to pure black */
    background: linear-gradient(
        135deg,
        rgba(126, 87, 194, 0.15) 0%,
        rgba(30, 20, 40, 0.95) 25%,
        var(--background-color) 100%
    );
    padding: 25px 25px 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    position: relative; /* For close button */
    /* Subtle top border accent */
    border-top: 1px solid rgba(126, 87, 194, 0.3);
    /* Soft shadow for depth */
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
#search-results-section.hidden { display: none !important; }

/* Search results header styling */
#search-results-section h2 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 400;
    color: var(--text-secondary);
}
#search-results-section h2 span {
    color: var(--text-primary);
    font-weight: 600;
}

#close-search-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #555;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 28px; /* Adjust for centering '×' */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 15; /* Above results */
    padding: 0;
}
#close-search-btn:hover { background: #777; }

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive grid */
    gap: 18px;
}
/* Adapt media item styles for grid */
#search-results-list .media-item {
     width: auto; /* Allow grid item to fill space */
     height: auto; /* Allow height to adjust */
     min-height: 440px; /* Maintain minimum height */
}
#search-results-list .media-item > img {
     border-radius: 8px 8px 0 0; /* Keep rounded top */
}
#search-results-list .media-item .ratings-container {
    margin: 5px 0 8px 0;
    display: flex;
    flex-direction: column;
}
#search-results-list .media-item .rating-line {
     font-size: 0.85em;
     color: var(--text-muted);
     margin: 1px 0;
     display: flex;
     align-items: center;
     line-height: 1.3;
}
#search-results-list .media-item .rating-logo {
    height: 11px;
    width: auto;
    margin-right: 4px;
    vertical-align: middle;
    object-fit: contain;
}
/* Hide predict button on person cards in search */
#search-results-list .media-item:has(p:contains('Person')) .predict-card-button {
    display: none;
}


/* --- Modal Overlay and Prediction Section --- */

/* Modal Overlay Background */
#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Darker overlay */
    z-index: 900; /* Below modal */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
#modal-overlay.hidden { display: none !important; } /* Use hidden class */
body.modal-open #modal-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
    display: block !important; /* Ensure it shows */
}

/* --- Authentication Modals & Forms --- */

/* Style for onboarding/login/signup modals */
.auth-modal {
    background-color: #1a1a1a; /* Solid dark base */
    background-image: radial-gradient(ellipse at center, rgba(60, 35, 40, 0.9) 0%, rgba(30, 26, 28, 0.95) 100%); /* Radial gradient with warm reddish tint */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Simple grey border */
    max-width: 650px;
    min-height: 550px;
    height: 75vh;
    max-height: 650px;
    overflow-y: hidden;
    overflow-x: hidden; /* prevent horizontal scroll from inner layouts */
    text-align: center;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease, max-width 0.4s ease, height 0.4s ease, border-width 0.4s ease; /* Add border transition */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.6); /* Slightly stronger shadow maybe */
    position: fixed; /* Ensure fixed position */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Initial state */
    display: flex; flex-direction: column; /* Keep flex */
    padding: 0; margin: 0; opacity: 0; visibility: hidden;
}

/* Consistent width during intro & questions */
#onboarding-modal.intro-mode,
#onboarding-modal.question-mode {
    max-width: 700px; /* <<< Consistent moderate width */
     height: 75vh; /* <<< Consistent viewport height */
     max-height: 650px;
}

/* Ensure close button is positioned correctly */
.auth-modal .close-modal-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1011;
    background: #444;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 28px;
    font-size: 1.5em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 0;
}
.auth-modal .close-modal-btn:hover {
    background: #666;
}

.auth-modal h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--accent-color-light);
}

.auth-modal p {
    color: var(--text-secondary);
    margin-bottom: 25px;
    font-size: 0.95em;
}

/* --- Authentication Form Styles (within .auth-modal or #onboarding-register-prompt) --- */
/* Targets form inside auth-modal OR inside the register prompt */
.auth-modal form,
#onboarding-register-prompt form {
    display: flex; flex-direction: column; gap: 15px; text-align: left;
}
.auth-modal .form-group,
#onboarding-register-prompt .form-group {
    display: flex; flex-direction: column;
}
.auth-modal .form-group label,
#onboarding-register-prompt .form-group label {
    font-family: var(--font-display); /* Lato */
    font-size: 0.9em; /* Adjust size */
    font-weight: bold;
    /* ... keep other styles ... */
}
/* Targets inputs inside auth-modal OR inside the register prompt */
.auth-modal .form-group input[type="email"],
.auth-modal .form-group input[type="password"],
.auth-modal .form-group input[type="text"],
#onboarding-register-prompt .form-group input[type="email"],
#onboarding-register-prompt .form-group input[type="password"] {
    padding: 12px 15px; border: 1px solid var(--input-border); border-radius: 6px;
    background-color: var(--input-background); color: var(--text-primary); font-size: 1em;
}
.auth-modal .form-group input:focus,
#onboarding-register-prompt .form-group input:focus {
    outline: none; border-color: var(--accent-color-light);
    box-shadow: 0 0 5px rgba(163, 129, 216, 0.3);
}
.auth-modal .form-error,
#onboarding-register-prompt .form-error {
    color: var(--error-color); font-size: 0.85em; min-height: 1.2em;
    text-align: center; margin-top: -5px; margin-bottom: 10px;
}
/* Targets submit button inside auth-modal OR inside the register prompt */
.auth-modal .submit-button,
#onboarding-register-prompt .submit-button {
    padding: 12px 25px; background-color: var(--accent-color); color: white;
    border: none; border-radius: 25px; font-size: 1.05em; font-weight: bold;
    cursor: pointer; transition: background-color 0.2s ease; margin-top: 10px;
}
.auth-modal .submit-button:hover,
#onboarding-register-prompt .submit-button:hover {
    background-color: var(--accent-color-light); color: black;
}
/* Targets switch link inside auth-modal OR inside the register prompt */
.auth-modal .switch-auth-link,
#onboarding-register-prompt .switch-auth-link {
    margin-top: 25px; font-size: 0.9em; color: var(--text-muted); text-align: center;
}
.auth-modal .switch-auth-link a,
#onboarding-register-prompt .switch-auth-link a {
    color: var(--accent-color-light);
    font-weight: bold;
    text-decoration: none; /* no underline by default */
}
.auth-modal .switch-auth-link a:hover,
#onboarding-register-prompt .switch-auth-link a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* --- Modal Base Styles (Apply to ALL modals) --- */
.modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    height: 90vh; /* Default height */
    display: flex; flex-direction: column;
    background-color: var(--card-background);
    border: 1px solid var(--input-border); border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); z-index: 1000;
    padding: 0; margin: 0; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease;
    overflow: hidden; /* Base overflow */
}
.modal.hidden { display: none !important; }

/* Modal Visible State (Targets any .modal) */
body.modal-open .modal {
    opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1);
    transition: opacity 0.3s ease, visibility 0s linear 0s, transform 0.3s ease;
}

/* --- Specific Modal Overrides --- */

/* Onboarding/Auth Modal */
.auth-modal { /* Applied to #onboarding-modal */
    max-width: 900px; /* INCREASED to 900px for better horizontal layout */
    min-height: 550px;
    height: auto;
    max-height: 95vh;
    overflow-y: hidden;
    text-align: center;
    /* Add transition for max-width */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease, max-width 0.4s ease;
}

/* GOM: make onboarding modal match MPM/PSO unified purple gradient style */
#onboarding-modal {
    background-color: #0c0a10;
    background-image: 
        /* Central purple glow */
        radial-gradient(ellipse 100% 80% at 50% 40%, rgba(126, 87, 194, 0.18) 0%, rgba(126, 87, 194, 0.08) 40%, transparent 70%),
        /* Secondary pink/magenta accent */
        radial-gradient(ellipse 70% 50% at 70% 70%, rgba(180, 100, 160, 0.12) 0%, transparent 50%),
        /* Top highlight */
        radial-gradient(ellipse 80% 30% at 50% 0%, rgba(163, 129, 216, 0.15) 0%, transparent 60%),
        /* Base gradient */
        linear-gradient(180deg, rgba(20, 15, 28, 1) 0%, rgba(12, 10, 16, 1) 100%);
    border: 1px solid rgba(126, 87, 194, 0.18);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* Mode for consistent size during questions */
#onboarding-modal.question-mode {
    max-width: 900px; /* Ensure consistency */
    /* height: 70vh; */ /* Example fixed height */
}

/* Adjust border width for movie grid mode */
#onboarding-modal.movie-grid-mode {
    border-width: 1px; /* Slightly thinner border when wide */
}

/* Close Button inside ANY Modal */
.modal .close-modal-btn {
    position: absolute;
    top: 12px; /* Adjust position slightly if needed */
    right: 12px;
    z-index: 1011;
    background: #444;
    color: #fff; /* This will color the SVG if it uses currentColor */
    border: none;
    border-radius: 50%;
    width: 32px; /* Keep button size */
    height: 32px;
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 0; /* Remove padding */
    /* --- ADD Flex alignment for centering IMG --- */
    display: flex;
    align-items: center;
    justify-content: center;
    /* --- REMOVE Text-specific styles --- */
    /* font-size: 1.6em; */
    /* font-weight: bold; */
    /* line-height: 30px; */
    /* text-align: center; */
}
.modal .close-modal-btn:hover {
    background: #666;
}
.close-modal-btn img.close-icon-svg {
    display: block;
    width: 14px;  /* <<< Adjust SVG visual size */
    height: 14px; /* <<< Adjust SVG visual size */
    /* If SVG doesn't use currentColor, try filter to make it white: */
    /* filter: brightness(0) invert(1); */
}
/* Layout Container for the two panes */
.modal-layout-container {
    display: flex;
    flex-direction: row; /* Panes side-by-side */
    width: 100%;
    flex-grow: 1; /* Fill available vertical space */
    overflow: hidden; /* Prevent container itself from scrolling */
    padding: 45px 25px 25px 25px; /* Add padding here for spacing (top includes close button space) */
    box-sizing: border-box;
    gap: 25px; /* Gap between panes */
}

/* Common styling for both panes */
.modal-pane {
    /* height: 100%; NO - Let flexbox handle height within container */
    overflow-y: auto; /* Enable scrolling WITHIN the pane */
    padding: 15px; /* Base padding */
    box-sizing: border-box;
    transition: flex 0.3s ease, opacity 0.3s ease, padding 0.3s ease, min-width 0.3s ease; /* Smooth transitions */
     scrollbar-width: thin;
     scrollbar-color: var(--input-border) rgba(0,0,0, 0.1); /* Match pane bg */
     background-color: rgba(0,0,0, 0.1); /* Slight background tint */
     border-radius: 5px;
}
/* Webkit scrollbar for panes */
.modal-pane::-webkit-scrollbar { width: 8px; }
.modal-pane::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 4px; }
.modal-pane::-webkit-scrollbar-thumb { background-color: var(--input-border); border-radius: 4px; border: 2px solid rgba(0,0,0,0.1); }


/* Left Pane: Prediction & Questions */
#prediction-main-pane {
    flex: 1 1 65%; /* Default ratio (can adjust) */
    min-width: 350px; /* Minimum width */
    padding-right: 25px; /* Extra padding to separate from right pane visually */
    display: flex; /* Use flex column */
    flex-direction: column;
}
#prediction-main-pane h2 { /* Target h2 inside left pane */
    color: var(--text-primary);
    border-left: 4px solid var(--accent-color-light);
    padding-left: 10px;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.4em;
    flex-shrink: 0; /* Prevent shrinking */
    line-height: 1.3; /* Ensure consistent line height */
    display: flex; /* Use flex to align title and spinner */
    align-items: center; /* Vertically center */
    flex-wrap: nowrap; /* Prevent wrapping */
}
/* Analysis Status Indicator Style (Spinner in Left Pane) */
#analysis-status-indicator {
    display: inline-block; /* Allows setting size */
    vertical-align: middle; /* Align with text */
    margin-left: 10px;
    width: 24px; /* Adjust size as needed */
    height: 24px; /* Adjust size as needed */
    line-height: 0; /* Prevent extra space */
}
#analysis-status-indicator img {
    width: 100%;
    height: 100%;
    vertical-align: top; /* Prevent small gap below image */
}

#questions-container {
    flex-grow: 1; /* Allow questions to take space */
    overflow-y: auto; /* Scroll questions if they overflow */
    padding-right: 5px; /* Space for scrollbar */
    margin-bottom: 15px; /* Space below questions */
     scrollbar-width: thin;
     scrollbar-color: var(--input-border) rgba(0,0,0, 0.1);
}
#questions-container::-webkit-scrollbar { width: 6px; }
#questions-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 3px; }
#questions-container::-webkit-scrollbar-thumb { background-color: var(--input-border); border-radius: 3px; }


/* Loading Indicator Container (Now in HTML) */
#minimized-log-indicator {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 10px; /* Position at bottom */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2em; /* Smaller dots */
    color: var(--accent-color-light);
    animation: dots 1.5s infinite steps(3, start);
    pointer-events: none; /* Not interactive */
}

/* Keyframes for dots animation */
@keyframes dots {
   0%, 20% { color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
   40% { color: var(--accent-color-light); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
   60% { text-shadow: .25em 0 0 var(--accent-color-light), .5em 0 0 rgba(0,0,0,0); }
   80%, 100% { text-shadow: .25em 0 0 var(--accent-color-light), .5em 0 0 var(--accent-color-light); }
}
/* --- END Minimized State Styles --- */

/* --- Onboarding Modal Step-by-Step Styles --- */

/* --- ADD THESE NEW STYLES for Onboarding Intro Step --- */

#onboarding-step-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-grow: 1;
    padding: 40px; /* Increase padding for more space */
    box-sizing: border-box;
    /* Removed background-image, position:relative, z-index */
}
/* Allow specific step areas to scroll internally if needed */
#onboarding-step-intro,
#single-question-container,
#onboarding-movie-grid {
    overflow-y: auto; /* Allow vertical scroll within these areas */
     scrollbar-width: thin; /* Add scrollbars */
     scrollbar-color: var(--input-border) var(--card-background);
}
#single-question-container::-webkit-scrollbar,
#onboarding-movie-grid::-webkit-scrollbar { width: 6px; }
#single-question-container::-webkit-scrollbar-track,
#onboarding-movie-grid::-webkit-scrollbar-track { background: var(--card-background); border-radius: 3px; }
#single-question-container::-webkit-scrollbar-thumb,
#onboarding-movie-grid::-webkit-scrollbar-thumb { background-color: var(--input-border); border-radius: 3px; }
/* Style text elements to sit above the overlay */
#onboarding-step-intro h1,
#onboarding-step-intro h2,
#onboarding-step-intro #onboarding-start-btn {
    position: relative; /* Allow z-index to work */
    z-index: 2; /* Place text/button above the dark overlay */
}

/* Keep existing styles for h1, h2, button below */
#onboarding-intro-icon {
    display: block; /* Ensure it's on its own line */
    width: 150px;    /* <<< Adjust desired width */
    height: auto;   /* Maintain aspect ratio */
    margin: -5px auto 25px auto; /* More space below icon */
}
#onboarding-step-intro h1 {
    font-family: var(--font-primary); /* Nunito */
    font-size: 1.5em;
    color: var(--text-primary);
    margin-bottom: 35px; /* More space before CTA */
    line-height: 1.35; /* Tighter line spacing */
    max-width: 480px;
}

#onboarding-step-intro h2 {
    font-family: var(--font-display); /* Changed to use Lato variable */
    font-size: 1.0em;
    color: var(--text-secondary);
    margin-bottom: 45px; /* Increased space before button */
    font-weight: 300;
    max-width: 450px; /* Slightly wider max-width maybe */
    line-height: 1.5; /* Improve readability for longer text */
    /* Removed position, z-index, text-shadow */
}

#onboarding-start-btn {
    /* ... keep existing gradient, color, border, radius, shadow, padding, font, transition ... */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    /* Removed position, z-index */
}
#onboarding-step-intro.hidden { display: none !important; } /* Ensure hidden works */

#onboarding-step-intro h1 {
    font-family: var(--font-primary); /* Nunito */
    font-size: 1.6em;
    color: var(--text-primary);
    margin-bottom: 16px; /* Reduced - subtext follows */
    line-height: 1.3;
    max-width: 620px; /* Increased to fit headline on one line */
    font-weight: 700;
    white-space: nowrap; /* Prevent wrapping */
}

#onboarding-step-intro .onboarding-intro-subtext {
    font-family: var(--font-display) !important; /* Lato - thinner, more elegant */
    font-size: 1.15em !important;
    color: var(--text-secondary);
    margin-bottom: 45px; /* More space before CTA */
    line-height: 1.5;
    max-width: 580px;
    font-weight: 300 !important; /* Light weight for thinner look */
    letter-spacing: 0.3px;
}

#onboarding-step-intro .onboarding-trust-badges {
    font-family: var(--font-secondary);
    font-size: 0.8em !important; /* Adjusted size */
    color: rgba(255, 255, 255, 0.4); /* Lighter/more muted */
    margin-top: 18px;
    letter-spacing: 0.5px;
    font-weight: 300; /* Lighter weight */
}

#onboarding-step-intro h2 {
    font-family: var(--font-secondary); /* Roboto or Lato */
    font-size: 1.0em; /* Slightly larger subtitle */
    color: var(--text-secondary);
    margin-bottom: 40px; /* Space before button */
    font-weight: 300;
    max-width: 400px; /* Limit width for readability */
}

/* Style the new Start Button */
#onboarding-start-btn {
    /* Reuse gradient and basic style from next/submit */
    background-image: linear-gradient(to right, #e91e63, var(--accent-color));
    color: white;
    border: none;
    border-radius: 28px; /* More rounded */
    box-shadow: none !important; /* Removed shadow for cleaner look */
    padding: 15px 40px; /* Larger padding */
    font-size: 1.15em; /* Larger font */
    font-weight: bold;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.1s ease;
    display: inline-flex; /* Align icon and text */
    align-items: center;
}

/* Ensure sparkle icon displays correctly if used */
#onboarding-start-btn .button-sparkle-icon {
    /* Styles already defined, maybe adjust margin */
     margin-right: 8px;
     /* Ensure it's visible */
     opacity: 1 !important;
     width: 20px !important;
     animation: spin 1.5s linear infinite 0.3s !important; /* Re-apply animation if wanted */
}


#onboarding-start-btn:hover,
#onboarding-start-btn:focus {
    filter: brightness(1.15); /* Slightly brighter hover */
    outline: none;
    box-shadow: none; /* Removed hover glow */
}

#onboarding-start-btn:active {
    transform: scale(0.97);
}

/* --- END Intro Step Styles --- */

#onboarding-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%; /* Crucial */
    box-sizing: border-box;
    position: relative;
    padding: 25px 35px;
    padding-top: 15px;
    overflow: hidden; /* Prevent wrapper scroll */
    overflow-x: hidden;
}

/* --- New Progress Bar Styles --- */
#onboarding-progress {
    position: absolute; /* Position relative to wrapper */
    top: 0; left: 0; width: 100%; height: 5px; /* Thin */
    background-color: var(--input-border); /* Track color */
    z-index: 5; overflow: hidden; margin: 0;
    border-radius: 10px 10px 0 0; /* Match modal top corners */
}
#onboarding-progress.hidden { display: none !important; }

#progress-bar-fill {
    width: 0%;
    height: 100%;
    /* --- CHANGE Background --- */
    /* Option A: Solid Accent Color */
    /* background-color: var(--accent-color-light); */
    /* Option B: Gradient */
    background: linear-gradient(to right, #e91e63, var(--accent-color)); /* Adjust gradient to match brand */
    /* --- End Change --- */
    transition: width 0.4s ease-in-out;
}
/* Removed old progress bar container/text styles */

/* --- New Title Styles --- */
#onboarding-titles {
     text-align: center; margin-bottom: 30px; flex-shrink: 0;
     /* Added padding-top to account for progress bar */
     padding-top: 15px;
}
#onboarding-titles.hidden { display: none !important; }
#onboarding-titles h1,
#onboarding-movie-grid-area h2 {
    font-family: var(--font-primary); /* Nunito */
    font-weight: 700; /* Ensure bold */
}
#onboarding-titles h2 {
    font-family: var(--font-secondary); /* Roboto or Lato */
    font-weight: 300; /* Keep light */
}

/* Step Containers */
#onboarding-question-area {
    flex-grow: 1;
    /* --- Use Flexbox for Centering Child --- */
    display: flex;
    flex-direction: column; /* Stack vertically */
    justify-content: center; /* <<< Vertically center child */
    align-items: center; /* <<< Horizontally center child */
    /* --- Remove overflow if previously set --- */
    overflow-y: hidden; /* Parent doesn't scroll */
    /* --- Keep Padding --- */
    padding: 0 10px 10px 10px; /* T R B L - Keep bottom padding maybe? Adjust as needed */
    margin-top: 0;
}

#onboarding-question-area,
#onboarding-movie-grid-area,
#onboarding-prediction-area {
    flex-grow: 1; display: flex; flex-direction: column;
    overflow-y: hidden; /* Keep hidden - inner elements scroll */
    padding-bottom: 10px;
    margin-top: 0;
    padding-top: 42px;
}
#onboarding-question-area.hidden,
#onboarding-movie-grid-area.hidden,
#onboarding-prediction-area.hidden { display: none !important; }

#single-question-container {
    max-height: 100%; /* Don't exceed parent's available height */
    overflow-y: auto; /* <<< Keep internal scroll */
    max-width: 600px; /* Optional: Limit max content width for readability */
    padding: 20px 65px; /* <<< T/B R/L - Added 65px side padding (adjust value as needed) */
    /* flex-grow: 1; */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--input-border) var(--card-background);
    margin: 0 auto; /* Center horizontally within its parent */
    width: 100%;
    box-sizing: border-box;
}

/* GOM (Onboarding) Q screens: remove the extra framed "boxes" */
#onboarding-modal #single-question-container {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}
#single-question-container::-webkit-scrollbar { width: 6px; }
#single-question-container::-webkit-scrollbar-track { background: var(--card-background); border-radius: 3px; }
#single-question-container::-webkit-scrollbar-thumb { background-color: var(--input-border); border-radius: 3px; }


/* Style the question block itself */
.question.single-question-active {
    background-color: rgba(255, 255, 255, 0.03); /* Keep subtle background */
    padding: 30px 35px; /* Adjust padding */
    border-radius: 12px; /* More rounded */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Softer border */
    margin-bottom: 20px;
}

/* Onboarding only: remove the big inner panel border/background */
#onboarding-modal .question.single-question-active {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}

/* Style the question label text */
label.single-question-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.8rem; /* Match PSO style */
    color: var(--text-primary);
    margin-bottom: 12px; /* Match PSO */
    line-height: 1.4;
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* Gradient emphasis for key words in questions - GLOBAL (works in PSO & MPM) */
.question-emphasis {
    background: linear-gradient(135deg, #c9a0ff 0%, #ff9ec4 50%, #ffb347 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Style the area containing the inputs */
.question .input-area {
    padding-top: 0; display: flex; flex-direction: column;
    align-items: center; gap: 12px;
}

/* Radio/Checkbox Labels */
.radio-label, .checkbox-label {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Center text now that input is hidden */
    /* --- Increase Padding --- */
    padding: 12px 24px; /* T/B R/L - More padding */
    /* --- Adjust width/text --- */
    width: auto; /* Allow width based on content */
    max-width: 90%; /* Keep max width */
    text-align: center; /* Ensure text centered */
    /* --- Keep existing styles --- */
    border-radius: 25px; /* Keep pill shape */
    border: 1px solid var(--input-border);
    background-color: var(--button-subtle-bg);
    color: var(--text-secondary);
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s ease-out;
    margin: 0 5px 8px 5px; /* Keep margin */
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    /* gap: 8px; */ /* Remove gap if icon/input is gone */
}
.radio-label:hover, .checkbox-label:hover {
    background-color: var(--button-subtle-hover-bg);
    border-color: var(--hover-highlight); color: var(--text-primary);
}
.radio-label:has(input:checked), .checkbox-label:has(input:checked) {
    background-color: var(--accent-color); border-color: var(--accent-color-light);
    color: white; font-weight: bold; transform: scale(1.02);
}
.radio-label input, .checkbox-label input {
    /* --- HIDE the actual input --- */
    position: absolute; /* Take out of layout flow */
    opacity: 0; /* Make invisible */
    pointer-events: none; /* Make unclickable */
    /* --- Remove margin/transform if no longer needed --- */
    /* margin-right: 5px; */
    /* transform: scale(1.2); */
    /* Keep accent color for potential focus outline styling */
    /* accent-color: var(--accent-color-light); */
}
.checkbox-group {
    display: grid; /* Use grid instead of flex-wrap */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive columns, good for 1 or 2 wide */
    justify-items: center; /* Center items within grid cell */
    gap: 10px; /* Gap between grid items */
    padding-top: 5px;
    width: 100%; /* Ensure grid takes space */
    max-width: 400px; /* Limit width */
    margin: 0 auto; /* Center the grid */
}
.checkbox-limit-text { width: 100%; text-align: center; margin-top: 15px; font-size: 0.8em; color: var(--text-muted); }
.required-indicator { color: var(--accent-color-light); margin-left: 4px; font-weight: bold; }

/* Scale5 Layout */
.scale5-container {
    display: flex; justify-content: center; align-items: center;
    gap: 10px; padding: 5px 0; width: 100%; max-width: 450px;
    margin: 5px auto 5px auto;
}
.scale5-label {
    /* Base style */
    border-radius: 8px; /* Keep rounded square */
    border: 1px solid var(--input-border);
    background-color: var(--button-subtle-bg);
    transition: all 0.2s ease-out;
    width: 60px; /* Adjust size */
    height: 60px;
}
.scale5-label:hover { background-color: var(--button-subtle-hover-bg); border-color: var(--hover-highlight); }
.scale5-label input[type="radio"] { appearance: none; position: absolute; opacity: 0; pointer-events: none; }
.scale5-label span { display: block; line-height: 1.2; font-size: 0.9em;}
.scale5-label:has(input:checked) {
    background-color: var(--accent-color); border-color: var(--accent-color-light);
    color: white; font-weight: bold;
}
.radio-label:hover, .checkbox-label:hover, .scale5-label:hover {
    border-color: var(--accent-color-light);
    background-color: var(--button-subtle-hover-bg);
    transform: translateY(-3px) scale(1.02); /* Lift effect */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 0 10px rgba(163, 129, 216, 0.3); /* Base Shadow + Accent Glow */
}
/* Selected State for Radio/Checkbox */
.radio-label:has(input:checked),
.checkbox-label:has(input:checked) {
    border-color: transparent; /* Hide border */
    color: white;
    font-weight: bold;
    /* Use gradient background for selected */
    background-image: linear-gradient(to right, #e91e63, var(--accent-color));
    box-shadow: 0 3px 6px rgba(0,0,0,0.4); /* Stronger shadow */
    transform: scale(1.05); /* Emphasize selection */
}

/* Validation Error Style */
.input-area.validation-error {
    outline: 2px solid var(--error-color);
    border-radius: 4px; /* Match inputs if needed */
    box-shadow: 0 0 5px var(--error-color);
}
/* --- END Improved Question Styling --- */


/* Navigation Buttons */
#onboarding-navigation {
    /* --- Repositioning --- */
    position: absolute; /* Position relative to modal */
    top: 50%; /* Center vertically */
    left: 0;
    right: 0;
    transform: translateY(-50%); /* Precise vertical centering */
    z-index: 10; /* Ensure above question content */
    /* --- Flex layout for buttons --- */
    display: flex;
    justify-content: space-between; /* Pushes arrows to sides */
    /* --- Adjust padding for edge distance --- */
    padding: 0 20px; /* Horizontal padding controls distance from edge */
    /* --- Remove old styling --- */
    border-top: none; /* Remove border */
    margin-top: 0; /* Remove margin */
    pointer-events: none; /* Allow clicks to pass through container */
}
/* Ensure it's shown when needed (handled by JS) */
#onboarding-navigation.hidden { display: none !important; }

/* Add Hover/Focus State */
#onboarding-navigation .cta-button:hover,

/* Movie Grid Area */
#onboarding-movie-grid-area h2 { font-size: 1.4em; color: var(--text-primary); margin-bottom: 8px; text-align: center; flex-shrink: 0;}
#onboarding-movie-grid-area p { font-size: 0.95em; color: var(--text-secondary); margin-bottom: 25px; text-align: center; flex-shrink: 0;}

/* GOM Movie Search Bar - matches home search style */
#onboarding-movie-search-container {
    width: 100%;
    max-width: 550px; /* Increased 15% from 480px */
    margin: 45px auto 0 auto;
    position: relative;
    display: flex;
    align-items: center;
}

#onboarding-movie-search {
    width: 100%;
    padding: 12px 50px 12px 22px; /* Right padding for icon */
    font-size: 1em;
    border: 1px solid transparent;
    border-radius: 25px;
    background-color: rgba(0, 0, 0, 0.25);
    color: var(--text-primary);
    outline: none;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
}

#onboarding-movie-search::placeholder {
    color: var(--text-primary);
    font-style: italic;
    opacity: 0.85;
    animation: placeholder-pulse 2s ease-in-out infinite;
}

@keyframes placeholder-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

#onboarding-movie-search:focus {
    outline: none;
    background-color: rgba(0, 0, 0, 0.4);
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--accent-color-light);
}

#onboarding-search-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease;
}

#onboarding-search-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

#onboarding-search-icon:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.1);
}

#onboarding-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(38, 32, 35, 0.98) 0%, rgba(28, 24, 26, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-top: 8px;
    max-height: 380px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

#onboarding-search-results.hidden {
    display: none;
}

.onboarding-search-result-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.onboarding-search-result-item:last-child {
    border-bottom: none;
}

.onboarding-search-result-item:hover {
    background-color: rgba(163, 129, 216, 0.15);
}

.onboarding-search-result-item img {
    width: 48px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.onboarding-search-result-info {
    flex: 1;
    min-width: 0;
}

.onboarding-search-result-title {
    font-size: 1.1em;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onboarding-search-result-year {
    font-size: 0.95em;
    color: var(--text-muted);
    margin-top: 4px;
}

.onboarding-search-no-results {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9em;
}

.onboarding-grid-divider {
    font-size: 0.85em !important;
    color: var(--text-muted) !important;
    margin: 50px 0 30px 0 !important;
    text-transform: lowercase;
    font-style: italic;
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.onboarding-grid-divider::before {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(163, 129, 216, 0.4), rgba(255, 255, 255, 0.2));
}

.onboarding-grid-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(163, 129, 216, 0.4), transparent);
}

#onboarding-movie-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columns for 60 movies */
    gap: 10px;
    padding: 15px 10px 20px 10px; /* Added top padding for hover scale effect */
    overflow-y: auto; /* Enable vertical scroll */
    overflow-x: hidden; /* Prevent horizontal overflow from hover scale */
    align-content: flex-start;
    flex-grow: 1;
    max-height: 400px; /* Constrain height to make it scrollable */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) rgba(255, 255, 255, 0.1);
}

#onboarding-movie-grid::-webkit-scrollbar {
    width: 6px;
}

#onboarding-movie-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

#onboarding-movie-grid::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 3px;
}

#onboarding-movie-grid::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
}
/* --- ADD these NEW Rules --- */
.nav-arrow-button {
    background-color: rgba(45, 45, 45, 0.8); /* Semi-transparent dark background */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    color: var(--text-primary); /* Icon color (if SVG uses currentColor) */
    border-radius: 50%; /* Circular button */
    width: 44px; /* Button size */
    height: 44px;
    padding: 0; /* Remove padding */
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.1s ease;
    display: flex; /* Center icon inside */
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* Make buttons clickable */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.nav-arrow-button:hover {
    background-color: rgba(60, 60, 60, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
}

.nav-arrow-button:active {
    transform: scale(0.95);
}

.nav-arrow-button:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none; /* Disable clicks */
    box-shadow: none;
}
/* --- End Arrow Button Styling --- */
/* --- ADD this NEW Rule --- */
.nav-arrow-icon {
    display: block;
    width: 20px; /* Adjust icon visual size */
    height: 20px;
    /* If SVGs don't use currentColor, try filter */
    /* filter: brightness(0) invert(1); */
}
/* --- End Arrow Icon Styling --- */
/* Specific style for movie items in this grid */
#onboarding-movie-grid .media-item {
    min-height: auto; /* Remove min-height */
    height: auto; /* Let aspect ratio determine height */
    width: 100%; /* Fill grid column */
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s ease, border-color 0.2s ease;
    background-color: transparent; /* Maybe remove card background */
    box-shadow: none; /* Remove card shadow */
    border-radius: 6px; /* Optional slightly rounded corners */
    overflow: hidden; /* Ensure image respects border radius */
}
#onboarding-movie-grid .media-item:hover {
    border-color: var(--hover-highlight);
    transform: translateY(-3px) scale(1.02); /* Add slight scale */
}
#onboarding-movie-grid .media-item.selected {
    border-color: var(--accent-color-light);
    transform: scale(1.05); /* Larger scale when selected */
    box-shadow: 0 3px 8px rgba(163, 129, 216, 0.4);
}
#onboarding-movie-grid .media-item img {
   display: block;
   width: 100%;
   height: auto; /* Maintain aspect ratio */
   object-fit: cover; /* Keep cover */
   border-radius: 4px; /* Match item radius if any */
}
#onboarding-movie-grid .media-item h3 { font-size: 0.9em; text-align: center; min-height: 2.6em; }
#onboarding-movie-grid .media-item .item-content { justify-content: flex-start; } /* Align title top */
#onboarding-movie-grid .media-item .ratings-container,
#onboarding-movie-grid .media-item .predict-card-button { display: none; }

/* Prediction Area */
#onboarding-prediction-result {
    margin-bottom: 30px; min-height: 200px; display: flex;
    justify-content: center; align-items: center;
    /* width: 90%; */ /* Allow wrapper to control width */
    margin-left: auto;
    margin-right: auto;
}
#onboarding-prediction-result .loading { font-size: 1.1em; }

#onboarding-register-prompt {
    border-top: none; /* Remove top border */
    padding-top: 15px; /* Adjust padding */
    margin-top: 0; /* Adjust margin */
    flex-shrink: 0;
    text-align: center; /* Center align content */
}
#onboarding-register-prompt h3 {
    font-family: var(--font-primary); /* Nunito */
    font-weight: 700; /* Bold */
}

/* NEW Styles for Auth Options */
#onboarding-auth-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    width: 100%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}

.social-signin-button, 
.create-account-button {
    display: flex;
    align-items: center; /* Vertically align items */
    justify-content: center; /* Horizontally center content */
    width: 100%;
    height: 48px; /* <<< Explicit height (adjust as needed) */
    padding: 0 20px; /* <<< Adjusted padding (remove top/bottom if using height/flex) */
    border-radius: 6px;
    border: 1px solid var(--input-border);
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    box-sizing: border-box; /* Ensure padding/border included in height */
    text-decoration: none; /* Remove underline if applied to button tag */
}

.social-signin-button img {
    height: 34px; /* <<< Increased from 20px (adjust as needed) */
    width: 34px;  /* <<< Increased from 20px (adjust as needed) */
    margin-right: 12px; /* Optional: Slightly increase space */
    object-fit: contain; /* Add this to ensure the image scales nicely if it's not square */
}

.social-signin-button.google {
    background-color: #fff; /* Google style */
    color: #444;
    border-color: #ccc;
}
.social-signin-button.google:hover {
    background-color: #f8f8f8;
    border-color: #bbb;
}

/* --- Auth: Loading Spinners + Disabled polish --- */
@keyframes fc-spin {
    to { transform: rotate(360deg); }
}

button.is-loading {
    position: relative;
    pointer-events: none;
}

button.is-loading::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(255, 255, 255, 0.95);
    animation: fc-spin 0.8s linear infinite;
}

/* Google button uses dark text, so adjust spinner colors */
.social-signin-button.google.is-loading::after {
    border-color: rgba(0, 0, 0, 0.18);
    border-top-color: rgba(0, 0, 0, 0.55);
}

.auth-modal .submit-button:disabled,
.social-signin-button:disabled,
.create-account-button:disabled {
    opacity: 0.75;
    cursor: wait;
}

.create-account-button {
    background-color: #f0c14b; /* IMDb yellow/gold */
    color: #111;
    border-color: #a88734 #9c7e31 #846a29; /* Subtle border effect */
}
.create-account-button:hover {
    background-color: #e4b640;
}

/* NEW Styles for OR divider */
.or-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    width: 100%;
    font-size: 0.9em;
    margin: 5px 0; /* Adjust spacing */
}
.or-divider hr {
    flex-grow: 1;
    border: none;
    border-top: 1px solid var(--input-border);
    margin: 0 10px;
}
.or-divider span {
    flex-shrink: 0;
}

/* NEW Styles for Legal Text */
#onboarding-register-prompt .legal-text {
    font-family: var(--font-secondary); /* Roboto */
}
#onboarding-register-prompt .legal-text a { /* Adjust link selector too */
    color: var(--accent-color-light);
    text-decoration: underline;
}
#onboarding-register-prompt .legal-text a:hover { /* Adjust link selector too */
    color: var(--text-primary);
}

/* Styles for the hidden registration form */
#onboarding-prediction-area #registration-form {
    max-width: 400px;
    margin: 30px auto 0 auto; /* Add space above */
    border-top: 1px solid var(--input-border); /* Separator */
    padding-top: 25px;
}
#onboarding-prediction-area #registration-form h4 {
    font-family: var(--font-secondary); /* Roboto */
}
#onboarding-prediction-area #registration-form .submit-button {
    /* --- Apply Gradient & Rounding --- */
    background-image: linear-gradient(to right, #e91e63, var(--accent-color)); /* Placeholder Gradient */
    color: white;
    border: none;
    border-radius: 25px; /* Match header/nav */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    /* --- Adjust Padding/Font --- */
    padding: 12px 25px; /* Keep slightly larger padding maybe */
    font-size: 1.05em; /* Keep current size */
    font-weight: bold;
    margin-top: 10px; /* Keep margin */
    /* --- Add Transitions --- */
    transition: filter 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

/* Add Hover/Focus/Active States */
#onboarding-prediction-area #registration-form .submit-button:hover,
#onboarding-prediction-area #registration-form .submit-button:focus {
    filter: brightness(1.1);
    outline: none;
    box-shadow: 0 0 10px rgba(163, 129, 216, 0.5); /* Glow */
}

#onboarding-prediction-area #registration-form .submit-button:active {
    transform: scale(0.98);
}

/* Style disabled state during submission */
#onboarding-prediction-area #registration-form .submit-button:disabled {
     filter: brightness(0.7);
     cursor: wait;
}
/* Inherits form-group etc styles from Block 2 */

/* --- END Onboarding --- */


/* --- START: Next Movie Navigation (NMA) text labels --- */
#modal-overlay .modal-nav-label {
    position: fixed; /* positioned by JS to sit under modal corners */
    z-index: 1001;
    background: rgba(0, 0, 0, 0.32);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    backdrop-filter: blur(6px);
    opacity: 0.9;
    box-shadow: 0 10px 22px rgba(0,0,0,0.28);
    user-select: none;
}

#modal-overlay .modal-nav-label-text {
    font-family: var(--font-primary);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

#modal-overlay .modal-nav-label:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.42);
    border-color: rgba(255, 255, 255, 0.26);
    transform: translateY(-2px);
}

#modal-overlay .modal-nav-label:active {
    transform: translateY(0);
    opacity: 0.9;
}

#modal-overlay .modal-nav-label.hidden {
    display: none;
}

@media (max-width: 1400px) {
    #modal-overlay .modal-nav-label-text { font-size: 0.68rem; }
}

@media (max-width: 768px) {
    #modal-overlay .modal-nav-label { padding: 9px 10px; border-radius: 10px; }
    #modal-overlay .modal-nav-label-text { font-size: 0.66rem; }
}
/* --- END: Next Movie Navigation (NMA) text labels --- */

/* --- Styling within Prediction Section (#prediction-section) --- */

/* Question container in main prediction modal */
#prediction-section #questions-container { /* Target questions specific to this modal */
    flex-grow: 1; overflow-y: auto; padding-right: 5px; margin-bottom: 15px;
    scrollbar-width: thin; scrollbar-color: var(--input-border) rgba(0,0,0, 0.1);
}
#prediction-section #questions-container::-webkit-scrollbar { width: 6px; }
#prediction-section #questions-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 3px; }
#prediction-section #questions-container::-webkit-scrollbar-thumb { background-color: var(--input-border); border-radius: 3px; }

/* Styling for questions inside THIS container */
#prediction-section #questions-container .question {
    margin-bottom: 18px; background-color: #2d2d2d; padding: 15px;
    border-radius: 6px; border: 1px solid var(--input-border);
    transition: border-color 0.3s ease; text-align: left; /* Align left */
}
#prediction-section #questions-container .question > label { /* Label for question text */
     display: block; font-size: 1.1em; /* Slightly smaller than onboarding */
     font-weight: bold; color: var(--text-primary); margin-bottom: 15px;
     line-height: 1.3; text-align: left;
}
/* Align inputs left by default in this modal */
#prediction-section #questions-container .question .input-area {
     align-items: flex-start;
     /* Reusing base .input-area styles */
     padding-top: 8px;
     display: flex;
     flex-direction: column; /* Stack options */
     gap: 10px; /* Adjust gap */
}
/* Use the same enhanced label/input styles as onboarding for consistency */
/* Target labels specifically within this context */
#prediction-section #questions-container .radio-label,
#prediction-section #questions-container .checkbox-label {
    /* Base styles inherited from Block 4 */
    /* Add any overrides here if needed, e.g., different padding/font-size */
     margin: 0 0 5px 0; /* Adjust margin for vertical stacking */
     width: fit-content; /* Fit content width */
}

#prediction-section #questions-container .checkbox-group {
    justify-content: flex-start; /* Align left */
    flex-direction: column; /* Stack checkboxes vertically */
    gap: 8px; /* Adjust gap */
}
#prediction-section #questions-container .scale5-container {
     margin-left: 0; justify-content: flex-start; /* Align left */
     max-width: 400px; /* Adjust width if needed */
}
/* Reuse scale5-label styles */
#prediction-section #questions-container .scale5-label {
     /* Base styles inherited from Block 4 */
}
/* Submit button inside this modal's question form */
#prediction-section #baseline-question-form .submit-button, /* Target baseline */
#prediction-section #update-profile-form .submit-button { /* Target update */
    display: block; margin: 30px auto 10px auto; padding: 12px 25px;
    background-color: var(--accent-color-light); color: black; border: none;
    border-radius: 25px; font-size: 1.05em; font-weight: bold;
    cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease;
}
#prediction-section #baseline-question-form .submit-button:hover,
#prediction-section #update-profile-form .submit-button:hover {
     background-color: var(--accent-color); color: white;
}

/* Ensure the input styles from onboarding are also applied here if needed */
/* (They likely are via the .radio-label etc. selectors added in Block 4) */


/* Question Format Specific Styles */
.question .input-area { padding-top: 8px; }

/* Scale5 Layout */
.scale5-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping if needed on small screens */
    justify-content: center; /* Center scale items */
    align-items: center;
    gap: 12px; /* Increase gap slightly */
    padding: 15px 0; /* Add vertical padding */
    width: 100%;
    max-width: 500px; /* Increase max width */
    margin: 20px auto 15px auto; /* Adjust margins */
}
.scale5-label {
    display: flex;
    flex-direction: column; /* Keep column layout */
    align-items: center;
    text-align: center;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.9em; /* Slightly larger font */
    padding: 10px; /* Adjust padding */
    border-radius: 8px; /* Change to slightly rounded square */
    width: 65px;  /* Increase width */
    min-height: 55px; /* Ensure minimum height */
    justify-content: center;
    border: 1px solid var(--input-border);
    background-color: var(--button-subtle-bg); /* Add background */
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.1s ease;
}
.scale5-label:hover {
    background-color: var(--button-subtle-hover-bg);
    border-color: var(--hover-highlight);
    transform: translateY(-2px); /* Add slight hover effect */
}
/* Hidden radio button */
.scale5-label input[type="radio"] {
    appearance: none; position: absolute; opacity: 0; pointer-events: none;
}
/* Text inside the label */
.scale5-label span {
    display: block; line-height: 1.3; font-size: 1em; /* Adjust size */
}
/* Selected state */
.scale5-label:has(input:checked) {
    border-color: transparent;
    color: white;
    font-weight: bold;
    background-image: linear-gradient(to bottom right, var(--accent-color), var(--accent-color-light));
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
    transform: scale(1.1); /* More emphasis */
}
.scale5-label:has(input:checked) span {
    color: white; /* Ensure text is white */
}

/* Highlight selected scale label */
.scale5-label:has(input:checked) {
    background-color: rgba(163, 129, 216, 0.15); /* Faint accent color */
}

/* Checkbox Group */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 5px 0; /* Reduced gap */ padding-top: 5px; }
.checkbox-label {
    width: 100%; /* Make labels fill grid cell width */
    justify-content: center; /* Re-center text in grid cell */
}
/* Style label when its checkbox is checked */
.checkbox-label:has(input:checked) {
     background-color: var(--accent-color);
     border-color: var(--accent-color-light);
     color: white;
     font-weight: bold;
}
.checkbox-label input[type="checkbox"] { accent-color: var(--accent-color-light); margin: 0; height: 1.1em; width: 1.1em; cursor: pointer; }
.checkbox-limit-text { display: block; width: 100%; font-size: 0.8em; color: var(--text-muted); margin-top: 8px; text-align: left; }
.required-indicator { color: var(--error-color); margin-left: 3px; font-weight: normal; font-size: 0.9em; vertical-align: super; }

/* Submit button within the question form */
#question-form #submit-answers-button {
    display: block;
    margin: 30px auto 10px auto;
    padding: 12px 25px;
    background-color: var(--accent-color-light);
    color: black;
    border: none;
    border-radius: 25px;
    font-size: 1.05em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#question-form #submit-answers-button:hover {
    background-color: var(--accent-color);
    color: white;
}

/* Original Predict Button (Should remain hidden) */
#predict-button { display: none !important; }

/* Prediction Result Area within Modal */
#prediction-section.modal #prediction-result {
    margin-top: 0;
    margin-bottom: 25px;
    flex-shrink: 0; /* Prevent shrinking */
    padding: 25px 15px; /* Adjust padding */
    text-align: center; /* Center content */
    /* Remove direct text styling, handle via inner elements */
    font-size: 1em; /* Reset base font size */
    font-weight: normal;
    line-height: 1.5;
}

#prediction-section.modal #prediction-result.loading-state {
    /* Styles specific to the loading state */
    background-color: var(--card-background); /* Use neutral background */
    border-color: var(--input-border); /* Neutral border */
    color: var(--text-muted); /* Muted text */
}
#prediction-section.modal #prediction-result.loading-state p.loading {
    /* Style the <p class="loading"> text inside */
    font-size: 1.1em;
    font-style: italic;
    /* Optional: Add a spinner image */
    /* background: url('assets/images/film-reel-spinner.svg') no-repeat center center; */
    /* padding-top: 40px; */ /* Make space for spinner */
}

/* Optional wrapper for better control if needed */
.prediction-content-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    flex-shrink: 0; /* Make sure wrapper itself doesn't shrink vertically */
}

/* Popcorn Icon Styling */
.prediction-icon {
    width: 60px; /* Slightly smaller icon */
    margin: 0 auto 10px auto; /* Reduced bottom margin */
}
/* Headline Text Styling */
.prediction-headline {
    font-size: 1.2em; /* Larger than base */
    font-weight: bold; /* Make it stand out */
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 8px;
    display: block;
}
/* Details Text Styling */
.prediction-details {
    font-size: 0.95em; /* Slightly smaller */
    color: var(--text-secondary); /* More muted color */
    line-height: 1.5;
    margin-bottom: 20px; /* Space before reasons */
    display: block;
    max-width: 600px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto;
}
/* Reasons Styling (targeting the wrapper div) */
.prediction-reasons {
    /* The <small> tag inside will inherit its styles */
    /* Add margin if needed */
}
/* Inherited Result Base Styling (Keep these for background/border colors) */
.result {
    /* padding: 20px; (Adjusted above) */
    border-radius: 8px;
    /* text-align: center; (Set above) */
    border-width: 1px;
    border-style: solid;
}
.result strong { font-weight: bold; } /* Keep if used inside text */

/* Style for error message display within result area */
#prediction-section.modal #prediction-result.error-display p.error {
    padding: 15px;
    background-color: var(--error-background);
    border: 1px solid var(--error-color);
    border-radius: 6px;
    text-align: center;
    font-size: 0.95em;
    color: var(--error-color); /* Ensure text is error color */
}
.prediction-type-label {
    display: block;
    font-size: 0.8em;
    color: var(--accent-color-light);
    margin-bottom: 5px;
    font-weight: bold;
    text-transform: uppercase;
}
.prediction-score {
    font-weight: bold;
    margin-right: 5px;
}
/* Result Base Styling */
.result {
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-size: 1.1em;
    font-weight: normal;
    border-width: 1px;
    border-style: solid;
    line-height: 1.5;
}
.result strong { font-weight: bold; }

.result small {
    display: block;
    margin-top: 15px;
    font-size: 0.85em;
    font-weight: normal;
    color: var(--text-muted);
    line-height: 1.4;
    border-top: 1px dashed var(--input-border);
    padding-top: 10px;
    max-width: 500px; /* Limit width of reasons */
    margin-left: auto;
    margin-right: auto;
}

/* Result color variations */
.result.high { background-color: var(--success-background); color: var(--success-text); border-color: var(--success-border); }
.result.medium-high { background-color: #1e5120; color: #a5d6a7; border-color: #388e3c; }
.result.medium { background-color: #54480f; color: #fff9c4; border-color: #c49b0f; }
.result.medium-low { background-color: #612613; color: #ffccbc; border-color: #d84315; }
.result.low { background-color: #5f1818; color: #ffcdd2; border-color: #c62828; }

/* --- Utility Classes --- */
.hidden { display: none !important; }
.loading { text-align: center; color: var(--text-muted); font-style: italic; padding: 30px; width: 100%; box-sizing: border-box; }
.error { color: var(--error-color); font-weight: bold; }

/* --- Header Layout & Navigation --- */

header {
    display: flex; /* Use flexbox for header layout */
    justify-content: space-between; /* Space out logo, search, nav */
    align-items: center; /* Vertically align items */
    padding: 7px 30px; /* Adjust padding */
    /* Deep purple flow gradient */
    background: linear-gradient(90deg, #1a1a1a 0%, #2d1f47 50%, #1a1a1a 100%);
    box-shadow: none;
    margin-bottom: 30px;
    gap: 20px; /* Add gap between header items */
    position: sticky; /* Or fixed, depending on desired header behavior */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100; /* <<< Ensure header z-index is higher than views */
    box-sizing: border-box; /* Add if not present */
}

/* Logo container takes needed space */
#logo-container {
    flex-shrink: 0; /* Don't shrink logo area */
    margin-bottom: 0; /* Remove bottom margin if previously set */
}

#logo-image {
    max-height: 55px; /* <<< REDUCED default height for navbar */
    width: auto;
    display: block; /* Keep as block */
    /* Remove margin auto if centering is handled by flex */
    margin: 0;
}

/* Search wrapper takes flexible space in the middle */
#search-wrapper {
    flex-grow: 1; /* Allow search to take up available space */
    max-width: 700px; /* Limit max search width */
    /* Remove margin: 0 auto if centering handled by flex */
    margin: 0;
}
#search-container {
    /* Keep existing flex styles for input/button */
    display: flex;
    gap: 10px;
}
#search-input {
    /* Keep existing styles */
    flex-grow: 1;
    padding: 8px 15px; /* Slightly smaller padding */
    border-radius: 20px;
    font-size: 1em;
    text-shadow: none; /* Ensure no text shadow on input/placeholder */
}
#search-button {
    /* Keep existing styles */
    padding: 8px 20px; /* Slightly smaller padding */
    border-radius: 20px;
    font-size: 1em;
}

/* Main Navigation styling */
#main-nav {
    flex-shrink: 0; /* Don't shrink nav area */
}

/* Call to Action Button Style in Header */
#main-nav .cta-button {
    /* --- Replace background-color with gradient --- */
    background-image: linear-gradient(to right, #e91e63, var(--accent-color)); /* Placeholder Gradient - ADJUST COLORS LATER */
    color: white;
    border: none;
    /* --- Apply rounding --- */
    border-radius: 25px;
    padding: 9px 18px; /* Slightly adjust padding for visual balance */
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    /* --- Update transition --- */
    transition: filter 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Subtle default shadow */
}

#main-nav .cta-button:hover,
#main-nav .cta-button:focus {
    /* --- Update hover/focus style --- */
    filter: brightness(1.1); /* Brighten gradient */
    color: white; /* Keep text white */
    outline: none;
    box-shadow: 0 0 10px rgba(163, 129, 216, 0.5); /* Placeholder Glow effect - ADJUST COLOR LATER */
}

#main-nav .cta-button:active {
    transform: scale(0.98); /* Slight press effect */
}

#main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Arrange nav items horizontally */
    align-items: center; /* Align items vertically */
    gap: 25px; /* Space between nav items */
}

#main-nav li {
    margin: 0;
}

/* Style for navigation links */
#main-nav a {
    /* --- Updated Styles --- */
    color: var(--text-primary); /* Brighter default color */
    font-weight: 500; /* Medium weight for better visibility */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* Shadow for pop */
    /* --- Keep Existing --- */
    text-decoration: none;
    font-size: 0.95em;
    padding: 5px 0;
    transition: color 0.2s ease;
    border-bottom: 2px solid transparent;
}

#main-nav a:hover,
#main-nav a:focus {
    color: var(--accent-color-light); /* Keep accent color for hover */
    border-bottom-color: var(--accent-color-light); /* Match accent color */
    text-shadow: none; /* Optional: Remove shadow on hover */
}

/* Container for auth elements */
#auth-container {
    display: flex; /* Use flex for elements inside (when logged in) */
    align-items: center;
    gap: 15px; /* Space between greeting, profile, logout */
}

/* Header profile dropdown */
.profile-menu-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.profile-dropdown {
    position: absolute;
    top: 46px; /* slightly below the 38px circle */
    right: 0;
    min-width: 240px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(20, 20, 24, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    z-index: 2000;
    backdrop-filter: blur(10px);
}

.profile-dropdown-header {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
}

.profile-dropdown-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95em;
    line-height: 1.2;
}

.profile-dropdown-email {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.85em;
    line-height: 1.2;
}

.profile-dropdown-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.92em;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.profile-dropdown-item:hover,
.profile-dropdown-item:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    outline: none;
}

.profile-dropdown-item:active {
    transform: translateY(1px);
}

.profile-dropdown-item--danger {
    color: #ff8a80;
}

.profile-dropdown-item--danger:hover,
.profile-dropdown-item--danger:focus-visible {
    background-color: rgba(255, 138, 128, 0.12);
}
/* Style the Log In link like a subtle button */
#auth-container .cta-link-styled {
    display: inline-block;
    padding: 6px 18px;
    background-color: transparent; /* No background fill */
    /* --- CHANGE to white --- */
    color: var(--text-primary); /* White text */
    border: 1px solid var(--text-primary); /* White border */
    /* --- End Change --- */
    border-radius: 20px; /* Rounded pill */
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    text-shadow: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s; /* Added border-color */
    line-height: 1.3;
}

#auth-container .cta-link-styled:hover,
#auth-container .cta-link-styled:focus {
    /* --- Change Hover Effect --- */
    background-color: rgba(255, 255, 255, 0.1); /* Faint white background on hover */
    color: var(--text-primary); /* Keep text white */
    border-color: var(--text-primary); /* Keep border white */
    /* --- End Change --- */
    text-decoration: none;
    outline: none;
}

/* Specific styling for greeting/buttons if needed later */
#user-greeting {
    font-size: 0.9em;
    color: var(--text-muted);
}

#signout-button {
    background: none;
    border: 1px solid var(--input-border);
    color: var(--text-secondary);
    padding: 6px 12px; /* Adjusted padding */
    cursor: pointer;
    font-size: 0.85em;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    /* --- Apply rounding --- */
    border-radius: 25px; /* Match others */
}
#signout-button:hover {
    background-color: var(--button-subtle-hover-bg);
    border-color: var(--hover-highlight);
    color: var(--text-primary);
}
.profile-initials-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    /* Deep purple gradient matching MPM modal */
    background: linear-gradient(135deg, #5e35b1 0%, #4527a0 50%, #311b92 100%);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-primary);
    cursor: pointer;
    border: none;
    transition: transform 0.2s ease, filter 0.2s ease;
    outline: none;
    text-decoration: none;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.profile-initials-circle:hover {
    transform: scale(1.05);
    filter: brightness(1.15);
}

.profile-initials-circle:focus {
    outline: none;
}

.profile-initials-circle:focus-visible {
    outline: 2px solid rgba(126, 87, 194, 0.5);
    outline-offset: 2px;
}

.profile-initials-circle:active {
    transform: scale(0.95);
}

.profile-initials-circle .initials {
    line-height: 1;
}

.profile-initials-circle.profile-nav-active {
    outline: none;
    transform: scale(1.1);
    filter: brightness(1.15);
}

/* --- END NEW Profile Circle Styles --- */

/* Close Button specific to profile page */
#profile-section .close-modal-btn {
    position: fixed; /* Fixed position relative to viewport */
    top: 20px;
    right: 30px;
    /* Inherits general .close-modal-btn style */
}

/* Add rule for hidden state if .profile-page hidden was removed */
#profile-view.hidden { display: none !important; }

/* Show state (triggered by JS adding class or removing hidden) */
body.profile-open #profile-view { /* Target profile view directly */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.progress-bar-track {
    width: 100%;
    height: 14px; 
    border-radius: 7px; 
    background-color: rgba(255, 255, 255, 0.1); 
    overflow: hidden;
    margin-bottom: 15px; 
}

/* Style the new Edit button */
.edit-prefs-button {
    display: inline-block; /* Or block if preferred */
    margin-top: 15px; /* Space above button */
    /* Use subtle button styles */
    background-color: var(--button-subtle-bg);
    color: var(--text-secondary);
    border: 1px solid var(--input-border);
    padding: 8px 18px; /* Adjust padding */
    border-radius: 20px; /* Consistent rounding */
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.9em;
}
.edit-prefs-button:hover {
    background-color: var(--button-subtle-hover-bg);
    color: var(--text-primary);
}

#save-profile-changes-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 10px rgba(163, 129, 216, 0.5);
}

/* Questions Container - Grid Layout */
#profile-questions-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 20px;
    padding: 10px 0; /* Add some vertical padding */
    /* No internal scroll needed if .profile-page scrolls */
    /* overflow-y: auto; */
}

/* Style the Individual Question Cards */
#profile-questions-container .question {
    background-color: var(--card-background); 
    border: 1px solid var(--input-border); 
    border-radius: 12px; 
    padding: 25px 30px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.4); 
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-left 0.3s ease; /* Added border-left */
    display: flex; 
    flex-direction: column;
    border-left: 4px solid transparent; /* Start with transparent left border */
    padding-left: 30px; /* Keep consistent base padding */
}

#profile-questions-container .question:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Question Text Label */
#profile-questions-container .question > label { 
    display: block;
    font-family: var(--font-display); /* Lato */
    font-size: 1.2em; /* Adjusted size */
    font-weight: 600; 
    color: var(--text-primary);
    margin-bottom: 25px; 
    line-height: 1.4;
    cursor: default; 
    flex-shrink: 0; /* Prevent shrinking */
}

/* Question Input Area */
#profile-questions-container .question .input-area {
    align-items: flex-start; 
    gap: 10px; 
    padding-top: 0; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
}

/* Input Styling - Uses base radio-label, checkbox-label styles */
#profile-questions-container .radio-label,
#profile-questions-container .checkbox-label {
    /* These should mostly inherit from the general styles defined earlier */
    /* You might adjust padding/font-size specifically here if needed */
    padding: 10px 22px; 
    font-size: 0.95em; 
    margin-bottom: 5px; /* Override potential global margins if needed */
}
#profile-questions-container .radio-label input, 
#profile-questions-container .checkbox-label input {
    position: absolute; 
    opacity: 0; 
    pointer-events: none; 
}
#profile-questions-container .radio-label:hover, 
#profile-questions-container .checkbox-label:hover {
    /* Uses general hover defined elsewhere */
}
#profile-questions-container .radio-label:has(input:checked), 
#profile-questions-container .checkbox-label:has(input:checked) {
    /* Uses general checked defined elsewhere (gradient) */
}
#profile-questions-container .checkbox-group {
    /* Uses general style */
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 8px;
}
/* Hide input element */
#profile-questions-container .radio-label input,
#profile-questions-container .checkbox-label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#profile-questions-container .scale5-container {
    /* Uses general style */
    justify-content: flex-start; 
}
#profile-questions-container .scale5-label {
    /* Uses general style */
     width: 60px;  
     height: 60px;
}
#profile-questions-container .scale5-label:hover {
    background-color: var(--button-subtle-hover-bg);
    border-color: var(--hover-highlight);
    transform: translateY(-2px); 
}
#profile-questions-container .scale5-label input[type="radio"] { 
    appearance: none; position: absolute; opacity: 0; pointer-events: none; 
}
#profile-questions-container .scale5-label span { 
    display: block; line-height: 1.2; font-size: 1em;
}
#profile-questions-container .scale5-label:has(input:checked) {
    /* Uses general checked style (gradient) */
}
#profile-questions-container .scale5-label:has(input:checked) span {
    color: white; 
}

/* Highlight answered questions with border */
#profile-questions-container .question.answered {
    border-left-color: var(--accent-color); /* Use accent color */
    /* Keep padding the same, border adds width */
 }

/* Save Button (Currently commented out in HTML) */
#save-profile-button {
    display: block;
    margin: 20px auto 0 auto; /* Place at bottom, centered */
    /* Reuse CTA button style */
    background-image: linear-gradient(to right, #e91e63, var(--accent-color));
    color: white;
    border: none;
    border-radius: 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    padding: 12px 30px;
    font-size: 1.05em;
    font-weight: bold;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
#save-profile-button:hover {
     filter: brightness(1.1);
     box-shadow: 0 0 10px rgba(163, 129, 216, 0.5);
}

/* --- ADD/MODIFY Styles for Login --- */

/* Find and Replace this rule */
#login-form-area {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* avoid artificial scroll/clipping */
    align-items: center;
    text-align: center;
    /* --- ADD THIS LINE --- */
    flex-grow: 1; /* Allow this area to take up available vertical space */
    /* --- End Addition --- */
    width: 100%;
    box-sizing: border-box;
    padding: 28px 34px 18px; /* tighter vertical rhythm */
    overflow-y: hidden; /* prevent unnecessary scroll on first screen */
}
#login-form-area.hidden { display: none !important; }

/* Optional Webkit scrollbar styling (kept off unless overflow is enabled) */

/* Style login title */
#login-form-area h3 {
    font-family: var(--font-primary); /* Nunito */
    font-size: 1.35em; /* tighter to save vertical space */
    color: var(--text-primary);
    margin: 0 0 12px 0; /* reduce real estate */
    font-weight: 700;
}

/* Legal line at bottom of login modal */
#login-form-area .login-legal {
    margin-top: 14px; /* keep visible without pushing content down */
    padding-top: 0;
    font-size: 0.78em;
    line-height: 1.35;
    color: var(--text-muted);
    text-align: center;
}

#login-form-area .login-legal a {
    color: var(--accent-color-light);
    text-decoration: none;
}

#login-form-area .login-legal a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* Style the login form itself */
#login-form {
    display: flex;
    flex-direction: column;
    gap: 14px; /* Space between form elements */
    width: 100%;
    max-width: 380px; /* Limit form width */
    text-align: left; /* Align labels left */
}

/* Reuse existing registration form styles for labels, inputs, errors, button, switch link */
/* Ensure these general rules apply to both forms if selectors are broad enough */
/* e.g., #onboarding-modal .form-group label, */
/*       #onboarding-modal .form-group input, etc. */
/* OR add specific rules for #login-form if needed: */

#login-form .form-group label {
    /* Inherit or add styles like registration */
    font-family: var(--font-display);
    font-size: 0.9em;
    font-weight: bold;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

#login-form .form-group input[type="email"],
#login-form .form-group input[type="password"] {
     /* Inherit or add styles like registration */
    padding: 12px 15px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background-color: var(--input-background);
    color: var(--text-primary);
    font-size: 1em;
}
#login-form .form-group input:focus {
     outline: none;
     border-color: var(--accent-color-light);
     box-shadow: 0 0 5px rgba(163, 129, 216, 0.3);
}

#login-form .form-error {
    color: var(--error-color);
    font-size: 0.85em;
    min-height: 1.2em;
    text-align: center;
    margin-top: -5px;
    margin-bottom: 5px; /* Less margin below error */
}

#login-form .submit-button {
     /* Inherit or add styles like registration */
     padding: 12px 25px;
     background-image: linear-gradient(to right, #e91e63, var(--accent-color));
     color: white;
     border: none;
     border-radius: 25px;
     font-size: 1.05em;
     font-weight: bold;
     cursor: pointer;
     transition: filter 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
     margin-top: 2px; /* keep CTA closer to inputs */
}
#login-form .submit-button:hover {
     filter: brightness(1.1);
     box-shadow: 0 0 10px rgba(163, 129, 216, 0.5);
}
#login-form .submit-button:disabled {
     filter: brightness(0.7);
     cursor: wait;
}


#login-form .switch-auth-link {
     /* Inherit or add styles like registration */
     margin-top: 16px;
     font-size: 0.9em;
     color: var(--text-muted);
     text-align: center;
}
#login-form .switch-auth-link a {
     color: var(--accent-color-light);
     font-weight: bold;
     text-decoration: none; /* no underline by default */
}
#login-form .switch-auth-link a:hover {
     color: var(--text-primary);
     text-decoration: underline;
}

#login-form-area .or-divider {
    margin: 10px 0 12px;
}

#login-form-area #google-signin-button {
    max-width: 380px;
    width: 100%;
    margin: 0 auto;
}

#login-form-area .switch-auth-link {
    margin-top: 22px; /* separate from Google CTA */
}

/* --- Auth: Password show/hide toggle --- */
.password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field input {
    width: 100%;
    padding-right: 52px; /* room for the icon toggle */
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent; /* remove bubble */
    color: rgba(255, 255, 255, 0.78);
    border-radius: 10px; /* only for focus ring shape */
    padding: 8px; /* keep tap target */
    font-family: var(--font-secondary);
    font-size: 0.85em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.password-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Default (password hidden): show CLOSED eye icon */
.password-toggle .password-toggle-icon--show { display: none; }
.password-toggle .password-toggle-icon--hide { display: inline-flex; }

/* When pressed (password visible): show OPEN eye icon */
.password-toggle[aria-pressed="true"] .password-toggle-icon--show { display: inline-flex; }
.password-toggle[aria-pressed="true"] .password-toggle-icon--hide { display: none; }

.password-toggle:hover {
    color: var(--text-primary);
}

.password-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(163, 129, 216, 0.35);
}

/* --- Signup Screen (Benefits + Actions) --- */
#signup-layout {
    display: none; /* shown when registration-form is visible */
    width: 100%;
    margin-top: 10px; /* reduce empty space */
    text-align: left; /* override modal default centering */
    gap: 16px 34px;
    align-items: flex-start;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    /* shrink-safe columns to avoid horizontal overflow */
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    grid-template-areas:
        "actions benefits";
}

.signup-logo {
    height: 52px; /* larger logo */
    width: auto;
    opacity: 0.98;
    display: block;
    margin: 0 0 10px 0; /* tie it to benefits heading */
}

#signup-actions {
    flex: 0 0 380px; /* keep actions as the left column */
    max-width: 380px;
    order: 1;
    grid-area: actions;
}

#signup-benefits {
    flex: 1 1 auto; /* fill remaining space on the right */
    order: 2;
    grid-area: benefits;
    position: relative;
    padding: 10px 18px 12px 28px; /* create breathing room and separation */
}

/* Visual separation: subtle right-pane treatment + divider */
#signup-benefits::before {
    content: "";
    position: absolute;
    inset: 0; /* keep inside column to avoid horizontal scrolling */
    background:
        radial-gradient(120% 140% at 10% 20%, rgba(163,129,216,0.10), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.10) 100%);
    border-left: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    pointer-events: none;
    z-index: 0;
}

#signup-benefits > * {
    position: relative;
    z-index: 1;
}

.signup-benefits-title {
    font-family: var(--font-primary);
    font-size: 1.45em;
    font-weight: 800;
    margin: 0 0 14px 0;
    color: var(--text-primary);
}

.signup-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.signup-benefit {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 2px 0; /* remove card feel */
    border-radius: 0;
    background: transparent; /* no wrapping boxes */
    border: none;
}

.signup-benefit::before {
    content: "✓";
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(163, 129, 216, 0.16);
    border: 1px solid rgba(163, 129, 216, 0.22);
    color: rgba(255,255,255,0.92);
    flex: 0 0 auto;
    font-weight: 900;
    margin-top: 2px;
}

.benefit-text {
    text-align: left;
}

.benefit-title {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.benefit-subtitle {
    margin-top: 3px;
    font-family: var(--font-secondary);
    color: var(--text-secondary);
    font-size: 0.95em;
    line-height: 1.3;
}

.coming-soon-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    vertical-align: middle;
}

.signup-actions-title {
    font-family: var(--font-primary);
    font-size: 1.45em; /* match benefits title */
    font-weight: 800;
    margin: 0 0 14px 0;
    color: var(--text-primary);
    text-align: left;
}

#signup-actions .social-signin-button.google {
    max-width: 420px;
    width: 100%;
    margin: 0;
}

.signup-or-divider {
    margin: 18px 0;
}

/* Make the email form feel like the secondary path */
#signup-actions #registration-form h4 {
    margin: 0 0 14px 0;
    font-family: var(--font-secondary);
    font-weight: 800;
    color: var(--text-primary);
    text-align: left;
}

#signup-actions #registration-form {
    gap: 14px;
    border-top: none !important; /* remove redundant divider line */
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.signup-legal {
    margin-top: 14px;
    font-size: 0.85em;
    color: var(--text-muted);
    text-align: left;
}

/* Show the layout when the registration form is visible */
#registration-form:not(.hidden) ~ .signup-legal,
#registration-form:not(.hidden) {
    /* no-op: keep specificity without affecting other forms */
}

#onboarding-prediction-area:has(#registration-form:not(.hidden)) #signup-layout {
    display: grid;
}

@media (max-width: 860px) {
    #signup-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "actions"
            "benefits";
        gap: 22px;
    }
    #signup-actions {
        max-width: 100%;
    }

    #signup-benefits {
        padding: 14px 18px;
    }
    #signup-benefits::before {
        inset: 0;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.10);
    }
}

/* Verify this rule */
#onboarding-modal.login-mode {
    max-width: 550px;
    /* --- SET Explicit Height --- */
    height: 70vh;       /* Example: 70% of viewport height */
    min-height: 500px;  /* Keep minimum pixel height */
    max-height: 600px;  /* <<< Slightly REDUCED max pixel height for simpler form */
    /* --- End Height --- */
}

/* Widen modal for two-column signup layout (when registration form is visible) */
#onboarding-modal.login-mode:has(#registration-form:not(.hidden)) {
    max-width: 900px;
    height: auto;
    min-height: 550px;
    max-height: 95vh;
}

/* --- Profile Completion Header Indicator --- */
#auth-container {
    /* Ensure flex alignment and add gap */
    display: flex;
    align-items: center;
    gap: 12px; /* Adjust gap between indicator and initials */
}

.profile-completion-indicator {
    display: flex; /* Use flex to center content */
    align-items: center;
    justify-content: center;
    width: 40px;  /* Slightly larger than initials for visual hierarchy? Or same? Let's try same */
    height: 40px; /* Match width */
    position: relative; /* For positioning text */
    background: none; /* Transparent background */
    border: none; /* No default button border */
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.profile-completion-indicator.hidden {
    display: none !important;
}

.profile-completion-indicator:hover {
    transform: scale(1.1); /* Slight scale on hover */
}

/* SVG Styling */
.profile-completion-indicator .completion-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Start the circle at the top */
    display: block;
}

/* Track (Background Circle) */
.profile-completion-indicator .completion-track {
    stroke: var(--input-border); /* Dim background track color */
    stroke-width: 3; /* Consistent stroke width */
}

/* Value (Progress Arc) */
.profile-completion-indicator .completion-value {
    /* Use a gradient for the progress */
    stroke: url(#completion-gradient);
    stroke-width: 3; /* Consistent stroke width */
    /* transition stroke-dashoffset for animation */
    transition: stroke-dashoffset 0.5s ease-out;
}

/* Percentage Text inside */
.profile-completion-indicator .completion-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-secondary);
    font-size: 0.7em; /* Small percentage text */
    font-weight: bold;
    line-height: 1;
    font-family: var(--font-primary); /* Use Nunito maybe? */
}

/* Hover state - slightly brighter text? */
.profile-completion-indicator:hover .completion-percentage {
    color: var(--text-primary);
}

/* --- Add SVG Gradient Definition (place anywhere in CSS) --- */
/* This avoids needing extra HTML for the gradient definition */
body::before { 
  content: '';
  height: 0; 
  width: 0; 
  position: absolute; 
  visibility: hidden; 
  z-index: -1; 
  /* The SVG containing the gradient definition */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='0' height='0'><defs><linearGradient id='completion-gradient' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:rgb(233,30,99);stop-opacity:1' />  <!-- Start Pink --> <stop offset='100%' style='stop-color:rgb(126,87,194);stop-opacity:1' /> <!-- End Accent --></linearGradient></defs></svg>"); 
}

/* --- START Profile Preference Button/Progress Bar Styles --- */

#auth-container {
    /* Ensure flex alignment and gap if not already set */
    display: flex;
    align-items: center;
    gap: 12px; /* Adjust gap as needed */
}

/* ============================================ */
/* === Auth-Pending State (avoid flash of logged-out UI) === */
/* ============================================ */

/* 
 * For returning users (cached profile exists):
 * - Hide "See How It Works" completely
 * - Show a skeleton "My Movie Profile" button that matches the real one
 * - When auth confirms: skeleton → real profile button (minimal change)
 * 
 * For logged-out users or stale cache:
 * - updateAuthUI will remove auth-pending and show "See How It Works"
 */

/* Hide "See How It Works" when we think user is logged in */
body.auth-pending #get-prediction-btn-header {
    display: none !important;
}

/* Pre-render a skeleton profile button that matches real one */
body.auth-pending #auth-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.auth-pending #auth-container::before {
    content: 'Loading Profile';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 38px;
    padding: 0 16px;
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    background: linear-gradient(135deg, 
        rgba(255, 138, 128, 0.15) 0%, 
        rgba(128, 203, 196, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 19px;
    box-sizing: border-box;
    animation: auth-pulse 1.8s ease-in-out infinite;
}

@keyframes auth-pulse {
    0%, 100% { 
        opacity: 0.7;
        border-color: rgba(255, 255, 255, 0.12);
    }
    50% { 
        opacity: 1;
        border-color: rgba(255, 255, 255, 0.25);
    }
}

/* Skeleton for profile circle */
body.auth-pending #auth-container::after {
    content: '';
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.15);
    animation: auth-pulse 1.8s ease-in-out infinite;
    animation-delay: 0.2s; /* Slight offset for visual interest */
}

/* Remove skeleton elements once auth is confirmed */
body:not(.auth-pending) #auth-container::before,
body:not(.auth-pending) #auth-container::after {
    display: none;
}

/* Smooth transitions when swapping UI */
#auth-container,
#auth-container > *,
#header-cta-container,
#get-prediction-btn-header {
    transition: opacity 0.2s ease-out;
}

/* ============================================ */
/* === My Movie Profile Button (Refined) === */
/* ============================================ */

.prefs-progress-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    position: relative;
    border: none;
    border-radius: 19px;
    background-color: rgba(25, 20, 32, 0.95);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    gap: 0;
    box-sizing: border-box;
}

.prefs-progress-button.hidden {
    display: none !important;
}

.prefs-progress-button:hover {
    transform: translateY(-1px);
}

/* Fill element - the gradient progress bar */
.prefs-progress-button .prefs-progress-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0; height: 100%;
    width: 0%; /* JS updates this */
    /* Simple pink-to-purple gradient - clean at any percentage */
    background: linear-gradient(90deg, #e91e63 0%, #7c4dff 100%);
    border-radius: 19px 0 0 19px; 
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease;
    z-index: 0;
}

/* When progress is 100%, rounded on both sides */
.prefs-progress-button .prefs-progress-fill[style*="width: 100%"],
.prefs-progress-button .prefs-progress-fill[style*="width: 99"] {
    border-radius: 19px; 
}

/* Text element */
.prefs-progress-button .prefs-progress-text {
    position: relative;
    z-index: 1;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.01em;
}

/* Percentage indicator - clean, no box */
.prefs-progress-percentage {
    position: relative;
    z-index: 1;
    font-size: 0.92rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1;
    margin-left: 10px;
    padding-left: 10px;
    /* Very subtle separator */
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.3s ease, transform 0.3s ease;
    background: none;
}

/* When complete, keep percentage white for clean look */
.prefs-progress-button[data-complete="true"] .prefs-progress-percentage {
    color: rgba(255, 255, 255, 0.95);
}

.prefs-progress-button:hover .prefs-progress-percentage {
    color: #fff;
}

/* Animation for percentage changes */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.percentage-changed {
    animation: pulse 0.35s ease-out;
}

/* Active/click effect */
.prefs-progress-button:active {
    transform: scale(0.98) translateY(0);
}

/* --- END Profile Preference Button/Progress Bar Styles --- */

/* ============================================ */
/* === PREDICTION MODAL LAYOUT & STYLES (ADD) === */
/* ============================================ */

#prediction-display-area .prediction-content-wrapper > div:last-child {
    margin-bottom: 0;
}
/* Adjust Header spacing (might need less margin now) */
#prediction-display-area .prediction-summary-header {
    margin-bottom: 25px; /* Slightly reduced margin */
    padding-bottom: 20px; /* Slightly reduced padding */
    /* Keep background, border-radius, etc. from previous step */
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--input-border);
    padding: 25px 20px;
}
.prediction-verdict-text {
    font-size: 1.15em; /* Slightly smaller verdict */
    font-weight: bold;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 4px; /* Reduced margin */
}
.prediction-type-label {
    font-size: 0.7em; /* Smaller */
    color: var(--text-muted);
    margin-top: 0px; /* Remove top margin */
    margin-bottom: 8px; /* Space before details */
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.prediction-details {
    font-size: 0.9em; /* Slightly smaller */
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 0; /* Remove top margin */
    margin-bottom: 0; /* Remove bottom margin */
    max-width: 500px;
}

/* --- Media Query for Side-by-Side Layout --- */
/* Apply only when the screen/modal is reasonably wide */
@media (min-width: 550px) { /* Adjust breakpoint as needed */
    .prediction-header-main-content {
        flex-direction: row; /* <<< Score and text side-by-side */
        justify-content: center; /* Center the row items */
        align-items: center; /* Align items vertically */
        gap: 25px; /* Add gap between score and text block */
    }
}

/* Specific colors for reason icons */
.reason-pro { color: #90ee90; /* Light green */ }
.reason-con { color: #ffa07a; /* Light salmon/red */ }
.reason-neutral { color: var(--text-muted); }

.analysis-intro {
    font-size: 0.8em;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 20px; /* More space */
    text-align: left;
}
.analysis-section {
    margin-bottom: 18px; /* More space between sections */
    text-align: left;
}
.analysis-section:last-child {
    margin-bottom: 0; /* No margin on last item */
}
.analysis-section h5 {
    font-family: var(--font-display); /* Lato */
    font-size: 1.05em; /* Slightly larger sub-heading */
    font-weight: bold;
    color: var(--text-primary);
    margin: 0 0 6px 0; /* Adjust margin */
    display: flex;
    align-items: center;
    gap: 8px; /* Slightly more gap */
}
.analysis-icon {
    font-size: 1.3em; /* Slightly larger */
    display: inline-block;
    line-height: 1;
    color: var(--accent-color-light); /* <<< Use accent color for icons */
    opacity: 1; /* Full opacity */
    width: 22px; /* Adjust width */
    text-align: center;
}
.analysis-section p {
    font-size: 0.95em; /* Slightly larger text */
    color: var(--text-secondary);
    line-height: 1.6; /* Improve readability */
    margin: 0;
    padding-left: 28px; /* Adjust indent based on icon size+gap */
}

.reception-summary {
    /* Styles for when scores are added later */
     display: flex;
     justify-content: space-around;
     gap: 15px;
     margin-bottom: 15px;
     padding: 15px;
     background-color: rgba(0,0,0,0.15);
     border-radius: 6px;
     /* Remove display:none if you add scores */
     display: none; /* HIDE until scores are implemented */
}
.reception-critics, .reception-audience {
    text-align: center;
}
.reception-icon { font-size: 1.5em; display: block; margin-bottom: 3px; }
.reception-score { font-weight: bold; font-size: 1.1em; color: var(--text-primary); display: block; }
.reception-source { font-size: 0.8em; color: var(--text-muted); display: block; text-transform: uppercase; }

.reception-text-summary { /* Style for the text snippets */
    font-size: 0.9em; /* Adjust size */
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 10px; /* Space between critic/audience summaries */
    text-align: left;
    font-style: italic; /* Italicize summary text */
}
.reception-text-summary:last-child {
    margin-bottom: 0;
}
.reception-text-summary strong {
    color: var(--text-secondary);
    font-weight: bold; /* Ensure bold */
    font-style: normal; /* Make "Critics:", "Audience:" not italic */
    margin-right: 5px;
}

/* === Brand Identity Enhancements === */

/* Section Titles (h4) */
#prediction-display-area h4 { /* Target all H4s within the display area */
    font-family: var(--font-primary); /* Nunito */
    font-size: 1.25em; /* Ensure consistent size */
    color: var(--accent-color-light); /* <<< Use LIGHT accent color for visibility */
    margin: 0 0 15px 0;
    padding-bottom: 8px; /* Space for border */
    text-align: left;
    width: 100%; /* Make it take full width for border */
    /* Gradient Border */
    border-bottom: 1px solid transparent; /* Base */
    border-image: linear-gradient(to right, var(--accent-color), #e91e63, rgba(233, 30, 99, 0.1)) 1; /* Gradient fading out */
    /* Fallback border */
    border-bottom: 1px solid var(--accent-color);
}

/* Typography within AI Analysis section */
#prediction-display-area .analysis-section h5 {
    /* Keep existing styles */
    font-size: 1.0em; /* Ensure size hierarchy */
    margin-bottom: 8px;
}
#prediction-display-area .analysis-section p {
    /* Keep existing styles */
    line-height: 1.65; /* Increase paragraph line height */
    margin-bottom: 8px; /* Add small space below paragraphs */
}
#prediction-display-area .analysis-section p:last-child {
    margin-bottom: 0;
}
/* Typography within Reception & Comparables */
#prediction-display-area .reception-text-summary,


/* --- End Brand Identity --- */

/* ============================================ */
/* == END PREDICTION MODAL LAYOUT & STYLES ==== */
/* ============================================ */

/* Ensure these button styles exist or are adapted */

.cta-button {
    /* Style as primary gradient CTA */
    background-image: linear-gradient(to right, #e91e63, var(--accent-color));
    color: white;
    border: none;
    border-radius: 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    padding: 10px 25px; /* Adjust padding as needed */
    font-size: 1em; /* Adjust font size */
    font-weight: bold;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    text-decoration: none;
    line-height: 1.2;
}
.cta-button:hover {
     filter: brightness(1.1);
     box-shadow: 0 0 10px rgba(163, 129, 216, 0.5);
}
.cta-button:disabled {
    filter: brightness(0.7);
    cursor: not-allowed;
}


.subtle-button {
    display: inline-block;
    padding: 8px 20px; 
    background-color: transparent; 
    color: var(--text-secondary); /* Muted text */
    border: 1px solid var(--input-border); /* Subtle border */
    border-radius: 20px; 
    text-decoration: none;
    font-size: 0.95em; 
    font-weight: 500;
    text-shadow: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s; 
    line-height: 1.3;
    cursor: pointer;
}
.subtle-button:hover {
    background-color: var(--button-subtle-hover-bg); 
    color: var(--text-primary); 
    border-color: var(--hover-highlight); 
}

/* Add specific style for submit button in modal */
.modal-submit-button {
    display: block; /* Center using margin */
    width: fit-content; 
    margin: 30px auto 10px auto; /* Center and add space */
     /* Inherit general .cta-button styles (gradient, etc) */
}

/* Style for the title above questions in modal */
.modal-question-title {
    font-family: var(--font-primary);
    font-size: 1.3em;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-align: center;
    flex-shrink: 0; /* Prevent shrinking */
}

/* ============================================ */
/* === PROFILE PAGE STYLE ENHANCEMENTS ======== */
/* ============================================ */

/* 1. Add vertical margin BETWEEN question cards */
/* Targets each .question div specifically within the profile questions container */
#profile-view #profile-questions-container .question {
    margin-bottom: 30px; /* Adjust this value (e.g., 20px, 25px, 1.5em) for desired spacing */
    /* Keep other existing styles for .question like background, border, padding, etc. */
}

/* 2. Center the question title text (the <label>) */
/* Targets the label that is a direct child of .question */
#profile-view #profile-questions-container .question > label {
    text-align: center;
    /* Keep other existing label styles (font, size, color, etc.) */
    /* Ensure sufficient bottom margin below centered title */
    margin-bottom: 25px; /* Adjust if needed */
}

/* 3. Center the answer options area (.input-area) */
/* Targets the container for the inputs */
#profile-view #profile-questions-container .question .input-area {
    align-items: center; /* Change from 'flex-start' to 'center' to center the items horizontally */
    /* Keep other existing .input-area styles (display:flex, flex-direction, gap) */
}

/* Optional refinement: Ensure specific input types look good centered */

/* For Scale5, ensure the container itself remains centered (it likely does already) */
#profile-view #profile-questions-container .scale5-container {
    justify-content: center; /* Should already be there, confirm */
}

/* For radio/checkbox buttons, allow them to take natural width */
#profile-view #profile-questions-container .radio-label,
#profile-view #profile-questions-container .checkbox-label {
    width: auto;        /* Allow width based on content */
    max-width: 90%;     /* Prevent excessively wide buttons */
    /* Justification is handled by the parent (.input-area) */
}

/* For checkbox groups, you might want to center the group block itself */
#profile-view #profile-questions-container .checkbox-group {
    width: fit-content; /* Let the group size itself */
    max-width: 90%;     /* Limit max width */
    /* Center the group block if desired (align-items: center on parent already does this) */
     /* margin-left: auto; */ /* Not needed if parent is centering */
     /* margin-right: auto; */ /* Not needed if parent is centering */
     /* Keep flex-direction: column if you want them stacked vertically when centered */
}

/* User Info Section */
#profile-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 0; 
}

/* Style profile circle on page */
#profile-page-circle { 
    width: 80px; 
    height: 80px;
    border-radius: 50%;
    background-color: var(--accent-color); 
    color: white; 
    font-size: 1.8em; 
    font-weight: bold;
    font-family: var(--font-primary); 
    border: 1px solid var(--accent-color-light); 
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    padding: 0; /* Ensure no padding */
    cursor: default; /* Not clickable */
}
#profile-page-circle .initials {
    line-height: 1;
}

#profile-page-name {
    font-family: var(--font-primary); /* Nunito */
    font-size: 1.6em; 
    font-weight: 700;
    color: var(--text-primary);
    margin: 0; 
}

/* Enhance Progress Container */
#profile-progress-container {
    border-radius: 12px; /* Maybe remove this too if no background? */
    padding: 15px 0px; /* Adjust vertical padding, remove horizontal? */
    text-align: center;
    margin-bottom: 25px; /* Keep margin below the indicator */
}

#profile-progress-container h3 {
    font-family: var(--font-primary); /* Nunito */
    font-size: 1.2em;
    color: var(--text-secondary);
    margin-top: 0;
    margin-bottom: 20px; 
    font-weight: 600; 
}

#profile-progress-container .progress-bar-track { /* Ensure specific targeting */
    width: 100%;
    height: 14px; 
    border-radius: 7px; 
    background-color: rgba(255, 255, 255, 0.1); 
    overflow: hidden;
    margin-bottom: 15px; 
}

#profile-progress-fill { /* Already defined globally, ensure this ID is targeted if specific style needed */
    height: 100%;
    width: 0%; /* JS sets width */
    border-radius: 7px; 
    background: linear-gradient(to right, #e91e63, var(--accent-color)); 
    transition: width 0.5s ease-out;
}

#profile-completion-text {
    display: block;
    text-align: center;
    font-size: 1em;
    color: var(--text-primary); 
}

/* Style Edit Button */
#edit-profile-prefs-btn {
    /* Uses .subtle-button style, ensure that class is applied if desired */
    /* Or apply specific styles here if needed */
    display: inline-block;
    padding: 8px 20px; 
    background-color: transparent; 
    color: var(--text-primary); 
    border: 1px solid var(--text-primary); 
    border-radius: 20px; 
    text-decoration: none;
    font-size: 0.95em; 
    font-weight: 500;
    text-shadow: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s; 
    line-height: 1.3;
    margin-top: 20px; 
    cursor: pointer;
}
#edit-profile-prefs-btn.hidden { display: none !important; }

#edit-profile-prefs-btn:hover {
    background-color: rgba(255, 255, 255, 0.1); 
    color: var(--text-primary); 
    border-color: var(--text-primary); 
}


/* Style Question Section Title (when visible) */
#profile-questions-title {
    text-align: center;
    margin-bottom: 15px; 
    padding-bottom: 10px;
}
#profile-questions-title h2.hidden,
#profile-questions-title p.hidden {
    display: none !important;
}

#profile-questions-title h2 {
    font-family: var(--font-primary); /* Nunito */
    font-size: 1.8em;
    color: var(--text-primary);
    margin: 0 0 5px 0;
}

#profile-questions-title p {
    font-size: 1em; 
    color: var(--text-secondary); 
    max-width: 600px; 
    margin: 0 auto;
    line-height: 1.5;
}


/* Style the Question Grid Container */
#profile-questions-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 25px; 
    padding: 10px 0; 
}
#profile-questions-container.hidden { display: none !important; }


/* Style the Individual Question Cards within Profile View*/
#profile-view .question { /* Specificity */
    background-color: var(--card-background); 
    border: 1px solid var(--input-border); 
    border-radius: 12px; 
    padding: 25px 30px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.4); 
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-left 0.3s ease; 
    display: flex; 
    flex-direction: column;
    border-left: 4px solid transparent; /* Start transparent */
}
#profile-view .question:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Profile preferences live inside the right pane surface; don't "lift" the whole section on hover. */
#profile-view .question.profile-question-item:hover {
    transform: none;
    box-shadow: none;
}
#profile-view .question.answered {
    border-left-color: var(--accent-color); 
    padding-left: calc(30px - 4px); /* Adjust padding */
}


/* Question Text Label within Profile View*/
#profile-view .question > label { 
    display: block;
    font-family: var(--font-display); /* Lato */
    font-size: 1.2em; 
    font-weight: 600; 
    color: var(--text-primary);
    margin-bottom: 25px; 
    line-height: 1.4;
    cursor: default; 
    flex-shrink: 0; 
}

/* Question Input Area within Profile View*/
#profile-view .question .input-area {
     align-items: flex-start; 
     gap: 10px; 
     padding-top: 0; 
     flex-grow: 1; 
     display: flex; 
     flex-direction: column; 
}

/* Input Styling within Profile View */
/* Relies on global .radio-label, .checkbox-label, .scale5-label styles */
/* Add overrides here ONLY if profile page needs different input styling */
#profile-view .radio-label,
#profile-view .checkbox-label {
    /* Example override if needed: */
    /* font-size: 0.9em; */
}
#profile-view .checkbox-group {
     /* Example override if needed: */
    /* gap: 5px; */
}
#profile-view .scale5-container {
     /* Example override if needed: */
    /* justify-content: center; */ /* Center scale? */
}


/* Save Changes button */
#save-profile-changes-btn {
    background-image: linear-gradient(to right, #e91e63, var(--accent-color));
    color: white;
    border: none;
    border-radius: 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    padding: 12px 30px;
    font-size: 1.05em;
    font-weight: bold;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    display: block; 
    width: fit-content; 
    margin: 40px auto 10px auto; 
}
#save-profile-changes-btn.hidden { display: none !important; }

#save-profile-changes-btn:hover {
     filter: brightness(1.1);
     box-shadow: 0 0 10px rgba(163, 129, 216, 0.5);
}
#save-profile-changes-btn:disabled {
    filter: brightness(0.7);
    cursor: wait;
}


/* Signout button container */
#profile-signout-container {
     margin-top: 40px; 
     padding-top: 25px; 
     border-top: 1px solid var(--input-border);
     text-align: center;
}

/* Signout button styling */
#profile-page-signout-btn {
     display: inline-block;
     padding: 8px 20px; 
     background-color: transparent; 
     color: var(--text-secondary); 
     border: 1px solid var(--input-border); 
     border-radius: 20px; 
     text-decoration: none;
     font-size: 0.95em; 
     font-weight: 500;
     text-shadow: none;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s; 
     line-height: 1.3;
     cursor: pointer;
}

#profile-page-signout-btn:hover {
     background-color: var(--error-background); 
     border-color: var(--error-color);
     color: var(--error-color);
}

/* ============================================ */
/* ============================================ */

/* ============================================ */
/* == PREDICTION MODAL LAYOUT & STYLES (ADD) == */
/* ============================================ */

/* Base style for the prediction modal container */
#prediction-section.modal { 
    /* Solid subtle border (no transparency bleed) */
    background-color: #1a1a1a;
    background-image: radial-gradient(ellipse at center, rgba(60, 35, 40, 0.9) 0%, rgba(30, 26, 28, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    max-width: 1200px; 
    width: 85%;      
    height: 80vh;    
    max-height: 750px; 
    padding: 0; 
    display: flex; 
    flex-direction: column;
    position: fixed; /* Ensure base modal styles are present if not inheriting */
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1); /* Assuming modal is visible */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 1000;
    overflow: hidden; 
}
#prediction-section.modal.prediction-modal {
     /* Unified dark purple base - seamless with right pane */
     background-color: #100d16;
     background-image: 
         radial-gradient(ellipse at 20% 50%, rgba(50, 30, 45, 0.6) 0%, transparent 50%),
         radial-gradient(ellipse at 80% 50%, rgba(30, 20, 40, 0.4) 0%, transparent 50%);
     border: 1px solid rgba(255, 255, 255, 0.12);
     box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* Main 2-column layout container inside prediction modal */
.prediction-layout-container {
    display: flex;
    flex-direction: row; 
    width: 100%;
    flex-grow: 1; 
    /* Remove padding - let panes handle their own spacing */
    padding: 0;
    box-sizing: border-box;
    gap: 0;
    height: 100%; /* Add this */
    position: relative; /* for the fade overlay */
}
/* Fade overlay for the RIGHT edge gap (22px padding on .prediction-layout-container) */
.prediction-layout-container:has(.rail-layout-active)::after {
    content: "";
    position: absolute;
    right: -10px;
    width: 35px;
    bottom: 0;
    height: 100px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(30, 26, 28, 0.10) 6%,
        rgba(30, 26, 28, 0.30) 12%,
        rgba(30, 26, 28, 0.55) 18%,
        rgba(30, 26, 28, 0.80) 24%,
        rgb(30, 26, 28) 30%,
        rgb(30, 26, 28) 100%
    );
    pointer-events: none;
    z-index: 25;
}

/* Common styling for both panes */
.prediction-pane {
    height: 100%; 
    overflow-y: auto; 
    padding: 20px; /* Increased padding */
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--input-border) rgba(25, 25, 25, 0.5); /* Darker track */
    background-color: rgba(10, 10, 10, 0.2); /* Slightly darker/distinct pane bg */
    border-radius: 8px; 
    display: flex; 
    flex-direction: column;
}
.prediction-pane::-webkit-scrollbar { width: 8px; }
.prediction-pane::-webkit-scrollbar-track { background: rgba(10, 10, 10, 0.2); border-radius: 4px; }
.prediction-pane::-webkit-scrollbar-thumb { background-color: var(--input-border); border-radius: 4px; border: 2px solid rgba(10, 10, 10, 0.2); }


/* Left Pane: Media Info */
#prediction-left-pane {
    flex: 0 0 35%; /* Increased from 30% to 35% for more detail space */
    max-width: 420px; /* Increased from 350px to accommodate more content */
    padding: 24px 22px 24px 28px; /* a bit more left padding for breathing room */
    /* Gradient that creates depth and flows into the divider */
    background: linear-gradient(to right, rgba(0,0,0, 0.2) 0%, rgba(16, 13, 22, 0.1) 80%, rgba(16, 13, 22, 0.3) 100%);
    box-sizing: border-box; /* Ensure padding is included in width calc */
    overflow-y: auto;
    border-radius: 0; /* square corners when pane reaches modal bottom */
    display: flex;
    flex-direction: column;
    border-right: none; /* Divider handled by pseudo-element */
    position: relative;
}

/* Soft glowing divider between left and right pane */
#prediction-left-pane::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent 10%,
        rgba(126, 87, 194, 0.25) 30%,
        rgba(163, 129, 216, 0.35) 50%,
        rgba(126, 87, 194, 0.25) 70%,
        transparent 90%
    );
    box-shadow: 0 0 8px rgba(126, 87, 194, 0.15);
}

#prediction-right-pane {
    padding: 20px 30px 0 30px; /* symmetric left/right padding */
    box-sizing: border-box;
    border-radius: 0; /* match left pane (no rounded bottom corners) */
}

/* Rail-layout results: remove the right-pane gutter so the rail sits flush to the left divider */
#prediction-right-pane:has(#prediction-display-area.rail-layout-active),
#onboarding-prediction-right-pane:has(#onboarding-prediction-display-area.rail-layout-active) {
    padding-left: 0 !important;
    padding-top: 0 !important;
}

/* Bottom fade: enabled only when not scrolled to bottom (JS toggles class) */
#prediction-left-pane.fade-bottom-active {
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) calc(100% - 70px),
        rgba(0,0,0,0.75) calc(100% - 42px),
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) calc(100% - 70px),
        rgba(0,0,0,0.75) calc(100% - 42px),
        rgba(0,0,0,0) 100%
    );
}

#prediction-left-pane::-webkit-scrollbar {
    width: 6px;
}

#prediction-left-pane::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

#prediction-left-pane::-webkit-scrollbar-thumb {
    background-color: rgba(168, 85, 247, 0.3);
    border-radius: 3px;
}

#prediction-media-details-content {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* allow header to left-align cleanly */
    gap: 8px; /* tighten vertical rhythm */
    text-align: left;
    color: var(--text-secondary);
    flex: 1;
    min-height: 0;
}

.prediction-modal-header {
    width: 100%;
    text-align: left;
    margin: 0 0 4px 0;
}
#prediction-media-details-content .loading { 
    padding: 30px 10px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

.prediction-modal-poster {
    width: 75%; /* Adjust width */
    max-width: 200px; 
    height: auto;
    border-radius: 6px;
    margin-bottom: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4); /* Slightly smaller shadow */
}

.prediction-modal-title {
    font-family: var(--font-primary); /* Nunito */
    font-size: 1.55em; /* larger, header-like */
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.prediction-modal-meta {
    display: flex;
    gap: 8px; /* <<< Reduce gap */
    font-size: 0.85em; /* <<< Reduce font size */
    color: var(--text-muted);
    margin-bottom: 6px; /* slightly tighter */
}
.prediction-modal-meta span {
    display: inline-block;
}

/* Genre Badges */
.genre-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 6px; /* closer to description */
}
.genre-badge {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72em;
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(6px);
}

/* Minimal credits block (Director/Creator + Starring) */
.prediction-modal-credits {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 8px 0; /* reduce gap from poster */
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82em;
    width: 100%;
    text-align: left;
}
.prediction-modal-credits .credit-line {
    display: flex;
    gap: 6px;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.prediction-modal-credits .credit-label {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
}
.prediction-modal-credits .credit-value {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Rating Bar specific to modal */
.modal-rating-bar {
    width: 90%; 
    max-width: 280px;
    margin-bottom: 15px;
}
/* Ensure base rating bar styles apply correctly */
.modal-rating-bar .rating-bar-track { /* Example override if needed */
     height: 16px;
}
.modal-rating-bar .rating-bar-fill { /* Example override if needed */
     border-radius: 8px;
}
.modal-rating-bar .rating-logo { /* Example override if needed */
     height: 12px;
}
.modal-rating-bar .rating-score-text { /* Example override if needed */
     font-size: 0.8em;
}


.prediction-modal-description {
    font-size: 0.80em; /* smaller to reduce scroll frequency */
    color: var(--text-secondary);
    font-family: var(--font-display); /* <<< ADD THIS LINE (Sets to Lato) */
    text-align: left; 
    line-height: 1.5; /* Keep readability */
    margin-top: 2px; /* tighter */
    padding-right: 5px;
    flex-shrink: 1;
    /* No nested scroll; left pane scrolls as a single unit */
    overflow: visible;
}

.prediction-modal-description-wrap {
    position: relative;
    width: 100%;
    margin-top: 0;
}

/* (Removed clamp/toggle UI — user scrolls naturally; fade comes from the pane mask) */

/* Streaming Providers Section */
/* Container for poster and streaming side by side */
.poster-streaming-container {
    display: flex;
    gap: 15px;
    margin-bottom: 8px; /* reduce gap before credits */
    align-items: flex-start;
    justify-content: flex-start; /* align with left-justified header */
    width: 100%;
}

/* Align provider column with poster top more tightly */
.poster-streaming-container .streaming-column {
    margin-top: 2px;
}

/* Streaming column next to poster */
.streaming-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0; /* Allow shrinking */
}

/* Adjust streaming providers in vertical column layout */
.streaming-column .streaming-providers {
    margin-top: 0;
    padding: 0;
    width: 100%;
}

.streaming-column .streaming-section {
    margin-bottom: 8px;
    text-align: left;
}

.streaming-column .streaming-section h4 {
    font-size: 0.6em; /* smaller category label */
    margin-bottom: 8px;
    color: #d4af37; /* unify: use IN THEATERS gold for all */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.streaming-column .provider-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 providers per row, no scroll */
    gap: 12px;
    align-items: start;
    justify-items: center;
}

.streaming-column .provider-item {
    display: flex;
    flex-direction: column; /* label below icon */
    gap: 6px;
    align-items: center;
    text-align: center;
}

.streaming-column .provider-logo-frame {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    overflow: hidden; /* crop away provider-logo internal black padding */
    /* subtle neutral chip so white logos read well, without a "black box" */
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
}

.streaming-column .provider-logo {
    width: 100%;
    height: 100%;
    border-radius: 0; /* frame controls rounding */
    object-fit: cover; /* IMPORTANT: removes the internal black margins many TMDb logos have */
    transform: scale(1.06); /* slight zoom to crop padding without feeling “cropped” */
    background: transparent;
    border: none;
    padding: 0;
}

.streaming-column .section-divider {
    display: none; /* Hide dividers in vertical layout */
}

/* Ensure the new stacked container never switches to horizontal scroll */
.streaming-column .streaming-providers.streaming-stack,
.streaming-column .streaming-providers.horizontal-layout {
    display: flex;
    flex-direction: column;
    overflow: visible;
    gap: 14px;
}

.streaming-column .provider-price {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400; /* not bold */
    white-space: nowrap;
}

.streaming-column .showtimes-text {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400; /* not bold */
    white-space: nowrap;
}

.streaming-column .ticket-icon {
    width: 34px; /* slightly larger for clarity */
    height: 34px;
    color: #d4af37; /* matches headings */
    filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.35));
}

/* Make the ticket icon readable (but still consistent with logo frames) */
.streaming-column .provider-logo-frame.ticket-frame {
    background: rgba(212, 175, 55, 0.10);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    outline: 1px solid rgba(212, 175, 55, 0.18);
}

/* Default streaming providers (when not in column) */
.streaming-providers {
    margin-top: 12px;
    padding: 16px 0 0 0;
    width: 100%;
    flex-shrink: 0;
}

.streaming-section {
    margin-bottom: 12px;
    text-align: center;
}

.streaming-section:last-child {
    margin-bottom: 0;
}

.streaming-section h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a855f7;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.streaming-section h4.theaters-heading {
    color: #d4af37;
}

.provider-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.provider-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.provider-logo {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.provider-logo:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.provider-price {
    font-size: 0.65rem;
    color: #d4af37;
    font-weight: 600;
    white-space: nowrap;
}

/* In Theaters Styling */
.theaters-item {
    cursor: pointer;
}

.ticket-icon-wrapper {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.theaters-item:hover .ticket-icon-wrapper {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(212, 175, 55, 0.3);
    transform: scale(1.05);
}

.ticket-icon {
    width: 28px;
    height: 28px;
    color: #ffffff;
}

.showtimes-text {
    font-size: 0.65rem;
    color: #e0e0e0;
    font-weight: 500;
}

/* Horizontal scroll layout when multiple sections */
.streaming-providers.horizontal-layout {
    display: flex;
    overflow-x: auto;
    gap: 24px;
    padding: 16px 0;
    scrollbar-width: thin;
}

.streaming-providers.horizontal-layout::-webkit-scrollbar {
    height: 4px;
}

.streaming-providers.horizontal-layout::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.streaming-providers.horizontal-layout::-webkit-scrollbar-thumb {
    background-color: rgba(168, 85, 247, 0.3);
    border-radius: 2px;
}

.streaming-providers.horizontal-layout .streaming-section {
    flex-shrink: 0;
    margin-bottom: 0;
}

.streaming-providers.horizontal-layout .provider-logos {
    flex-direction: row;
}

/* Divider between sections in horizontal layout */
.section-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* Right Pane: Interaction / Results */
#prediction-right-pane {
    flex: 1 1 65%; /* Decreased from 70% to 65% to give left pane more space */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden; /* Keep hidden */
    padding: 0;
    box-sizing: border-box;
    /* PSO-style background with visible gradient - layered for depth */
    background-color: #0c0a10;
    background-image: 
        /* Central purple glow - more prominent */
        radial-gradient(ellipse 100% 80% at 50% 40%, rgba(126, 87, 194, 0.18) 0%, rgba(126, 87, 194, 0.08) 40%, transparent 70%),
        /* Secondary pink/magenta accent */
        radial-gradient(ellipse 70% 50% at 70% 70%, rgba(180, 100, 160, 0.12) 0%, transparent 50%),
        /* Top highlight */
        radial-gradient(ellipse 80% 30% at 50% 0%, rgba(163, 129, 216, 0.15) 0%, transparent 60%),
        /* Base gradient */
        linear-gradient(180deg, rgba(20, 15, 28, 1) 0%, rgba(12, 10, 16, 1) 100%);
    border-radius: 0;
}

/* Interaction area styling */
#prediction-interaction-area {
    padding: 20px 75px; /* Increased side padding to clear nav arrows */
    text-align: center; 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    min-height: 200px; /* Ensure minimum space */
    position: relative; /* Anchor absolute children (arrows) */
}
#prediction-interaction-area .loading { 
    padding: 30px 10px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Styling for prompt shown to logged-in users */
.profile-completion-prompt {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
     padding: 10px;
     width: 100%;
     max-width: 450px; /* Limit prompt width */
}
.profile-completion-prompt h4 {
     font-family: var(--font-primary);
     font-size: 1.4em; /* Larger title */
     color: var(--text-primary);
     margin: 0 0 15px 0; /* More margin */
}
.profile-completion-prompt p {
    font-size: 1em;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 10px 0;
}
.profile-completion-prompt .prefs-progress-button { 
    margin-bottom: 15px; 
    cursor: default; /* Make it non-interactive here */
    pointer-events: none; 
}
.profile-completion-prompt .prefs-progress-button:hover { /* Disable hover */
     transform: scale(1); filter: brightness(1); border-color: var(--input-border);
}

/* Styling for prompt shown to logged-out users */
/* Styling for the baseline prompt container */
.baseline-prompt {
      display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
     padding: 10px 20px;
     width: 100%;
     max-width: 550px; /* Increased max-width */
}
.baseline-title {
     font-family: var(--font-primary);
     font-size: 1.6em; /* Larger */
     font-weight: 700;
     color: var(--text-primary);
     margin: 0 0 10px 0;
     line-height: 1.3;
}
.baseline-body {
    font-size: 1.1em;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 20px 0;
}
.social-proof-tiny {
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
    margin-top: 15px;
    opacity: 0.6;
    letter-spacing: 0.5px;
    font-weight: 400;
}
.highlight-title {
    color: var(--accent-color-light);
}

/* Container for the two action buttons */
.prompt-buttons {
    display: flex;
    flex-direction: row; /* Default: Side-by-side */
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
    width: 100%; /* Allow container to take width */
}
.prompt-buttons.stacked {
    flex-direction: column; /* Stack vertically */
    align-items: center; /* Center buttons horizontally */
    gap: 15px; /* Adjust vertical gap */
    max-width: 350px; /* Optional: Limit width of stacked buttons */
    margin-left: auto; /* Center the block */
    margin-right: auto; /* Center the block */
}

.prompt-buttons.stacked button {
    width: 100%; /* Make buttons take full width of container */
    box-sizing: border-box; /* Include padding/border in width */
}
/* Ensure buttons use correct base styles */
#modal-complete-prefs-btn, #modal-answer-baseline-btn {
    /* Uses .cta-button styles */
    padding: 12px 28px; /* Adjust padding */
    font-size: 1.0em;
}
#modal-skip-predict-btn {
    /* Uses .cta-button styles now (flipped hierarchy) */
     padding: 12px 28px;
     font-size: 1.0em;
}

/* Boost Accuracy Button - Enhanced secondary CTA */
.boost-accuracy-btn {
    background: rgba(163, 129, 216, 0.12) !important; /* Subtle purple fill */
    border: 1px solid rgba(163, 129, 216, 0.35) !important;
    color: var(--text-primary) !important;
    padding: 10px 22px !important; /* Slightly smaller than primary CTA */
    font-size: 0.9em !important;
    font-weight: 700 !important; /* Bold text */
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    border-radius: 25px !important; /* Match primary CTA pill shape */
    width: fit-content !important; /* Size to text content */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.boost-accuracy-btn:hover {
    background: rgba(163, 129, 216, 0.22) !important;
    border-color: rgba(163, 129, 216, 0.5) !important;
    transform: translateY(-1px);
}

/* Add styling for the new h3 and description paragraph if needed */
.prediction-modal-sub-title {
    font-family: var(--font-primary); /* Or your preferred title font */
    font-size: 1.5em; /* Adjust size */
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    text-align: center;
}

.prediction-modal-description-prompt {
    font-size: 1em;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 25px; /* Space before buttons */
    text-align: center;
    max-width: 480px; /* Limit width */
}

/* Styles for Questions inside Prediction Modal Right Pane */
#prediction-right-pane .modal-question-title { /* Targets title added by JS */
     font-family: var(--font-primary);
     font-size: 1.3em;
     color: var(--text-secondary);
     margin-bottom: 25px;
     text-align: center;
     flex-shrink: 0; 
}

#prediction-right-pane .question { /* Targets questions added by displayQuestions */
    margin-bottom: 20px; 
    background-color: rgba(255, 255, 255, 0.03); /* Subtle background */
    padding: 20px;
    border-radius: 8px; 
    border: 1px solid var(--input-border);
    text-align: left; 
}
#prediction-right-pane .question > label { /* Question text */
     display: block; font-size: 1.15em; 
     font-weight: bold; color: var(--text-primary); margin-bottom: 18px;
     line-height: 1.3; text-align: left;
}
#prediction-right-pane .question .input-area {
     align-items: flex-start;
     padding-top: 5px;
     display: flex;
     flex-direction: column; 
     gap: 8px; 
}
#prediction-right-pane .radio-label,
#prediction-right-pane .checkbox-label {
    /* Use base styles - override if needed */
    margin: 0 0 5px 0; 
    width: fit-content; 
    padding: 9px 20px;
    font-size: 0.9em;
}
#prediction-right-pane .checkbox-group {
    /* Use base styles */
}
#prediction-right-pane .scale5-container {
     margin-left: 0; justify-content: flex-start; 
     max-width: 400px; 
}
#prediction-right-pane .scale5-label {
     /* Use base styles */
}
#prediction-right-pane .modal-submit-button { /* Submit button added by displayQuestions */
    display: block; 
    width: fit-content; 
    margin: 30px auto 10px auto; 
    /* Uses base .cta-button style */
}


/* ============================================ */
/* ============================================ */

/* === Add to PREDICTION MODAL STYLES === */

/* Right Pane during Loading */
#prediction-right-pane.loading-prediction {
    justify-content: flex-start; /* Align loading content top */
    display: flex; /* Ensure flex */
    flex-direction: column; /* Ensure column */
    height: 100%; /* Ensure parent takes full height */
}

/* Top Loading Area - see main rule below (#prediction-loading-area) */
/* Style loading text - gradient emphasis with pulse, bold, NOT italic */
p.loading-message-text {
    font-family: var(--font-family-body, 'DM Sans', -apple-system, sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    font-style: normal !important; /* Explicitly NOT italic */
    background: linear-gradient(135deg, #c9a0ff 0%, #ff9ec4 50%, #ffb347 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: loading-text-pulse 2s ease-in-out infinite;
    margin-top: 12px;
    max-width: 480px;
    line-height: 1.6;
}

@keyframes loading-text-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.loading-spinner-icon {
    width: 60px; /* Adjust size */
    height: 60px;
    margin-bottom: 20px; /* Space below spinner */
    /* Assumes spinner SVG handles its own animation */
}

/* Duplicate loading text rule removed - see main rule below */


/* Agent log header/toggle removed - using simple milestone rail */

#prediction-right-pane .prediction-content-wrapper {
     /* Styles for wrapper */
     max-width: 550px; /* Limit width of result content */
}
/* Adjust text sizes if needed */
#prediction-right-pane .prediction-headline { font-size: 1.15em; }
#prediction-right-pane .prediction-details { font-size: 0.9em; }
#prediction-right-pane .prediction-reasons { font-size: 0.8em; }

/* === END PREDICTION MODAL STYLES === */

/* ================================================== */
/* === START: Prediction Modal Loading/Log Styles === */
/* ================================================== */

/* Apply to prediction modal only when loading */
#prediction-section.modal .prediction-layout-container {
    /* Keep base styles: display:flex, gap, padding etc. */
}
#prediction-section.modal #prediction-right-pane.loading-prediction {
    /* Override default centering to stack loading/log top-to-bottom */
    justify-content: flex-start;
}

/* --- Top Loading Area (Spinner & Text) --- */
#prediction-loading-area {
    flex: 1 1 auto; /* Grow to fill available space */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
    box-sizing: border-box;
    /* Subtle background with shine animation */
    background: linear-gradient(
        110deg,
        rgba(10, 10, 10, 0.2) 25%,
        rgba(45, 45, 45, 0.3) 50%,
        rgba(10, 10, 10, 0.2) 75%
    );
    background-size: 200% 100%;
    animation: subtleShine 3s linear infinite;
    border-radius: 8px;
    margin-bottom: 0; /* No margin - fills entire pane */
    min-height: 0; /* Let flex handle sizing */
}

.loading-spinner-icon {
    width: 55px;
    height: 55px;
    margin-bottom: 25px;
}

/* Duplicate p.loading-message-text removed - see earlier rule */

/* --- Agent Log Pane (Simple container for milestone rail) --- */
#prediction-right-pane #agent-log-pane {
    flex-shrink: 0;
    margin-top: 0;
    padding: 0;
    background-color: transparent;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}
/* When empty or hidden, take no space */
#agent-log-pane.hidden,
#agent-log-pane:empty,
#agent-log-pane:has(#agent-log-content:empty) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Log Content - Clean container for milestones */
#agent-log-pane #agent-log-content {
    padding: 0;
    font-family: var(--font-family-body, 'DM Sans', -apple-system, sans-serif);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* --- Milestone Rail Styles (Refined UX) --- */

/* Initial connecting state - simple spinner */
.milestone-connecting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    text-align: center;
    gap: 16px;
}

.milestone-connecting-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(126, 87, 194, 0.2);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.milestone-connecting-text {
    font-family: var(--font-family-body, 'DM Sans', -apple-system, sans-serif);
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Main rail container */
.milestone-rail {
    padding: 16px 12px;
    opacity: 1;
}

/* Graceful expand animation when rail first appears */
.milestone-rail.milestone-rail-expand {
    animation: rail-expand 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes rail-expand {
    0% {
        opacity: 0;
        transform: scaleY(0.8) translateY(-10px);
        transform-origin: top center;
    }
    100% {
        opacity: 1;
        transform: scaleY(1) translateY(0);
        transform-origin: top center;
    }
}

/* Milestone title removed - movie info shown in left pane */

/* Milestone list - vertical stacked layout */
.milestone-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Individual milestone item */
.milestone-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: transparent;
    transition: background 0.2s ease, opacity 0.2s ease;
}

/* Icon container */
.milestone-icon {
    font-family: var(--font-family-body, 'DM Sans', -apple-system, sans-serif);
    font-size: 0.95rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Label text - clean sans-serif, NOT monospace */
.milestone-label {
    font-family: var(--font-family-body, 'DM Sans', -apple-system, sans-serif);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-secondary);
    flex: 1;
    transition: color 0.2s ease;
}

/* Note (optional detail) */
.milestone-note {
    font-family: var(--font-family-body, 'DM Sans', -apple-system, sans-serif);
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: normal;
}

/* === Milestone States === */

/* Pending state - dimmed, waiting */
.milestone-pending {
    opacity: 0.5;
    animation: milestone-subtle-pulse 3s ease-in-out infinite;
}
.milestone-pending .milestone-icon { 
    color: var(--text-muted, #666); 
}
.milestone-pending .milestone-label { 
    color: var(--text-muted, #666); 
}

/* Active state - current step, pulsing */
.milestone-active {
    opacity: 1;
    background: transparent; /* No background - sits on modal bg */
    animation: milestone-active-pulse 2s ease-in-out infinite;
}
.milestone-active .milestone-icon { 
    color: var(--accent-primary);
    animation: gentle-pulse 1.5s ease-in-out infinite;
}
.milestone-active .milestone-label { 
    color: var(--text-primary); 
    font-weight: 500;
}

/* Subtle pulse animations for milestones */
@keyframes milestone-subtle-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.6; }
}

@keyframes milestone-active-pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

/* Done state - completed with checkmark */
.milestone-done {
    opacity: 1;
}
.milestone-done .milestone-icon { 
    color: #4caf50; 
}
.milestone-done .milestone-label { 
    color: var(--text-secondary); 
}

/* Retrying state */
.milestone-retrying {
    opacity: 1;
    background: rgba(255, 170, 68, 0.08);
}
.milestone-retrying .milestone-icon { 
    color: #ffaa44;
    animation: spin 1s linear infinite;
}
.milestone-retrying .milestone-label { 
    color: #ffaa44; 
}

/* Skipped state */
.milestone-skipped {
    opacity: 0.4;
}
.milestone-skipped .milestone-icon { 
    color: var(--text-muted, #666); 
}
.milestone-skipped .milestone-label { 
    color: var(--text-muted, #666); 
    text-decoration: line-through; 
}

/* Failed state */
.milestone-failed {
    opacity: 1;
    background: rgba(255, 100, 100, 0.08);
}
.milestone-failed .milestone-icon { 
    color: #ff6b6b; 
}
.milestone-failed .milestone-label { 
    color: #ff6b6b; 
}

/* === Animations === */
@keyframes gentle-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.95); }
}

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

/* Fade transition for state changes */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Milestone Error State */
.milestone-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    gap: 12px;
}

.milestone-error-icon {
    font-size: 2rem;
}

.milestone-error-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.milestone-error-actions {
    margin-top: 8px;
}

.milestone-retry-btn {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.milestone-retry-btn:hover {
    background: var(--accent-hover);
}
/* --- End Milestone Rail Styles --- */

/* Toggle button styles removed - no longer using collapsible log pane */

/* Keyframes for subtle shine animation */
@keyframes subtleShine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Anonymous user loading state - match logged-in styling */
.prediction-loading-state {
    flex: 1 1 auto; /* Fill available space like #prediction-loading-area */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
    box-sizing: border-box;
    /* Subtle background with shine animation - matches #prediction-loading-area */
    background: linear-gradient(
        110deg,
        rgba(10, 10, 10, 0.2) 25%,
        rgba(45, 45, 45, 0.3) 50%,
        rgba(10, 10, 10, 0.2) 75%
    );
    background-size: 200% 100%;
    animation: subtleShine 3s linear infinite;
    border-radius: 8px;
    min-height: 0; /* Let flex handle sizing */
}

/* Collapse/expand styles removed - no longer using collapsible log pane */

/* --- Styling for final result display area --- */
#prediction-right-pane #prediction-display-area {
    /* Keep the original padding if desired */
    padding: 20px; /* Or 30px 20px if that was intended */
    /* Keep flex-grow */
    flex-grow: 1;
    /* --- CHANGE DISPLAY --- */
    display: block; /* <<< CHANGE from flex to block */
    /* --- ADD SCROLLING --- */
    overflow-y: auto; /* <<< ADD */
    min-height: 0; /* <<< ADD */
    /* --- REMOVE flex alignment --- */
    /* align-items: center; */ /* <<< REMOVE/COMMENT OUT */
    /* justify-content: center; */ /* <<< REMOVE/COMMENT OUT */
    /* --- ADD OTHER NEEDED STYLES (that were in the losing rule) --- */
    box-sizing: border-box;
    background-color: rgba(10, 10, 10, 0.2);
    border-radius: 8px;
    margin-bottom: 15px;
    scrollbar-width: thin;
    scrollbar-color: var(--input-border) rgba(10,10,10, 0.3);
}
#prediction-right-pane #prediction-display-area::-webkit-scrollbar { width: 6px; }
#prediction-right-pane #prediction-display-area::-webkit-scrollbar-track { background: rgba(10,10,10, 0.3); border-radius: 3px; }
#prediction-right-pane #prediction-display-area::-webkit-scrollbar-thumb { background-color: var(--input-border); border-radius: 3px; }

/* Apply result styling */
#prediction-right-pane #prediction-display-area.result {
    /* Base styles apply */
}
#prediction-right-pane .prediction-content-wrapper {
     max-width: 550px;
}
/* Result text sizes */
#prediction-right-pane .prediction-headline { font-size: 1.15em; }
#prediction-right-pane .prediction-details { font-size: 0.9em; }
#prediction-right-pane .prediction-reasons { font-size: 0.8em; }

/* ============================================ */
/* == END Prediction Modal Loading/Log Styles = */
/* ============================================ */

/* --- START ADDITION: New CSS for Phase 1 Profile Questions --- */

/* Category Styling */
.profile-question-category {
    margin-bottom: 40px; /* Space between categories */
    padding-bottom: 20px;
    border-bottom: 1px solid var(--input-border); /* Separator line */
}
.profile-question-category:last-child {
    border-bottom: none; /* No line after last category */
    margin-bottom: 20px;
}
h4.category-title {
    font-family: var(--font-primary); /* Nunito */
    font-size: 1.4em;
    color: var(--accent-color-light);
    margin-bottom: 25px;
    text-align: left;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--accent-color);
    width: fit-content;
}

/* Grid within category */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
}

/* MultiScale5 Format Styling */
.multiscale5-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between sub-questions */
    width: 100%;
}
.multiscale5-subquestion {
    border-left: 3px solid var(--input-border); /* Indent sub-questions slightly */
    padding-left: 15px;
}

/* Profile-only: MultiScale5 should match the clean MPM look (no left rule, centered column). */
#profile-view .multiscale5-container {
    /* Allow the 5-up row to breathe like MPM (which has more horizontal room) */
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
#profile-view .multiscale5-subquestion {
    border-left: none;
    padding-left: 0;
}
#profile-view label.multiscale5-sublabel {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 1.05em;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.86);
}
#profile-view .multiscale5-subquestion .scale5-container {
    /* Match MPM: horizontal row of evenly-sized cards */
    flex-direction: row !important;
    gap: 10px;
    max-width: 100%;
    justify-content: space-between;
    margin-left: 0;
    margin-right: 0;
}

/* Match MPM look for subscale cards */
#profile-view .multiscale5-subquestion .scale5-label {
    width: auto;
    flex: 1;
    box-sizing: border-box;
    height: auto;
    /* Optimized for readability and single-line labels */
    min-width: 110px;
    min-height: 78px;
    font-size: 0.92em;
    padding: 14px 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid transparent;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    box-shadow: none;
    transform: none;
    text-align: center;
}
#profile-view .multiscale5-subquestion .scale5-label:hover {
    background-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}
#profile-view .multiscale5-subquestion .scale5-label:has(input:checked) {
    /* Match MPM MultiScale5 selected state: solid accent, no gradient */
    background-image: none;
    background-color: var(--accent-color);
    border-color: transparent;
    color: white;
    font-weight: 700;
    transform: none;
}

/* Match MPM: keep labels on one line */
#profile-view .multiscale5-subquestion .scale5-label span br { display: none; }

/* Profile-only: vertically center the QFS03 block when it is the active carousel page */
#profile-view .category-questions-container:has(.question.profile-question-item.is-carousel-active[data-question-id="QFS03"]) {
    justify-content: center;
    align-items: center;
}
label.multiscale5-sublabel {
    display: block;
    font-size: 1em;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.multiscale5-subquestion .scale5-container {
     justify-content: flex-start; /* Align scale left */
     gap: 8px; /* Adjust gap */
     padding: 0; /* Remove padding */
     margin: 0; /* Remove margin */
     max-width: none; /* Allow full width */
}
.multiscale5-subquestion .scale5-label {
     width: 55px; /* Slightly smaller scale buttons */
     height: 55px;
     font-size: 0.85em;
}

/* MultiSelectSearch Format Styling */
.multiselect-search-container {
    position: relative; /* For positioning results */
    width: 100%;
    max-width: 500px; /* Limit width */
}
input.multiselect-search-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background-color: var(--input-background);
    color: var(--text-primary);
    font-size: 1em;
    box-sizing: border-box;
}
input.multiselect-search-input:focus {
     outline: none;
     border-color: var(--accent-color-light);
     box-shadow: 0 0 5px rgba(163, 129, 216, 0.3);
}

.multiselect-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%; /* Position below input */
    max-height: 250px;
    overflow-y: auto;
    background-color: var(--card-background);
    border: 1px solid var(--input-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    z-index: 10; /* Above other content */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
     scrollbar-width: thin;
     scrollbar-color: var(--input-border) var(--card-background);
}
.multiselect-search-results::-webkit-scrollbar { width: 6px; }
.multiselect-search-results::-webkit-scrollbar-track { background: var(--card-background); }
.multiselect-search-results::-webkit-scrollbar-thumb { background-color: var(--input-border); }


.search-suggestion {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--input-border);
}
.search-suggestion:last-child {
    border-bottom: none;
}
.search-suggestion:hover {
    background-color: var(--button-subtle-hover-bg);
}
.search-suggestion img {
    width: 30px;
    height: 45px;
    object-fit: cover;
    margin-right: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.search-suggestion span {
    font-size: 0.9em;
    color: var(--text-secondary);
}
.search-suggestion:hover span {
    color: var(--text-primary);
}
.loading-small, .no-results, .error-small {
    padding: 10px 12px;
    font-size: 0.9em;
    color: var(--text-muted);
    font-style: italic;
}
.error-small { color: var(--error-color); }

.multiselect-search-selections {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.selection-chip {
    display: inline-flex;
    align-items: center;
    background-color: var(--accent-color);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: default;
}
.remove-chip-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2em;
    font-weight: bold;
    margin-left: 8px;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}
.remove-chip-btn:hover {
    color: white;
}

/* --- START REPLACEMENT: Logo Icons Tabs Style --- */

/* Container */
#streaming-provider-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-start;
    margin-bottom: 25px;
    padding: 0 10px;
}

/* Individual Tab Buttons - Base State */
#streaming-provider-tabs button {
    background: transparent;
    border: none;
    border-radius: 12px;
    padding: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: none;
    opacity: 0.75;
}

/* Provider logo image */
#streaming-provider-tabs button .provider-logo {
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.25s ease;
}

/* Tab Hover State */
#streaming-provider-tabs button:hover {
    opacity: 1;
}

#streaming-provider-tabs button:hover .provider-logo {
    transform: scale(1.08);
}

/* Tab Active State */
#streaming-provider-tabs button.active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(255, 255, 255, 0.2), 0 0 40px rgba(255, 255, 255, 0.15);
}

#streaming-provider-tabs button.active .provider-logo {
    transform: scale(1.25);
}

/* Active button hover state */
#streaming-provider-tabs button.active:hover .provider-logo {
    transform: scale(1.3);
}

/* Focus state for accessibility */
#streaming-provider-tabs button:focus {
    outline: none;
    opacity: 1;
}
#streaming-provider-tabs button.active,
#streaming-provider-tabs button.active:focus {
    box-shadow: 0 4px 24px rgba(255, 255, 255, 0.2), 0 0 40px rgba(255, 255, 255, 0.15);
}

/* Loading state for tab while fetching */
#streaming-provider-tabs button.loading-provider {
    animation: pulseTab 1s ease-in-out infinite;
}

@keyframes pulseTab {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}



/* --- START ADDITION: Enhanced Prediction Display Styles --- */

/* Wrapper inside #prediction-display-area */
.prediction-content-wrapper {
    width: 100%;
    max-width: 600px; /* Max width for readability */
    margin: 0 auto;   /* Center content */
    text-align: center; /* Center most things by default */
}

.prediction-icon { /* Already exists, verify size */
    display: block;
    width: 70px;
    height: auto;
    margin: 0 auto 15px auto; /* Center horizontally, space below */
}

/* Wrapper for verdict, type, details */
.prediction-text-block {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center text elements */
    text-align: center;
}

/* Specific colors for reason icons */
.reason-pro { color: #90ee90; /* Light green */ }
.reason-con { color: #ffa07a; /* Light salmon/red */ }
.reason-neutral { color: var(--text-muted); }

.analysis-intro {
    font-size: 0.8em;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 20px; /* More space */
    text-align: left;
}
.analysis-section {
    margin-bottom: 18px; /* More space between sections */
    text-align: left;
}
.analysis-section:last-child {
    margin-bottom: 0; /* No margin on last item */
}
.analysis-section h5 {
    font-family: var(--font-display); /* Lato */
    font-size: 1.05em; /* Slightly larger sub-heading */
    font-weight: bold;
    color: var(--text-primary);
    margin: 0 0 6px 0; /* Adjust margin */
    display: flex;
    align-items: center;
    gap: 8px; /* Slightly more gap */
}
.analysis-icon {
    font-size: 1.2em; /* Adjust icon size */
    display: inline-block;
    line-height: 1;
    opacity: 0.8; /* Slightly fade icon */
}
.analysis-section p {
    font-size: 0.95em; /* Slightly larger text */
    color: var(--text-secondary);
    line-height: 1.6; /* Improve readability */
    margin: 0;
    padding-left: 30px; /* Adjust indent */
}

.reception-summary {
    /* Placeholder for when scores are added */
    /* display: flex; */
    /* justify-content: space-around; */
    /* gap: 15px; */
    /* margin-bottom: 15px; */
    /* padding: 15px; */
    /* background-color: rgba(0,0,0,0.15); */
    /* border-radius: 6px; */
}
.reception-critics, .reception-audience {
    /* Styles for score display */
}
.reception-icon { /* Styles for score icons */ }
.reception-score { /* Styles for score numbers */ }
.reception-source { /* Styles for "Critics"/"Audience" label */ }

.reception-text-summary {
    font-size: 0.9em;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 8px; /* Space between critic/audience summaries */
    text-align: left;
}
.reception-text-summary:last-child {
    margin-bottom: 0;
}
.reception-text-summary strong {
    color: var(--text-secondary);
    font-weight: bold; /* Ensure bold */
    font-style: normal;
    margin-right: 5px;
}

/* --- END ADDITION --- */

/* === START: ChatGPT Concept 2 CSS === */

.prediction-section {
    background-color: var(--card-background); /* <<< SET DARK BG */
    border-radius: 10px;
    padding: 20px;
    position: relative;
    overflow: visible;
  }

#prediction-display-area.rail-layout-active,
#onboarding-prediction-display-area.rail-layout-active {
    flex-grow: 1;
    overflow: hidden; /* Keep hidden - child scrolls */
    min-height: 0;
    padding: 0 !important; /* <<< SET PADDING TO 0 (use !important temporarily if needed) */
    box-sizing: border-box;
    background-color: transparent !important; /* Keep transparent */
    border-radius: 0; /* Keep no radius */
    margin-bottom: 0 !important; /* flush to modal bottom */
    display: block;
    scrollbar-width: none;
}
#prediction-display-area.rail-layout-active::-webkit-scrollbar,
#onboarding-prediction-display-area.rail-layout-active::-webkit-scrollbar { display: none; width: 0; height: 0;}

/* Override the more specific base rule (#prediction-right-pane #prediction-display-area)
   that otherwise reintroduces bottom spacing/radius on the rail results screen. */
#prediction-right-pane #prediction-display-area.rail-layout-active,
#onboarding-prediction-right-pane #onboarding-prediction-display-area.rail-layout-active {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}

/* When showing the rail-layout results, take the agent log pane out of the layout flow
   so the rail/content can sit flush with the modal bottom. */
#prediction-display-area.rail-layout-active ~ #agent-log-pane {
    display: none !important; /* Option A: remove whitespace by removing log pane */
}

/* Keep .rail-layout rule */
.rail-layout {
    display: grid;
    /* Center the rail in the space between the left pane divider and the start
       of the cards: make the first column wider and center the fixed-width rail inside it. */
    grid-template-columns: 98px 1fr; /* match rail width; removes gutter */
    height: 100%;
    align-items: stretch; /* Ensure columns stretch */
    column-gap: 18px; /* a bit more breathing room between rail and content */
    row-gap: 0;
    box-sizing: border-box;
    position: relative; /* for the gap fade overlay */
}
/* Fade overlay for the grid gap - LEFT (creates visual continuity with chat bar fade) */
.rail-layout::after {
    content: "";
    position: absolute;
    left: 98px;
    width: 18px;
    bottom: 0;
    height: 100px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(30, 26, 28, 0.10) 6%,
        rgba(30, 26, 28, 0.30) 12%,
        rgba(30, 26, 28, 0.55) 18%,
        rgba(30, 26, 28, 0.80) 24%,
        rgb(30, 26, 28) 30%,
        rgb(30, 26, 28) 100%
    );
    pointer-events: none;
    z-index: 25;
}
/* (Removed: old .rail-layout::before - right fade is now on .prediction-layout-container) */

/* --- Gradient Rail --- */
.gradient-rail {
    /* Underlying track (100%) */
    background:
        radial-gradient(120% 140% at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.32) 70%, rgba(0,0,0,0.50) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.26) 55%, rgba(0,0,0,0.42) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: none; /* avoid double-thick divider next to left pane border */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Content stack anchored to bottom */
    border-radius: 0; /* square corners for underlying rail */
    height: 100%;
    width: 98px; /* Fixed visual rail width */
    justify-self: start; /* stick to divider edge */
    transform: none;
    box-sizing: border-box;
    overflow: visible; 
    position: relative;
}

/* Tick marks so the empty track reads like a meter */
.gradient-rail::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to top,
        rgba(255, 255, 255, 0.12) 0px,
        rgba(255, 255, 255, 0.12) 2px,
        rgba(255, 255, 255, 0) 2px,
        rgba(255, 255, 255, 0) 22px
    );
    opacity: 0.6;
    z-index: 0;
}

/* Filled stack: animates 0% → score, and content sits at the TOP of the filled area */
.gradient-rail-inner {
    width: 100%;
    height: 0; /* default for animation */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* icon + % at top of filled stack */
    padding: 14px 8px 12px;
    box-sizing: border-box;
    /* Add a soft top "cap" highlight (keeps things matte, avoids glassy look) */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.00) 34px),
        linear-gradient(180deg, var(--accent-color) 0%, #e91e63 45%, #ff9800 100%);
    /* Stack corners: rounded top, square bottom */
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    transition: height 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    z-index: 1; /* sit above tick marks */
}
.gradient-rail.rail-animate .gradient-rail-inner {
    height: var(--rail-fill-height, 100%);
}

/* Re-order / position elements within the stack:
   Put icon + % at the top, push labels toward the bottom. */
.gradient-rail-inner .rail-icon { order: 1; }
.gradient-rail-inner .rail-score { order: 2; }
.gradient-rail-inner .rail-match-label { order: 3; }
.gradient-rail-inner .rail-label { order: 4; }

.rail-icon  { 
    max-width: 98px; /* Adjust max size as needed */
    max-height: 98px; /* Adjust max size as needed */
    width: auto; /* Allow natural width */
    height: auto; /* Allow natural height */
    display: block;
    margin-bottom: 6px; 
    flex-shrink: 0; 
}
.rail-match-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0.95;
    margin-bottom: 6px;
    display: block;
}
.rail-score {
    font: 700 1.9rem Nunito, sans-serif;
    line-height: 1;
    margin-bottom: 4px; /* Space below score */
}
.rail-label {
    font-size: 1.1rem; /* Increased from 0.8rem */
    font-weight: 600;
    line-height: 1.2; /* Allow wrapping */
    margin-bottom: 6px; /* Space below label */
}
.rail-type  {
    font-size: 0.7rem;
    opacity: 0.85;
    margin-top: auto; /* Push to bottom */
    padding-top: 10px; /* Space above type */
    font-family: Lato, sans-serif;
}

/* ------- SCROLLABLE CONTENT ------- */
.rail-content {
    overflow-y: auto;               /* Enable scrolling */
    height: 100%;                   /* Fill grid row height */
    box-sizing: border-box;
    padding: 0px 12px 0px 0px;      /* T R B L */
    background-color: transparent; /* Make transparent */
    border-radius: 0;               /* No radius */

    /* Scrollbar Styling */
    scrollbar-width: thin;
    scrollbar-color: var(--input-border) rgba(10,10,10, 0.3);
}

/* Bottom fade for scroll hint (enabled via JS only when not at bottom) */
#prediction-display-area.rail-layout-active .rail-content.fade-bottom-active,
#prediction-display-area.rail-layout-active .rail-content-scroll.fade-bottom-active {
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) calc(100% - 70px),
        rgba(0,0,0,0.75) calc(100% - 42px),
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) calc(100% - 70px),
        rgba(0,0,0,0.75) calc(100% - 42px),
        rgba(0,0,0,0) 100%
    );
}
.rail-content::-webkit-scrollbar { width: 6px; }
.rail-content::-webkit-scrollbar-track { background: rgba(10,10,10, 0.1); border-radius: 3px; }
.rail-content::-webkit-scrollbar-thumb { background-color: var(--input-border); border-radius: 3px; }

.rail-content section {
    margin-bottom: 0px; /* Space between sections */
    margin-top: 0 !important; /* <<< ADD THIS: Force top margin to zero */
}
.rail-content section:last-child {
    margin-bottom: 0; /* flush to bottom */
}

.rail-content section h4 { /* Section headings */
  font: 600 1.1rem Nunito, sans-serif; /* Adjusted font size */
  color: var(--accent-color-light);
  margin: 0 0 12px 0; /* Adjust margin */
  border-bottom: 1px solid rgba(255,255,255,0.1); /* More visible border */
  padding-bottom: 6px;
  text-align: left; /* Default left alignment for most sections */
  display: flex; /* Align emoji/icon + text */
  align-items: center;
  gap: 8px;
}
/* Copied from Concept 3 */
.section-emoji { font-size: 18px; line-height: 1; opacity: 0.8;}

/* --- REUSE Concept 3/1 Styles for content --- */
/* (Assuming these class names were used in the JS function) */

/* CTA Section at top of right pane (logged-out onboarding) */
.rail-content .cta-section {
    background: rgba(160, 111, 255, 0.08);
    border: 1px solid rgba(160, 111, 255, 0.2);
    border-radius: 8px;
    padding: 24px 20px;
    margin-bottom: 20px;
    text-align: center;
}

.rail-content .onboarding-cta-text {
    font-family: var(--font-primary);
    font-size: 1.15rem;
    color: #f0f0f0;
    margin: 0 0 20px 0;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* Section intro text */
.rail-content .section-intro {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

/* Prediction sections in rail content */
.rail-content .prediction-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rail-content .prediction-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Section headers in onboarding flow */
.rail-content .prediction-section h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    letter-spacing: -0.2px;
    text-align: left; /* Default left for most sections */
}

.rail-content .pr-unified h4 {
    margin: 0 !important;
    padding: 0 !important;
}

.pr-unified p {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.rail-content .pr-comparison h4,
.pr-unified h4 {
    text-align: center !important;
}

/* Reasons section */
.rail-content .why-section ul { /* Target UL specifically */
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.rail-content .reason-item {
  display: flex; 
  align-items: flex-start; 
  padding: 8px 10px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  font-size: 0.9rem; 
  line-height: 1.4;
  border-left: 3px solid #aaaaaa;
  transition: border-color 0.2s ease;
}
.rail-content .reason-marker { font-size: 1em; margin-right: 8px; flex-shrink: 0; }
.rail-content .reason-text { flex: 1; }
.reason-item.positive { border-left: 3px solid #66bb6a; }
.reason-item.negative { border-left: 3px solid #ef5350; }
.reason-item.neutral { border-left: 3px solid #aaaaaa; }
.reason-item.positive .reason-marker { color: #66bb6a; }
.reason-item.negative .reason-marker { color: #ef5350; }
.reason-item.neutral .reason-marker { color: #aaaaaa; }

/* Analysis section */
.rail-content .analysis-summary {
  color: var(--text-secondary); margin: 0 0 15px 0;
  font-size: 0.9rem; font-style: italic; line-height: 1.5;
}
.rail-content .analysis-component {
  margin-bottom: 15px; 
  padding: 8px 10px;
  background-color: rgba(0, 0, 0, 0.3); /* <<< CHANGE to match reason-item */
  border-radius: 4px; 
  font-size: 0.9rem; 
  line-height: 1.4; 
}
.rail-content .analysis-component:last-child { margin-bottom: 0; }
.rail-content .component-header { display: flex; align-items: center; margin-bottom: 6px; }
.rail-content .component-icon { font-size: 1.1em; margin-right: 8px; color: var(--accent-color-light); }
.rail-content .component-title { /* This is H5 */
  font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 600;
  color: var(--text-primary); margin: 0;
}
.rail-content .component-description { /* This is P */
  color: var(--text-secondary); font-size: 0.9rem; margin: 0;
  line-height: 1.5; padding-left: 26px; /* Indent */
}

/* Reception section */

.rail-content .reception-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; }

.rail-content .reception-column { 
    background-color: rgba(0, 0, 0, 0.3); /* <<< CHANGE to match reason-item */
    border-radius: 4px; 
    padding: 8px 10px;
    overflow: hidden; /* Prevent content spilling out visually */
    display: flex; /* Use flex for better internal control */
    flex-direction: column; /* Stack header and text */
}
.rail-content .reception-header {
  font-family: 'Lato', sans-serif; font-size: 0.8rem; font-weight: 600;
  color: var(--accent-color-light); margin-bottom: 6px; text-transform: uppercase;

}
.rail-content .reception-text { 
    color: var(--text-secondary); 
    font-size: 0.85rem; 
    line-height: 1.5; 
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    flex-grow: 1; /* Allow text block to expand vertically */
    text-align: left; /* Ensure text is left-aligned */
}
    
/* Similar titles */
.rail-content .comp-list { /* This is P */
    color: var(--text-secondary); 
    font-size: 0.9rem; 
    line-height: 1.5;
    background-color: rgba(0, 0, 0, 0.3); /* <<< ADD - Match reason-item */
    padding: 10px 12px; /* <<< ADD Padding */
    border-radius: 4px; /* <<< ADD Radius */
    margin: 0; /* Ensure no extra margins */
}

/* Responsive adjustments (Simpler for rail) */
@media (max-width: 700px) { /* Wider breakpoint */
  .rail-layout {
    grid-template-columns: 1fr; /* Stack rail above content */
    gap: 15px 0; /* Vertical gap only */
    height: auto; /* Let height be determined by content */
  }
  .gradient-rail {
      height: auto; /* Auto height */
      transform: none; /* no horizontal nudge on stacked layout */
      width: auto; /* Reset fixed width on mobile */
      border-radius: 8px; /* Keep radius */
      flex-direction: row; /* Rail items side-by-side */
      justify-content: center; /* Center items */
      padding: 10px;
      gap: 15px;
  }
  .rail-score { font-size: 1.6rem; }
  .rail-label { margin-bottom: 0; }
  .rail-type { margin-top: 0; padding-top: 0; }

  .reception-grid {
      grid-template-columns: 1fr; /* Stack reception on small screens */
  }
}

/* === END: ChatGPT Concept 2 CSS === */

/* === Profile Page - Two-Pane Layout === */

#profile-view {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Fills remaining vertical space in body */
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    min-height: 0; /* For flex context */

    /* Full-page feel: no outer padding/gap that makes panes "float" like cards/modals */
    margin-top: 0;
    height: auto; 
    padding: 0;
    overflow: hidden; /* #profile-view itself should not scroll. Panes manage their own scrolling. */

    /* Give the profile page its own clean backdrop */
    background: rgba(0, 0, 0, 0.45);
}

/* Eliminate top/bottom bands by sizing the profile view to the remaining viewport under the sticky header. */
body.profile-open #profile-view {
    height: calc(100vh - var(--app-header-height, 0px));
    min-height: calc(100vh - var(--app-header-height, 0px));
}
#profile-view.hidden { display: none !important; }
body.profile-open #profile-view { opacity: 1; visibility: visible; transition: opacity 0.3s ease;}
#profile-view.hidden { display: none !important; }
body.profile-open #profile-view { 
    opacity: 1; visibility: visible; transition: opacity 0.3s ease; 
}

#profile-view .question.profile-question-item {
    /* Remove the "floating modal/card" look inside the right pane.
       The right pane already provides the surface; questions should sit directly on it. */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex; /* Make the question item itself a flex column */
    flex-direction: column;
    flex-grow: 1; /* Allow this question item to fill its parent (e.g., .category-questions-container) */
    min-height: 0; /* For nested flex */
    /* border-left is for the "answered" state, not layout here */
}

.profile-section-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Fill #profile-content-pane */
    min-height: 0;
}

/* Needed for IQA overlay positioning inside the right pane */
#profile-content-pane .profile-section-content {
    position: relative;
}

/* This rule should already exist or be similar */
.category-questions-container { /* Use the actual ID or class you have */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow this to fill .profile-section-content */
    min-height: 0;
}

#profile-content-pane .category-questions-container { /* Your selector for this */
    display: flex; /* If it's not already flex, make it so */
    flex-direction: column; /* If it has multiple questions or components vertically */
    flex-grow: 1; /* Allow it to fill .profile-section-content */
    min-height: 0; /* For nested flex */
    /* overflow-y: auto; /* If THIS container should scroll instead of #profile-content-pane for questions, but usually not for single TieredFav */
}

.profile-page-main-layout {
    display: flex; 
    flex-direction: column; 
    width: 100%;    
    padding: 0;     /* It has no padding of its own */
    box-sizing: border-box; 
    flex-grow: 1; 
    min-height: 0; 
    overflow: hidden;
}

.profile-two-pane-container {
    display: flex; /* It's a flex container for the nav and content panes */
    flex-grow: 1; /* CRUCIAL: Makes this container fill the height of .profile-page-main-layout */
    min-height: 0; /* For flex context */
    overflow: hidden; /* This container must clip its children */

    /* Your existing gap and width */
    gap: 0;
    width: 100%;
    align-items: stretch; /* Make both panes full height and aligned like a page layout */

    /* Ensure the panes stretch to the full available height */
    flex: 1 1 auto;
    height: 100%;
}

#profile-nav-pane {
    flex: 0 0 320px;
    /* Left pane: darker + slightly textured gradient to read as "control panel" */
    background:
        radial-gradient(1200px 700px at -10% 0%, rgba(126, 87, 194, 0.22) 0%, rgba(0, 0, 0, 0) 55%),
        linear-gradient(180deg, rgba(22, 22, 26, 0.98) 0%, rgba(14, 14, 18, 0.98) 100%);
    padding: 22px 18px; 
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    box-sizing: border-box;
    /* height: 100%; */ /* Let flexbox try to manage height from parent */
    display: flex;
    flex-direction: column;   
    box-shadow: inset -1px 0 0 rgba(0,0,0,0.35);
}
#profile-nav-pane::-webkit-scrollbar { width: 6px; }
#profile-nav-pane::-webkit-scrollbar-track { background: var(--card-background); border-radius: 3px;}
#profile-nav-pane::-webkit-scrollbar-thumb { background-color: var(--input-border); border-radius: 3px;}

/* --- >>> ADD Styles for NEW Header WITHIN Nav Pane <<< --- */
#profile-nav-header {
    padding: 0 0 15px 0;
    border-bottom: 1px solid var(--input-border);
    margin-bottom: 15px;
    flex-shrink: 0;
    text-align: center; /* Center text */
}

#profile-nav-header #profile-user-info {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center elements */
    gap: 10px;
    margin-bottom: 18px;
}
#profile-nav-header #profile-page-circle {
    width: 65px;
    height: 65px;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 0;
    /* Match header avatar gradient */
    background: linear-gradient(135deg, #5e35b1 0%, #4527a0 50%, #311b92 100%);
    border: none;
}
#profile-nav-header #profile-page-name {
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin: 0;
}

#profile-nav-header #profile-progress-container {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 auto; /* Center horizontally */
    width: 100%;
    max-width: 220px;
}
/* Keep .film-strip-panorama styles */
#profile-nav-header .film-strip-panorama {
    /* margin-bottom: 5px; */ /* Adjust margin if needed */
}
/* Keep .completion-text styles */
#profile-nav-header .completion-text {
     margin-top: 8px; /* Adjust spacing */
}
#profile-nav-header .completion-percentage {
    font-size: 0.9rem;
}
#profile-nav-header .completion-ratio {
    font-size: 0.75rem;
}
/* Hide old H3 if it existed */
#profile-nav-header #profile-progress-container h3 { display: none; }
/* --- >>> END Styles for NEW Header <<< --- */

#profile-content-pane {
    flex-grow: 1;             /* Takes remaining width in .profile-two-pane-container */
    /* Right pane: slightly lighter, "workspace" feel with soft highlight */
    background:
        radial-gradient(900px 600px at 20% 0%, rgba(233, 30, 99, 0.10) 0%, rgba(0, 0, 0, 0) 55%),
        radial-gradient(800px 600px at 100% 40%, rgba(126, 87, 194, 0.10) 0%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, rgba(26, 26, 30, 0.92) 0%, rgba(20, 20, 24, 0.92) 100%);
    padding: 28px 32px;
    border-radius: 0;
    border: none;
    box-sizing: border-box;
    
    display: flex;            /* Make it a flex column */
    flex-direction: column;   /* To manage its direct children's height */
    
    /* CRUCIAL FOR HEIGHT MATCHING AND SCROLLING */
    height: 100%; /* << Set height to 100% of its parent (.profile-two-pane-container) */
    min-height: 0; /* For flex context */
    overflow-y: auto; /* This makes THIS PANE scrollable */

    /* Your scrollbar styles are fine */
    scrollbar-width: thin;
    scrollbar-color: var(--input-border) var(--card-background);
}
#profile-content-pane::-webkit-scrollbar { width: 8px; }
#profile-content-pane::-webkit-scrollbar-track { background: var(--card-background); border-radius: 4px;}
#profile-content-pane::-webkit-scrollbar-thumb { background-color: var(--input-border); border-radius: 4px;}

#profile-content-pane .profile-content-title { /* e.g., the "Favorite Movies" h3 */
    flex-shrink: 0; /* Title should not shrink */
    margin-top: 0; /* Remove default h3 margin if needed */
    margin-bottom: 20px; 
    padding-bottom: 10px;
    font-family: var(--font-primary);
    font-size: 1.5em;
    color: var(--text-primary);
    /* border-bottom: 1px solid var(--input-border); /* Optional: if title has a border */
}

/* ========================= */
/* Account Settings (Clean Redesign) */
/* ========================= */

/* Clean layout container */
.account-settings--clean {
    max-width: 500px;
}

/* Identity row */
.account-identity-clean {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.account-avatar-clean {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5e35b1 0%, #4527a0 50%, #311b92 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: var(--font-primary); /* Match header avatar font */
    flex-shrink: 0;
}

.account-identity-info {
    flex: 1;
    min-width: 0;
}

.account-identity-name-clean {
    font-weight: 700;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.95);
}

.account-identity-email-clean {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-provider-chip-clean {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Field rows */
.account-field {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.account-field:last-of-type {
    border-bottom: none;
}

.account-field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.account-field-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.account-field-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.account-field-input:focus {
    outline: none;
    border-color: rgba(126, 87, 194, 0.5);
}

.account-field-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.account-field-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(90deg, rgba(126, 87, 194, 0.6), rgba(233, 30, 99, 0.4));
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.account-field-btn:hover {
    opacity: 0.9;
}

.account-field-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.account-field-value {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.account-field-actions {
    display: flex;
    gap: 16px;
}

.account-link-btn {
    background: none;
    border: none;
    color: rgba(163, 129, 216, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.account-link-btn:hover {
    color: rgba(163, 129, 216, 1);
    text-decoration: underline;
}

.account-link-btn:disabled {
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

/* Hidden forms */
.account-hidden-form {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    margin-top: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.account-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
}

/* Legacy styles kept for backward compatibility */
#profile-content-pane .account-settings .account-settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

#profile-content-pane .account-settings .account-settings-meta {
    flex-shrink: 0;
}

#profile-content-pane .account-settings .account-provider-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

#profile-content-pane .account-settings .account-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 18px;
}

@media (max-width: 980px) {
    #profile-content-pane .account-settings .account-settings-grid {
        grid-template-columns: 1fr;
    }
}

#profile-content-pane .account-settings .account-settings-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 16px 16px 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.30);
}

/* New Account Settings layout (clean 2-column shell) */
#profile-content-pane .account-settings .account-shell {
    display: block;
}

/* (Removed inner 2-column layout; Account Settings already lives inside the right pane.) */

#profile-content-pane .account-settings .account-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.26);
}

#profile-content-pane .account-settings .account-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    margin-bottom: 14px;
}

#profile-content-pane .account-settings .account-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.92);
    background: linear-gradient(135deg, rgba(126, 87, 194, 0.75), rgba(233, 30, 99, 0.45));
    border: 1px solid rgba(255, 255, 255, 0.14);
}

#profile-content-pane .account-settings .account-identity-name {
    font-family: var(--font-primary);
    font-weight: 800;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.94);
}

#profile-content-pane .account-settings .account-identity-email {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 520px;
}

#profile-content-pane .account-settings .account-section {
    padding-top: 12px;
}

#profile-content-pane .account-settings .account-section-title {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 10px;
}

#profile-content-pane .account-settings .account-form--inline .account-inline-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

#profile-content-pane .account-settings .account-form--inline .account-input {
    flex: 1 1 auto;
}

#profile-content-pane .account-settings .account-details {
    margin-top: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

#profile-content-pane .account-settings .account-details[data-disabled="true"] {
    opacity: 0.55;
}

#profile-content-pane .account-settings .account-summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(255, 255, 255, 0.90);
    font-weight: 800;
}

#profile-content-pane .account-settings summary::-webkit-details-marker {
    display: none;
}

#profile-content-pane .account-settings .account-summary-note {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
    font-size: 0.82rem;
}

#profile-content-pane .account-settings .account-details[open] .account-summary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
}

#profile-content-pane .account-settings .account-details form.account-form {
    padding: 12px;
}

#profile-content-pane .account-settings .account-button--full {
    width: 100%;
}

#profile-content-pane .account-settings .account-card-title {
    margin: 0 0 6px 0;
    font-family: var(--font-primary);
    font-size: 1.05rem;
    letter-spacing: 0.2px;
}

#profile-content-pane .account-settings .account-card-subtitle {
    margin: 0 0 14px 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.92rem;
    line-height: 1.35;
}

#profile-content-pane .account-settings .account-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#profile-content-pane .account-settings .account-form.is-disabled {
    opacity: 0.55;
}

#profile-content-pane .account-settings .account-label {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 6px;
}

#profile-content-pane .account-settings .account-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.20);
    color: rgba(255, 255, 255, 0.92);
    outline: none;
}

#profile-content-pane .account-settings .account-input:focus {
    border-color: rgba(163, 129, 216, 0.60);
    box-shadow: 0 0 0 3px rgba(163, 129, 216, 0.18);
}

#profile-content-pane .account-settings .account-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

#profile-content-pane .account-settings .account-actions--row {
    justify-content: flex-start;
    margin-bottom: 10px;
}

#profile-content-pane .account-settings .account-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.90);
    font-weight: 800;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

#profile-content-pane .account-settings .account-button:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

#profile-content-pane .account-settings .account-button:active {
    transform: translateY(0px);
}

#profile-content-pane .account-settings .account-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

#profile-content-pane .account-settings .account-button:focus-visible {
    outline: 2px solid rgba(163, 129, 216, 0.85);
    outline-offset: 2px;
}

#profile-content-pane .account-settings .account-button--primary {
    border-color: rgba(163, 129, 216, 0.45);
    background: linear-gradient(90deg, rgba(126, 87, 194, 0.55), rgba(233, 30, 99, 0.35));
}

#profile-content-pane .account-settings .account-button--primary:hover {
    border-color: rgba(163, 129, 216, 0.70);
    background: linear-gradient(90deg, rgba(126, 87, 194, 0.68), rgba(233, 30, 99, 0.42));
}

#profile-content-pane .account-settings .account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
}

#profile-content-pane .account-settings .account-row-label {
    color: rgba(255, 255, 255, 0.64);
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#profile-content-pane .account-settings .account-row-value {
    color: rgba(255, 255, 255, 0.90);
    font-weight: 700;
    font-size: 0.95rem;
}

#profile-content-pane .account-settings .account-hint {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 0.86rem;
    line-height: 1.35;
}

#profile-content-pane .account-settings .account-muted {
    color: rgba(255, 255, 255, 0.55);
}

.loading-text-profile-nav,
.loading-text-profile-content {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* === Profile Navigation Pane Styles === */
#profile-nav-pane ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#profile-nav-pane ul.profile-nav-list {
    margin-top: 10px;
}

#profile-nav-pane ul.profile-nav-list > li {
    margin-top: 2px;
}

/* Parent labels (e.g. "My Movie Preferences") */
#profile-nav-pane .nav-parent-label {
    display: block;
    padding: 14px 10px 8px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#profile-nav-pane li a {
    display: block;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.80);
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis if text too long */
    position: relative;
}

#profile-nav-pane li a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
}

#profile-nav-pane li a:focus-visible {
    outline: 2px solid rgba(163, 129, 216, 0.85);
    outline-offset: 2px;
}

#profile-nav-pane li.active > a {
    background:
        linear-gradient(90deg, rgba(126, 87, 194, 0.30) 0%, rgba(233, 30, 99, 0.16) 55%, rgba(0, 0, 0, 0) 100%),
        rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.96);
}

/* (Removed) Active vertical accent bar in left nav (too loud for this surface). */

/* Submenu styles */
#profile-nav-pane ul.submenu {
    padding-left: 14px; /* Indent submenu */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Submenu affordance (caret) on parent items only */
#profile-nav-pane li.has-submenu > a {
    padding-right: 34px; /* room for caret */
    position: relative;
}
#profile-nav-pane li.has-submenu > a .submenu-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid rgba(255, 255, 255, 0.65);
    border-bottom: 2px solid rgba(255, 255, 255, 0.65);
    transform: translateY(-50%) rotate(-45deg); /* collapsed: points right */
    transition: transform 0.18s ease, opacity 0.18s ease;
    opacity: 0.75;
}
#profile-nav-pane li.has-submenu.submenu-open > a .submenu-caret {
    transform: translateY(-50%) rotate(45deg); /* expanded: points down */
    opacity: 0.95;
}

#profile-nav-pane ul.submenu.open {
    /* Submenu can now contain many items (we expanded categories).
       Allow it to fully expand; the nav pane itself scrolls. */
    max-height: 2000px;
    overflow: visible;
    margin-top: 5px;
    margin-bottom: 10px;
}

#profile-nav-pane ul.submenu li a {
    padding: 8px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#profile-nav-pane ul.submenu li a .submenu-item-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#profile-nav-pane ul.submenu li a .nav-progress-chip {
    flex: 0 0 auto;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.70);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#profile-nav-pane ul.submenu li a .nav-progress-chip.is-complete {
    color: rgba(120, 220, 190, 0.95);
    border-color: rgba(120, 220, 190, 0.25);
    background: rgba(120, 220, 190, 0.10);
}

#profile-nav-pane ul.submenu li.active > a {
    background:
        linear-gradient(90deg, rgba(163, 129, 216, 0.24) 0%, rgba(0, 0, 0, 0) 70%),
        rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.92);
}

.profile-content-title {
    font-family: var(--font-primary); /* Nunito */
    font-size: 1.5em;
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.category-questions-container.hidden {
    display: none;
}
.profile-question-item { /* Styles for each question block */
    background-color: rgba(0,0,0,0.1); /* Faint background */
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 6px;
    border: 1px solid var(--input-border);
}
.profile-question-text { /* Label for the question text */
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.edit-category-button, .save-category-button {
    margin-right: 10px;
}

/* NOTE: De-dupe - keep structural flex/min-height here, visuals are defined in the earlier #profile-nav-pane block */
#profile-nav-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Responsive: stack panes on smaller screens to keep it usable */
@media (max-width: 900px) {
    #profile-view {
        overflow: auto; /* allow natural page scroll when stacked */
    }

    .profile-two-pane-container {
        flex-direction: column;
        overflow: visible;
    }

    #profile-nav-pane {
        flex: 0 0 auto;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    #profile-content-pane {
        height: auto;
        overflow-y: visible;
    }
}

#profile-nav-pane ul.profile-nav-list {
    flex-grow: 1;       /* Takes space between header and footer */
    overflow-y: auto;   /* THIS list scrolls if menu items are too many */
    min-height: 50px;  /* Give it some minimum height */
    padding: 0;
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--input-border) var(--card-background);
}
#profile-nav-pane ul.profile-nav-list::-webkit-scrollbar { width: 5px; }
#profile-nav-pane ul.profile-nav-list::-webkit-scrollbar-track { background: var(--card-background); }
#profile-nav-pane ul.profile-nav-list::-webkit-scrollbar-thumb { background-color: var(--input-border); }

.profile-nav-footer {
    margin-top: auto;    /* Pushes to the bottom of the #profile-nav-pane flex column */
    padding-top: 15px;
    border-top: none; /* Remove divider line above logout */
    flex-shrink: 0;
}

#nav-pane-logout-btn {
    /* Profile-only logout: subtle + elegant (not loud/danger-red) */
    width: 100%; /* Make button full width of nav pane */
    text-align: center;
    box-sizing: border-box; /* Include padding in width */

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.88);
    border-radius: 999px;
    padding: 12px 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
    backdrop-filter: blur(8px);
}

#profile-nav-pane #nav-pane-logout-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.96);
    transform: translateY(-1px);
}

#profile-nav-pane #nav-pane-logout-btn:active {
    transform: translateY(0px);
}

#profile-nav-pane #nav-pane-logout-btn:focus-visible {
    outline: 2px solid rgba(233, 30, 99, 0.55);
    outline-offset: 2px;
}

/* === START: Claude Concept CSS - Film Strip Panorama === */

/* Ensure root variables are accessible */
:root {
    --accent-color: #7e57c2;
    --accent-color-light: #a381d8;
    --text-primary: #f1f1f1;
    --text-secondary: #cccccc;
    --text-muted: #aaaaaa;
    /* Add other vars if needed by these styles */
  }
  
  .film-strip-panorama {
    width: 100%;
    max-width: 350px;
    /* --- REDUCE or REMOVE Bottom Margin --- */
    margin: 0 auto 5px auto; /* T R B L - Changed Bottom from 10px (or 20px) to 5px */
    /* Or: margin: 0 auto; */ /* Remove bottom margin completely */
    font-family: 'Nunito', sans-serif;
    position: relative;
  }
  
  .film-strip-container {
    position: relative;
    width: 100%;
    height: 65px; /* Film strip height */
    overflow: hidden;
  }
  
  .film-strip-frame {
    background-color: #181818; /* Keep slightly lighter than pure black */
    border: 1px solid #444; /* Ensure border is visible */
    border-radius: 4px;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
     /* Remove glow animation for now unless desired */
    /* animation: glow 3s infinite ease-in-out; */
  }
  
  /* Sprocket holes styling */
  .sprocket-holes { /* Target both left and right */
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Evenly space */
    align-items: center;
    width: 16px;
    height: 100%;
    background-color: var(--input-border); /* Example: Use input border color (#444) */
    padding: 5px 0;
    box-sizing: border-box;
    z-index: 2; /* Above panorama */
    flex-shrink: 0;
  }
  
  /* No specific style needed for .right with flex */
  
  .sprocket-hole {
    width: 8px; /* Hole size */
    height: 6px;
    border-radius: 1px;
    background-color: #222;
  }
  
  /* Panorama reveal area */
  .panorama-reveal {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    height: 100%;
    background-color: #333; /* Track background */
  }
  
  .panorama-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
      var(--accent-color) 0%,
      #e91e63 50%,
      #ff9800 100%);
    /* Controlled by JS variable */
    transform: translateX(calc((100% - var(--completion-percentage, 0%)) * -1));
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    /* Film grain removed for simplicity */
  }
  
  /* Completion text styling */
  .completion-text {
    text-align: center;
    margin-top: 10px; /* Adjust spacing */
    font-family: 'Nunito', sans-serif;
  }
  
  .completion-percentage {
    font-size: 1rem; /* 16px */
    font-weight: 700;
    color: var(--text-primary);
  }
  
  .completion-ratio {
    font-size: 0.875rem; /* 14px */
    color: var(--text-muted);
    margin-left: 8px; /* Space */
  }
  
  /* Optional Glow Keyframes (add if using animation) */
  /*
  @keyframes glow {
    0% { box-shadow: 0 0 5px rgba(126, 87, 194, 0.4); }
    50% { box-shadow: 0 0 10px rgba(126, 87, 194, 0.7); }
    100% { box-shadow: 0 0 5px rgba(126, 87, 194, 0.4); }
  }
  */
  
  /* === END: Claude Concept CSS === */

/* Ensure previous .profile-content-wrapper is not conflicting */
/* If you had styles for .profile-content-wrapper directly, you might need to adjust or remove them */
/* For now, the new structure uses profile-page-main-layout and profile-two-pane-container */

/* === Tiered Favorites Selector Styles === */

.tiered-favorites-container {
    width: 100%;
    margin-top: 10px; /* Add some space above the search */
}

.profile-sub-label { /* Style for labels above search and lists */
    display: block;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-size: 0.9em;
    text-align: left; /* Align labels left */
}

/* Tier headers: elevated title + count badge */
.tier-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    position: relative;
}

.tier-label-text {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 1.08rem;
    letter-spacing: 0.25px;
    color: rgba(255, 255, 255, 0.92);
    padding-left: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tier-count-badge {
    flex-shrink: 0;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Small accents per tier */
.tier-container[data-tier-id="top5"] .tier-label {
    background:
        linear-gradient(90deg, rgba(233, 30, 99, 0.14) 0%, rgba(126, 87, 194, 0.14) 55%, rgba(255, 255, 255, 0.04) 100%);
    border-color: rgba(163, 129, 216, 0.24);
}

.tier-container[data-tier-id="next10"] .tier-label {
    background:
        linear-gradient(90deg, rgba(233, 30, 99, 0.14) 0%, rgba(126, 87, 194, 0.14) 55%, rgba(255, 255, 255, 0.04) 100%);
    border-color: rgba(163, 129, 216, 0.22);
}

.tier-container[data-tier-id="alsoLike"] .tier-label {
    background:
        linear-gradient(90deg, rgba(233, 30, 99, 0.14) 0%, rgba(126, 87, 194, 0.14) 55%, rgba(255, 255, 255, 0.04) 100%);
    border-color: rgba(163, 129, 216, 0.20);
}

/* Creator tiers: give the same branded header treatment as movie tiers */
.tier-container[data-tier-id="directors"] .tier-label,
.tier-container[data-tier-id="actors"] .tier-label,
.tier-container[data-tier-id="creators"] .tier-label {
    background:
        linear-gradient(90deg, rgba(233, 30, 99, 0.14) 0%, rgba(126, 87, 194, 0.14) 55%, rgba(255, 255, 255, 0.04) 100%);
    border-color: rgba(163, 129, 216, 0.22);
}

.tiered-fav-search-input {
    width: 100%;
    height: 40px;
    padding: 10px 44px 10px 16px; /* extra right padding for icon */
    margin-bottom: 5px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.98rem;
    font-family: var(--font-secondary);
    box-sizing: border-box;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: right 14px center;
}
.tiered-fav-search-input:focus {
    border-color: rgba(163, 129, 216, 0.60);
    box-shadow: 0 0 0 3px rgba(163, 129, 216, 0.18);
}

.tiered-fav-search-input::placeholder {
    color: rgba(255, 255, 255, 0.88);
    font-style: italic;
    opacity: 0.85;
}

/* Search clear affordance (Movies + Creators) */
.tiered-fav-search-wrap {
    position: relative;
    margin-bottom: 5px; /* keep spacing below the search bar */
}
.tiered-fav-search-wrap .tiered-fav-search-input {
    width: 100%;
    margin-bottom: 0; /* wrapper owns spacing so the clear button centers to the input */
}
.tiered-fav-search-wrap .tiered-fav-search-input.has-value {
    /* Swap magnifying glass for a centered X (same positioning logic as the search icon). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: right 14px center;
    cursor: text;
}

/* When the clear "X" is visible, show a pointer cursor on the icon hit-area only */
.tiered-fav-search-wrap .tiered-fav-search-input.has-value:hover {
    cursor: pointer;
}
.tiered-fav-search-clear {
    display: none !important; /* legacy element; we now use the input background-image for the clear affordance */
}

.tiered-fav-search-results {
    /* Existing styles for background, border (if any from its own definition), etc. */
    /* height: 100%; */ /* Remove if flex-grow was used, we're switching */
    overflow-y: auto;
    /* flex-grow: 1; */ /* <<< REMOVE THIS if it was there */
    min-height: 0; /* Keep for good measure */
    scrollbar-width: thin;
    scrollbar-color: var(--input-border) var(--card-background);

    position: absolute; /* <<< ADD THIS */
    top: 0;             /* <<< ADD THIS */
    left: 0;            /* <<< ADD THIS */
    width: 100%;        /* <<< ADD THIS */
    height: 100%;       /* <<< ADD THIS */
    background-color: var(--card-background); /* Ensure it has a background */
    z-index: 1; /* Ensure it can overlay the suggestions grid if both somehow visible */
}
.tiered-fav-search-results::-webkit-scrollbar { width: 6px; }
.tiered-fav-search-results::-webkit-scrollbar-track { background: var(--card-background); }
.tiered-fav-search-results::-webkit-scrollbar-thumb { background-color: var(--input-border); }

.tiered-fav-search-results .search-suggestion { /* Reuse search suggestion style */
    display: flex; align-items: center; padding: 6px 10px; /* Smaller padding */
    cursor: pointer; transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--input-border);
}
.tiered-fav-search-results .search-suggestion:last-child { border-bottom: none; }
.tiered-fav-search-results .search-suggestion:hover { background-color: var(--button-subtle-hover-bg); }
.tiered-fav-search-results .search-suggestion img {
    width: 25px;
    height: calc(25px * 1.5);
    margin-right: 8px;
    border-radius: 2px;
    flex-shrink: 0;
    object-fit: cover; /* posters */
}

/* Person results: show avatar/placeholder without cropping */
.tiered-fav-search-results .search-suggestion img.person-suggestion-image {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px; /* breathing room so silhouette isn't cut */
    box-sizing: border-box;
}
.tiered-fav-search-results .search-suggestion span { font-size: 0.85em; color: var(--text-secondary); }
.tiered-fav-search-results .search-suggestion:hover span { color: var(--text-primary); }


/* Tier list styling */
.tiered-fav-list {
    list-style: none;
    padding: 10px; /* Padding inside the list area */
    margin: 0 0 10px 0; /* Reset margin, add bottom margin */
    border: 1px dashed var(--input-border); /* Dashed border indicates drop zone */
    border-radius: 6px;
    min-height: 80px; /* Minimum height */
    /* Enable flex for alignment if needed, but block usually works */
    display: block;
}

.tiered-fav-list li[data-id],
.tiered-fav-list div.temp-li-style[data-id] { /* Target both actual LIs and our styled DIVs with data-id */
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background-color: rgba(0,0,0,0.25);
    border-radius: 4px;
    margin-bottom: 8px;
    cursor: grab;
    border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
}

.tiered-fav-list li[data-id]:last-child,
.tiered-fav-list div.temp-li-style[data-id]:last-child {
    margin-bottom: 0;
}

.tiered-fav-list li[data-id]:hover,
.tiered-fav-list div.temp-li-style[data-id]:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: var(--accent-color-light);
}

.no-favorites-placeholder {
    /* Centered empty-state inside the dashed tier list */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    padding: 18px 14px;
    cursor: default;
    background-color: transparent !important; /* Ensure no bg */
    border: none !important; /* Ensure no border */
}

.no-favorites-placeholder-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    opacity: 0.92;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
}

.no-favorites-placeholder-title {
    font-family: var(--font-primary);
    font-weight: 900;
    font-size: 0.98rem;
    color: rgba(255, 255, 255, 0.90);
    line-height: 1.15;
}

/* Hide the empty-state while a drag is hovering a tier list */
.tiered-fav-list.tier-drag-hover .no-favorites-placeholder {
    display: none;
}

/* When dragging from suggestions/results into tiers, hide placeholders everywhere so they don't jump around. */
body.tier-dragging .no-favorites-placeholder {
    display: none !important;
}


.tier-item-thumbnail {
    width: 35px; /* Thumbnail size */
    height: calc(35px * 1.5); /* Maintain aspect ratio */
    object-fit: cover;
    border-radius: 3px;
    margin-right: 12px;
    background-color: #333; /* Placeholder bg */
    flex-shrink: 0; /* Prevent shrinking */
}

.tier-item-title {
    flex-grow: 1; /* Take remaining space */
    font-size: 0.9em;
    color: var(--text-primary);
    margin-right: 10px; /* Space before remove button */
}

.tier-item-remove-btn {
    background: transparent; /* Explicitly transparent */
    border: none;
    color: var(--text-muted); /* Start with a more muted color */
    font-size: 1.3em;    /* Slightly adjusted size */
    font-weight: bold;
    line-height: 1;      /* Helps with vertical alignment if font causes issues */
    cursor: pointer;
    padding: 2px 6px;    /* Slightly more padding for easier click */
    margin-left: auto;   /* Pushes to the right */
    opacity: 0.6;        /* Start slightly less opaque */
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.1s ease; /* Added color and transform */
    flex-shrink: 0;
    border-radius: 50%; /* Optional: make it circular */
    width: 24px;        /* Optional: if circular, define width/height */
    height: 24px;       /* Optional: if circular */
    display: inline-flex; /* Optional: if circular, for centering the '×' */
    align-items: center;  /* Optional: if circular */
    justify-content: center; /* Optional: if circular */
}

.tier-item-remove-btn:hover {
    opacity: 1;
    color: var(--error-color); /* Brighten to error color on hover */
    background-color: rgba(255, 138, 128, 0.1); /* Very faint error background */
    transform: scale(1.1); /* Slight scale effect */
}

.tier-item-remove-btn:active {
    transform: scale(0.95); /* Press effect */
}

.tier-item-remove-btn:focus-visible {
    outline: 2px solid var(--accent-color-light);
    outline-offset: 1px;
    opacity: 1;
    color: var(--error-color);
}

/* Suggestions area placeholder */
.tiered-fav-suggestions {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid var(--input-border);
}
.suggestions-list {
    /* Style later when suggestions are implemented */
    min-height: 50px;
    text-align: center;
    color: var(--text-muted);
    padding-top: 10px;
}

/* === END Tiered Favorites Selector Styles === */

/* === Tiered Favorites Selector - Two Column Layout === */

.tiered-favorites-component {
    display: flex;
    gap: 20px;
    width: 100%;
    align-items: stretch; /* Correct */
    flex-grow: 1; /* Make the two-column layout fill the .question.profile-question-item */
    min-height: 0; /* For nested flex */
}

.suggestions-column .tiered-fav-search-input {
    /* Inherit the "nav-like" search styles; only control layout spacing here */
    margin-top: 16px;
    flex-shrink: 0;
}

/* Target the label for the search input in the suggestions column */
.suggestions-column > .profile-sub-label { /* If this is the only .profile-sub-label directly in .suggestions-column */
    display: block;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px; /* <<< CHANGED FROM 8px to 10px */
    font-size: 0.9em;
    text-align: left;
    /* Add margin-top to match the tier-label's margin-top IF align-items: baseline was NOT achieving the desired effect alone.
       However, with align-items: baseline, the tier-label's own margin-top (15px) should correctly position its baseline,
       and the search label's baseline will align to that. So, we likely DON'T need margin-top here.
    */
    /* margin-top: 15px; /* Potentially add this if align-items: baseline isn't enough due to other factors */
}

.tier-column {
    flex: 1 1 45%; /* Example: Tiers take slightly more space */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between tiers */
}

.suggestions-column {
    flex: 1 1 45%; /* Or your preferred basis/grow/shrink */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Crucial */
}

.tiered-fav-list {
    list-style: none;
    padding: 10px;
    margin: 0;
    border: 1px dashed var(--input-border);
    border-radius: 6px;
    min-height: 100px;
    /* Allow list to grow if needed */
    /* flex-grow: 1; */
}
/* Keep li, thumbnail, title, remove button styles */

.suggestions-or-results-container {
    flex-grow: 1; /* Takes remaining space in .suggestions-column */
    flex-basis: 0%;  /* <<< ADD THIS (or flex-basis: 0;) */
    display: flex;
    flex-direction: column; /* Important for its child (.suggestions-grid) */
    overflow: hidden; /* CRUCIAL: This container MUST clip its children */
    border: 1px solid var(--input-border);
    border-radius: 6px;
    margin-top: 10px;
    min-height: 0; /* CRUCIAL */
    position: relative; /* <<< ADD THIS */
}

.tiered-fav-search-results {
    /* Styles when search results are shown */
    /* background-color: var(--card-background); */ /* Already set */
    height: 100%;
    overflow-y: auto;
    min-height: 0;
    flex-grow: 1; /* Allow it to take space if .suggestions-grid is hidden */
    scrollbar-width: thin;
    scrollbar-color: var(--input-border) var(--card-background); /* Match suggestions-grid */
    /* Keep suggestion item styles */
}
.tiered-fav-search-results::-webkit-scrollbar { width: 6px; }
.tiered-fav-search-results::-webkit-scrollbar-track { background: var(--card-background); } /* Match */
.tiered-fav-search-results::-webkit-scrollbar-thumb { background-color: var(--input-border); } /* Match */

.suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
    padding: 10px;
    overflow-y: auto; /* This is where the actual scrolling happens */
    min-height: 0; /* Important for flex children that scroll */
    box-sizing: border-box;
    /* Scrollbar Styling */
    scrollbar-width: thin;
    scrollbar-color: var(--input-border) rgba(10,10,10, 0.3);
    position: absolute; /* <<< ADD THIS */
    top: 0;             /* <<< ADD THIS */
    left: 0;            /* <<< ADD THIS */
    width: 100%;        /* <<< ADD THIS (or right: 0;) */
    height: 100%;       /* <<< ADD THIS (or bottom: 0;) */
}

/* People/headshots: use fixed square grid cells to avoid "sliced" rendering inside dense grids. */
.suggestions-grid.person-suggestions-grid {
    grid-auto-rows: 92px;
}
.suggestions-grid.person-suggestions-grid .suggestion-item--person {
    height: 100%;
    aspect-ratio: auto; /* grid-auto-rows controls height */
}
.suggestions-grid::-webkit-scrollbar { width: 6px; }
.suggestions-grid::-webkit-scrollbar-track { background: rgba(10,10,10, 0.1); border-radius: 3px; }
.suggestions-grid::-webkit-scrollbar-thumb { background-color: var(--input-border); border-radius: 3px; }

.suggestion-item { /* Styling for items in the grid */
    aspect-ratio: 2 / 3; /* Maintain movie poster aspect ratio */
    cursor: grab;
}

/* Person suggestions: subtle hover overlay with name + profession */
.suggestion-item--person {
    /* People headshots are not poster-shaped; square tiles avoid awkward crops. */
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    border-radius: 4px; /* match image */
}
.suggestion-item--person img {
    /* Bias the crop upward so faces land in-frame more often. */
    object-position: 50% 35%;
}
.suggestion-item--person .suggestion-hover-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    padding: 10px 8px;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.45) 65%,
        rgba(0, 0, 0, 0.68) 100%
    );
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none; /* don't interfere with drag */
}
.suggestion-item--person:hover .suggestion-hover-overlay {
    opacity: 1;
}
.suggestion-item--person .suggestion-hover-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.suggestion-item--person .suggestion-hover-profession {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.suggestion-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    background-color: #333;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.suggestion-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* === SortableJS Drag Visuals === */

/* Style for the placeholder in the target list (ghost) */
.tiered-fav-list .sortable-ghost {
    opacity: 0.4;
    background-color: var(--accent-color-light); /* Highlight drop area */
    /* Ensure it takes up the space of a normal list item */
    height: 53px; /* Approx height of your li: padding (8*2) + img (35) + border (1*2) - adjust if needed */
    border-radius: 4px;
    margin-bottom: 8px; /* Match li margin */
}

/* Style for the item actually being dragged (chosen/drag) */
/* This targets when a suggestion-item is being dragged */
.suggestion-item.sortable-chosen,
.suggestion-item.sortable-drag {
    opacity: 0.8;
    cursor: grabbing !important;
    background-color: var(--accent-color); /* Give it a distinct background */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    position: relative; /* enable z-index */
    z-index: 1000; /* float above neighboring grid items while dragging */

    /* --- Constrain the size of the dragged element --- */
    width: 150px !important;  /* Good drag size */
    height: auto !important;  /* Let content determine height (posters shouldn't be cropped) */
    padding: 5px; /* Add some padding */
    box-sizing: border-box;
}

/* Constrain the image INSIDE the dragged suggestion-item */
.suggestion-item.sortable-chosen img,
.suggestion-item.sortable-drag img {
    width: 100% !important; /* Make image fill the constrained parent */
    height: auto !important; /* preserve poster aspect ratio while dragging */
    object-fit: contain;
    border-radius: 3px; /* Consistent with other thumbnails */
}

/* Person drag: keep a square tile and crop like a headshot (not a poster) */
.suggestion-item--person.sortable-chosen,
.suggestion-item--person.sortable-drag {
    height: 150px !important;
}
.suggestion-item--person.sortable-chosen img,
.suggestion-item--person.sortable-drag img {
    height: 100% !important;
    object-fit: cover;
    object-position: 50% 35%;
}

/* If you drag an actual LI from a tier, its existing style is usually fine,
   but you can add specific styles if needed: */
.tiered-fav-list li.sortable-chosen,
.tiered-fav-list li.sortable-drag {
    opacity: 0.7;
    background-color: var(--accent-color-light); /* Highlight */
    color: black;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    cursor: grabbing !important;
}

/* --- Stateful Category Save Button --- */
.profile-content-header {
    display: flex;
    justify-content: space-between; /* Puts title left, button right */
    align-items: center;      /* Vertically align title and button */
    margin-bottom: 25px;       /* Space below header */
    padding-bottom: 15px;      /* Space for border */
}

/* Title + subtitle stack in the profile content header */
.profile-content-header .profile-content-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.profile-content-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.98rem;
    line-height: 1.35;
    max-width: 900px;
}

/* Visually hidden, screen-reader accessible */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* The h3 title style might already exist, ensure it doesn't conflict */
#profile-content-pane .profile-content-title {
    margin: 0; /* Remove default h3 margins if any */
    font-family: var(--font-primary);
    font-size: 1.5em; /* Or your desired title size */
    color: var(--text-primary);
    /* No border-bottom here, it's on the parent .profile-content-header */
}

button.category-save-stateful {
    /* Match .cta-button styling exactly */
    background-image: linear-gradient(to right, #e91e63, var(--accent-color));
    color: white;
    border: none;
    border-radius: 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    padding: 10px 25px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

/* State 1: "Saved" (Disabled/Non-Clickable) */
button.category-save-stateful.saved {
    cursor: default;
    opacity: 0.5;
    box-shadow: none;
}
button.category-save-stateful.saved:hover {
    opacity: 0.5;
    filter: none;
}

/* State 2: "Save Changes" (Clickable) - Active unsaved state */
button.category-save-stateful.unsaved-active {
    cursor: pointer;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
button.category-save-stateful.unsaved-active:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 10px rgba(163, 129, 216, 0.5);
}

/* State 3: "Saving..." (Disabled during save operation) */
button.category-save-stateful:disabled:not(.saved) {
    opacity: 0.6;
    cursor: wait;
}

/* Auto-save specific states */
button.category-save-stateful.save-pending {
    cursor: default;
    opacity: 0.5;
    box-shadow: none;
}

button.category-save-stateful.save-saving {
    cursor: wait;
    opacity: 0.7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

button.category-save-stateful.save-error {
    cursor: pointer;
    opacity: 1;
    box-shadow: 0 0 10px rgba(244, 67, 54, 0.6);
    border: 1px solid rgba(244, 67, 54, 0.5);
}

button.category-save-stateful.save-error:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 15px rgba(244, 67, 54, 0.8);
}

/* Save status container */
.save-status-container {
    display: flex;
    flex-direction: column;
    /* Center the "Last saved…" label under the button */
    align-items: center;
    gap: 4px;
}

/* Last saved indicator */
.last-saved-indicator {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
    font-style: italic;
    white-space: nowrap;
    text-align: center;
}

/* ========================================================== */
/* == STYLES FOR QUESTIONS WITHIN PREDICTION MODAL (RIGHT PANE) == */
/* ========================================================== */

/* The form that displayQuestions creates inside #prediction-interaction-area */
#prediction-interaction-area form#modal-profile-update-form,
#prediction-interaction-area form#modal-baseline-form {
    width: 100%;
    max-width: 500px; /* Limit form width within modal */
    margin: 0 auto;   /* Center the form */
    text-align: left; /* Default text align for labels/inputs */
    overflow-y: auto; /* Allow the form itself to scroll if questions are too tall */
    max-height: calc(100% - 60px); /* Example: leave space for title and submit button */
    padding-right: 10px; /* Space for scrollbar if form scrolls */
    box-sizing: border-box;
}

/* Scrollbar for the form inside the modal (if it needs to scroll) */
#prediction-interaction-area form#modal-profile-update-form::-webkit-scrollbar,
#prediction-interaction-area form#modal-baseline-form::-webkit-scrollbar {
    width: 6px;
}
#prediction-interaction-area form#modal-profile-update-form::-webkit-scrollbar-track,
#prediction-interaction-area form#modal-baseline-form::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
}
#prediction-interaction-area form#modal-profile-update-form::-webkit-scrollbar-thumb,
#prediction-interaction-area form#modal-baseline-form::-webkit-scrollbar-thumb {
    background-color: var(--input-border);
    border-radius: 3px;
}


/* The title "Answer a few more questions..." that JS adds */
#prediction-interaction-area h4.modal-question-title {
    font-family: var(--font-primary);
    font-size: 1.3em;
    color: var(--text-secondary);
    margin-bottom: 20px; /* Space below title */
    text-align: center;
    flex-shrink: 0; 
}

/* Individual question block within the modal's form */
#prediction-interaction-area .question {
    background-color: transparent; /* Removed background for cleaner look */
    padding: 0; /* Removed padding */
    margin-bottom: 18px;
    border-radius: 0; 
    border: none; /* Removed border */
    width: 100%;
}

/* Question text label inside the modal */
#prediction-interaction-area .question > label {
    display: block;
    font-family: var(--font-display); /* Lato */
    font-size: 1.5em; /* Larger for better visibility */
    font-weight: 700; 
    color: var(--text-primary);
    margin-bottom: 25px; 
    line-height: 1.3;
    text-align: center; /* Center aligned */
}
#prediction-interaction-area .question > label .required-indicator {
    color: var(--accent-color-light);
}


/* Input area within the modal's question */

/* Input area within the modal's question */
#prediction-interaction-area .input-area {
    padding-top: 5px; 
    display: flex !important; 
    flex-direction: column !important;
    align-items: center !important; /* Force Center Alignment */
    gap: 12px; 
    width: 100% !important;
}

/* Radio and Checkbox labels specifically within the modal context - High Specificity */
#prediction-interaction-area .input-area .radio-label,
#prediction-interaction-area .input-area .checkbox-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    padding: 18px 30px !important;
    font-size: 1.1em !important;
    margin: 0 0 8px 0 !important; /* Ensure vertical spacing */
    
    width: auto !important;
    min-width: 300px !important;
    max-width: 90% !important;
    
    border-radius: 30px;
    border: 1px solid var(--input-border);
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease-out;
    box-shadow: none;
    text-align: center !important;
}

/* Hover and checked states */
#prediction-interaction-area .radio-label:hover,
#prediction-interaction-area .checkbox-label:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: var(--hover-highlight); 
    color: var(--text-primary);
    transform: translateY(-2px);
}

#prediction-interaction-area .radio-label:has(input:checked), 
#prediction-interaction-area .checkbox-label:has(input:checked) {
    border-color: transparent;
    color: white;
    font-weight: bold;
    background-image: linear-gradient(to right, #e91e63, var(--accent-color));
    box-shadow: none;
    transform: none;
}

/* Hide the actual radio/checkbox input */
#prediction-interaction-area .radio-label input, 
#prediction-interaction-area .checkbox-label input {
    position: absolute; 
    opacity: 0; 
    pointer-events: none; 
}

/* MultiScale5 within the modal */
#prediction-interaction-area .multiscale5-container.modal-multiscale5-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between sub-questions in modal */
    width: 100%;
    margin-top: 10px;
}
#prediction-interaction-area .multiscale5-subquestion.modal-multiscale5-subquestion {
    border-left: none; /* Optional: remove indent for modal if space is tight */
    padding-left: 0;  /* Optional: remove indent */
}
#prediction-interaction-area label.multiscale5-sublabel.modal-multiscale5-sublabel {
    display: block;
    font-size: 0.95em; /* Slightly smaller sub-question text for modal */
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-align: center; /* Center sub-labels if desired */
}
/* The sub-scale5 containers will use .modal-scale5-container styles which you already have */
#prediction-interaction-area .multiscale5-subquestion.modal-multiscale5-subquestion .scale5-container.subscale5-container {
    gap: 5px; 
    max-width: 100%; /* Allow it to fit */
    justify-content: center; /* Center the smaller buttons */
}
#prediction-interaction-area .multiscale5-subquestion.modal-multiscale5-subquestion .scale5-label.modal-scale5-label {
    width: 45px; /* Even smaller buttons for sub-scales if needed */
    height: 45px;
    font-size: 0.75em;
}

/* Checked state can inherit global styles */

/* Checkbox group within the modal */
#prediction-interaction-area .checkbox-group {
    display: flex; 
    flex-direction: column; /* Stack checkboxes vertically */
    align-items: flex-start; /* Align group items to the left */
    gap: 8px;
    width: 100%; /* Or fit-content */
}
#prediction-interaction-area .checkbox-limit-text {
    font-size: 0.75em;
    margin-top: 5px;
}


/* Scale5 container within the modal - UNIFIED with PSO style */
#prediction-interaction-area .scale5-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    max-width: 656px; /* Match PSO */
    width: 100%;
    margin: 0 auto 20px auto;
    padding: 0;
    box-sizing: border-box;
}
#prediction-interaction-area .scale5-label {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 78px; /* Match PSO */
    padding: 19px 38px; /* Match PSO */
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: rgba(16, 13, 22, 0.97); /* Match PSO - opaque dark */
    border-radius: 14px; /* Match PSO */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Match PSO - subtle border */
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
    transform: none;
    box-shadow: none;
}
#prediction-interaction-area .scale5-label:hover {
    background: rgba(30, 24, 40, 0.98); /* Match PSO */
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}
#prediction-interaction-area .scale5-label:has(input:checked) {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color-light) 100%); /* Match PSO gradient */
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(163, 129, 216, 0.4); /* Match PSO shadow */
    transform: none;
}
#prediction-interaction-area .scale5-label:has(input:checked) span {
    color: white;
    font-weight: 600;
}
#prediction-interaction-area .scale5-label span {
    font-size: 1.2rem; /* Match PSO */
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    margin-top: 0;
    font-weight: 500;
}
/* Hide radio inputs visually */
#prediction-interaction-area .scale5-label input[type="radio"] {
    appearance: none;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
/* Hide breaks so text and emoji stay on one line */
#prediction-interaction-area .scale5-label br { display: none; }

/* MultiScale5 within the modal */
#prediction-interaction-area .multiscale5-subquestion {
    border-left: none; 
    padding-left: 0;
}
#prediction-interaction-area label.multiscale5-sublabel {
    display: block;
    font-size: 1.2em; /* Larger and distinct */
    margin-bottom: 12px;
    text-align: center; /* Centered */
    width: 100%;
}
#prediction-interaction-area .multiscale5-subquestion .scale5-container {
    flex-direction: row !important; /* Horizontal layout for sub-questions */
    gap: 10px; 
    max-width: 100% !important;
    justify-content: space-between;
}
#prediction-interaction-area .multiscale5-subquestion .scale5-label {
    width: auto !important;
    flex: 1; /* Distribute space evenly */
    height: auto;
    min-height: 55px;
    font-size: 0.9em;
    padding: 10px 5px;
}


/* Submit button for the modal's question form */
#prediction-interaction-area button.modal-submit-button { /* More specific selector */
    display: block; 
    width: fit-content; /* Or max-width: 250px; width: 100%; */
    margin: 25px auto 15px auto; /* Center and add space */
    padding: 11px 22px; /* Adjust padding */
    font-size: 1em;
    /* It should inherit .cta-button styles for gradient, etc. */
}

/* ========================================================== */
/* == NOTE: Old MPML question stepper styles removed ======== */
/* == MPML now uses unified displayInlineQuestion() flow ==== */
/* == which shares styles with MPMA/GOM via .inline-question-nav */
/* ========================================================== */

/* General nav arrow button styles (used by inline-question-nav) */
.nav-arrow-button {
    /* Reuse styles from onboarding if they exist, or define here */
    padding: 0; /* keep perfectly circular */
    font-size: 0.9em;
}

/* --- ADD THESE NEW RULES --- */
.nav-arrow-button { /* This class is on both modal-question-back/next-btn */
    background-color: rgba(45, 45, 45, 0.8); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    color: var(--text-primary); 
    border-radius: 50%; 
    width: 44px; 
    height: 44px;
    padding: 0; 
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.1s ease;
    display: flex; 
    align-items: center;
    justify-content: center;
    pointer-events: auto; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.nav-arrow-button:hover { /* ... */ }
.nav-arrow-button:active { /* ... */ }
.nav-arrow-button:disabled { /* ... */ }

.nav-arrow-icon { /* This class is on the img tag */
    display: block;
    width: 20px; 
    height: 20px;
    /* filter: brightness(0) invert(1); /* If SVG is black and needs to be white */
}

/* Visually center the back chevron (SVG has extra whitespace) */
/* Back uses the same SVG as forward, rotated for perfect symmetry */
.nav-arrow-icon.nav-arrow-icon-back {
    transform: rotate(180deg);
}

/* Inline question nav arrows: mount on #prediction-right-pane (JS),
   so inset is always measured from the pane/modal border. */
#prediction-right-pane {
    position: relative;
}

#prediction-right-pane .inline-question-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 50;
}

#prediction-right-pane #inline-back-btn,
#prediction-right-pane #inline-next-btn {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    pointer-events: auto;
    margin: 0;
}

/* Symmetric inset from the pane/modal border */
#prediction-right-pane #inline-back-btn { left: 22px; right: auto; }
#prediction-right-pane #inline-next-btn { right: 22px; left: auto; }

/* Inline question wrapper: keep the question block truly centered in the split MPM layout */
#prediction-interaction-area #inline-question-wrapper {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}
#prediction-interaction-area #inline-question-wrapper .question.single-question-active {
    width: 100%;
}

/* Specific styling for the #modal-question-next-btn when it's "Submit & Predict" */
/* It already has .cta-button, so it will get the gradient. We might need to adjust padding if it has text. */
#modal-question-next-btn:not(:has(img.nav-arrow-icon)) { /* When it has text, not an icon */
    width: auto; /* Allow width to fit text */
    min-width: 120px; /* Ensure decent width for text */
    padding: 10px 25px; /* Adjust padding for text */
    border-radius: 25px; /* More pill-like for text button */
}

/* Toast Animations - Multiple Options */

/* Option A: Pulse/Scale Animation (DEFAULT - elegant and professional) */
@keyframes toastPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.toast.toast-pulse {
  animation: toastPulse 0.3s ease-in-out;
}

/* Option B: Bounce Animation (playful, energetic) */
@keyframes toastBounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-8px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-4px); }
}

.toast.toast-bounce {
  animation: toastBounce 0.5s ease-out;
}

/* Option C: Wiggle Animation (playful rotation) */
@keyframes toastWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
  75% { transform: rotate(-2deg); }
}

.toast.toast-wiggle {
  animation: toastWiggle 0.4s ease-in-out;
}

/* Legacy: Keep old shake for backwards compatibility */
@keyframes toastShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.toast.shake {
  animation: toastShake 0.4s ease-in-out;
}
/* --- Toast Notification System --- */
#toast-container {
    position: fixed;
    bottom: 60px; /* Moved up for better visibility */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483647; /* Max Z-Index */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none; /* Allow clicks through container */
}

.toast {
    background-color: rgba(30, 30, 30, 0.98); /* Slightly lighter for visibility */
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px; /* Less rounded for cleaner look */
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1); /* Stronger shadow + subtle outer glow */
    font-size: 1rem; /* Slightly larger text */
    font-weight: 500; /* Medium weight for better readability */
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    animation: toastFadeIn 0.3s forwards;
    pointer-events: auto; /* Allow interactions */
    border: 2px solid transparent; /* Transparent base for gradient border */
    max-width: 90vw;
    backdrop-filter: blur(10px); /* Subtle blur effect */
}

/* Error toast - use brand gradient border */
.toast.error { 
    background-image: linear-gradient(rgba(30, 30, 30, 0.98), rgba(30, 30, 30, 0.98)), 
                      linear-gradient(to right, #e91e63, #f44336); /* Pink to red gradient */
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    border: 2px solid transparent; /* Shows the gradient */
}

/* Info toast - use accent gradient border */
.toast.info { 
    background-image: linear-gradient(rgba(30, 30, 30, 0.98), rgba(30, 30, 30, 0.98)), 
                      linear-gradient(to right, var(--accent-color), #9c27b0); /* Purple gradient */
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    border: 2px solid transparent;
}

/* Success toast - use green gradient border */
.toast.success { 
    background-image: linear-gradient(rgba(30, 30, 30, 0.98), rgba(30, 30, 30, 0.98)), 
                      linear-gradient(to right, #66bb6a, #4caf50); /* Green gradient */
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    border: 2px solid transparent;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}
.toast-close:hover { color: #fff; }

@keyframes toastFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* Toast Shake Animation */
@keyframes toastShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.toast.shake {
  animation: toastShake 0.4s ease-in-out;
}

.toast.fade-out {
    animation: toastFadeOut 0.3s forwards;
}

/* Fix for General Onboarding Questions Layout */
#single-question-container .scale5-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap; /* Force single row for spectrum feel */
    width: 100%;
    max-width: 100%;
    gap: 10px;
}

#single-question-container .scale5-label {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ========================================== */
/* == NEW Onboarding Prediction Result UI == */
/* ========================================== */

/* Layout override for Onboarding context */
.rail-layout.onboarding-layout .rail-content {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Spacious vertical rhythm */
    padding-top: 10px;
}

/* Sections */
.onboarding-section {
    width: 100%;
    margin-bottom: 5px;
}
.onboarding-section .section-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 12px;
    font-weight: 600;
}

/* A. Hero Reasons */
.why-hero .why-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.why-hero .why-list li {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 1rem;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.why-hero .why-list li .icon {
    flex-shrink: 0;
    font-size: 1.1em;
    line-height: 1.3;
}

/* B. Vibe Tags */
.vibe-section .vibe-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.vibe-section .vibe-tag {
    background: rgba(163, 129, 216, 0.15); /* Subtle purple tint */
    border: 1px solid rgba(163, 129, 216, 0.3);
    color: var(--text-primary);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}
.vibe-section .compact-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* C. Simplified Reception */
.reception-section .reception-bar {
    display: flex;
    align-items: center;
    justify-content: space-around; /* Or flex-start with gap */
    background: rgba(0, 0, 0, 0.2);
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.reception-bar .rec-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
}
.reception-bar .rec-item .emoji {
    font-size: 1.2em;
}
.reception-bar .divider {
    color: var(--text-muted);
    opacity: 0.5;
}

/* D. CTA Section */
.cta-section {
    text-align: center;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cta-section .cta-text {
    margin-bottom: 15px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.cta-section .cta-button {
    /* Inherits .cta-button styles */
    font-size: 1.1rem;
    padding: 14px 30px;
}
.cta-section .cta-button.full-width {
    width: 100%;
    max-width: 400px; /* Prevent it getting too wide on desktop */
    margin: 0 auto; /* Center it */
    display: block;
}

.onboarding-section .empty-state {
    font-style: italic;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

/* ========================================== */
/* == DECISION ENGINE CX (Onboarding Result) == */
/* ========================================== */

/* Flat container - no extra box, inherits from parent pane */
.decision-engine-flat {
    width: 100%;
    padding: 10px 5px;
}

/* A. Recommendation Hero - Compact */
.de-recommendation {
    text-align: center;
    padding: 15px 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.de-rec-icon {
    font-size: 1.8rem;
    display: inline;
    margin-right: 10px;
    vertical-align: middle;
}

.de-rec-text {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--text-primary);
    display: inline;
    vertical-align: middle;
}

.de-score-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 5px;
}

.de-score-bar {
    flex: 1;
    max-width: 150px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.de-score-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent-color), #a381d8);
    border-radius: 4px;
    transition: width 1s ease-out;
}

.de-score-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-color);
}

.de-confidence {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

/* C. Sections - Compact */
.de-section {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.de-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.de-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.de-subtitle {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* D. Personalized Hooks - Compact inline */
.de-hooks-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.de-hook {
    padding: 8px 0 8px 12px;
    border-left: 3px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.de-hook.match {
    border-left-color: #4ade80;
}

.de-hook.risk {
    border-left-color: #fbbf24;
}

.de-hook.neutral {
    border-left-color: #60a5fa;
}

.de-hook.unknown {
    border-left-color: #94a3b8;
    opacity: 0.8;
}

.de-hook-asked {
    display: inline;
    font-size: 0.88rem;
}

.de-hook-icon {
    font-size: 0.9rem;
    margin-right: 4px;
}

.de-hook-delivers {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: inline;
}

/* E. Unlock Section - Compact */
.de-unlock {
    padding: 10px 0 !important;
    margin-top: 5px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    border-bottom: none;
}

.de-unlock-intro {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
}

.de-unlock-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 15px;
}

.de-unlock-list li {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* F. Quick Facts - Inline */
.de-facts-row {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.de-fact {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    font-weight: 600;
}

.de-fact-emoji {
    font-size: 1rem;
}

/* G. Action Buttons - Compact */
.de-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.de-btn {
    flex: 1;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.de-btn-skip {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.de-btn-skip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.de-btn-save {
    background: linear-gradient(135deg, var(--accent-color), #9b6dd4);
    color: white;
}

.de-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(163, 129, 216, 0.4);
}

/* H. Footer - Compact */
.de-footer {
    text-align: center;
    margin-top: 12px;
    padding-top: 10px;
}

.de-footer p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

.de-footer strong {
    color: var(--accent-color);
}

/* I. Skip State */
.de-skipped {
    text-align: center;
    padding: 50px 30px;
}

.de-skip-message {
    max-width: 400px;
    margin: 0 auto;
}

.de-skip-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 20px;
}

.de-skip-message h3 {
    font-size: 1.3rem;
    margin: 0 0 15px 0;
    color: var(--text-primary);
}

.de-skip-message p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 25px 0;
    line-height: 1.5;
}

.de-skip-message .de-btn {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 500px) {
    .decision-engine {
        padding: 20px 15px;
        border-radius: 12px;
    }
    
    .de-recommendation {
        padding: 20px 15px;
    }
    
    .de-rec-text {
        font-size: 1.2rem;
    }
    
    .de-actions {
        flex-direction: column;
    }
    
    .de-facts-row {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
}

/* ================================================== */
/* === PREDICTION RESULTS V2 (Enhanced UX) === */
/* ================================================== */

.prediction-results-v2 {
    width: 100%;
    padding: 0;
}

/* === A. HERO SCORE PRESENTATION === */
.pr-hero {
    text-align: center;
    padding: 6px 20px 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 25px;
}

.pr-popcorn-container {
    margin-bottom: 4px;
}

.pr-popcorn-img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.pr-score-display {
    margin-bottom: 15px;
}

.pr-match-score-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-color-light);
    margin-bottom: 8px;
    opacity: 0.9;
}

.pr-score-number {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-color) 0%, #a381d8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 10px;
}

.pr-score-bar-container {
    width: 100%;
    max-width: 280px;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pr-score-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color) 0%, #a381d8 50%, #e91e63 100%);
    border-radius: 5px;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 10px rgba(160, 111, 255, 0.5);
}

.pr-verdict {
    margin-bottom: 12px;
}

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

.pr-verdict-subtitle {
    font-size: 0.95rem;
    color: var(--accent-color-light);
    background: rgba(160, 111, 255, 0.12);
    border: 1px solid rgba(160, 111, 255, 0.25);
    border-radius: 6px;
    padding: 8px 16px;
    margin: 0 auto 16px auto;
    line-height: 1.4;
    display: inline-block;
    max-width: 90%;
}

.pr-verdict-subtitle::before {
    content: 'ℹ️';
    margin-right: 6px;
}

.pr-hero-cta {
    margin-top: 16px;
}

.pr-btn-hero {
    padding: 16px 36px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: linear-gradient(135deg, var(--accent-color) 0%, #a381d8 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(160, 111, 255, 0.4);
    min-width: 200px;
}

.pr-btn-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(160, 111, 255, 0.5);
}

/* === B. SECTIONS === */
.pr-section {
    padding: 25px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pr-section:last-child {
    border-bottom: none;
}

.pr-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    text-transform: none;
    letter-spacing: -0.3px;
}

.pr-section-intro {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* === C. YOUR TASTE VS THIS MOVIE === */
.rail-content .pr-comparison {
    padding-top: 4px;
    border-bottom: none !important;
    padding-bottom: 30px;
    margin-bottom: 20px;
}

#prediction-display-area .rail-content .pr-comparison h4 {
    border-bottom: none !important;
    border-image: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.pr-comparison-title {
    text-align: center !important;
}

.vs-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(160, 111, 255, 0.25), rgba(168, 85, 247, 0.35));
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #e9d5ff;
    margin: 0 10px;
    text-transform: lowercase;
}

/* Unified section styles */
.pr-unified {
    background: transparent;
    border: none;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* Remove the large wrapper "panel" background for the unified prediction block.
   This section also has .prediction-section, which otherwise adds a dark card bg. */
.prediction-section.pr-unified {
    background-color: transparent !important;
}

.pr-unified:not(.pr-cta-pane)::before {
    content: '';
    display: block;
    height: 20px;
}

.pr-unified .pr-comparison-title {
    /* This H4 also matches `.rail-content section h4` which sets `display:flex`,
       so `text-align` alone won't center. Center via flex. */
    width: 100%;
    justify-content: center;
    text-align: center !important;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pr-summary-cta {
    text-align: center;
    margin-bottom: 24px;
}

.pr-summary-text {
    font-family: var(--font-primary);
    font-size: 1.6rem !important;
    color: #f8f8f8;
    margin: 12px 0 24px 0 !important;
    padding-top: 0 !important;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
}

.pr-cta-pane {
    margin-top: 60px !important; /* breathing room above FlixChoice logo */
    text-align: center;
    /* no top padding so the logo can sit higher; add bottom padding for breathing room */
    padding: 0 20px 22px !important;
}

/* Reduce leftover bottom padding on the section above the CTA pane so the logo sits higher */
.prediction-section.pr-unified.pr-comparison {
    padding-bottom: 6px !important;
}

/* Value Proposition Section */
.pr-value-prop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0; /* remove extra top whitespace above logo */
}

.pr-value-prop > *:not(:first-child) {
    margin-top: 16px;
}

.pr-value-prop .pr-trust-text {
    margin-top: 16px !important;
    font-size: 0.8rem !important;
}

.pr-logo-container {
    margin-bottom: 0;
}

.pr-brand-logo-img {
    width: 200px;
    height: auto;
}

.pr-value-headline {
    font-family: var(--font-primary);
    font-size: 1.6rem !important;
    font-weight: 600;
    color: #f8f8f8;
    margin: 0 0 8px 0;
    line-height: 1.5;
    letter-spacing: 0.3px;
    text-align: center;
}

.pr-value-headline .highlight-you {
    color: #a855f7;
    font-weight: 700;
}

.pr-value-headline .ai-badge {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.pr-value-subheadline {
    font-size: 1.05rem;
    font-weight: 400;
    color: #d1d5db;
    line-height: 1.5;
    margin: 0 0 12px 0;
    padding: 0 30px;
    max-width: 600px;
    text-align: center;
}

.pr-benefits-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 550px;
    margin: 0 0 28px 0;
}

.pr-benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px 16px;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(168, 85, 247, 0.15);
    transition: all 0.3s ease;
}

.pr-benefit-item:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
    transform: translateX(4px);
}

.pr-benefit-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    line-height: 1;
}

.pr-benefit-title {
    font-size: 1rem;
    font-weight: 600;
    color: #f8f8f8;
    line-height: 1.3;
    margin: 0;
}

.pr-primary-cta {
    padding: 16px 36px;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    margin: 0;
}

.pr-primary-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.6);
    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
}

.pr-trust-text {
    font-size: 0.8rem !important;
    color: #6b7280;
    margin: 32px 0 0 0 !important;
    font-weight: 300;
    opacity: 0.8;
}

.pr-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.pr-context-text {
    font-size: 0.95rem;
    font-weight: 400;
    color: #d1d5db;
    line-height: 1.5;
    margin-bottom: 12px;
}

.pr-cta-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #c4b5fd;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pr-btn-cta {
    padding: 16px 36px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    color: white;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
    text-align: center;
    line-height: 1.3;
}

.pr-btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.6);
    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
}

.pr-cta-subtext {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.pr-divider {
    display: none;
}

/* 2x2 Grid for factors */
.pr-factors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 0;
}

@media (max-width: 768px) {
    .pr-factors-grid {
        grid-template-columns: 1fr;
    }
}

.pr-factor {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 14px;
    transition: all 0.2s ease;
}

.pr-factor:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.pr-factor.strong-match {
    background: rgba(74, 222, 128, 0.05);
}

.pr-factor.partial-match {
    background: rgba(251, 191, 36, 0.05);
}

.pr-factor.mismatch {
    background: rgba(248, 113, 113, 0.05);
}

.pr-factor-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    position: relative;
}

.pr-factor-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

/* Subtle info tooltip for factor explanations */
.pr-factor-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    cursor: help;
    opacity: 0.5;
    transition: opacity 0.2s ease, background 0.2s ease;
    position: relative;
}

.pr-factor-info:hover {
    opacity: 1;
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
}

/* Custom tooltip styling (replaces native title) */
.pr-factor-info::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 14px;
    background: rgba(20, 20, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    min-width: 200px;
    max-width: 320px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Tooltip arrow */
.pr-factor-info::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(20, 20, 30, 0.95);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 101;
}

.pr-factor-info:hover::after,
.pr-factor-info:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Hide native title tooltip */
.pr-factor-info[title] {
    position: relative;
}

.pr-match-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    display: inline-block;
}

.pr-factor.strong-match .pr-match-label {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
}

.pr-factor.partial-match .pr-match-label {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
}

.pr-factor.mismatch .pr-match-label {
    color: #f87171;
    background: rgba(248, 113, 113, 0.15);
}

.pr-factor-flowing {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 12px 0 0 0;
}

.user-choice-chip {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #e9d5ff;
    white-space: nowrap;
    margin: 0 4px;
}

.pr-no-data {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Locked Factors */
.pr-locked-factors {
    margin-top: 20px;
    margin-bottom: 50px; /* breathing room before FlixChoice logo CTA */
    padding: 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(168, 85, 247, 0.05));
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 12px;
    text-align: center;
    transition: all 0.4s ease;
    cursor: pointer;
    overflow: hidden;
}

.pr-locked-factors:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.25);
    border-color: rgba(168, 85, 247, 0.6);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(168, 85, 247, 0.08));
}

.pr-locked-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.pr-locked-headline {
    font-size: 1.05rem;
    font-weight: 600;
    color: #e9d5ff;
    transition: color 0.3s ease;
}

.pr-locked-factors:hover .pr-locked-headline {
    color: #faf5ff;
}

.pr-lock-icon {
    font-size: 1.3rem;
    transition: transform 0.4s ease;
}

.pr-locked-factors:hover .pr-lock-icon {
    transform: scale(1.15) rotate(-5deg);
}

.pr-locked-hover-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    min-height: 40px;
    margin-top: 15px;
}

.pr-locked-factor {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    font-size: 0.85rem;
    color: #d8b4fe;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.3s ease;
    animation: revealFactor 0.5s ease forwards;
}

.pr-locked-factors:hover .pr-locked-factor {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(168, 85, 247, 0.5);
}

@keyframes revealFactor {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    50% {
        transform: translateY(-3px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pr-locked-more {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.4);
    font-weight: 600;
}

.pr-locked-btn {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}

.pr-locked-btn:hover {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.5);
}

/* ========================================== */
/* == NEW INSIGHT SECTIONS (Card Style)    == */
/* ========================================== */

/* Shared section title - subtle + LEFT aligned (no underline) */
.rail-content .pr-section-title,
.pr-section-title {
    display: block !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    color: rgba(255, 255, 255, 0.62) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.9px !important;
    margin: 14px 0 10px 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    text-align: left !important;
    width: 100%;
}

/* ============ THE BOTTOM LINE ============ */
.pr-one-thing {
    /* Not a big box: keep air + typography */
    background: transparent;
    border: none;
    padding: 0 20px; /* align to factor card gutters */
    margin-top: 34px; /* separation from "Who It's For" */
}

/* FORCE SPACE between "Who It's For" and "The Bottom Line" (no more fighting the cascade) */
.rail-content .prediction-section.pr-perfect-for {
    margin-bottom: 44px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}
.rail-content .prediction-section.pr-one-thing {
    margin-top: 44px !important;
}

/* Remove the generic section divider line + extra padding for the finale */
.rail-content .prediction-section.pr-one-thing {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* If Bottom Line is the finale (last section), keep breathing room below it */
.rail-content .prediction-section.pr-one-thing:last-child {
    margin-bottom: 22px !important;
    padding-bottom: 22px !important;
}

/* Add bottom space so content isn't hidden behind sticky chat */
.rail-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
    /* Override the older `.rail-content` rule that added right padding + made it scrollable.
       With the chat bar + inner scroll wrapper, the OUTER container should be edge-to-edge and not scroll. */
    padding: 0 !important;
    overflow: hidden !important;
}

/* Scroll area (right pane only) */
.rail-content-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    box-sizing: border-box;
    padding-right: 12px; /* keep a little room for scrollbar like the legacy rail-content */
    /* Allow content to scroll "behind" the chat bar */
    padding-bottom: 90px;
    margin-bottom: -90px;
}

/* Chat bar (bare pill, always visible, scoped to the right pane only) */
.pr-chat {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    pointer-events: none;
}
.pr-chat::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(30, 26, 28, 0.10) 6%,
        rgba(30, 26, 28, 0.30) 12%,
        rgba(30, 26, 28, 0.55) 18%,
        rgba(30, 26, 28, 0.80) 24%,
        rgb(30, 26, 28) 30%,
        rgb(30, 26, 28) 100%
    );
    pointer-events: none;
}

.pr-chat-inner {
    position: relative;
    padding: 10px 16px 12px 16px; /* reduced padding */
}
.pr-chat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(30, 26, 28, 0.80);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    padding: 8px 8px 8px 16px; /* smaller, ChatGPT-like */
    pointer-events: auto;
}
.pr-chat-input {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.95rem; /* unified with expanded */
    outline: none;
}
.pr-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.pr-chat-send {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%; /* circular button */
    width: 32px;
    height: 32px;
    padding: 0;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.65), rgba(168, 85, 247, 0.95));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 120ms ease, opacity 120ms ease;
}
.pr-chat-send svg {
    width: 16px;
    height: 16px;
}
.pr-chat-send:hover {
    transform: scale(1.05);
    opacity: 0.95;
}
.pr-chat-send:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* ============ EXPANDED CHAT INTERFACE ============ */
.pr-chat-expanded {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Match the modal's radial gradient exactly for seamless transition */
    background-color: #1a1a1a;
    background-image: radial-gradient(ellipse at center, rgba(60, 35, 40, 0.9) 0%, rgba(30, 26, 28, 0.95) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
}
.pr-chat-expanded.hidden {
    display: none;
}

/* When chat is expanded, allow .rail-content to overflow so .pr-chat-expanded can extend into the gap */
.rail-layout.chat-expanded .rail-content {
    overflow: visible !important;
}

/* Extend expanded chat leftward to cover the 18px grid gap with seamless gradient */
.rail-layout.chat-expanded .pr-chat-expanded:not(.hidden) {
    left: -18px;
    width: calc(100% + 18px);
}

/* Add extra left padding to header to account for the -18px offset */
.rail-layout.chat-expanded .pr-chat-expanded:not(.hidden) .pr-chat-header {
    padding-left: 38px; /* 20px original + 18px offset compensation */
}

.pr-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    flex-shrink: 0;
}
.pr-chat-back {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: color 150ms ease, transform 150ms ease;
}
.pr-chat-back:hover {
    color: rgba(255, 255, 255, 0.9);
    transform: translateX(-2px);
}
.pr-chat-back:active {
    transform: translateX(0);
}
.pr-chat-back svg {
    width: 22px;
    height: 22px;
}
.pr-chat-header-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-left: auto;
    padding-right: 10px;
}

.pr-chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pr-chat-welcome {
    text-align: center;
    padding: 30px 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
    line-height: 1.5;
}
.pr-chat-welcome p {
    max-width: 400px;
    margin: 0 auto;
}

.pr-chat-message {
    display: flex;
    max-width: 85%;
}
.pr-chat-message-user {
    align-self: flex-end;
}
.pr-chat-message-ai {
    align-self: flex-start;
}
.pr-chat-message-content {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 0.875rem;
    line-height: 1.55;
    white-space: pre-wrap;
    text-align: left;
}
.pr-chat-message-user .pr-chat-message-content {
    background: rgba(139, 92, 246, 0.75);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.pr-chat-message-ai .pr-chat-message-content {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    border-bottom-left-radius: 4px;
}
.pr-chat-message-error .pr-chat-message-content {
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(220, 38, 38, 0.4);
}

/* Typing indicator */
.pr-chat-typing .pr-chat-message-content {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 20px;
}
.typing-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
.typing-dot:nth-child(3) { animation-delay: 0s; }

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.pr-chat-input-area {
    padding: 10px 16px 12px 16px; /* Match .pr-chat-inner for visual consistency */
    flex-shrink: 0;
}
.pr-chat-input-area .pr-chat-row {
    background: rgba(30, 26, 28, 0.80);
}
.pr-chat-input-expanded {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
}
.pr-chat-input-expanded::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.pr-chat-send-expanded {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.65), rgba(168, 85, 247, 0.95));
    cursor: pointer;
    transition: transform 120ms ease, opacity 120ms ease;
}
.pr-chat-send-expanded:hover {
    transform: scale(1.05);
    opacity: 0.95;
}
.pr-chat-send-expanded:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.pr-chat-send-expanded svg {
    width: 16px;
    height: 16px;
}

/* ============ CHAT SIGNUP PROMPT (Anonymous Users) ============ */
.pr-chat-signup-prompt {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Let children control their own alignment */
}

.pr-chat-signup-prompt .pr-chat-header {
    width: 100%;
    flex-shrink: 0; /* Keep header at top */
    align-self: flex-start;
}

.pr-chat-signup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content vertically in remaining space */
    text-align: center;
    padding: 40px 30px;
    max-width: 380px;
    margin: 0 auto; /* Center horizontally */
    flex: 1 1 auto; /* Take remaining space */
}

.pr-chat-signup-icon {
    color: rgba(139, 92, 246, 0.8);
    margin-bottom: 20px;
}
.pr-chat-signup-icon svg {
    width: 56px;
    height: 56px;
}

.pr-chat-signup-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 24px 0;
    letter-spacing: -0.01em;
}

.pr-chat-signup-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    text-align: left;
    width: 100%;
}
.pr-chat-signup-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pr-chat-signup-benefits li:last-child {
    border-bottom: none;
}
.pr-chat-signup-benefits .benefit-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.pr-chat-signup-btn {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(168, 85, 247, 1));
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 32px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}
.pr-chat-signup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.4);
}
.pr-chat-signup-btn:active {
    transform: translateY(0);
}

.pr-one-thing-text {
    /* Quote strip: smaller surface, not full panel */
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.10) 0%,
        rgba(255, 255, 255, 0.03) 55%,
        rgba(0, 0, 0, 0) 100%
    );
    border-left: 3px solid rgba(168, 85, 247, 0.65);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.65;
    font-style: italic;
    margin: 0;
    text-align: left;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* === Bottom Line Variants (dev compare) ===
   Enabled via: ?bottomLineVariants=1 */
.pr-bottomline-variant {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 20px !important; /* match factor card gutters */
    margin-top: 18px !important;
}

/* --- Option A: Hero Callout Card --- */
.pr-bottomline-hero {
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.14) 0%,
        rgba(255, 255, 255, 0.05) 42%,
        rgba(0, 0, 0, 0) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 18px 18px 16px 18px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
    position: relative;
    overflow: hidden;
}
.pr-bottomline-hero::before {
    content: "";
    position: absolute;
    inset: -40px -60px auto -60px;
    height: 140px;
    background: radial-gradient(closest-side, rgba(168, 85, 247, 0.22), rgba(168, 85, 247, 0));
    pointer-events: none;
}
.pr-bottomline-hero-title {
    margin: 0 0 10px 0;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 850;
    letter-spacing: 0.2px;
    color: var(--text-primary);
    position: relative;
}
.pr-bottomline-hero-title::after {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    margin: 10px auto 0 auto;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0), rgba(139, 92, 246, 0.85), rgba(168, 85, 247, 0.70), rgba(139, 92, 246, 0));
    opacity: 0.9;
}
.pr-bottomline-hero-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    font-weight: 520;
    color: rgba(255, 255, 255, 0.92);
    text-align: left;
    position: relative;
}

/* --- Option B: Inline Banner --- */
.pr-bottomline-banner {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
.pr-bottomline-banner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.85), rgba(168, 85, 247, 0.55));
    opacity: 0.9;
}
.pr-bottomline-banner-label {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    padding-left: 6px; /* space from gradient edge */
}
.pr-bottomline-banner-text {
    flex: 1 1 auto;
    font-size: 0.98rem;
    font-weight: 520;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    text-align: right;
}
@media (max-width: 520px) {
    .pr-bottomline-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .pr-bottomline-banner-text {
        text-align: left;
    }
}

/* --- Option C: Quote Treatment --- */
.pr-bottomline-quote {
    position: relative;
    border-radius: 14px;
    padding: 18px 18px 20px 18px;
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.10) 0%,
        rgba(255, 255, 255, 0.03) 55%,
        rgba(0, 0, 0, 0) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none !important; /* no shadow around the box */
    overflow: hidden;
    text-align: center;
}
.pr-bottomline-quote::before {
    content: "“";
    position: absolute;
    left: 12px;
    top: -54px;
    font-size: 172px; /* larger quote watermark */
    font-weight: 900;
    line-height: 1;
    color: rgba(168, 85, 247, 0.14);
    font-family: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    pointer-events: none;
}

/* Bottom Line: enforce title styling (works for both default + variants mode) */
.rail-content .pr-bottomline-quote-title,
.rail-content .pr-one-thing .pr-bottomline-quote-title {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0;
    font-size: 0.62rem; /* smaller title (flip emphasis to statement) */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.05px;
    color: rgba(255, 255, 255, 0.55) !important;
    text-align: center !important;
    border: none !important;           /* defensive: prevent accidental divider rules */
    border-bottom: none !important;    /* defensive: remove any underline/border */
    background: none !important;       /* defensive: remove any gradient underline tricks */
}

/* Bottom Line: enforce statement styling (works for both default + variants mode) */
.rail-content .pr-bottomline-quote-text,
.rail-content .pr-one-thing .pr-bottomline-quote-text {
    margin: 0;
    font-size: 1.34rem; /* bigger statement */
    font-weight: 600;
    line-height: 1.48;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    font-family: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif; /* distinct, premium */
}

/* ============ WHO SHOULD WATCH ============ */
.pr-perfect-for {
    /* No outer box: columns become the surfaces */
    background: transparent;
    border: none;
    border-radius: 0;
    /* Match `.pr-unified` inner gutters so this section doesn't look wider */
    padding: 0 20px;
    margin-top: 10px;
}

.pr-for-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 500px) {
    .pr-for-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.pr-for-section-title {
    /* Base definition (kept), but NOTE: global `.rail-content .pr-section-title` uses !important.
       The real override lives below with higher specificity. */
    position: relative;
}

/* Subtle purple accent mark under the header (not a divider line) */
.pr-perfect-for .pr-for-section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 54px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.0), rgba(139, 92, 246, 0.75), rgba(168, 85, 247, 0.65), rgba(139, 92, 246, 0.0));
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.18);
    opacity: 0.9;
}

/* === CRITICAL OVERRIDE: make "Who It’s For" a true centered header ===
   This must beat `.rail-content .pr-section-title` which has `!important` rules. */
.rail-content .pr-perfect-for .pr-for-section-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;

    /* Override the global all-caps label treatment */
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;

    margin-top: 34px !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    border: none !important;
}

.pr-for-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Remove background boxes from Perfect/Skip columns */
.pr-for-column-clean {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.pr-for-label-wrap {
    display: flex;
    justify-content: center;
}

.pr-for-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    padding: 3px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pr-for-label-lg {
    font-size: 0.78rem;
    padding: 8px 16px;
}

.pr-for-yes .pr-for-label {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.18);
}

.pr-for-no .pr-for-label {
    color: #f87171;
    background: rgba(248, 113, 113, 0.18);
}

/* Reason chips (no border, simple + subtle) */
.pr-for-chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center; /* center the reason chips */
}

.pr-for-reason-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: none;
}

.pr-for-reason-chip-good {
    background: rgba(74, 222, 128, 0.10);
}

.pr-for-reason-chip-bad {
    background: rgba(248, 113, 113, 0.10);
}

/* ============ BEFORE YOU WATCH ============ */
.pr-before-watching {
    /* No big box: each tip is a row-card */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 10px;
}

.pr-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pr-tips-list li {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    padding: 12px 14px 12px 36px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    position: relative;
    text-align: left; /* IMPORTANT: no centered bullets */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.pr-tips-list li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(168, 85, 247, 0.6));
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}

/* ============ TONIGHT? ============ */
.pr-tonight {
    /* Compact callout: no big box */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 10px;
}

.pr-tonight-text {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 999px;
    padding: 12px 14px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

/* ============ CRITICS & AUDIENCES ============ */
.pr-reception-section {
    /* Keep aligned with card content width */
    padding: 0 20px;
    margin-top: 0;
}

/* This section is a sibling of the main `.pr-unified` block.
   Prevent the generic `.prediction-section` dark panel background from wrapping it. */
.prediction-section.pr-reception-section {
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Rating chips divider row */
.pr-rating-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    /* Spacing control: parent provides top padding; chip row provides bottom gap only */
    margin: 0 0 22px 0;
    position: relative;
}

.pr-rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
    min-height: 34px;
}

.pr-rating-chip-label {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.2px;
    font-size: 0.88rem;
}

.pr-rating-chip-value {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.92rem;
}

/* Brand-tinted chip backgrounds (names only, no logos) */
.pr-rating-chip.rt {
    background: rgba(225, 58, 62, 0.14);
    border-color: rgba(225, 58, 62, 0.22);
}

.pr-rating-chip.rta {
    background: rgba(255, 159, 28, 0.14);
    border-color: rgba(255, 159, 28, 0.22);
}

.pr-rating-chip.imdb {
    background: rgba(245, 197, 24, 0.16);
    border-color: rgba(245, 197, 24, 0.24);
}

.pr-rating-chip.mc {
    background: rgba(0, 212, 107, 0.12);
    border-color: rgba(0, 212, 107, 0.20);
}

.pr-rating-chip.tmdb {
    background: rgba(1, 180, 228, 0.14);
    border-color: rgba(1, 180, 228, 0.22);
}

.pr-reception {
    /* Spacing controlled by chip row when present */
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Chip row already provides symmetric spacing; don't add extra margin above reception cards */
.pr-rating-chip-row + .pr-reception {
    margin-top: 0;
}

/* === Make chip spacing truly symmetric vs the content above ===
   Avoid margin-collapsing with the previous section by using padding on this section. */
.prediction-section.pr-reception-section {
    padding-top: 22px;
    /* Remove the divider line above Who It's For (comes from generic .prediction-section styling) */
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* The main comparison section has historically had extra bottom padding/margin.
   When reception immediately follows, remove that extra gap so chips can sit centered. */
.rail-content .prediction-section.pr-unified.pr-comparison {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

@media (max-width: 600px) {
    .pr-reception {
        grid-template-columns: 1fr;
    }
}

.pr-reception-block {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 16px 16px 18px 16px;
    position: relative;
    overflow: hidden;
    box-shadow: none; /* remove shadow around critics/audience boxes */
}

/* Subtle accent wash per card (adds depth without looking like a chip) */
.pr-reception-block::before {
    content: "";
    position: absolute;
    inset: -60px -60px auto -60px;
    height: 180px;
    background: radial-gradient(circle at 40% 40%, rgba(168, 85, 247, 0.22), rgba(0,0,0,0) 70%);
    pointer-events: none;
    opacity: 0.9;
}

.pr-reception-block.pr-reception-critics::before {
    background: radial-gradient(circle at 40% 40%, rgba(225, 58, 62, 0.18), rgba(0,0,0,0) 70%);
}

.pr-reception-block.pr-reception-audience::before {
    background: radial-gradient(circle at 40% 40%, rgba(255, 159, 28, 0.18), rgba(0,0,0,0) 70%);
}

.pr-reception-header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.pr-reception-icon {
    width: 39px;
    height: 39px;
    opacity: 0.92;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
}

.pr-reception-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.pr-reception-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    text-align: left;
    position: relative;
    z-index: 1;
}

/* Clean sections - remove default prediction-section borders */
.pr-one-thing,
.pr-before-watching,
.pr-perfect-for,
.pr-tonight,
.pr-reception {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* === D. DECISION HELPERS === */
.rail-content .pr-decision-helpers {
    padding-top: 4px;
}

.pr-helper {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.pr-helper:last-child {
    margin-bottom: 0;
}

.pr-might-like {
    border-left: 3px solid #4ade80;
}

.pr-might-not-like {
    border-left: 3px solid #fbbf24;
}

.pr-helper-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.pr-helper-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pr-helper-list li {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    padding-left: 20px;
    position: relative;
}

.pr-helper-list li::before {
    content: '•';
    position: absolute;
    left: 5px;
    color: var(--accent-color);
    font-weight: bold;
}

/* === E. UPGRADE VALUE PROP === */
.rail-content .pr-upgrade {
    background: linear-gradient(135deg, rgba(160, 111, 255, 0.08) 0%, rgba(233, 30, 99, 0.08) 100%);
    border: 1px solid rgba(160, 111, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0 0 0;
}

.pr-upgrade-header {
    margin-bottom: 20px;
}

.pr-upgrade-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 8px 0 0 0;
}

.pr-upgrade-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pr-upgrade-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pr-benefit-icon {
    font-size: 1.2rem;
    color: #4ade80;
    flex-shrink: 0;
    margin-top: 2px;
}

.pr-benefit-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pr-benefit-content strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.pr-benefit-detail {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.pr-upgrade-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* === F. BUTTONS === */
.pr-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    flex: 1;
    min-width: 140px;
}

.pr-btn-primary {
    background: linear-gradient(135deg, var(--accent-color) 0%, #a381d8 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(160, 111, 255, 0.3);
}

.pr-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(160, 111, 255, 0.4);
}

.pr-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.pr-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

/* === G. RESPONSIVE === */
@media (max-width: 768px) {
    .pr-value-headline {
        font-size: 1.5rem !important;
        margin: 0 0 6px 0;
    }
    
    .pr-value-subheadline {
        font-size: 0.95rem;
        padding: 0 20px;
        margin: 0 0 10px 0;
    }
    
    .pr-benefit-item {
        padding: 10px 14px;
    }
    
    .pr-benefit-icon {
        font-size: 1.4rem;
    }
    
    .pr-benefit-title {
        font-size: 0.95rem;
    }
    
    .pr-primary-cta {
        width: 100%;
        padding: 14px 28px;
        font-size: 1.05rem;
    }
    
    .pr-brand-logo-img {
        width: 160px;
    }
    
    .pr-logo-container {
        margin-bottom: 6px;
    }
    
    .pr-benefits-grid {
        margin: 0 0 24px 0;
    }
    
    .pr-trust-text {
        font-size: 0.8rem !important;
        margin: 18px 0 0 0;
    }
    
    .pr-popcorn-img {
        width: 95px;
        height: 95px;
    }
    
    .pr-match-score-label {
        font-size: 0.7rem;
        letter-spacing: 1.2px;
    }
    
    .pr-score-number {
        font-size: 3rem;
    }
    
    .pr-verdict-title {
        font-size: 1.5rem;
    }
    
    .pr-verdict-subtitle {
        font-size: 0.9rem;
        padding: 7px 14px;
    }
    
    .pr-section-title {
        font-size: 1.1rem;
    }
    
    .pr-upgrade-cta {
        flex-direction: column;
    }
    
    .pr-btn {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 500px) {
    .pr-hero {
        padding: 4px 15px 16px;
    }
    
    .pr-section {
        padding: 20px 15px;
    }
    
    .pr-popcorn-img {
        width: 85px;
        height: 85px;
    }
    
    .pr-match-score-label {
        font-size: 0.68rem;
        letter-spacing: 1px;
    }
    
    .pr-score-number {
        font-size: 2.5rem;
    }
    
    .pr-verdict-subtitle {
        font-size: 0.85rem;
        padding: 6px 12px;
        max-width: 95%;
    }
    
    .pr-btn-hero {
        width: 100%;
        min-width: unset;
        font-size: 1rem;
        padding: 14px 28px;
    }
    
    .rail-content .onboarding-cta-text {
        font-size: 1.05rem;
    }
    
    .rail-content .cta-section {
        padding: 20px 16px;
    }
    
    .pr-upgrade {
        margin: 15px 10px;
    }
    
    .pr-unified {
        padding: 20px 16px;
    }
    
    .pr-summary-text {
        font-size: 1.5rem !important;
    }
    
    .pr-btn-cta {
        width: 100%;
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    .pr-cta-label {
        font-size: 0.8rem;
    }
    
    .pr-cta-subtext {
        font-size: 0.75rem;
    }
}

/* ================================================== */
/* === END PREDICTION RESULTS V2 === */
/* ================================================== */

/* ================================================== */
/* === TRAILER MODAL (CARD CTA) === */
/* ================================================== */

body.trailer-modal-open {
    overflow: hidden;
}

.trailer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    z-index: 9998;
}

.trailer-modal {
    position: fixed;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
    width: min(920px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    z-index: 9999;
    overflow: hidden;
}

.trailer-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: none; /* remove divider line */
}

.trailer-modal-title {
    font-family: var(--font-primary, system-ui);
    font-weight: 700;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trailer-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.trailer-modal-close:hover {
    background: rgba(255, 255, 255, 0.10);
}

.trailer-modal-body {
    padding: 12px;
}

.trailer-video-shell {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.trailer-iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.trailer-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    letter-spacing: 0.2px;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

.trailer-helper-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 2px 0;
}

.trailer-helper-text {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
}

.trailer-open-youtube {
    font-size: 0.86rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06); /* subtle glass */
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.trailer-open-youtube:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
    text-decoration: none;
}

.trailer-open-youtube.is-disabled {
    pointer-events: none;
    opacity: 0.55;
}

.trailer-open-youtube svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
    color: rgba(255, 70, 70, 0.95); /* keep a hint of YouTube */
}

.cta-link.trailer-link.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ------------------------------------------------------------ */
/* GOM-only: Scale5 like MPM (vertical) but smaller              */
/* ------------------------------------------------------------ */
#onboarding-modal #single-question-container .scale5-container:not(.subscale5-container) {
    display: flex;
    flex-direction: column; /* vertical like MPM */
    align-items: stretch;
    justify-content: center;
    gap: 8px;               /* tighter to avoid scroll */
    width: 100%;
    max-width: 520px;       /* slightly narrower */
    margin: 6px auto 6px;   /* reduce vertical space to avoid scroll */
    padding: 0;
}

#onboarding-modal #single-question-container .scale5-container:not(.subscale5-container) .scale5-label {
    width: 100%;
    height: auto;
    min-height: 50px;       /* smaller than MPM */
    padding: 10px 12px;     /* smaller than MPM */
    font-size: 0.96em;      /* slightly smaller */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    /* Match MPM option styling (no visible border) */
    border: 1px solid transparent;
    box-shadow: none;
    transition: all 0.2s ease;
}

#onboarding-modal #single-question-container .scale5-container:not(.subscale5-container) .scale5-label:hover {
    background-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

/* Selected: match MPM (solid accent, no gradient/scale) */
#onboarding-modal #single-question-container .scale5-container:not(.subscale5-container) .scale5-label:has(input:checked) {
    background-image: none;
    background-color: var(--accent-color);
    color: rgba(255, 255, 255, 0.98);
    box-shadow: none;
    transform: none;
}

#onboarding-modal #single-question-container .scale5-container:not(.subscale5-container) .scale5-label span {
    font-size: 1.08em;
    margin-top: 0;
    font-weight: 500;
}

#onboarding-modal #single-question-container .scale5-container:not(.subscale5-container) .scale5-label br {
    display: none;
}

/* ------------------------------------------------------------ */
/* GOM-only: MultiScale5 (Q5) match MPM layout                    */
/* Keep ALL 3 sub-questions visible, each with a horizontal row.  */
/* ------------------------------------------------------------ */
#onboarding-modal #single-question-container .multiscale5-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px; /* similar density to MPM */
}

#onboarding-modal #single-question-container .multiscale5-subquestion {
    border-left: none;
    padding-left: 0;
}

#onboarding-modal #single-question-container label.multiscale5-sublabel {
    display: block;
    font-size: 1.2em;
    margin-bottom: 12px;
    text-align: center;
    width: 100%;
}

#onboarding-modal #single-question-container .multiscale5-subquestion .scale5-container.subscale5-container {
    display: flex;
    flex-direction: row !important; /* horizontal like MPM */
    gap: 10px;
    max-width: 100% !important;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

#onboarding-modal #single-question-container .multiscale5-subquestion .scale5-label {
    /* Match MPM scale option styling */
    width: auto !important;
    flex: 1;
    height: auto;
    min-height: 55px;
    font-size: 0.9em;
    padding: 10px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

#onboarding-modal #single-question-container .multiscale5-subquestion .scale5-label:hover {
    background-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

#onboarding-modal #single-question-container .multiscale5-subquestion .scale5-label:has(input:checked) {
    background-color: var(--accent-color);
    color: white;
    box-shadow: none;
    transform: none;
}

#onboarding-modal #single-question-container .multiscale5-subquestion .scale5-label br { display: none; }

/* GOM-only: align onboarding IAQ hover with MPM inline arrows */
#onboarding-modal #onboarding-navigation .nav-arrow-button {
    /* Match the global .nav-arrow-button base styling used by MPM */
    background-color: rgba(45, 45, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: background-color 0.2s, border-color 0.2s, transform 0.1s ease;
}

#onboarding-modal #onboarding-navigation .nav-arrow-button:hover {
    background-color: rgba(60, 60, 60, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
    /* Match MPM: no movement, subtle hover glow */
    transform: none !important;
    filter: none; /* avoid any perceived "grow" */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3), 0 0 10px rgba(163, 129, 216, 0.5);
}

#onboarding-modal #onboarding-navigation .nav-arrow-button:active {
    transform: none !important; /* prevent shrink/grow on press */
}

/* ------------------------------------------------------------ */
/* GOM-only: Choice (radio) options match MPM (no gray fill)     */
/* Used by Q3-style questions. Scoped to onboarding modal only.  */
/* ------------------------------------------------------------ */
#onboarding-modal #single-question-container .input-area .radio-label,
#onboarding-modal #single-question-container .input-area .checkbox-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 18px 30px !important;
    font-size: 1.1em !important;
    margin: 0 0 8px 0 !important;

    width: auto !important;
    min-width: 300px !important;
    max-width: 90% !important;

    border-radius: 30px;
    border: 1px solid var(--input-border);
    /* Match MPM: very subtle glass, not opaque gray */
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease-out;
    box-shadow: none;
    text-align: center !important;
}

#onboarding-modal #single-question-container .radio-label:hover,
#onboarding-modal #single-question-container .checkbox-label:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: var(--hover-highlight);
    color: var(--text-primary);
    transform: translateY(-2px);
}

#onboarding-modal #single-question-container .radio-label:has(input:checked),
#onboarding-modal #single-question-container .checkbox-label:has(input:checked) {
    border-color: transparent;
    color: white;
    font-weight: bold;
    background-image: linear-gradient(to right, #e91e63, var(--accent-color));
    box-shadow: none;
    transform: none;
}

/* ============================================================ */
/* GOM-only: MPM-style results layout inside onboarding modal    */
/* Option A: left movie pane + rail + right analysis             */
/* ============================================================ */
#onboarding-modal.onboarding-results-mode #onboarding-content-wrapper {
    /* Remove onboarding wrapper padding so results fill like MPM */
    padding: 0;
}

#onboarding-modal.onboarding-results-mode #onboarding-prediction-area {
    padding-top: 0;
    padding-bottom: 0;
}

#onboarding-modal.onboarding-results-mode #onboarding-prediction-result {
    height: 100%;
    width: 100%;
    flex: 1;
}

#onboarding-modal.onboarding-results-mode .prediction-layout-container.onboarding-results-layout {
    height: 100%;
}

/* Mirror MPM pane sizing/padding without reusing MPM IDs */
#onboarding-prediction-left-pane {
    flex: 0 0 35%;
    max-width: 420px;
    padding: 24px 22px 24px 28px;
    background-color: rgba(0,0,0, 0.2);
    box-sizing: border-box;
    overflow-y: auto;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

#onboarding-prediction-right-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    border-radius: 0;
    height: 100%;
    overflow: hidden;
}

#onboarding-prediction-right-pane.onboarding-results-active {
    padding-left: 0 !important;
    padding-top: 0 !important;
}

#onboarding-media-details-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    text-align: left;
    color: var(--text-secondary);
    flex: 1;
    min-height: 0;
}

/* Style the embedded results display area like MPM's */
#onboarding-prediction-right-pane #onboarding-prediction-display-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    box-sizing: border-box;
}

#onboarding-prediction-right-pane #onboarding-prediction-display-area.rail-layout-active {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}

/* Bottom fade for scroll hint (same as MPM, scoped to onboarding display area) */
#onboarding-prediction-display-area.rail-layout-active .rail-content.fade-bottom-active,
#onboarding-prediction-display-area.rail-layout-active .rail-content-scroll.fade-bottom-active {
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) calc(100% - 70px),
        rgba(0,0,0,0.75) calc(100% - 42px),
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) calc(100% - 70px),
        rgba(0,0,0,0.75) calc(100% - 42px),
        rgba(0,0,0,0) 100%
    );
}

/* =============================================================================
   POST-SIGNUP ONBOARDING FLOW STYLES
   ============================================================================= */

/* PSO Modal Size - Match MPM (two-pane) dimensions */
#onboarding-modal.post-signup-mode {
    max-width: 1200px;
    width: 85%;
    height: 80vh;
    max-height: 750px;
    min-height: auto;
    overflow: hidden;
    /* Solid dark purple background - posters animate inside */
    background: #100d16;
}

/* Hide close button in PSO mode - onboarding is mandatory */
#onboarding-modal.post-signup-mode .close-modal-btn {
    display: none !important;
}

/* Darker overlay for PSO mode */
#modal-overlay.pso-overlay {
    background: rgba(0, 0, 0, 0.85);
}

/* Animated poster background */
.pso-poster-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 8px;
    overflow: hidden;
    z-index: 0;
    border-radius: 10px;
}

.pso-poster-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #100d16;
    z-index: -1;
}

.pso-poster-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at center, rgba(16, 13, 22, 0.5) 0%, rgba(16, 13, 22, 0.98) 65%),
        linear-gradient(180deg, rgba(16, 13, 22, 0.9) 0%, transparent 15%, transparent 85%, rgba(16, 13, 22, 0.9) 100%);
    z-index: 1;
    pointer-events: none;
}

.pso-poster-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.pso-poster-column img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0.4;
}

.pso-poster-column-up {
    animation: scrollUp 60s linear infinite;
}

.pso-poster-column-down {
    animation: scrollDown 60s linear infinite;
}

@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes scrollDown {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

#post-signup-onboarding-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Let margin:auto on children handle centering */
    padding: 30px 40px;
    height: 100%;
    text-align: center;
    overflow-y: auto;
    box-sizing: border-box;
}

.post-signup-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin: auto; /* Center vertically with auto margin */
    animation: fadeInUp 0.4s ease-out;
    position: relative;
    z-index: 2;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Screen 1: Welcome */
.welcome-screen .welcome-logo {
    width: 310px;
    height: auto;
    margin-bottom: 35px;
}

/* Welcome title - same styling as old headline */
.welcome-screen .welcome-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    line-height: 1.3;
}

.welcome-screen .welcome-subtitle {
    font-family: var(--font-display); /* Lato */
    font-size: 1.15rem;
    font-weight: 300; /* Light weight to match GOM */
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 540px;
    letter-spacing: 0.3px;
}

/* PSO Progress Bar - thin bar at top of modal */
.pso-progress-bar-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    z-index: 3;
}

.pso-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-color-light) 100%);
    transition: width 0.4s ease;
    border-radius: 0 2px 2px 0;
}

.welcome-value-props {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 35px;
    width: 100%;
    max-width: 420px;
}

.value-prop-item {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.value-prop-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.value-prop-icon {
    font-size: 1.4rem;
}

/* Screen 2: Favorites */
.favorites-screen {
    max-width: 1000px;
    width: 100%;
}

.favorites-screen .screen-header {
    margin-bottom: 20px;
    text-align: center;
}

.favorites-screen .screen-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.favorites-screen .screen-subcount {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

.favorites-screen .screen-subcount #favorites-count {
    color: var(--accent-color-light);
    font-weight: 700;
}

.favorites-screen .screen-subcount .helper-text {
    color: var(--text-muted);
}

.screen-header {
    margin-bottom: 25px;
}

.screen-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.screen-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.favorites-search-container {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
    position: relative;
}

.favorites-search-input {
    width: 100%;
    padding: 14px 18px;
    font-size: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.favorites-search-input:focus {
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.12);
}

.favorites-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(38, 32, 35, 0.98);
    border-radius: 12px;
    margin-top: 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.fav-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.fav-search-result:hover {
    background: rgba(255, 255, 255, 0.08);
}

.fav-search-result img {
    width: 40px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.fav-search-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.fav-search-title {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.fav-search-year {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.favorites-selected-container {
    width: 100%;
    margin-bottom: 20px;
}

.selected-count {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.selected-movies-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    min-height: 50px;
}

.selected-movie-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 20px;
    padding: 4px 10px 4px 4px;
}

.selected-movie-chip img {
    width: 28px;
    height: 42px;
    object-fit: cover;
    border-radius: 4px;
}

.chip-title {
    font-size: 0.85rem;
    color: var(--text-primary);
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 4px;
    transition: color 0.15s;
}

.chip-remove:hover {
    color: var(--error-color);
}

.favorites-suggestions {
    width: 100%;
}

.suggestions-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.favorites-movie-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
    padding: 10px 5px;
}

.fav-movie-item {
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}

.fav-movie-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.fav-movie-item.selected {
    outline: 2px solid var(--accent-color-light);
    box-shadow: 0 0 12px rgba(163, 129, 216, 0.5);
}

.fav-movie-item img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
}

.fav-movie-number {
    position: absolute;
    top: 6px;
    left: 6px;
    background: linear-gradient(145deg, var(--accent-color) 0%, var(--accent-color-light) 100%);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(163, 129, 216, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Screen Navigation */
.screen-nav {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    padding-bottom: 40px; /* Prevent buttons from being cut off */
    width: 100%;
    justify-content: center;
    align-items: center;
}

.screen-nav .subtle-button,
.screen-nav .cta-button {
    min-width: 140px; /* Same width for both buttons */
    padding: 14px 28px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.screen-nav .subtle-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--text-secondary);
}

.screen-nav .subtle-button:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--text-primary);
}

.screen-nav .cta-button {
    background: var(--accent-color);
    border: none;
    color: white;
    font-weight: 600;
}

/* PSO screen buttons use accent color */
.favorites-screen .screen-nav .cta-button,
.question-screen .screen-nav .cta-button {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color-light) 100%);
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(163, 129, 216, 0.35);
}

.favorites-screen .screen-nav .cta-button:hover:not(:disabled),
.question-screen .screen-nav .cta-button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-color-light) 0%, var(--accent-color) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(163, 129, 216, 0.45);
}

.favorites-screen .screen-nav .cta-button:disabled,
.question-screen .screen-nav .cta-button:disabled {
    background: rgba(100, 85, 130, 0.5) !important; /* Brighter purple tint */
    color: rgba(255, 255, 255, 0.65) !important; /* More visible text */
    box-shadow: none;
    cursor: not-allowed;
    border: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 1 !important; /* Override any opacity rules */
}

.screen-nav .cta-button:hover:not(:disabled) {
    background: var(--accent-color-light);
    transform: translateY(-2px);
}

.screen-nav .cta-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Screen 3 & 4: Questions - base styles kept, main definition below */

.screen-progress {
    margin-bottom: 30px;
}

.progress-dots {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.progress-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.2s, transform 0.2s;
}

.progress-dots .dot.completed {
    background: var(--accent-color);
}

.progress-dots .dot.active {
    background: var(--accent-color);
    transform: scale(1.3);
}

.question-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 30px;
    line-height: 1.4;
}

/* PSO Question Screens - SINGLE DEFINITION */
.post-signup-screen.question-screen {
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Prevent children from expanding beyond */
}

.pso-question {
    text-align: center;
    margin-bottom: 15px;
    width: 100%;
    max-width: 656px; /* Another 25% larger (was 525px) */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.pso-question .single-question-label {
    display: block;
    font-size: 1.8rem; /* Match favorites screen title */
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.4;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* Gradient emphasis for key words in questions */
.pso-emphasis {
    background: linear-gradient(135deg, #c9a0ff 0%, #ff9ec4 50%, #ffb347 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.pso-question .input-area {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%; /* Constrain to parent */
    box-sizing: border-box;
}

/* PSO Scale5 - Vertical card layout */
.pso-scale5.scale5-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: 100% !important; /* Respect parent width */
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.pso-scale5.scale5-container .scale5-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 78px !important; /* Another 25% larger (was 62px) */
    padding: 19px 38px !important; /* Another 25% larger (was 15px 30px) */
    background: rgba(16, 13, 22, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Very subtle border */
    border-radius: 14px !important;
    box-sizing: border-box !important;
    cursor: pointer;
    transition: all 0.2s ease;
    transform: none !important;
    box-shadow: none !important;
}

.pso-scale5.scale5-container .scale5-label:hover {
    background: rgba(30, 24, 40, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

.pso-scale5.scale5-container .scale5-label span {
    font-size: 1.2rem !important; /* 20% larger (was 1rem) */
    color: var(--text-primary) !important;
    line-height: 1.3;
    white-space: nowrap !important;
}

.pso-scale5.scale5-container .scale5-label input[type="radio"] {
    appearance: none;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pso-scale5.scale5-container .scale5-label:has(input:checked),
.pso-scale5.scale5-container .scale5-label.selected {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color-light) 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 15px rgba(163, 129, 216, 0.4) !important;
    transform: none !important;
}

.pso-scale5.scale5-container .scale5-label:has(input:checked) span,
.pso-scale5.scale5-container .scale5-label.selected span {
    color: white !important;
    font-weight: 600 !important;
}

/* [CLEANED UP: Removed duplicate/conflicting PSO styles] */

.post-signup-scale5 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.scale5-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.scale5-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.scale5-option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-color);
}

.scale5-option input[type="radio"]:checked + .scale5-label {
    color: var(--text-primary);
}

.scale5-label {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Screen 5: Progress */
.progress-screen {
    max-width: 550px;
    z-index: 2;
    position: relative;
}

.progress-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
}

.progress-subtitle {
    font-family: var(--font-display); /* Lato - matches welcome subtitle */
    font-size: 1.2rem; /* Slightly larger for better readability */
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 560px;
    font-weight: 300;
    letter-spacing: 0.3px;
}

.profile-completion-display {
    margin-bottom: 30px;
}

.completion-ring {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: conic-gradient(
        #c9a0ff 0%,
        #ff9ec4 calc(var(--percent) * 0.5%),
        #a381d8 calc(var(--percent) * 1%),
        rgba(255, 255, 255, 0.08) calc(var(--percent) * 1%)
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    position: relative;
    box-shadow: 0 0 35px rgba(163, 129, 216, 0.35);
}

.completion-ring::before {
    content: '';
    position: absolute;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: rgb(22, 18, 26);
}

.completion-ring-label {
    position: relative;
    z-index: 1;
    font-family: 'Nunito', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.3;
    text-align: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(201, 160, 255, 0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}

.completion-number {
    position: relative;
    z-index: 1;
    font-size: 2.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff 0%, #c9a0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.progress-education {
    margin-bottom: 35px;
}

.education-text {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 10px;
}

.education-subtext {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* Large CTA Button */
.large-cta {
    padding: 16px 40px !important;
    font-size: 1.1rem !important;
}