/* style.css v2.61.0 - an empty photo session shows the saved wish, the 5 / 8 / 10 / 15 s length buttons with their credits, and Create video (.generation-unstarted-wish, .generation-unstarted-error) */
/* style.css v2.60.0 - Create box short of credits: the outlined "Make it 5 seconds · 10 credits" button beside the plans button (.dumpbox-fit-length) */
/* style.css v2.59.0 - friendlier messages: the calm gold note under Add media (.dumpbox-media-note) for a turned-down photo or clip, its big Choose another button, and calm status lines */
/* style.css v2.58.0 - signed-out side menu: a short line and the free first video button (the open phone menu was an empty column); the session limit window wraps its three buttons */
/* style.css v2.55.4 - phones up to 480 px wide: no strip of the form scrolls under the Continue window's sticky Continue/Cancel bar (2.55.1 only reached wider phones) */
/* style.css v2.55.3 - the interview / planning window's x is a 44px tap target (it was 19x34) */
/* style.css v2.55.2 - welcome rules window on small phones: the title clears the x, and the window scrolls as one so every rule shows (the rules box had shrunk to a few lines) */
/* style.css v2.55.1 - phones: the sticky Continue/Cancel bar of the Continue window is opaque and reaches the edges (the form showed through it, and a strip scrolled under it) */
/* style.css v2.55.0 - picture to video: a gold "Make video" button under each finished picture, the line under the pictures saying what a video costs (with the plans button when short), the note under picture Create ("Your first picture set is free." / "After this you'll have 2 credits. A video needs 9."), "Free" on the picture Create button; on Create video, "This video needs 9 credits. You have 3." with the plans button over the button */
/* style.css v2.54.53 - sidebar: the credit review row has a small gold "2× until Nov 13" tag while credit reviews are doubled; the credit review window's line about it is gold */
/* style.css v2.54.52 - wish question window: one quick question with big full-width answers to tap and "Just make it" (ask mode only) */
/* style.css v2.54.51 - "Creating your images" dots reach three (they stopped at two) and hold still for reduced motion; the "Choose Explicit or No nudity first." line under the picture Content choice */
/* style.css v2.54.50 - video length: four big buttons (5 / 8 / 10 / 15 seconds, credits on a second line) over Create; the picked one is filled gold with a check mark, a suggested one has a dashed edge and a "Suggested" tag */
/* style.css v2.54.49 - video content type: two big buttons with a plain second line; the picked one is filled gold with a check mark (easy to see for older eyes) */
/* style.css v2.54.48 - welcome pop-up: the 18+ line and links stay in view in the footer on small phones; smaller icon on phones */
/* style.css v2.54.47 - first-session welcome pop-up: gold accent icon instead of the red warning circle */
/* style.css v2.54.46 - Library: a card waiting for its picture shows its plain background (pictures load near the screen, a few at a time) */
/* style.css v2.54.45 - sidebar menus: Delete waiting for a video or pictures is greyed out with the reason on a second line */
/* style.css v2.54.44 - sidebar: "Include archived" keeps the same space below it as every section (rows scrolling under it no longer touch it) */
/* style.css v2.54.43 - Create: Back or Cancel before anything is charged shows a calm grey line, not a red error */
/* style.css v2.54.42 - Create images: "Not now" on the paused note leaves a calm "Not started. No credits were used." line */
/* style.css v2.54.41 - phones and touch screens: text fields, lists and boxes use 16px text so iPhone Safari does not zoom in on tap */
/* style.css v2.54.40 - phones: a solid bar behind the menu button (content no longer slides under it), the 18+ badge starts below it; Back to home is a 44px tap */
/* style.css v2.54.39 - image batch on phones: buttons fit the card, the number sits small in the corner, cards get wider; viewer buttons are solid */
/* style.css v2.54.38 - Create: a hint above a greyed-out button names the missing step; Add media opens under its button; Explicit and SFW fill their row */
/* style.css v2.54.37 - moment picker classes have neutral names (guided-moment, session-moment)
/* style.css v2.54.36 - Describe: every image features a woman; a men-only description gets a calm note */
/* style.css v2.54.35 - Continue window folds its options; Play video sits on the player before it loads */
/* style.css v2.54.34 - errors in the Continue window sit next to its button; the come-back line over the Create box */
/* style.css v2.54.33 - calm Reconnecting note while the site restarts */
/* style.css v2.54.32 - out of credits: the first plan and its price sit under the note */
/* style.css v2.54.31 - Library empty-state lines span the whole grid */
/* style.css v2.54.30 - Media card names end with an ellipsis on phones instead of being cut mid-word */
:root {
    /* ==========================================================================
       COLOR PALETTE - Linear/Vercel-inspired dark theme with depth
       Structural tokens (spacing, type, radius, motion, z-index) live in tokens.css.
       Theme overrides: static/css/themes/*.css on [data-theme].
       ========================================================================== */
    
    /* Backgrounds - refined dark with subtle depth */
    --bg-primary: #0a0a0b;
    --bg-secondary: #111113;
    --bg-tertiary: #1a1a1d;
    --bg-card: #141416;
    --bg-elevated: #18181b;
    --bg-hover: #1f1f23;
    --bg-active: #27272a;
    
    /* Legacy aliases — editorial gold accent */
    --accent: #3f3f46;
    --accent-blue: #c8a45c;
    --accent-blue-hover: #d9b97a;
    --accent-blue-light: #e8cc94;
    
    /* Text - warm editorial hierarchy */
    --text-primary: #f4f2ee;
    --text-secondary: #a6a29a;
    --text-muted: #92929b;
    --text-disabled: #52525b;
    
    /* Borders - subtle and elegant */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-focus: rgba(200, 164, 92, 0.5);
    --sidebar-divider: rgba(255, 255, 255, 0.06);
    
    /* Status Colors - vibrant but balanced */
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.15);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.15);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.15);
    
    /* Accent — Premium Editorial gold (Fable design system) */
    --accent-color: #c8a45c;
    --accent-primary: #c8a45c;
    --accent-hover: #d9b97a;
    --accent-active: #b8924a;
    --accent-subtle: rgba(200, 164, 92, 0.14);
    --accent-glow: rgba(200, 164, 92, 0.22);
    --on-accent: #16130c;
    --on-accent-blue: var(--on-accent);
    --on-accent-blue-hover: var(--on-accent);
    --auth-cta: #c8a45c;
    
    /* Primary CTA */
    --cta-bg: #c8a45c;
    --cta-bg-hover: #d9b97a;
    --cta-bg-active: #b8924a;

    /* Glow + surface (theme-tuned; elevation shadows in tokens.css) */
    --glow-primary: 0 0 20px rgba(200, 164, 92, 0.28);
    --surface-raised: linear-gradient(165deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    --surface-border: rgba(255, 255, 255, 0.08);
    --surface-border-accent: rgba(200, 164, 92, 0.14);
    --glow-success: 0 0 20px rgba(34, 197, 94, 0.25);
    --glow-error: 0 0 20px rgba(239, 68, 68, 0.25);

    /* Subsystem aliases (scene library, modals — theme colors required above) */
    --text-on-accent: var(--on-accent);
    --error-border: var(--error);
    --error-text: var(--error);
}

/* Reduced Motion Support — global element override (structural token dampening in tokens.css) */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100%;
    min-height: 100dvh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Form controls do not inherit the page font by default (browsers fall back to Arial). */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* Brand-gold keyboard focus ring wherever a component sets none of its own
   (Safari otherwise draws blue, Chrome white). Zero specificity on purpose. */
:where(button, a, [role="button"], summary):focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Native radios and checkboxes default to browser blue; use the brand accent. */
input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--accent-primary);
}

/* Global smooth transitions for app-like feel */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   BUTTON SYSTEM - Consistent hierarchy with premium interactions
   ============================================================================ */

/* Base button reset and shared styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 10px 16px;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

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

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary Button - Main CTA, solid accent with glow */
.btn-primary {
    color: var(--on-accent);
    background: var(--cta-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
    background: var(--cta-bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--glow-primary), 0 4px 12px rgba(200, 164, 92, 0.25);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Secondary Button - Outline with subtle fill on hover */
.btn-secondary {
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(0) scale(0.98);
    background: var(--bg-active);
}

/* Ghost Button - Text only, subtle hover background */
.btn-ghost {
    color: var(--text-secondary);
    background: transparent;
    border: none;
}

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

.btn-ghost:active {
    background: var(--bg-active);
}

/* Danger Button - Red for destructive actions */
.btn-danger {
    color: #fff;
    background: var(--error);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: var(--glow-error), 0 4px 12px rgba(239, 68, 68, 0.25);
}

.btn-danger:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Success Button - Green for positive actions */
.btn-success {
    color: #fff;
    background: var(--success);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-success:hover {
    background: #16a34a;
    transform: translateY(-1px);
    box-shadow: var(--glow-success), 0 4px 12px rgba(34, 197, 94, 0.25);
}

.btn-success:active {
    transform: translateY(0) scale(0.98);
}

/* Button Sizes */
.btn-sm {
    padding: 6px 12px;
    font-size: var(--text-xs);
}

.btn-lg {
    padding: 14px 24px;
    font-size: var(--text-base);
}

/* Button with icon only */
.btn-icon {
    padding: 8px;
    width: 36px;
    height: 36px;
}

.btn-icon.btn-sm {
    padding: 6px;
    width: 28px;
    height: 28px;
}

.btn-icon.btn-lg {
    padding: 12px;
    width: 48px;
    height: 48px;
}

/* Full width button */
.btn-block {
    width: 100%;
}

/* ============================================================================
   PAGE TRANSITIONS & MICRO-INTERACTIONS
   ============================================================================ */

/* Page entrance animation */
@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Apply to main content sections */
.main-content > *:not(.sidebar-overlay) {
    animation: pageEnter var(--duration-slow) var(--ease-out);
}

/* Card hover effect mixin-like pattern */
.card-hover {
    transition: all var(--duration-fast) var(--ease-out);
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.card-hover:active {
    transform: translateY(0);
}

/* Interactive element pulse on focus */
@keyframes focusPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-subtle); }
    50% { box-shadow: 0 0 0 4px var(--accent-subtle); }
}

/* Skeleton loading animation */
@keyframes skeletonShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-hover) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* Smooth state transitions for interactive cards */
.interactive-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--duration-fast) var(--ease-out);
}

.interactive-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.interactive-card:active {
    transform: translateY(0) scale(0.995);
}

/* Subtle scale on press for touch feedback */
.pressable {
    transition: transform var(--duration-instant) var(--ease-out);
}

.pressable:active {
    transform: scale(0.97);
}

/* App-shell: full viewport, sidebar + main (ChatGPT-style); fixed height so main can scroll */
/* Cascade: 100vh first (legacy), then 100dvh so mobile browser chrome is accounted for */
.app-shell {
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.app-shell .app-container {
    flex: 1;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    overflow: hidden;
}

/* Lead paragraph (e.g. safety/legal pages) */
.lead {
    font-size: 1.1em;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg, 24px);
}

/* Site header */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.site-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
}
.site-logo-img { height: 28px; width: auto; display: block; }
.site-logo-text { display: none; } /* Fallback: shown by onerror when img fails */
.site-nav {
    display: flex;
    gap: clamp(0.75rem, 3vw, 1.5rem);
    align-items: center;
}

.site-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
}

.site-nav .nav-link:hover {
    color: var(--text-primary);
    background: rgba(59, 130, 246, 0.1);
}

.site-nav .nav-link:active {
    transform: scale(0.95);
}

.site-nav .nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.site-nav .nav-label {
    font-weight: 500;
    font-size: 0.95rem;
}

/* Logout button - distinct styling to prevent accidental clicks */
.site-nav .nav-link-logout {
    color: var(--text-muted);
    margin-left: clamp(0.5rem, 2vw, 1rem);
}

.site-nav .nav-link-logout:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Android Chrome can expose a 1080px CSS viewport on high-density phones. */
@media (max-width: 1100px) {
    .site-nav .nav-label {
        display: none;
    }
    
    .site-nav .nav-link {
        padding: 0.65rem;
        min-width: 48px;
        min-height: 48px;
    }
    
    .site-nav .nav-icon {
        width: 22px;
        height: 22px;
    }
    
    .site-nav {
        gap: 0.5rem;
    }
}
.site-header-actions { display: flex; align-items: center; }
.theme-switcher { display: flex; align-items: center; gap: 6px; }
.theme-switcher select {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.9rem;
}

.app-container {
    display: flex;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

/* ============================================================================
   AUTH PAGES (Login / Register)
   ============================================================================ */
.auth-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg, 24px);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-xl, 40px);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.3));
}
.settings-card { max-width: 480px; }
.settings-section {
    margin-bottom: var(--spacing-xl, 32px);
    padding-bottom: var(--spacing-lg, 24px);
    border-bottom: 1px solid var(--border-color);
}
.settings-section:last-of-type { border-bottom: none; }
.settings-heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm, 8px);
}
.settings-meta {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm, 8px);
}
/* Auth/settings: no default hyperlink styling – muted, underline on hover */
.auth-card a,
.auth-main a,
.settings-meta a {
    color: var(--text-secondary, #a3a3a3);
    text-decoration: none;
}
.auth-card a:hover,
.auth-main a:hover,
.settings-meta a:hover {
    text-decoration: underline;
}
.auth-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs, 4px);
    color: var(--text-primary);
}
.auth-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg, 24px);
}
.auth-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--error);
    color: var(--error);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    border-radius: var(--radius-sm, 6px);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md, 16px);
}
.auth-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid var(--success);
    color: var(--success);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    border-radius: var(--radius-sm, 6px);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md, 16px);
}
.cf-turnstile-wrap {
    margin: var(--spacing-sm, 8px) 0;
    max-width: 100%;
    overflow: visible; /* Changed from hidden to prevent clipping */
    box-sizing: border-box;
}
.auth-form { display: flex; flex-direction: column; gap: var(--spacing-md, 16px); }
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auth-field label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}
.auth-optional { font-weight: 400; color: var(--text-muted); font-size: 0.85rem; }
.auth-field input {
    width: 100%;
    padding: 10px 12px;
    font-size: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: all var(--duration-fast) var(--ease-out);
}
.auth-field input:hover {
    border-color: var(--border-hover);
}
.auth-field input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-subtle), var(--glow-primary);
    background: var(--bg-secondary);
}
.auth-field input::placeholder {
    color: var(--text-muted);
    transition: opacity var(--duration-fast);
}
.auth-field input:focus::placeholder {
    opacity: 0.6;
}
/* Validation states */
.auth-field input.is-valid {
    border-color: var(--success);
}
.auth-field input.is-valid:focus {
    box-shadow: 0 0 0 3px var(--success-bg), var(--glow-success);
}
.auth-field input.is-invalid {
    border-color: var(--error);
}
.auth-field input.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--error-bg), var(--glow-error);
}
.auth-field-with-check { position: relative; }
.auth-field-with-check .auth-field-check {
    position: absolute;
    right: 12px;
    bottom: 0;
    font-size: 1rem;
    line-height: 2.6;
    color: var(--success, #22c55e);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.auth-field-with-check .auth-field-check.valid { opacity: 1; }
.auth-field-error {
    font-size: 0.85rem;
    color: var(--error);
}
.auth-submit {
    margin-top: 8px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: var(--font-semibold);
    color: var(--on-accent);
    background: var(--cta-bg);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.auth-submit:hover {
    background: var(--cta-bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--glow-primary), 0 4px 12px rgba(200, 164, 92, 0.25);
}
.auth-submit:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.auth-submit:disabled,
.auth-submit[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}
.auth-submit:disabled:hover,
.auth-submit[disabled]:hover {
    background: var(--cta-bg);
    transform: none;
    box-shadow: none;
}
/* Links styled as CTA (e.g. Enable 2FA) must not inherit muted .auth-card a / .settings-meta a */
a.auth-submit {
    color: #fff !important;
    opacity: 1;
}
a.auth-submit:hover {
    color: #fff !important;
    opacity: 1;
}
.auth-divider { text-align: center; margin: 1rem 0 0.75rem; color: var(--text-muted); font-size: 0.9rem; }
.auth-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 0.5rem;
}
.auth-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Side by side when both labels fit on one line, otherwise one per row. */
    flex: 1 1 auto;
    white-space: nowrap;
    padding: 12px 18px;
    font-size: 0.95rem;
    font-weight: var(--font-medium);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    gap: 10px;
}
.auth-social-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}
.auth-social-btn:active {
    transform: translateY(0) scale(0.98);
}
.auth-social-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.auth-social-icon-google {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
}
.auth-social-icon-discord {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235865F2'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E");
}
/* Auth disclaimer (age + terms/privacy) below signup */
.auth-disclaimer {
    margin-top: var(--spacing-md, 16px);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.auth-disclaimer a {
    color: var(--text-secondary);
    text-decoration: underline;
}
.auth-disclaimer a:hover {
    color: var(--text-primary);
}
/* Settings: pending email notice and confirmation modals */
.settings-pending-email {
    font-size: 0.9rem;
    color: var(--warning, #f59e0b);
    margin-top: var(--spacing-sm, 8px);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    background: rgba(245, 158, 11, 0.1);
    border-radius: var(--radius-md, 8px);
    border-left: 3px solid var(--warning, #f59e0b);
}
.settings-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md, 16px);
}
.settings-confirm-modal[hidden] { display: none !important; }
.settings-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}
.settings-confirm-box {
    position: relative;
    max-width: 420px;
    width: 100%;
    padding: var(--spacing-lg, 24px);
    background: var(--bg-card, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg);
}
.settings-confirm-title {
    font-size: 1.15rem;
    margin-bottom: var(--spacing-md, 16px);
    color: var(--text-primary);
}
.settings-confirm-text,
.settings-confirm-note {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md, 16px);
    line-height: 1.5;
}
.settings-confirm-note {
    font-size: 0.875rem;
    color: var(--text-muted);
}
.settings-confirm-actions {
    display: flex;
    gap: var(--spacing-sm, 8px);
    justify-content: flex-end;
    margin-top: var(--spacing-md, 16px);
}
.settings-confirm-cancel {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}
.settings-confirm-ok { }

.auth-submit:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(200, 164, 92, 0.5);
}
.auth-footer {
    margin-top: var(--spacing-lg, 24px);
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-align: center;
}
.auth-footer a { color: var(--accent-light); text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }

/* Error page (404, 500, 413) inside app shell */
.error-page-content .error-page-code {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

/* ============================================================================
   SIDEBAR - ChatGPT-style with icon strip when collapsed
   ============================================================================ */
.sidebar {
    width: 260px;
    max-width: 260px;
    flex-shrink: 0;
    background: var(--bg-primary);
    border-right: 1px solid var(--sidebar-divider);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.15s ease;
    position: relative;
}

/* Collapsed icon strip (tiny-bar) - absolutely positioned overlay */
.sidebar-collapsed-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%; /* fill parent */
    width: 54px; /* Reduced by 20% from 68px */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 5px;
    padding-top: max(12px, env(safe-area-inset-top, 12px));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    background: var(--bg-primary);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.sidebar.sidebar-collapsed .sidebar-collapsed-strip {
    opacity: 1;
    pointer-events: auto;
}
/* Expanded: strip hidden — bottom icons overlap expanded user row; use #homeNavBtn etc. */
.sidebar:not(.sidebar-collapsed) .sidebar-collapsed-strip {
    display: none;
}
.sidebar-strip-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.sidebar-strip-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: auto; /* push to bottom of flex container */
    flex-shrink: 0; /* don't shrink */
    position: relative; /* for absolute positioned dropdowns */
}
.sidebar-strip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* Reduced by 20% from 54px */
    height: 44px; /* Reduced by 20% from 54px */
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
}
.sidebar-strip-icon:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.sidebar-strip-icon:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
/* LOGO — frozen: do not apply theme accent/filter overrides (OAuth + sidebar brand assets) */
.sidebar-strip-logo,
.sidebar-strip-logo img,
.sidebar-header-logo,
.sidebar-header-logo img,
.site-logo,
.site-logo-img {
    /* sizing/layout only below — colors come from logo PNG/SVG assets */
}
.sidebar-strip-logo {
    margin-bottom: 12px;
}
.sidebar-strip-logo img {
    width: 24px; /* Reduced by 20% from 30px */
    height: 24px; /* Reduced by 20% from 30px */
}
/* Hover effect: show panel icon instead of logo */
.sidebar-strip-logo .strip-logo-icon { display: block; }
.sidebar-strip-logo .strip-panel-icon { display: none; }
.sidebar-strip-logo:hover .strip-logo-icon { display: none; }
.sidebar-strip-logo:hover .strip-panel-icon { display: block; }

.sidebar-strip-user {
    background: var(--bg-tertiary);
    border-radius: 50%;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    flex-shrink: 0;
}
.user-avatar-initials-small {
    font-size: 0.7rem; /* Reduced by 20% from 0.85rem */
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-primary);
}

/* Sidebar strip help button and dropdown - visible to all users */
.sidebar-strip-help {
    color: var(--text-muted);
    transition: color var(--duration-fast) var(--ease-out);
    position: relative;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
}
.sidebar-strip-help:hover {
    color: var(--text-primary);
}

/* Help dropdown menu - matches user-menu-dropdown design */
.sidebar-strip-help-dropdown {
    position: fixed;
    left: 58px;
    bottom: 120px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xs);
    min-width: 180px;
    box-shadow: var(--shadow-lg);
    z-index: 99999;
}
.sidebar-strip-help-dropdown.hidden {
    display: none !important;
}
.sidebar-strip-help-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}
.sidebar-strip-help-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Help / Home controls in expanded sidebar */
.sidebar-expanded-help {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: var(--font-medium);
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    margin-bottom: 4px;
}
a.sidebar-expanded-help,
a.sidebar-expanded-help:visited {
    color: var(--text-secondary);
    text-decoration: none;
}
.sidebar-expanded-help:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
a.sidebar-expanded-help:hover {
    color: var(--text-primary);
}
.sidebar-expanded-help:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}
.sidebar-expanded-help i,
.sidebar-expanded-help svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    opacity: 0.9;
}

/* Expanded sidebar content */
.sidebar-expanded {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    opacity: 1;
    transition: opacity 0.15s ease;
}

/* When collapsed: hide expanded content, shrink sidebar */
.sidebar.sidebar-collapsed {
    width: 54px; /* Reduced by 20% from 68px */
    min-width: 54px;
}
.sidebar.sidebar-collapsed .sidebar-expanded {
    display: none !important;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
    width: 0;
    min-width: 0;
    flex: 0 0 0;
}

/* Sidebar top area - scrollable content */
.sidebar-top {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    overflow: hidden;
}

/* Header: Logo icon left, close button right - ChatGPT style */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 8px;
    flex-shrink: 0;
}
.sidebar-header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    transition: background var(--transition-fast);
}
.sidebar-header-logo:hover {
    background: var(--bg-tertiary);
}
.sidebar-header-logo img {
    width: 20px;
    height: 20px;
}
.btn-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-sidebar-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.btn-sidebar-close:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Action buttons area - ChatGPT style sticky section */
.sidebar-actions {
    padding: 0 8px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

/* Sidebar nav — calm premium hierarchy */
.app-shell[data-mature-content="true"] .sidebar-logo-icon {
    filter: none;
    animation: none;
}

/* New session button - ChatGPT hoverable menu item style */
.btn-new-session {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: linear-gradient(145deg, rgba(200, 164, 92, 0.18) 0%, rgba(200, 164, 92, 0.08) 100%);
    color: var(--text-primary);
    border: 1px solid rgba(200, 164, 92, 0.28);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    cursor: pointer;
    font-weight: 500;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    margin-bottom: 4px;
}
.btn-new-session:hover {
    background: linear-gradient(145deg, rgba(200, 164, 92, 0.26) 0%, rgba(200, 164, 92, 0.12) 100%);
    border-color: rgba(200, 164, 92, 0.4);
    box-shadow: 0 0 0 1px rgba(200, 164, 92, 0.12);
}
.btn-new-session:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}
.btn-new-session-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent-primary); }
/* On Create images or Library, only that page looks selected; Create video keeps
   its gold icon but drops the filled background so two items never look current. */
.sidebar-actions:has([aria-current="page"]) .btn-new-session:not(:hover) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Sidebar action buttons - ChatGPT hoverable menu item style */
.btn-sidebar-action {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    cursor: pointer;
    font-weight: 500;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    margin-bottom: 2px;
    text-decoration: none;
    font-family: inherit;
    box-sizing: border-box;
}
.btn-sidebar-action:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.btn-sidebar-action:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}
.btn-sidebar-action.is-active,
.btn-sidebar-action[aria-current="page"] {
    background: rgba(200, 164, 92, 0.12);
    border-color: rgba(200, 164, 92, 0.22);
    color: var(--text-primary);
}
.btn-sidebar-action.is-active i,
.btn-sidebar-action[aria-current="page"] i {
    color: var(--accent-primary);
    opacity: 1;
}
.btn-sidebar-action i { opacity: 0.75; flex-shrink: 0; }
.sidebar-strip-icon[aria-current="page"] {
    background: rgba(200, 164, 92, 0.12);
    color: var(--accent-primary);
}

/* Signed out: a short line and the free first video button at the top of the open menu */
.sidebar-guest-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 12px 8px;
    flex-shrink: 0;
}
.sidebar-guest-text {
    margin: 0 4px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Sidebar "Log in" / "Register" buttons (when not logged in); stay inside sidebar */
.sidebar-auth-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.btn-sidebar-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    cursor: pointer;
    font-weight: 500;
    transition: all var(--transition-fast);
    font-family: inherit;
    box-sizing: border-box;
}
.sidebar.sidebar-collapsed .sidebar-auth-buttons .btn-sidebar-login span {
    display: none;
}
.sidebar.sidebar-collapsed .sidebar-auth-buttons .btn-sidebar-login {
    padding: 10px;
    min-width: 44px;
}
.btn-sidebar-login:hover {
    background: var(--bg-card);
    border-color: var(--accent-blue);
    color: var(--accent-blue-light);
}
.btn-sidebar-login:active { transform: scale(0.98); }

.search-sessions-wrap {
    padding: 0 0 var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}
.search-sessions-wrap.hidden { display: none !important; }

.sidebar-search-block {
    flex-shrink: 0;
    /* 8px + 6px = the 14px every section keeps below it. The padding is inside the
       sticky background, so rows scrolling under never touch "Include archived". */
    margin-bottom: 6px;
    padding-top: 2px;
    padding-bottom: 8px;
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-primary);
}
.sidebar-search-block .sidebar-search-field {
    margin-bottom: 0;
}

.sidebar-search-block .sidebar-search-empty {
    padding: 6px 4px 0;
    text-align: left;
    font-size: 0.82rem;
}

.sidebar-search-field {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 var(--spacing-sm);
}
.sidebar-search-icon {
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}
.sidebar-search-clear {
    position: absolute;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.sidebar-search-clear:hover,
.sidebar-search-clear:focus-visible {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    outline: none;
}
.sidebar-search-clear.hidden { display: none !important; }

.sidebar-search-empty {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}
.sidebar-search-empty.hidden { display: none !important; }
.sidebar-search-archive-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 2px 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.sidebar-search-archive-opt input {
    margin: 0;
    flex-shrink: 0;
}

.search-sessions-input {
    width: 100%;
    padding: 8px 32px 8px 34px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
}
.search-sessions-input::-webkit-search-cancel-button { display: none; }
.search-sessions-input:focus { border-color: var(--accent-blue); }
.search-sessions-input::placeholder { color: var(--text-muted); }

/* Sidebar sections - ChatGPT style */
.sidebar-sections {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8px;
}
.sidebar-sections::-webkit-scrollbar { width: 6px; }
.sidebar-sections::-webkit-scrollbar-track { background: transparent; }
.sidebar-sections::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; }
.sidebar-sections::-webkit-scrollbar-thumb:hover { background: var(--border-color); }

.sidebar-section {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 0;
    margin-bottom: 14px;
    min-height: auto;
}
.sidebar-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
}
.sidebar-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    padding: 10px 12px 6px;
    flex: 1;
    min-width: 0;
}
/* When inside a head row, no extra padding */
.sidebar-section-head .sidebar-section-title {
    padding: 0;
}
.btn-icon-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.btn-icon-small:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.sidebar.sidebar-collapsed .sidebar-section-title { display: none; }

/* The sections below search share one scroll owner on every viewport. */
@media (max-width: 768px) {
    .sidebar-sections {
        -webkit-overflow-scrolling: touch;
    }
}

/* Section counts */
.section-count {
    font-weight: 400;
    opacity: 0.6;
}
.section-count:empty { display: none; }

/* "See more" button - ChatGPT style */
.see-more-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.see-more-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.see-more-btn.hidden { display: none; }
/* When "See more" lives inside the list (e.g. Your sessions), add separation from last item */
.see-more-btn-in-list { margin-top: 4px; }

/* All sections - collapsible */
.sidebar-section.collapsed .section-collapsible-content,
.sidebar-section.collapsed .sessions-list,
.sidebar-section.collapsed .folders-list,
.sidebar-section.collapsed .see-more-btn { display: none; }
/* Section toggles remain in document flow. Multiple sticky headings at the
   same top offset stacked over adjacent rows on short screens. */
.sidebar-section-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-primary);
    border: none;
    border-bottom: 1px solid var(--sidebar-divider, rgba(255, 255, 255, 0.06));
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: static;
    flex-shrink: 0;
}
.sidebar-section-toggle:hover { color: var(--text-primary); }
.section-toggle-icon {
    transition: transform 0.2s;
    flex-shrink: 0;
}
/* Rotate chevron when expanded */
.sidebar-section:not(.collapsed) .section-toggle-icon {
    transform: rotate(0deg);
}
.sidebar-section.collapsed .section-toggle-icon {
    transform: rotate(-90deg);
}
.sidebar-section-title-inline {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* The outer sidebar owns scrolling; nested lists must never trap touch/wheel. */
.folders-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: visible;
    max-height: none;
    min-height: 0;
}
.folder-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    min-width: 0;
}
/* Folder header row - clickable to expand/collapse */
.folder-item-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    min-width: 0;
}
.folder-item-header:hover { background: var(--bg-tertiary); }
/* Chevron for expand/collapse */
.folder-item-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}
.folder-item.expanded .folder-item-chevron {
    transform: rotate(90deg);
}
/* "New folder" item - slightly muted until hovered */
.folder-item-new {
    color: var(--text-secondary);
}
.folder-item-new:hover {
    color: var(--text-primary);
}
.folder-item-new .folder-item-name {
    color: inherit;
}
/* New folder doesn't need column layout */
.folder-item-new {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.folder-item-new:hover { background: var(--bg-tertiary); }

/* Keep the create-folder row in normal flow on mobile. */
@media (max-width: 768px) {
    .sidebar-section-folders {
        flex-shrink: 0;
    }
    .folders-list {
        min-height: 38px;
        max-height: none;
    }
}
.folder-item-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
    color: var(--text-secondary);
}
.folder-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    color: var(--text-primary);
}
.folder-item-menu {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
}
.folder-item-header:hover .folder-item-menu { display: flex; }
.folder-item-menu:hover { color: var(--text-primary); background: var(--bg-card); }
/* Mobile: Always show folder menu button (no hover on touch devices); 44px touch target */
@media (max-width: 768px), (hover: none) {
    .folder-item-menu {
        display: flex !important;
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }
    .folder-item-count {
        display: none !important;
    }
}
/* Force menu visibility on touch devices - fallback */
@media (pointer: coarse) {
    .folder-item-menu {
        display: flex !important;
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }
    .folder-item-count {
        display: none !important;
    }
}
/* Session count badge inside folder header */
.folder-item-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
    padding-right: 4px;
}
.folder-item-header:hover .folder-item-count { display: none; }

.archived-list { max-height: 100px; overflow-y: auto; }
/* Folder children - tree style */
.folder-children {
    display: none;
    margin-left: 20px;
    padding-left: 12px;
    margin-top: 2px;
    border-left: 1px solid var(--border-subtle);
}
.folder-item.expanded .folder-children {
    display: block;
}
/* Sessions inside folders - slightly smaller */
.folder-children .session-item {
    padding: 6px 10px;
    font-size: 0.8125rem;
}
.folder-children .session-item-icon {
    width: 14px;
    height: 14px;
}
/* Folder see more button */
.folder-see-more-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    border-radius: var(--radius-sm);
}
.folder-see-more-btn:hover {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}
.folder-see-more-btn i {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}
.archived-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    min-width: 0;
    transition: background 0.15s;
}
.archived-item:hover {
    background: var(--bg-tertiary);
}
.archived-item-label {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}
.archived-item-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}
.archived-item-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.archived-item:hover .archived-item-menu {
    opacity: 1;
}
.archived-item-menu:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.archived-item-menu i {
    width: 16px;
    height: 16px;
}

.sidebar-context-menu {
    position: fixed;
    z-index: 1100;
    min-width: 180px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    list-style: none;
    margin: 0;
}
.sidebar-context-menu.hidden { display: none !important; }
.sidebar-context-menu button,
.sidebar-context-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    text-decoration: none;
}
.sidebar-context-menu button:hover,
.sidebar-context-menu a:hover { background: var(--bg-tertiary); }
.sidebar-context-menu .sidebar-context-menu-item-danger { color: var(--error, #dc2626); }
.sidebar-context-menu .sidebar-context-menu-item-danger:hover { background: rgba(220, 38, 38, 0.15); }
/* Waits for a video or pictures to finish: greyed out, the reason on a second line. */
.sidebar-context-menu .sidebar-context-menu-item-waiting {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    color: var(--text-secondary);
    cursor: default;
}
.sidebar-context-menu .sidebar-context-menu-item-waiting:hover { background: none; }
.sidebar-context-menu .sidebar-context-menu-note { font-size: 0.78rem; color: var(--text-secondary); }
.sidebar-context-menu .menu-divider { height: 1px; background: var(--border-subtle); margin: 4px 0; }
.sidebar-context-menu .submenu-trigger { position: relative; }
.sidebar-context-menu .submenu-panel { position: absolute; left: 100%; top: 0; margin-left: 2px; }

/* Folder selection modal */
.folder-select-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.folder-select-modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 320px;
    width: 100%;
    max-height: 80vh;
    max-height: min(80vh, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.folder-select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border-subtle);
}
.folder-select-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.folder-select-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.folder-select-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.folder-select-list {
    padding: 8px;
    overflow-y: auto;
    max-height: 300px;
}
.folder-select-empty {
    margin: 0 0 12px;
    padding: 0 8px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.folder-select-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}
.folder-select-item:hover {
    background: var(--bg-tertiary);
}
.folder-select-none {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.folder-select-none:hover {
    color: var(--text-primary);
}

/* Confirmation modal */
.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.confirm-modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 400px;
    width: 100%;
    overflow: hidden;
}
.confirm-modal-header {
    padding: 20px 20px 0;
}
.confirm-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.confirm-modal-header-with-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.confirm-modal-header-with-close h3 {
    flex: 1;
}
.confirm-modal-header-with-close .modal-close {
    flex-shrink: 0;
}
.confirm-modal-body {
    padding: 12px 20px 20px;
}
.confirm-modal-body p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-line;
}
.confirm-modal-body p.confirm-modal-offer { margin-top: 10px; color: var(--text-primary); }
.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
}
.confirm-modal-actions--wrap {
    flex-wrap: wrap;
}
.confirm-modal-btn {
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast), opacity var(--transition-fast);
}
.confirm-modal-cancel {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.confirm-modal-cancel:hover {
    background: var(--bg-card);
}
.confirm-modal-confirm {
    background: var(--accent-blue);
    border: none;
    color: var(--on-accent-blue);
}
.confirm-modal-confirm:hover {
    opacity: 0.9;
}
.confirm-modal-danger {
    background: var(--error, #dc2626);
}
.confirm-modal-danger:hover {
    background: #b91c1c;
    opacity: 1;
}
.confirm-modal-input-label {
    display: block;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.confirm-modal-input {
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95rem;
    box-sizing: border-box;
}
.confirm-modal-input:focus {
    outline: 2px solid var(--accent-gold, #c8a45c);
    outline-offset: 1px;
}
.confirm-modal-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.wish-question-kicker {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-gold, #c8a45c);
}
.wish-question-answers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.wish-question-answers .confirm-modal-btn {
    width: 100%;
    min-height: 52px;
    text-align: left;
    font-size: 1rem;
    line-height: 1.3;
}
.wish-question-answers .wish-question-skip {
    text-align: center;
}
.wish-question-note {
    margin-top: 12px !important;
    font-size: 0.8rem !important;
    text-align: center;
}

.email-verification-wait-overlay {
    background: rgba(5, 5, 7, 0.82);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.email-verification-wait-modal {
    max-width: 440px;
    border: 1px solid rgba(200, 164, 92, 0.32);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 48px rgba(200, 164, 92, 0.08);
}
.email-verification-wait-modal .confirm-modal-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-top: 22px;
}
.email-verification-wait-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    border-radius: 50%;
    background: rgba(200, 164, 92, 0.12);
    border: 1px solid rgba(200, 164, 92, 0.24);
}
.email-verification-wait-spinner {
    width: 19px;
    height: 19px;
    border: 2px solid rgba(200, 164, 92, 0.28);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: email-verification-wait-spin 0.85s linear infinite;
}
.email-verification-wait-lead {
    color: var(--text-primary) !important;
    font-size: 0.96rem !important;
}
.email-verification-wait-saved {
    margin-top: 10px !important;
}
.email-verification-wait-status {
    margin-top: 16px !important;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: rgba(200, 164, 92, 0.09);
    border: 1px solid rgba(200, 164, 92, 0.16);
    color: var(--accent-blue-light) !important;
    font-weight: 600;
}
.email-verification-wait-discrete {
    margin-top: 10px !important;
    color: var(--text-muted) !important;
    font-size: 0.78rem !important;
}
.email-verification-wait-success .email-verification-wait-spinner {
    animation: none;
    border-color: #4ade80;
    background: #4ade80;
    box-shadow: inset 0 0 0 5px var(--bg-card);
}
@keyframes email-verification-wait-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 520px) {
    .email-verification-wait-overlay {
        padding: 12px;
        align-items: flex-end;
    }
    .email-verification-wait-modal {
        max-width: none;
        border-radius: var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md);
    }
    .email-verification-wait-modal .confirm-modal-actions {
        flex-direction: column-reverse;
    }
    .email-verification-wait-modal .confirm-modal-btn {
        width: 100%;
        min-height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .email-verification-wait-spinner { animation-duration: 1.8s; }
}

/* Image gen: loading overlay when "Create Video" is clicked */
.imggen-video-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1310;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.imggen-video-loading-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.imggen-video-loading-text {
    margin: 0;
    font-size: var(--text-base, 1rem);
    font-weight: 500;
    color: var(--text-primary);
}
.imggen-video-loading-hint {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-secondary);
    text-align: center;
    max-width: 280px;
}
.imggen-loading-hint {
    margin: 8px 0 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-secondary);
    text-align: center;
}
.imggen-cancel-generating-btn {
    margin-top: 16px;
}
.imggen-batch-failed-banner {
    margin: 12px 0 16px;
    padding: 28px 20px;
    border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.22);
    text-align: center;
}
.imggen-batch-failed-banner .imggen-batch-failed-icon {
    display: block;
    margin: 0 auto 12px;
    color: var(--error, #e5484d);
}
.imggen-batch-failed-banner .imggen-batch-failed-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}
.imggen-batch-failed-banner .imggen-batch-failed-msg {
    margin: 0 auto;
    max-width: 420px;
    font-size: 0.95rem;
    color: var(--text-secondary);
}
.imggen-batch-failed-banner .imggen-batch-failed-credit {
    margin: 6px auto 0;
    max-width: 420px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.imggen-batch-failed-banner .imggen-batch-failed-retry-error {
    margin: 14px auto 0;
    max-width: 420px;
    font-size: 0.9rem;
    color: var(--error, #e5484d);
}
.imggen-batch-failed-banner .imggen-batch-failed-retry-error.is-calm {
    color: var(--text-secondary);
}
.imggen-batch-failed-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
}
@media (max-width: 600px) {
    .imggen-batch-failed-actions {
        flex-direction: column;
    }
    .imggen-batch-failed-actions .step-btn {
        width: 100%;
    }
}

/* Create folder modal - ChatGPT style */
.create-folder-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.create-folder-modal {
    background: var(--bg-card);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-xl);
    max-width: 450px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.create-folder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px 20px;
}
.create-folder-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
}
.create-folder-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.create-folder-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.create-folder-body {
    padding: 4px 20px 16px;
}
.create-folder-input-wrap {
    position: relative;
    margin-bottom: 16px;
}
.create-folder-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.create-folder-input {
    width: 100%;
    padding: 12px 12px 12px 44px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.create-folder-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.create-folder-input::placeholder {
    color: var(--text-muted);
}
.create-folder-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
}
.create-folder-info i,
.create-folder-info svg {
    flex-shrink: 0;
    color: var(--text-muted);
    margin-top: 1px;
}
.create-folder-info p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.create-folder-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px 16px;
}
/* Create folder submit: vivid blue CTA so it never blends with grey UI */
.create-folder-submit {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.create-folder-submit:not(:disabled) {
    opacity: 1;
    background: var(--cta-bg) !important;
    color: var(--on-accent) !important;
    box-shadow: 0 2px 10px var(--accent-glow);
}
.create-folder-submit:hover:not(:disabled) {
    opacity: 1;
    background: var(--cta-bg-hover) !important;
    color: var(--on-accent) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--accent-glow);
}
.create-folder-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.create-folder-submit.create-folder-submit--secondary:not(:disabled) {
    flex: 1;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    box-shadow: none;
}

.create-folder-submit.create-folder-submit--danger:not(:disabled) {
    flex: 1;
    background: var(--error) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px var(--error-bg);
}

.create-folder-submit.create-folder-submit--danger:hover:not(:disabled) {
    background: #dc2626 !important;
}

/* Mobile: Make create folder button fill width for easier tapping */
@media (max-width: 480px) {
    /* Keep create/rename actions inside the visual viewport when the software
       keyboard opens. Android Chrome otherwise centers against the taller
       layout viewport and leaves the submit action behind the keyboard. */
    .create-folder-overlay {
        align-items: flex-start;
        overflow-y: auto;
        padding: max(12px, env(safe-area-inset-top, 0px)) 12px 12px;
    }
    .create-folder-modal {
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }
    .create-folder-modal:focus-within .create-folder-info {
        display: none;
    }
    .create-folder-footer {
        padding: 12px 16px 16px;
    }
    .create-folder-submit {
        flex: 1;
        padding: 14px 20px;
        font-size: 1rem;
        min-height: 48px; /* Minimum touch target size */
    }
}

.session-item-menu-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}
.session-item:hover .session-item-menu-trigger { display: flex; }
.session-item-menu-trigger:hover { color: var(--text-primary); background: var(--bg-tertiary); }
/* Mobile / touch: always show row menus (video + image sessions; mirrors folder-item-menu) */
@media (max-width: 768px), (hover: none) {
    .session-item-menu-trigger {
        display: flex !important;
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }
    .archived-item-menu {
        opacity: 1 !important;
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }
}
@media (pointer: coarse) {
    .session-item-menu-trigger {
        display: flex !important;
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }
    .archived-item-menu {
        opacity: 1 !important;
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }
}


/* Sessions list - ChatGPT style */
.sessions-list {
    flex: 1;
    min-width: 0;
    overflow-y: visible;
    padding: 0;
    margin: 0;
}
/* One sidebar scroll owner; session rows are already bounded by See more. */
.sidebar-section-sessions .sessions-list {
    max-height: none;
    overflow: visible;
}
.sidebar-footer-actions { padding: 8px 0 0 0; margin-top: auto; }
.btn-delete-all-text {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.2s;
}
.btn-delete-all-text:hover { color: var(--error); }

/* Session items - Premium hoverable menu item style with micro-interactions */
.session-item {
    padding: 8px 12px;
    margin-bottom: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    transition: background var(--transition-fast);
    border: none;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.session-item:hover {
    background: var(--bg-tertiary);
    transform: translateX(2px);
}
.session-item:active {
    transform: scale(0.99);
}
.session-item.active,
.session-item[data-active] {
    background: var(--bg-tertiary);
    border-left: 2px solid var(--accent-primary);
    padding-left: 10px;
}
.session-item.active .session-item-title,
.session-item[data-active] .session-item-title {
    color: var(--text-primary);
}

.session-item-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
    color: var(--text-secondary);
}

/* Placeholder while step-6 session is being created (sidebar) */
.session-item-creating {
    cursor: default;
    pointer-events: none;
    opacity: 0.9;
}
.session-item-creating:hover {
    transform: none;
}
.session-item-creating-spinner {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border: 2px solid var(--border-color, #333);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: guided-image-suggest-spin 0.8s linear infinite;
}
.session-item-creating-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.session-item-title {
    font-weight: 400;
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.4;
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.session-item-meta {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.35;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-item-date {
    font-size: 0.8em;
    color: var(--text-muted);
}

.session-item-content {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Sidebar content ~20% smaller so it fits better */
.sidebar-expanded .sidebar-sections {
    font-size: 0.8em;
}
.sidebar-expanded .sidebar-section-title { font-size: 0.7rem; }
.sidebar-expanded .session-item-title { font-size: 0.7rem; }
.sidebar-expanded .session-item-meta { font-size: 0.75rem; color: #b8b4ac; }
.sidebar-expanded .see-more-btn { font-size: 0.7rem; }
.sidebar-expanded .btn-delete-all-text { font-size: 0.75rem; }
.sidebar-expanded .folder-children .session-item { font-size: 0.8rem; }
.sidebar-expanded .folder-children .session-item-icon { font-size: 0.6rem; }

/* ── Image gens sidebar list ── */
.imagegen-item {
    display: flex;
    align-items: center;
    gap: 0;
}
.imagegen-item:hover .session-item-menu-trigger { display: flex; }
.imagegen-item .imagegen-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.imagegen-item-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.imagegen-badge {
    display: block;
    font-size: 0.7em;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.imagegen-badge-pending {
    color: var(--accent-primary);
}
.imagegen-badge-failed {
    color: var(--error, #c0392b);
}
.imagegen-icon-failed {
    color: var(--error, #c0392b);
}
.imagegen-item-failed .imagegen-item-content {
    cursor: pointer;
    opacity: 0.95;
}
.imagegen-item-pending .imagegen-item-content {
    cursor: default;
    opacity: 0.9;
}
.imagegen-loading-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--accent-primary);
    animation: imagegenLoadingSpin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes imagegenLoadingSpin {
    to { transform: rotate(360deg); }
}

/* ── Unread session indicator dot ── */
.unread-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    flex-shrink: 0;
    animation: unreadPulse 2.5s ease-in-out infinite;
}
@keyframes unreadPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.8); }
}
/* Content-header placement */
#sessionUnreadDot {
    margin-left: 8px;
    vertical-align: middle;
}
#sessionUnreadDot.hidden { display: none; }

.sidebar-footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}
.btn-delete-all {
    width: 100%;
    padding: 10px;
    background: var(--error);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95em;
    cursor: pointer;
    font-weight: 600;
    transition: all var(--transition-fast);
}

/* Sidebar bottom: user profile - ChatGPT style - ALWAYS visible */
.sidebar-bottom {
    flex-shrink: 0;
    margin-top: auto;
    padding: 6px 8px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    position: relative;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-subtle);
}
/* Expanded sidebar: Home + Help + user avatar in one row */
.sidebar-bottom-nav-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px 0 2px;
}
.sidebar-bottom-nav-row .sidebar-expanded-help {
    width: auto;
    flex: 1;
    min-width: 0;
    min-height: 40px;
    margin-bottom: 0;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}
.sidebar-bottom-nav-row .sidebar-expanded-help:hover {
    background: var(--bg-hover);
    border-color: rgba(200, 164, 92, 0.28);
    color: var(--text-primary);
}
.sidebar-bottom-nav-row .sidebar-expanded-help:active {
    background: var(--bg-active);
}
.sidebar-bottom-nav-row .sidebar-expanded-help i,
.sidebar-bottom-nav-row .sidebar-expanded-help svg {
    width: 15px;
    height: 15px;
    opacity: 0.85;
}
.sidebar-bottom-nav-row .user-menu-trigger {
    width: auto;
    flex-shrink: 0;
    align-self: center;
    min-height: 40px;
    padding: 4px 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
}
.sidebar-bottom-nav-row .user-menu-trigger:hover {
    background: var(--bg-hover);
    border-color: rgba(200, 164, 92, 0.28);
}

/* Very short windows (phone landscape and small split-screen panes) cannot
   reserve fixed space for both the action stack and account footer. This
   block follows the normal section/footer rules so it wins the cascade. */
@media (max-height: 520px) {
    .sidebar-expanded {
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar-top {
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
    }
    .sidebar-sections {
        flex: 0 0 auto;
        overflow: visible;
    }
    .sidebar-bottom {
        margin-top: 0;
    }
}
.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
    box-shadow: none;
}
.user-menu-trigger:hover {
    background: var(--bg-tertiary);
}
.user-menu-trigger:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}
.user-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--text-muted);
    color: white;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 500;
    font-size: 0.7rem;
}
.user-avatar svg {
    color: inherit;
    width: 16px;
    height: 16px;
}
.user-avatar-initials { line-height: 1; }
/* Hide chevron - ChatGPT doesn't show it */
.user-menu-chevron { display: none; }

.user-menu-dropdown {
    position: fixed;
    left: 58px;
    bottom: 60px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xs);
    z-index: 99999;
    min-width: 180px;
    max-height: min(70dvh, 70vh, calc(100dvh - 80px));
    max-height: min(70dvh, calc(100dvh - 80px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.user-menu-dropdown.hidden { display: none !important; }
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    font-family: inherit;
}
.user-menu-item:hover { background: var(--bg-tertiary); }
.user-menu-item-logout { color: var(--text-primary); }
.user-menu-item-logout:hover { color: var(--error); }

/* Help & Cleanup submenus under avatar */
.user-menu-item-help,
.user-menu-item-cleanup { cursor: pointer; }
.user-menu-item-help .user-menu-submenu-chevron,
.user-menu-item-cleanup .user-menu-submenu-chevron { transition: transform 0.2s; }
.user-menu-item-help[aria-expanded="true"] .user-menu-submenu-chevron,
.user-menu-item-cleanup[aria-expanded="true"] .user-menu-submenu-chevron { transform: rotate(90deg); }
.user-menu-submenu {
    display: none;
    padding-left: var(--spacing-md);
    border-left: 2px solid var(--border-subtle);
    margin: 4px 0 4px 8px;
}
.user-menu-submenu:not(.hidden) { display: block; }
.user-menu-submenu.hidden { display: none !important; }
.user-menu-submenu-item {
    padding: 6px 12px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Danger items in submenu */
.user-menu-item-danger { color: var(--text-secondary); }
.user-menu-item-danger:hover { color: var(--error); background: rgba(239, 68, 68, 0.1); }
.user-menu-item-danger-strong { color: var(--error); font-weight: 500; }
.user-menu-item-danger-strong:hover { background: rgba(239, 68, 68, 0.15); }
/* Divider in menu */
.user-menu-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 6px 0;
}

/* ─── Credits: collapsed strip icon ─── */
.sidebar-strip-credits {
    position: relative;
    color: var(--accent-amber, #f59e0b);
}
.sidebar-strip-credits:hover { color: #fbbf24; }
.credits-strip-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--error, #ef4444);
    color: #fff;
    border-radius: 999px;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    padding: 0 3px;
    pointer-events: none;
}
.credits-strip-badge.hidden { display: none; }

/* ─── Credits: expanded sidebar bar ─── */
.sidebar-credits-bar {
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: var(--radius-md, 8px);
    background: var(--bg-tertiary, rgba(255,255,255,0.04));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
/* Mini row: always visible when bar is folded; shows credits left */
.credits-bar-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    padding: 8px 4px;
    margin: 0;
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}
.credits-bar-mini:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}
/* Credits/usage zap icon: golden when sidebar is expanded */
.credits-bar-mini i:first-of-type,
.credits-bar-mini svg:first-of-type,
.credits-bar-mini [data-lucide="zap"] {
    color: #fbbf24 !important;
    flex-shrink: 0;
}
.credits-bar-mini [data-lucide="zap"] svg,
.credits-bar-mini i:first-of-type svg {
    color: inherit;
    stroke: currentColor;
}
.credits-bar-mini-text {
    flex: 1;
    min-width: 0;
}
/* Collapsed: compact one-line summary; smaller font so credits · sessions · refunds fit */
.sidebar-credits-bar.credits-bar-folded .credits-bar-mini-text {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.credits-bar-mini-chevron {
    flex-shrink: 0;
    opacity: 0.6;
    transition: transform 0.2s ease;
}
.sidebar-credits-bar:not(.credits-bar-folded) .credits-bar-mini-chevron {
    transform: rotate(-180deg);
}
/* Folded: hide full details; only mini row visible */
.sidebar-credits-bar.credits-bar-folded .credits-bar-details {
    display: none;
}
.sidebar-credits-bar.credits-bar-folded .credits-bar-mini {
    margin-bottom: 0;
}
/* Expanded: show details and add spacing below mini row */
.sidebar-credits-bar:not(.credits-bar-folded) .credits-bar-mini {
    margin-bottom: 8px;
}
.credits-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.credits-bar-tier {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.credits-bar-upgrade {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-amber, #f59e0b);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    transition: background 0.15s, color 0.15s;
}
.credits-bar-upgrade:hover {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}
.credits-bar-meters {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.credits-meter { display: flex; flex-direction: column; gap: 2px; }
.credits-meter-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.credits-meter-label i { opacity: 0.7; flex-shrink: 0; }
.credits-meter-free-refund .credits-meter-label { margin-bottom: 0; flex-wrap: wrap; }
.credits-review-offer {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent-subtle, rgba(200, 164, 92, 0.14));
    color: var(--accent-color, #c8a45c);
    font-weight: 600;
    white-space: nowrap;
}
.credits-review-offer[hidden] { display: none; }
.credits-meter-track {
    height: 4px;
    border-radius: 2px;
    background: var(--bg-primary, rgba(255,255,255,0.06));
    overflow: hidden;
}
.credits-meter-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--accent-blue, #3b82f6);
    transition: width 0.4s ease;
    width: 0%;
}
.credits-meter-fill.warn { background: var(--warning, #f59e0b); }
.credits-meter-fill.critical { background: var(--error, #ef4444); }

/* Upgrade menu item highlight */
.user-menu-item-upgrade {
    color: var(--accent-primary) !important;
    font-weight: 500;
}
.user-menu-item-upgrade:hover {
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
    color: var(--accent-hover, var(--accent-primary)) !important;
}

/* Collapsed sidebar - hide expanded bottom */
.sidebar.sidebar-collapsed .sidebar-bottom { display: none; }

.btn-delete-all:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

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

.session-item-delete {
    background: transparent;
    border: none;
    color: var(--error);
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px 10px;
    opacity: 0.8;
    transition: all var(--transition-fast);
    margin-left: var(--spacing-md);
    border-radius: var(--radius-sm);
}

.session-item-delete:hover {
    opacity: 1;
    color: #dc2626;
    transform: scale(1.1);
    background: rgba(239, 68, 68, 0.1);
}

.session-item-delete:active {
    transform: scale(0.95);
}

/* ============================================================================
   MAIN CONTENT
   ============================================================================ */
.main-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-primary);
    background-image: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(200, 164, 92, 0.06) 0%, transparent 55%);
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Premium app studio — shared frame for wizard, image gen, media */
.app-studio-frame {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 1.75rem) clamp(1rem, 3vw, 1.5rem) clamp(2rem, 4vw, 3rem);
    box-sizing: border-box;
}
.app-studio-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.main-content .session-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Auth pages inside app shell: content centered beside sidebar; flexible on all resolutions */
/* The wrapper grows (footer stays at the bottom) but never scrolls on its own: main-content is the
   single scroll surface, so the support footer cannot cover form controls on short phone screens. */
.main-content .auth-content-wrap {
    flex: 1 0 auto;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 1.5rem);
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}
.main-content .auth-content-wrap .auth-card {
    flex-shrink: 0;
}
/* Legal/long/scrollable pages: content grows, only main-content scrolls; no inner scroll */
.main-content.main-content--legal .auth-content-wrap,
.main-content.main-content--scroll .auth-content-wrap {
    flex: 1 0 auto;
    min-height: min-content;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
    -webkit-overflow-scrolling: unset;
}
/* Short single-card pages (email verification, account deletion, 2FA success, error pages):
   centre the card in the available space instead of pinning it to the top. */
.main-content.main-content--scroll .auth-content-wrap:has(> .auth-card:only-child) {
    align-items: center;
}
/* Ensure main is the scroll container: constrained height so it can overflow and scroll */
.main-content.main-content--legal,
.main-content.main-content--scroll {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Legal/static pages (terms, privacy, faq, safety, refund, support): Premium typography */
.legal-page-content {
    max-width: 720px;
    width: 100%;
    padding: clamp(var(--spacing-lg), 5vw, var(--spacing-2xl));
    box-sizing: border-box;
    animation: pageEnter var(--duration-slow) var(--ease-out);
}

.legal-page-content h1 {
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
}

.legal-page-content h2 {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    letter-spacing: -0.01em;
}

.legal-page-content h3 {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

.legal-page-content p {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.legal-page-content .lead {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--spacing-xl);
}

.legal-page-content a {
    color: var(--accent-hover);
    text-decoration: none;
    transition: color var(--duration-fast);
}

.legal-page-content a:hover {
    color: var(--accent-primary);
    text-decoration: underline;
}

.legal-page-content ul,
.legal-page-content ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
    color: var(--text-secondary);
}

.legal-page-content li {
    margin-bottom: var(--spacing-sm);
    line-height: var(--leading-relaxed);
}

.legal-back {
    margin-top: var(--spacing-2xl);
}

.legal-page-footer {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-subtle);
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.legal-page-footer a { color: var(--text-secondary); }
.legal-page-footer a:hover { color: var(--text-primary); }
.legal-page-footer .footer-sep { margin: 0 8px; }

.content-header {
    padding: clamp(1.25rem, 3vw, 1.75rem) 0 clamp(1rem, 2vw, 1.25rem);
    border-bottom: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-shrink: 0;
}
.content-header--studio {
    margin-bottom: var(--spacing-md);
}
.content-header--studio .page-eyebrow {
    text-align: left;
    margin-bottom: var(--spacing-xs);
}

.content-header > div:first-child {
    flex: 1;
}

.content-header h1 {
    color: var(--text-primary);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.content-header .version {
    font-size: 0.65em;
    color: var(--text-muted);
    font-weight: 500;
    opacity: 0.7;
}

.content-header p {
    color: var(--text-secondary);
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    line-height: 1.5;
    margin: 0;
    max-width: 600px;
}

.btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--error);
    border: none;
    color: white;
    cursor: pointer;
    padding: 10px 12px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.btn-delete:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.btn-delete:active {
    transform: scale(0.95);
}
/* Session header: deleting is rare, so the button stays quiet until it is pointed at. */
#deleteSessionBtn.btn-delete {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}
#deleteSessionBtn.btn-delete:hover {
    background: color-mix(in srgb, var(--error) 12%, transparent);
    border-color: var(--error);
    color: var(--error);
    transform: none;
}

.session-view {
    min-height: calc(100vh - 200px);
    min-height: calc(100dvh - 200px);
}

.session-view.hidden {
    display: none;
}

.media-view .content-subtitle { margin-top: 0.25rem; }
.media-section {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--surface-raised);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.media-section:first-of-type { margin-top: var(--spacing-md); }
.media-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--spacing-md);
}
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    align-items: start;
    min-width: 0;
    gap: var(--spacing-md);
}
.media-card {
    position: relative;
    --media-aspect: 9 / 16;
    min-width: 0;
    min-height: 0;
    isolation: isolate;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.media-card:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
.media-card a { display: block; text-decoration: none; color: inherit; }
.media-card-media {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: var(--media-aspect);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.media-card-media img,
.media-card-media video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    cursor: pointer;
}
.media-origin-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 2;
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(10, 10, 12, 0.68);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0.02em;
    pointer-events: none;
}
/* Legacy cards without wrapper (pre-1.159) */
.media-card > img,
.media-card > video {
    width: 100%;
    aspect-ratio: var(--media-aspect, 9 / 16);
    object-fit: contain;
    object-position: center center;
    display: block;
    background: var(--bg-secondary);
}
.media-card .media-card-label {
    padding: 6px 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Expand hint on media cards — indicates clickable */
.media-card-expand {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.58);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font: inherit;
    pointer-events: auto;
    transition: color 0.15s;
    z-index: 2;
}
.media-card:hover .media-card-expand { color: rgba(255, 255, 255, 0.85); }
.media-card-expand svg { pointer-events: none; }
/* An empty-state line spans the whole grid instead of one 140px card column. */
.media-grid > .media-empty { grid-column: 1 / -1; }
/* A picture still waiting for its turn shows the card's own background, not its words. */
.media-card-media img[data-lazy-src] { visibility: hidden; }
.media-empty {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
    padding: var(--spacing-md);
}
/* Clickable media thumbnails */
.media-card-media img,
.media-card-media video,
.media-card > img,
.media-card > video { cursor: pointer; }

/* Mobile Library: fixed columns and max-content rows prevent portrait cards from
   borrowing a neighbouring row's height. Touch browsers can keep :hover alive
   after a tap, so never scale cards on coarse pointers. */
@media (max-width: 768px) {
    .media-view .app-studio-frame {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .media-section {
        padding: var(--spacing-md);
        margin-top: var(--spacing-md);
        border-radius: var(--radius-md);
    }

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

    .media-card-media {
        max-height: min(58dvh, 360px);
    }

    .media-card .media-card-label {
        /* Block, not flex: an ellipsis needs a block box (flex cut names mid-word). */
        min-height: 36px;
        display: block;
        line-height: 20px;
        padding: 8px;
    }

    .media-card-expand {
        bottom: 5px;
        right: 5px;
    }
}

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

    .media-card-media {
        max-height: min(58dvh, 360px);
    }
}

@media (hover: none), (pointer: coarse) {
    .media-card:hover {
        transform: none;
        box-shadow: none;
    }

    .media-card:active {
        transform: scale(0.99);
    }
}

/* ── Media Viewer Lightbox (v1.0) ── */
.media-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.96);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: mvFadeIn 0.2s ease;
}
.media-viewer-overlay.hidden { display: none !important; }
/* A confirm box opened from the viewer (Enhance) must sit above it, or it opens unseen. */
body:has(.media-viewer-overlay:not(.hidden)) .confirm-modal-overlay { z-index: 9100; }
@keyframes mvFadeIn { from { opacity: 0; } to { opacity: 1; } }

.media-viewer-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.2rem;
    cursor: pointer;
    z-index: 9010;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.media-viewer-close:hover { opacity: 1; }

.media-viewer-content {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    max-width: 90vw;
    max-height: 75vh;
    margin-bottom: 1rem;
    position: relative;
}
.media-viewer-content.is-loading::after {
    content: '';
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.media-viewer-media {
    max-width: 90vw;
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.media-viewer-media.hidden { display: none !important; }

.media-viewer-details {
    padding: 0.75rem 1rem;
    margin: 0 1rem 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    max-height: 12rem;
    overflow-y: auto;
}
.media-viewer-details.hidden { display: none !important; }
.media-viewer-details-inner { display: flex; flex-direction: column; gap: 0.35rem; }
.media-viewer-details .mv-detail-row { word-wrap: break-word; }
.media-viewer-details .mv-detail-label { font-weight: 600; margin-right: 0.35rem; opacity: 0.9; }
.media-viewer-details .mv-detail-prompt .mv-detail-prompt-text { display: block; margin-top: 0.2rem; white-space: pre-wrap; word-break: break-word; }
.media-viewer-details .mv-detail-show-more { margin-left: 0.5rem; padding: 0.2rem 0.5rem; font-size: 0.75rem; cursor: pointer; background: rgba(255,255,255,0.15); border: none; border-radius: 4px; color: inherit; }

.media-viewer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    padding: 0.5rem 1rem;
}
.media-viewer-hq-tip {
    flex: 1 0 100%;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 0 0.15rem;
    padding: 0 0.5rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
}
.media-viewer-actions .mv-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #1c1b1f; /* solid: a see-through button let the page's own buttons show through */
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
    white-space: nowrap;
}
.media-viewer-actions .mv-btn:hover {
    background: #2d2b31;
    border-color: rgba(255, 255, 255, 0.3);
}
.media-viewer-actions .mv-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.media-viewer-actions .mv-btn--primary {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-on-accent, #14110a); /* white on gold measured 2.3:1 */
}
.media-viewer-actions .mv-btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text-on-accent, #14110a);
}
.media-viewer-actions .mv-btn--subtle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.85rem;
    border-style: dashed;
}
.media-viewer-actions .mv-btn--subtle:hover {
    color: #fff;
}
.media-viewer-actions .mv-btn--danger:hover {
    background: rgba(239, 68, 68, 0.5);
    border-color: #f87171;
    color: #f87171;
}
.media-viewer-actions .mv-btn--good.active { background: rgba(200,164,92,0.18); border-color: var(--accent-primary); color: var(--accent-light); }
.media-viewer-actions .mv-btn--bad.active  { background: rgba(239,68,68,0.3); border-color: #ef4444; color: #f87171; }
.media-viewer-actions .mv-btn .spin-icon { animation: spin 1s linear infinite; }
.media-viewer-actions .mv-btn:disabled,
.media-viewer-actions .mv-btn[data-enhance-locked] {
    filter: grayscale(1) brightness(0.55); /* dimmed but not see-through */
    cursor: not-allowed;
    pointer-events: none;
}

/* Mobile: full width actions, stacked if needed */
@media (max-width: 600px) {
    .media-viewer-content { max-height: 60vh; }
    .media-viewer-actions { gap: 0.5rem; }
    .media-viewer-actions .mv-btn {
        font-size: 0.8rem;
        min-height: 44px;
        padding: 0.625rem 1rem;
    }
}

/* ============================================================================
   STEP-BASED FLOW
   ============================================================================ */
.step-flow-container {
    max-width: none;
    margin: 0;
    padding: 0;
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.step-progress {
    display: none;          /* hidden — re-enable when needed */
    justify-content: center;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 1rem);
    margin-bottom: var(--spacing-xl);
    padding: clamp(0.75rem, 2vw, 1.25rem);
    flex-wrap: wrap;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.step-progress-item {
    display: flex;
    align-items: center;
    gap: clamp(0.35rem, 1.5vw, 0.5rem);
    color: var(--text-muted);
    font-size: clamp(0.8rem, 2vw, 0.95rem);
    font-weight: 500;
    transition: all 0.3s ease;
}

.step-progress-item span {
    display: none;
}

@media (min-width: 640px) {
    .step-progress-item span {
        display: inline;
    }
}

.step-progress-item.active {
    color: var(--accent-primary);
}

.step-progress-item.completed {
    color: var(--success);
}

.step-progress-item-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    font-weight: 600;
    transition: all var(--transition-base);
}

.step-progress-item.active .step-progress-item-number {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--on-accent);
    box-shadow: 0 0 0 4px rgba(200, 164, 92, 0.22);
}

.step-progress-item.completed .step-progress-item-number {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.step-progress-connector {
    width: 40px;
    height: 2px;
    background: var(--border-color);
    transition: background var(--transition-base);
}

.step-progress-item.completed + .step-progress-connector {
    background: var(--success);
}

.step-container {
    position: relative;
    min-height: 400px;
}

.step {
    position: absolute;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    pointer-events: none;
    transition: all var(--transition-base);
}

.step.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: all;
    position: relative;
}

.step.exit-left {
    transform: translateX(-30px);
    opacity: 0;
}

.step.exit-right {
    transform: translateX(30px);
    opacity: 0;
}

.step-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    max-width: 900px;
    margin: 0 auto;
}

/* Blended view modifier: full-width content panels, minimal radius, no floating card look */
.view-blended {
    --card-radius: 0;
}
.view-blended .step-card {
    max-width: none;
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border-color);
    box-shadow: none;
    background: var(--bg-secondary);
}

/* Wizard + standalone image gen: premium raised panels */
.step-flow-container .step-card,
#step1b .step-card,
.imggen-standalone-container .step-card {
    max-width: 920px;
    margin: 0 auto;
    border-radius: var(--radius-xl);
    border: 1px solid var(--surface-border);
    border-top: 1px solid var(--surface-border-accent);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.15);
    background: var(--surface-raised);
    padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2rem);
}

.step-title {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.step-description {
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.step-description--subsection {
    margin-top: 1.25rem;
    margin-bottom: var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

/* Sit tight under step-description; absorb the description's bottom margin. */
#step1 .step-description {
    margin-bottom: 0.35rem;
}

.step-hq-tip {
    color: var(--text-muted);
    text-align: center;
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    line-height: 1.5;
    max-width: 600px;
    margin: 0 auto 0.5rem;
}

#step1 .step-1-layout {
    margin-top: var(--spacing-md);
}

/* Step 1: Starting frame (I2V) */
.step-1-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.step-1-alt-label {
    margin: 0;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 500;
}

.step-1-alt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.step-media-rights-note {
    max-width: 520px;
    margin: var(--spacing-md) auto 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    text-align: center;
}

.step-media-rights-note a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.step-1-option-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.step-1-option-primary.step-1-option-generate {
    width: 100%;
    min-height: 200px;
    background: linear-gradient(145deg, var(--cta-bg) 0%, #b8924a 100%);
    border: 1px solid rgba(22, 19, 12, 0.28);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 24px var(--accent-glow);
}

.step-1-option-primary.step-1-option-generate:hover {
    background: linear-gradient(145deg, var(--cta-bg-hover) 0%, var(--cta-bg) 100%);
    border-color: rgba(22, 19, 12, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 32px var(--accent-glow);
}

.step-1-option-primary .step-1-option-label,
.step-1-option-primary .step-1-option-subtitle {
    color: var(--on-accent);
}

.step-1-option-primary .step-1-option-subtitle {
    opacity: 0.88;
    max-width: 320px;
}

.step-1-option-primary .step-1-option-icon {
    background: rgba(22, 19, 12, 0.14);
}

.step-1-option-primary .step-1-option-icon svg,
.step-1-option-primary .step-1-option-icon i,
.step-1-option-primary .step-1-option-icon [data-lucide] {
    color: var(--on-accent);
    filter: none;
}

/* Recommended/credit badges on gold card — overrides come after .step-1-option-badge base (below) */

.step-1-option-secondary {
    min-height: 96px;
    padding: var(--spacing-md) var(--spacing-lg);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: var(--spacing-md);
    background: var(--bg-tertiary);
    border-style: solid;
    box-shadow: none;
}

.step-1-option-secondary:hover {
    border-color: var(--accent-primary);
    background: var(--accent-subtle);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.step-1-option-secondary .step-1-option-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin-bottom: 0;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    background: rgba(200, 164, 92, 0.12);
}

.step-1-option-secondary .step-1-option-label {
    font-size: 1rem;
    margin-bottom: 0;
}

.step-1-option-secondary .step-1-option-subtitle {
    font-size: 0.82rem;
    max-width: none;
}

.step-1-option-upload.step-1-option-secondary {
    border-style: dashed;
}

.step-1-option-upload.step-1-option-secondary.dragover {
    border-style: solid;
    transform: scale(1.01);
}

/* Step 1 library picker modal */
.step1-library-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 9050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}

.step1-library-picker-overlay.hidden {
    display: none !important;
}

.step1-library-picker {
    width: min(720px, 100%);
    max-height: min(85vh, 640px);
    max-height: min(85vh, 640px, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.step1-library-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-sm);
}

.step1-library-picker-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-primary);
}

.step1-library-picker-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.step1-library-picker-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.step1-library-picker-desc {
    margin: 0;
    padding: 0 var(--spacing-lg) var(--spacing-md);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.step1-library-picker-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: var(--spacing-md);
}

.step1-library-picker-loading,
.step1-library-picker-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    padding: var(--spacing-xl) var(--spacing-md);
    font-size: 0.95rem;
}

.step1-library-picker-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl) var(--spacing-md);
}

.step1-library-picker-empty-state .step1-library-picker-empty {
    padding: 0;
    margin: 0;
    max-width: 34rem;
}

.step1-library-picker-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
}

.step-1-option-upload.step-1-option-error {
    border-color: var(--error, #ef4444);
    background: var(--error-bg, rgba(239, 68, 68, 0.15));
}

.step-1-option-upload.step-1-option-error .step-1-option-subtitle {
    color: var(--error, #ef4444);
}

@media (max-width: 520px) {
    .step1-library-picker-empty-actions,
    .step1-library-picker-empty-actions .step-btn {
        width: 100%;
    }
}

.step1-library-picker-retry {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: var(--spacing-sm);
}

.step1-library-picker-item {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-primary);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-self: start;
    width: 100%;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.step1-library-picker-item:hover,
.step1-library-picker-item:focus-visible {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    outline: none;
}

/* Wrapper holds aspect ratio — never use raw image w/h (extreme thumbs become pills). */
.step1-library-picker-item-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    min-height: 120px;
    flex-shrink: 0;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
}

.step1-library-picker-item-media[data-aspect="landscape"] {
    aspect-ratio: 4 / 3;
}

.step1-library-picker-item-media[data-aspect="square"] {
    aspect-ratio: 1 / 1;
}

.step1-library-picker-item-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
    pointer-events: none;
}

.step1-library-picker-item-label {
    padding: 6px 8px;
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.step1-library-picker-footer {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0 var(--spacing-xs);
}

.step1-library-picker-count {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.step1-library-picker-load-more {
    min-width: 9rem;
    min-height: 44px;
}

/* Step 1: Image Selection (legacy grid — kept for extend overlays) */
.step-1-options-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.step-1-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-card) 100%);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    color: var(--text-primary);
    min-height: 240px;
    position: relative;
    gap: clamp(0.75rem, 2vw, 1rem);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto; /* Ensure clicks work */
    text-decoration: none; /* Remove underline if used as label */
    margin: 0; /* Remove default label margin */
}

/* Ensure label elements styled as step-1-option-card don't have default label styles */
label.step-1-option-card {
    display: flex; /* Override any default label display */
    border: 2px solid var(--border-color); /* Ensure border is preserved */
}

.step-1-option-upload {
    border-style: dashed;
}

.step-1-option-upload:hover {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(200, 164, 92, 0.08) 0%, rgba(200, 164, 92, 0.04) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 20px -5px rgba(200, 164, 92, 0.25);
}

.step-1-option-upload.dragover {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(200, 164, 92, 0.15) 0%, rgba(200, 164, 92, 0.08) 100%);
    transform: scale(1.01);
    border-style: solid;
    box-shadow: var(--glow-primary), var(--shadow-xl);
}

.step-1-option-generate {
    border-style: solid;
    position: relative;
}

.step-1-option-generate:hover {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(200, 164, 92, 0.08) 0%, rgba(200, 164, 92, 0.04) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 20px -5px rgba(200, 164, 92, 0.25);
}

.step-1-option-generate:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.step-1-option-generate:disabled::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: var(--radius-lg);
    pointer-events: none;
}

.step-1-option-icon {
    width: clamp(64px, 15vw, 80px);
    height: clamp(64px, 15vw, 80px);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    background: rgba(200, 164, 92, 0.08);
    padding: clamp(0.75rem, 3vw, 1.25rem);
}

.step-1-option-icon svg,
.step-1-option-icon i {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}

/* Lucide icon sizing */
.step-1-option-icon [data-lucide] {
    width: clamp(48px, 12vw, 64px) !important;
    height: clamp(48px, 12vw, 64px) !important;
    stroke-width: 1.5;
}

.step-1-option-upload .step-1-option-icon {
    color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(200, 164, 92, 0.15) 0%, rgba(200, 164, 92, 0.08) 100%);
}

.step-1-option-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(200, 164, 92, 0.1);
    border-color: var(--accent-primary);
}

.step-1-option-upload:hover .step-1-option-icon {
    transform: translateY(-3px) scale(1.1) rotate(5deg);
    color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(200, 164, 92, 0.25) 0%, rgba(200, 164, 92, 0.12) 100%);
}

.step-1-option-upload:hover .step-1-option-icon svg,
.step-1-option-upload:hover .step-1-option-icon i {
    filter: drop-shadow(0 4px 16px rgba(200, 164, 92, 0.45));
}

.step-1-option-upload:active {
    transform: translateY(-2px);
}

/* Disabled upload card — shown when email is not verified */
.step-1-option-upload.upload-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto; /* keep clickable so we can show the modal */
    filter: grayscale(0.4);
}
.step-1-option-upload.upload-disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-color);
    background: var(--bg-card);
}

.step-1-option-generate .step-1-option-icon {
    color: var(--text-muted);
    opacity: 0.5;
    background: rgba(156, 163, 175, 0.1);
}

.step-1-option-label {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.01em;
}

.step-1-option-subtitle {
    font-size: 0.95em;
    color: var(--text-secondary);
    line-height: 1.4;
    max-width: 200px;
}

.step-1-option-badge {
    position: absolute;
    top: clamp(0.75rem, 2vw, 1rem);
    right: clamp(0.75rem, 2vw, 1rem);
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: var(--radius-md);
    font-size: 0.7em;
    color: #fbbf24;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.step-1-option-badge--credit {
    background: linear-gradient(135deg, rgba(200, 164, 92, 0.2) 0%, rgba(200, 164, 92, 0.12) 100%);
    border-color: rgba(200, 164, 92, 0.3);
    color: var(--accent-primary);
}

/* Gold primary card badges — must follow base .step-1-option-badge (same single-class specificity) */
.step-1-option-primary .step-1-option-badge.step-1-option-badge--recommended {
    left: clamp(0.75rem, 2vw, 1rem);
    right: auto;
    background: #16130c;
    border: 1px solid rgba(245, 236, 216, 0.35);
    color: #f5ecd8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.step-1-option-primary .step-1-option-badge.step-1-option-badge--credit {
    background: rgba(22, 19, 12, 0.88);
    border: 1px solid rgba(245, 236, 216, 0.28);
    color: #f5ecd8;
}

.step-cta-credit-badge {
    margin-left: 0.25em;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--accent-primary);
}
.seed-modal-credit-badge {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--accent-primary);
}

/* Ensure consistent spacing and alignment */
.step-1-options-container > * {
    width: 100%;
}

/* Active state for upload option */
.step-1-option-upload:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(200, 164, 92, 0.15);
}

/* Legacy drag-drop-zone styles for backward compatibility */
.drag-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    background: var(--bg-tertiary);
    transition: all var(--duration-fast) var(--ease-out);
    cursor: pointer;
    margin-top: var(--spacing-lg);
}

.drag-drop-zone:hover {
    border-color: var(--accent-primary);
    background: rgba(200, 164, 92, 0.05);
    transform: translateY(-2px);
}

.drag-drop-zone.dragover {
    border-color: var(--accent-primary);
    background: rgba(200, 164, 92, 0.1);
    transform: scale(1.02);
    box-shadow: var(--glow-primary);
}

.drag-drop-zone-icon {
    font-size: 3em;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-md);
}

.drag-drop-zone-text {
    color: var(--text-primary);
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.drag-drop-zone-hint {
    color: var(--text-muted);
    font-size: 0.9em;
}

/* ======================================================================
   Step 1B: Image Generation Sub-Wizard
   ====================================================================== */

/* Header with back button */
.imggen-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

/* The page header already names this view. Keep internal transitions directional, not title-heavy. */
.imggen-header--compact {
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

/* Title and hint sit beside the back button: left-aligned, without the page-level description gap. */
.imggen-header .step-title,
.imggen-header .step-description {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
.imggen-header .step-description {
    margin-bottom: 0;
}

.imggen-flow-kicker {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.45;
}

.imggen-back-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 2px;
}

.imggen-back-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}
.imggen-back-btn.imggen-back-disabled,
.imggen-back-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.imggen-back-btn.imggen-back-disabled:hover,
.imggen-back-btn:disabled:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-subtle);
}

.imggen-step-indicator {
    margin-left: auto;
    font-size: 0.85em;
    color: var(--text-muted);
    white-space: nowrap;
    padding-top: 6px;
}

#imggenResults {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Mode Selection Cards */
.imggen-mode-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* four paths: an even 2 x 2 grid, no orphan card */
    gap: var(--spacing-lg);
}
@media (min-width: 1280px) {
    .imggen-mode-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.imggen-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 2rem);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-card) 100%);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    color: var(--text-primary);
    min-height: 180px;
    gap: var(--spacing-sm);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.imggen-mode-card:hover {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, var(--accent-subtle) 0%, rgba(200, 164, 92, 0.06) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 20px -5px rgba(200, 164, 92, 0.25);
}
@media (hover: none), (pointer: coarse) {
    .imggen-mode-card:hover {
        transform: none;
    }
    .imggen-mode-card:active {
        border-color: var(--accent-primary);
        background: var(--accent-subtle);
    }
}

.imggen-mode-card.active {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(200, 164, 92, 0.18) 0%, rgba(200, 164, 92, 0.08) 100%);
    box-shadow: var(--glow-primary);
}
.imggen-mode-card--primary {
    border-color: rgba(200, 164, 92, 0.7);
    background: linear-gradient(135deg, rgba(200, 164, 92, 0.16) 0%, var(--bg-card) 100%);
}

.imggen-mode-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-subtle);
    padding: 0.75rem;
    color: var(--accent-primary);
}

.imggen-mode-icon svg {
    width: 28px;
    height: 28px;
}

.imggen-mode-label {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--text-primary);
}

.imggen-mode-desc {
    font-size: 0.85em;
    color: var(--text-secondary);
}

/* Guided Builder */
.imggen-attr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    max-height: 400px;
    overflow-y: auto;
    padding-right: var(--spacing-xs);
}

.imggen-attr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    min-height: 80px;
    gap: var(--spacing-xs);
}

.imggen-attr-card:hover {
    border-color: var(--accent-primary);
    background: rgba(200, 164, 92, 0.06);
}

.imggen-attr-card.selected {
    border-color: var(--accent-primary);
    background: rgba(200, 164, 92, 0.12);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.imggen-attr-card.selected::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.75em;
    color: var(--accent-primary);
    font-weight: 700;
}

.imggen-attr-card {
    position: relative;
}

/* ── Thumbnail grid variant ─────────────────────────────────── */
.imggen-attr-grid--thumbs {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    max-height: 460px;
}

/* Card with thumbnail image */
.imggen-attr-card--has-thumb {
    padding: 0;
    overflow: hidden;
    justify-content: flex-start;
    min-height: auto;
}

.imggen-attr-card-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    pointer-events: none;
    user-select: none;
    background: var(--bg-secondary);
}

.imggen-attr-card--has-thumb .imggen-attr-card-label {
    padding: 6px 8px 8px;
    font-size: 0.8125rem;
    line-height: 1.2;
    width: 100%;
    text-align: center;
}

.imggen-attr-card-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.imggen-guided-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0 var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.imggen-quick-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.imggen-quick-toggle input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent-primary);
}

.imggen-all-options-link {
    background: none;
    border: none;
    color: var(--accent-primary);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.25rem 0;
}

.imggen-all-options-link:hover {
    color: var(--text-primary);
}

.imggen-guided-nav {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

@media (max-width: 600px) {
    .imggen-guided-nav {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .imggen-guided-nav .step-btn {
        flex: 1 1 140px;
        min-width: 0;
        padding-inline: var(--spacing-md);
    }
}

/* Custom Input */
.imggen-custom-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.imggen-prompt-textarea {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95em;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s;
}

.imggen-prompt-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(200, 164, 92, 0.15);
}

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

/* Describe: every image features a woman. Sits close under the box; a
   men-only description turns it into the calm note used for credits. */
.imggen-women-note {
    margin: calc(var(--spacing-sm) - var(--spacing-lg)) 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.imggen-women-note--alert {
    padding: 12px 14px;
    border: 1px solid var(--surface-border-accent, rgba(200, 164, 92, 0.35));
    border-radius: 10px;
    background: rgba(200, 164, 92, 0.06);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.imggen-custom-options {
    display: flex;
    align-items: center;
}

.imggen-enhance-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.imggen-enhance-toggle input[type="checkbox"] {
    display: none;
}

.imggen-enhance-slider {
    width: 40px;
    height: 22px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 11px;
    position: relative;
    transition: all 0.3s;
    flex-shrink: 0;
}

.imggen-enhance-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: all 0.3s;
}

.imggen-enhance-toggle input:checked + .imggen-enhance-slider {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.imggen-enhance-toggle input:checked + .imggen-enhance-slider::after {
    left: 20px;
    background: white;
}

.imggen-enhance-label {
    font-size: 0.9em;
    color: var(--text-primary);
}

.imggen-enhance-note {
    font-size: 0.85em;
    color: var(--text-muted);
}

/* Random Mode */
.imggen-random-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xl);
    padding: var(--spacing-md) 0 var(--spacing-lg);
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Preference row */
.imggen-pref-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.imggen-pref-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.imggen-pref-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
}

.imggen-pref-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.imggen-pref-pill {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.imggen-pref-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.imggen-pref-pill--selected {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--on-accent);
}

.imggen-pref-pill--selected:hover {
    background: var(--cta-bg-hover);
    border-color: var(--cta-bg-hover);
    color: var(--on-accent);
}

/* Unused legacy random styles (kept for backwards compat) */
.imggen-random-icon {
    display: none;
}

.imggen-random-text {
    color: var(--text-secondary);
    font-size: 1.05em;
}

/* Generate Button Variants */
.imggen-generate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-sm);
}

/* Surprise Me: same full-width button as Describe your character. */
.imggen-generate-btn--large {
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    align-self: stretch;
}

.imggen-random-hint {
    margin: calc(var(--spacing-sm) - var(--spacing-xl)) 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
}
.imggen-generate-btn--large svg {
    width: 24px !important;
    height: 24px !important;
}

/* Results Grid */
.imggen-batch-info {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary, #f5f5f5);
    border-radius: 8px;
    font-size: 0.9rem;
}
.imggen-batch-info-line { margin-bottom: 4px; }
.imggen-batch-info-meta { color: var(--text-muted); }
.imggen-batch-info-meta strong {
    color: var(--text-primary);
    font-weight: 650;
}
.imggen-batch-info-prompt { margin-top: 6px; }
.imggen-batch-info-prompt summary { cursor: pointer; color: var(--text-secondary); }
.imggen-batch-info-prompt-text {
    margin: 6px 0 0;
    padding: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.85rem;
    max-height: 120px;
    overflow-y: auto;
}
.imggen-batch-info-guided { margin-top: 8px; }
.imggen-batch-info-selections,
.imggen-batch-info-skipped {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 0.875rem;
}
.imggen-batch-info-skipped summary {
    width: fit-content;
    cursor: pointer;
    color: var(--text-muted);
    user-select: none;
}
.imggen-batch-info-skipped > div {
    margin-top: 6px;
    line-height: 1.45;
}
.imggen-batch-info-label {
    font-weight: 600;
    color: var(--text-primary);
}

.imggen-results-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: var(--spacing-lg);
}

/* -- Result card (per-image action buttons) -- */
.imggen-result-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    overflow: clip; /* a focused button can't scroll the card's contents out of line */
    border: 2px solid var(--border-color);
    transition: all 0.2s;
    aspect-ratio: 7 / 9;
    background: var(--bg-tertiary);
}
.imggen-variation-label {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    background: rgba(8, 8, 10, 0.72);
    color: rgba(255,255,255,0.86);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
}
.imggen-result-card:hover {
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.imggen-result-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.imggen-result-card img:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: -4px;
}
.imggen-result-card.imggen-result-card-loaded img {
    opacity: 1;
}
.imggen-result-card.imggen-result-card-error {
    border-color: rgba(239, 68, 68, 0.45);
}
.imggen-result-card.imggen-result-card-error::after {
    content: 'This picture didn\2019t load';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary, #a1a1aa);
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* Per-card loading overlay until image has loaded: spinner + "Loading" text */
.imggen-card-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: inherit;
}
.imggen-result-card.imggen-result-card-loaded .imggen-card-loading {
    display: none;
}
.imggen-card-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.imggen-card-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: imggen-card-spin 0.7s linear infinite;
}
.imggen-card-loading-text {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}
@keyframes imggen-card-spin {
    to { transform: rotate(360deg); }
}

/* Action overlay on result cards — always visible, slightly stronger contrast.
   The buttons share the card's width and shrink a little when there are more
   of them than fit (they used to spill past both sides and get cut off). */
.imggen-card-actions {
    position: absolute;
    bottom: 8px;
    left: 4px;
    right: 4px;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 5;
    opacity: 1;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.imggen-card-actions .gva-btn {
    flex: 0 1 44px;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.75);
}
.imggen-card-actions .gva-btn:hover {
    background: rgba(88, 166, 255, 0.4);
}
/* Saved state for save button */
.imggen-action-save.imggen-action-saved {
    background: rgba(34, 197, 94, 0.5);
    color: #4ade80;
    pointer-events: none;
}

/* Standalone image generation container */
.imggen-standalone-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
}
.imggen-standalone-container #step1b {
    display: block !important;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
/* Image gen step (mode select, Surprise Me, results): full width + padding so content doesn't touch edges */
#step1b .step-card {
    max-width: 920px;
    width: 100%;
    box-sizing: border-box;
}
#step1b.imggen-showing-results .step-card {
    max-width: none;
    width: 100%;
}

.imggen-standalone-container .imggen-header {
    width: 100%;
    max-width: none;
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
}
/* Standalone: all imggen sections (Surprise Me, Guided, Custom, Results) use full width */
.imggen-standalone-container .imggen-section {
    width: 100%;
    max-width: none;
}
.imggen-standalone-container #imggenRandom.imggen-section {
    width: 100%;
    max-width: none;
}
.imggen-standalone-container .imggen-random-content {
    width: 100%;
    max-width: none;
}
.imggen-standalone-container .step-description {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Skeleton Loading */
.imggen-results-loading {
    text-align: center;
}

.imggen-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: var(--spacing-lg);
}

.imggen-skeleton-card {
    aspect-ratio: 7 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
}

.imggen-skeleton-pulse {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, rgba(200, 164, 92, 0.08) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: imggen-pulse 1.5s ease-in-out infinite;
}

@keyframes imggen-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.imggen-loading-text {
    color: var(--text-secondary);
    font-size: 0.95em;
}

/* Failed batch card styles live with .imggen-batch-failed-banner above. */

/* Shown under Content on Describe and Edit when Create is pressed before a choice */
.imggen-content-required {
    margin: 6px 0 0;
    color: var(--color-error, #ef4444);
    font-size: 0.95em;
    font-weight: 600;
}

.imggen-content-required[hidden] {
    display: none;
}

/* Cycles "", ".", "..", "..." (steps(3) never reached the third dot, so the line read "images..") */
.imggen-loading-dots::after {
    content: '';
    display: inline-block;
    min-width: 1.2em;
    text-align: left;
    animation: imggen-dots 2s linear infinite;
}

@keyframes imggen-dots {
    0%, 24% { content: ''; }
    25%, 49% { content: '.'; }
    50%, 74% { content: '..'; }
    75%, 100% { content: '...'; }
}

@media (prefers-reduced-motion: reduce) {
    .imggen-loading-dots::after { animation: none; content: '\2026'; }
}

/* Results Actions */
.imggen-results-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}
.imggen-results-actions-hint {
    flex: 1 0 100%;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 640px) {
    .imggen-mode-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .imggen-mode-card {
        min-height: 0;
        padding: 1.15rem;
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 12px;
        text-align: left;
        align-items: center;
    }
    .imggen-mode-icon {
        grid-row: span 2;
        width: 36px;
        height: 36px;
        padding: 0.45rem;
    }
    .imggen-mode-icon svg { width: 20px; height: 20px; }
    .imggen-mode-label, .imggen-mode-desc { width: 100%; }
    .imggen-mode-desc { line-height: 1.35; }
    .imggen-guided-options {
        align-items: flex-start;
        flex-direction: column;
    }
    .imggen-attr-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    /* Phones: less side padding so "Create images · 4 credits" fits on one line. */
    .step-btn.imggen-generate-btn {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    /* Phones: the option cards scroll with the page instead of inside their own box. */
    .imggen-attr-grid,
    .imggen-attr-grid--thumbs {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
    .imggen-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .imggen-skeleton-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .imggen-card-actions {
        bottom: 6px;
        gap: 4px;
    }
    /* Phones: only the number, small, in the corner, so it stays off faces. */
    .imggen-variation-label {
        top: 5px;
        left: 5px;
        min-width: 22px;
        padding: 3px 6px;
        text-align: center;
        font-size: 0.68rem;
    }
    .imggen-variation-word {
        display: none;
    }
    /* Phones: the page frame already has side padding; a second layer here
       and wide card padding left two-column images about 130px wide. */
    .app-studio-frame .imggen-standalone-container {
        padding-left: 0;
        padding-right: 0;
    }
    .imggen-standalone-container .step-card {
        padding-left: 12px;
        padding-right: 12px;
    }
    .imggen-card-actions .gva-btn svg {
        width: 18px;
        height: 18px;
    }
    .imggen-card-actions .imggen-action-fb-up,
    .imggen-card-actions .imggen-action-fb-down {
        display: none;
    }
    .imggen-results-actions {
        flex-direction: column;
    }
    .imggen-results-actions-hint {
        order: 2;
    }
}

@media (min-width: 641px) and (max-width: 1100px) {
    .imggen-results-grid,
    .imggen-skeleton-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Pricing subtle feature lines */
.pricing-feature--subtle {
    opacity: 0.7;
    font-size: 0.9em;
}

/* Step 2: Upload Progress */
.upload-progress-container {
    text-align: center;
    padding: var(--spacing-xl);
}

.upload-progress-spinner {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.upload-progress-text {
    color: var(--text-primary);
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.upload-progress-percent {
    color: var(--accent-blue);
    font-size: 2em;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.upload-progress-hint {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 400;
    margin: 0 0 var(--spacing-md);
    opacity: 0.72;
    line-height: 1.35;
}

.upload-progress-patience {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 400;
    margin: var(--spacing-sm) 0 0;
    opacity: 0.82;
    line-height: 1.4;
}

.upload-progress-bar {
    width: 100%;
    max-width: 400px;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 0 auto;
}

.upload-progress-bar-fill {
    height: 100%;
    background: var(--accent-blue);
    transition: width var(--transition-base);
    border-radius: var(--radius-sm);
}

.upload-progress-spinner.is-paused {
    animation-play-state: paused;
    opacity: 0.45;
}

.upload-progress-bar-fill.is-active {
    transition: width 100ms linear;
}

.upload-progress-bar-fill.is-failed {
    background: var(--error-color, #e05252);
}

.wizard-upload-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 10, 0.82);
    border-radius: var(--radius-md);
}

.wizard-upload-overlay[hidden] {
    display: none !important;
}

.wizard-upload-overlay-card {
    width: min(100%, 420px);
    padding: var(--spacing-lg);
}

/* A failed or refused photo on the older photo step stays until one of these is tapped (main.js). */
.upload-progress-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

/* Step 3: Image Preview & Enhance */
.image-preview-container {
    position: relative;
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.image-preview-large {
    max-width: 100%;
    max-height: 500px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin: 0 auto var(--spacing-lg);
    border: 2px solid var(--border-color);
    animation: zoomIn var(--transition-base);
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.step-3-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.step-3-actions .step-btn {
    min-width: 140px;
}

/* Step 4: Quality Selection */
.quality-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.quality-card {
    position: relative;
    padding: var(--spacing-lg);
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
}
.quality-card-badge {
    margin-top: var(--spacing-sm);
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--radius-md);
    font-size: 0.75em;
    font-weight: 700;
}
.quality-card-badge--credit {
    background: linear-gradient(135deg, rgba(200, 164, 92, 0.2) 0%, rgba(200, 164, 92, 0.15) 100%);
    border: 1px solid rgba(200, 164, 92, 0.3);
    color: var(--accent-primary);
}

.quality-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.quality-card.selected {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.quality-card-label {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.quality-card-resolution {
    font-size: 0.9em;
    color: var(--text-muted);
}

/* Locked quality/model-tier cards (tier-gated) */
.quality-card.locked {
    opacity: 0.45;
    cursor: not-allowed;
    position: relative;
    user-select: none;
}
.quality-card.locked:hover {
    border-color: var(--border-color);
    transform: none;
    box-shadow: none;
}
.quality-card.locked.selected {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    box-shadow: none;
}
.locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72em;
    font-weight: 600;
    color: var(--accent-amber, #f59e0b);
    margin-top: 6px;
    letter-spacing: 0.02em;
}
.locked-badge svg {
    flex-shrink: 0;
}

/* Step 5: browse vs guided toggle */
.step5-mode-toggle {
    display: flex;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0 var(--spacing-lg);
    padding: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: fit-content;
    max-width: 100%;
}

.step5-mode-tab {
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}

.step5-mode-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.step5-mode-tab.active {
    background: var(--accent-primary);
    color: var(--on-accent);
    box-shadow: var(--shadow-sm);
}

.scene-card--optimized {
    border-color: var(--success);
}

/* Step 5: Scene Selection with Tabs */
.scene-selection-wrapper {
    margin-top: var(--spacing-lg);
}

.scene-tabs-primary {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
    overflow-x: auto;
}

.scene-tab-primary {
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    position: relative;
}

.scene-tab-primary:hover {
    color: var(--text-primary);
    background: rgba(59, 130, 246, 0.05);
}

.scene-tab-primary.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

.scene-tabs-category {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    overflow: visible;
    padding-bottom: var(--spacing-sm);
}

.scene-tab-category {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.scene-tab-category:hover {
    background: var(--bg-card);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.scene-tab-category.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--on-accent-blue);
}

.scene-search {
    margin-bottom: var(--spacing-lg);
}

.scene-search-input {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1em;
    transition: all var(--transition-fast);
}

.scene-search-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.scene-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.scene-btn {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    color: var(--text-primary);
    font-weight: var(--font-medium);
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.scene-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
}

.scene-btn.selected {
    background: var(--accent-primary);
    color: var(--on-accent);
    border-color: var(--accent-primary);
    box-shadow: var(--glow-primary), 0 0 0 2px rgba(200, 164, 92, 0.2);
}

.scene-btn.selected:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Scene picker cards (thumbnail + title + description) */
.scene-grid.scene-grid--cards {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: var(--spacing-md);
}

.scene-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    text-align: left;
    min-height: 0;
    position: relative;
    align-items: stretch;
    justify-content: flex-start;
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.scene-card:hover {
    background: var(--bg-card);
    transform: translateY(-2px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}

.scene-card.selected {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary), var(--glow-primary);
}

.scene-card.selected:hover {
    background: var(--bg-card);
    border-color: var(--accent-hover);
}

.scene-card-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    background: var(--bg-tertiary);
    flex-shrink: 0;
}

.scene-card-img--placeholder {
    background: linear-gradient(160deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}

.scene-card-body {
    padding: 10px 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.scene-card-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.scene-card-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scene-card-technical {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--text-muted, #8b949e);
    line-height: 1.35;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scene-preview-technical {
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: var(--text-muted, #8b949e);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    line-height: 1.4;
    word-break: break-word;
}

.scene-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--shadow-sm);
}

.scene-card-check::before {
    content: '✓';
}

.scene-card.selected .scene-card-check {
    opacity: 1;
}

/* Cards inherit .scene-btn — reset pill styles so thumbnails show correctly */
.scene-grid.scene-grid--cards .scene-card.scene-btn {
    padding: 0;
    text-align: left;
    min-height: 0;
    align-items: stretch;
    justify-content: flex-start;
}

.scene-grid.scene-grid--cards .scene-card.scene-btn.selected {
    background: var(--bg-card);
    color: var(--text-primary);
}

.scene-card--custom {
    border-style: dashed;
}

.scene-card--custom .scene-card-img--placeholder {
    background: linear-gradient(160deg, rgba(200, 164, 92, 0.08), var(--bg-secondary));
}

.scene-card--template {
    border-color: rgba(200, 164, 92, 0.45);
}

.scene-card--template .scene-card-badge-cat {
    background: rgba(200, 164, 92, 0.22);
}

.template-run-stop-bar {
    margin: var(--spacing-md) auto var(--spacing-lg);
    max-width: 640px;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: var(--radius-md);
    background: rgba(251, 191, 36, 0.08);
}

.template-run-stop-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.template-run-stop-checkbox {
    margin-top: 0.2em;
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    cursor: pointer;
    accent-color: #fbbf24;
}

.template-run-stop-text {
    font-size: 0.95em;
    line-height: 1.45;
    color: var(--text-primary);
}

.template-run-stop-hint {
    margin: var(--spacing-sm) 0 0 calc(1.1em + var(--spacing-sm));
    font-size: 0.85em;
    color: var(--text-secondary);
}

.template-run-stop-bar.is-confirmed {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.08);
}

.template-run-stop-bar.is-confirmed .template-run-stop-text {
    color: #86efac;
}

/* ── Scene Library (step 5) — Fable mockup parity ── */
.step-card-scene-selection.is-scene-library-browse #step6Title,
.step-card-scene-selection.is-scene-library-browse #step6Description {
    display: none;
}

.scene-library {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 88px;
}

.scene-library:has(#step5SuggestBlock.step5-suggest-block--visible) {
    padding-bottom: 128px;
}

.scene-library-head {
    text-align: center;
    padding: clamp(8px, 2vh, 24px) 0 8px;
}

.scene-library-eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-primary);
}

.scene-library-title {
    margin: 10px 0 6px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.65rem, 3.5vw, 2.35rem);
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.scene-library-sub {
    margin: 0 auto;
    max-width: 520px;
    color: var(--text-secondary);
    font-size: 14.5px;
    line-height: 1.5;
}

.scene-library-toolbar {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.scene-library-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.scene-library-search {
    position: relative;
    flex: 1;
    max-width: 460px;
    min-width: 200px;
}

.scene-library-search .lucide,
.scene-library-search svg {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.scene-library-search .scene-search-input {
    width: 100%;
    height: 42px;
    padding: 0 16px 0 38px;
    border-radius: var(--radius-full);
    font-size: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.scene-library-search .scene-search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.scene-library-sfw-toggle {
    display: flex;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 3px;
    flex-shrink: 0;
    border-bottom: none;
    margin-bottom: 0;
    overflow: visible;
}

.scene-library-sfw-toggle .scene-tab-primary {
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 500;
    border: none;
    border-bottom: none;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    background: transparent;
}

.scene-library-sfw-toggle .scene-tab-primary:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.scene-library-sfw-toggle .scene-tab-primary.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.scene-library-category-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scene-library-category-mobile {
    display: none;
}

.scene-library-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    overflow: visible;
    padding: 2px;
    margin-bottom: 0;
}

.scene-library-chips .scene-tab-category,
.scene-library-chips .scene-library-chip {
    flex-shrink: 0;
    height: 34px;
    padding: 0 15px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.15s var(--ease-out);
    cursor: pointer;
}

.scene-library-chips .scene-tab-category:hover,
.scene-library-chips .scene-library-chip:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.scene-library-chips .scene-tab-category.active,
.scene-library-chips .scene-library-chip.active {
    background: var(--accent-subtle);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.scene-library-chip-count {
    font-size: 11px;
    color: var(--text-muted);
}

.scene-library-chips .active .scene-library-chip-count {
    color: var(--accent-primary);
    opacity: 0.75;
}

.scene-library-count {
    margin: 4px 0 14px;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.scene-library-grid-section {
    margin-top: 4px;
}

.scene-library-grid-heading {
    margin: 0 0 2px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.scene-library-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 48px 16px;
}

.scene-library-empty-title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-secondary);
    margin: 0 0 6px;
}

.scene-grid.scene-grid--cards {
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 18px;
}

.scene-card-thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--bg-tertiary);
    flex-shrink: 0;
}

.scene-card-thumb::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 46%;
    background: linear-gradient(to top, rgba(10, 10, 11, 0.55), transparent);
    pointer-events: none;
}

.scene-card-thumb .scene-card-img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transition: transform 0.35s var(--ease-out), opacity 0.2s ease;
}

.scene-card-thumb:has(.scene-card-preview-video) .scene-card-img { object-fit: contain; transform: none; }

.scene-card-preview-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.2s ease;
    background: var(--bg-tertiary);
}

.scene-card-thumb.is-video-playing .scene-card-preview-video {
    opacity: 1;
}

.scene-card-thumb.is-video-playing .scene-card-img {
    opacity: 0;
}

.scene-card-thumb.is-video-playing::after {
    opacity: 0.35;
}

/* Touch: hint that thumbnail plays motion */
@media (hover: none) and (pointer: coarse) {
    .scene-card-thumb:has(.scene-card-preview-video)::before {
        content: "";
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 2;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(10, 10, 11, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpolygon points='9 6 18 12 9 18 9 6'/%3E%3C/svg%3E") center / 12px no-repeat;
        pointer-events: none;
    }
    .scene-card-thumb.is-video-playing::before {
        opacity: 0;
    }
}

.scene-card:hover .scene-card-thumb .scene-card-img {
    transform: scale(1.045);
}

.scene-card-badge-cat {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-primary);
    background: rgba(10, 10, 11, 0.65);
    backdrop-filter: blur(4px);
    padding: 4px 9px;
    border-radius: var(--radius-full);
}

.scene-card-check {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--on-accent);
    opacity: 0;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-md);
}

.scene-card.selected .scene-card-check {
    opacity: 1;
}

.scene-library-bar {
    position: fixed;
    left: var(--sidebar-width, 54px);
    right: 0;
    bottom: 0;
    z-index: 240;
    pointer-events: none;
    background: rgba(17, 17, 19, 0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
    padding: 12px clamp(16px, 4vw, 48px);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translateY(102%);
    transition: transform 0.22s var(--ease-out);
}

.scene-library-bar.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}

/* Guided mode has its own Continue action; never leak the browse-mode dock beneath it. */
#step5 .step-card-scene-selection:not(.is-scene-library-browse) .scene-library-bar {
    display: none !important;
}

.scene-library-bar-thumb {
    width: 40px;
    height: 52px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.scene-library-bar-info {
    min-width: 0;
    flex: 1;
}

.scene-library-bar-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.scene-library-bar-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.scene-library-bar-clear {
    height: 42px;
    padding: 0 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.scene-library-bar-clear:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.scene-library-bar-continue {
    height: 42px;
    padding: 0 24px;
    border-radius: var(--radius-md);
    background: var(--accent-primary);
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 10px var(--accent-glow);
}

.scene-library-bar-continue:hover {
    background: var(--accent-hover);
}

body.scene-library-bar-open #step5 .step-actions {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

body.scene-library-bar-open #continueFromSceneBtn {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.scene-preview-error-hint {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .scene-library-bar {
        left: 0;
    }
    .scene-grid.scene-grid--cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 11px;
    }
    .scene-library-search-row {
        flex-direction: column;
        align-items: stretch;
    }
    .scene-library-search {
        max-width: none;
        flex-basis: 100%;
    }
}

.scene-category-section {
    margin-bottom: var(--spacing-lg);
}

.scene-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: var(--spacing-sm);
}

.scene-category-header:hover {
    background: var(--bg-card);
}

.scene-category-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1em;
}

.scene-category-toggle {
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.scene-category-header.collapsed .scene-category-toggle {
    transform: rotate(-90deg);
}

.scene-category-content {
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.scene-category-content.collapsed {
    max-height: 0;
}

/* Hidden utility class */
.hidden {
    display: none !important;
}

/* Generating/Wait View */
.generating-view {
    padding: var(--spacing-xl);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    animation: fadeIn 0.3s ease;
}

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

.generating-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.generating-header {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.generating-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: 2em;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
}

.generating-title-icon {
    width: 1.15em;
    height: 1.15em;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.generating-subtitle {
    font-size: 1.1em;
    color: var(--text-secondary);
}

.generating-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    justify-content: center;
    align-items: flex-start;
}

.generating-detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 200px;
}

.generating-detail-item-full {
    min-width: 100%;
    width: 100%;
}

.generating-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.generating-detail-label {
    font-size: 0.9em;
    color: var(--text-secondary);
    font-weight: 500;
    flex-shrink: 0;
}

.generating-detail-value {
    font-size: 1.1em;
    color: var(--text-primary);
    font-weight: 600;
}

.generating-detail-prompt-box {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.95em;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
    margin-top: var(--spacing-xs);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    cursor: text;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.generating-detail-prompt-box::-webkit-scrollbar {
    width: 6px;
}

.generating-detail-prompt-box::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
}

.generating-detail-prompt-box::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: var(--radius-sm);
}

.generating-detail-prompt-box::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.generating-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.85em;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.generating-copy-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    transform: translateY(-1px);
}

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

.generating-copy-btn.copied {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--success);
    color: var(--success);
}

.generating-copy-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.generating-copy-text {
    font-weight: 500;
}

.generating-polish-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.9em;
    font-weight: 600;
}

.generating-polish-badge.polish-enabled {
    background: rgba(200, 164, 92, 0.18);
    color: var(--accent-light);
}

.generating-polish-badge.polish-disabled {
    background: rgba(100, 116, 139, 0.2);
    color: var(--text-muted);
}

.generating-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.generating-animation[style*="display: none"] {
    display: none !important;
}

.generating-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.generating-status-text {
    font-size: 1.1em;
    color: var(--text-secondary);
    font-weight: 500;
}

.generating-history-container {
    margin-top: var(--spacing-xl);
}

.generating-history-container-title {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    padding: 0;
    border: none;
}

.generating-history {
    max-height: 600px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
}

.generating-history-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
}

.generating-history-item-current {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.generating-history-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.generating-history-title {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-primary);
}

.generating-history-meta {
    font-size: 0.9em;
    color: var(--text-muted);
}

.generating-history-settings {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
    line-height: 1.4;
}

.generating-history-seed {
    font-size: 0.9em;
    color: var(--accent-blue-light);
    font-family: 'Courier New', monospace;
    margin-bottom: var(--spacing-sm);
}

.generating-history-image {
    margin: var(--spacing-md) 0;
}

.generating-history-image img {
    max-width: 100%;
    max-height: 400px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.generating-history-video {
    margin: var(--spacing-md) 0;
}

.generating-history-video video {
    max-width: 100%;
    max-height: 500px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.generating-history-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    text-align: center;
}

.generating-history-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.generating-history-loading p {
    color: var(--text-secondary);
    font-size: 1em;
    margin: 0;
}

/* Custom Input Tab */
.custom-input-container {
    padding: var(--spacing-lg);
}

.custom-input-workflow-label {
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
}

.custom-input-workflow-buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.custom-input-workflow-btn.active {
    border-color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.15);
}

.custom-input-prompt-wrap {
    margin-bottom: var(--spacing-md);
}

.custom-input-prompt-field {
    position: relative;
}

.custom-input-prompt-field .custom-input-textarea {
    padding-right: 6.5rem;
    padding-bottom: 3rem;
    margin-bottom: 0;
}

.custom-input-stt-controls {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    pointer-events: none;
}

.custom-input-stt-controls > * {
    pointer-events: auto;
}

.custom-input-stt-mic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(128, 128, 128, 0.35);
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.custom-input-stt-mic:hover {
    background: rgba(128, 128, 128, 0.5);
}

.custom-input-stt-mic:active {
    transform: scale(0.96);
}

.custom-input-prompt-wrap--recording .custom-input-stt-mic {
    background: rgba(239, 68, 68, 0.45);
    animation: custom-input-stt-pulse 1.2s ease-in-out infinite;
}

@keyframes custom-input-stt-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

.custom-input-stt-stop {
    padding: 6px 12px;
    font-size: 0.85em;
    font-family: inherit;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.custom-input-stt-stop:hover {
    border-color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.08);
}

.custom-input-textarea {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1em;
    font-family: inherit;
    resize: vertical;
    min-height: 150px;
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-fast);
}

.custom-input-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-input-scene-match {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: -0.5rem 0 var(--spacing-md);
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: var(--radius-md);
    background: rgba(59, 130, 246, 0.08);
    font-size: 0.92em;
    color: var(--text-secondary);
}

.custom-input-scene-match.hidden {
    display: none;
}

.custom-input-scene-match-text {
    flex: 1 1 12rem;
    color: var(--text-primary);
}

.custom-input-scene-match-conf {
    color: var(--text-secondary);
    font-size: 0.9em;
}

.custom-input-scene-match-loading {
    color: var(--text-secondary);
    font-style: italic;
}

.custom-input-scene-match-use {
    flex: 0 0 auto;
    padding: 0.35rem 0.75rem;
    font-size: 0.85em;
}

/* Advanced settings (node 405) - collapsible */
.advanced-settings-details {
    margin-top: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.advanced-settings-summary {
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    font-weight: 500;
    list-style: none;
    user-select: none;
}

.advanced-settings-summary::-webkit-details-marker { display: none; }

.advanced-settings-summary::before {
    content: '▶';
    display: inline-block;
    margin-right: var(--spacing-sm);
    transition: transform var(--transition-fast);
}

.advanced-settings-details[open] .advanced-settings-summary::before {
    transform: rotate(90deg);
}

.advanced-settings-panel {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.advanced-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.advanced-settings-grid .checkbox-label { margin: 0; }

.advanced-settings-selects {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.advanced-settings-label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: 0.9em;
    color: var(--text-secondary);
}

.advanced-settings-label select,
.advanced-settings-label input[type="number"] {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    min-width: 160px;
}

.advanced-settings-label input[type="number"] {
    min-width: 80px;
}

/* Navigation Buttons */
.step-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-xl);
    gap: var(--spacing-md);
}

.step-btn {
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Primary CTA — editorial gold (Fable design system) */
.step-btn-primary {
    background: var(--cta-bg);
    color: var(--on-accent);
    box-shadow: 0 2px 10px var(--accent-glow);
}

.step-btn-primary:not(:disabled) {
    opacity: 1;
    background: var(--cta-bg);
    color: var(--on-accent);
}

.step-btn-primary:hover:not(:disabled) {
    background: var(--cta-bg-hover);
    color: var(--on-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--accent-glow);
    opacity: 1;
}

.step-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    opacity: 1;
    background: var(--cta-bg-active);
    color: var(--on-accent);
}

.step-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.step-btn-secondary:hover:not(:disabled) {
    background: var(--bg-card);
    border-color: var(--accent-blue);
}

#resetImageBtn {
    border-color: var(--text-muted);
}

#resetImageBtn:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error);
    color: var(--error);
}

/* Disabled state: greyed out, no pointer */
.step-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Enabled step buttons: full opacity, vibrant */
.step-btn:not(:disabled) {
    opacity: 1;
    pointer-events: auto;
}

/* Wizard continue buttons: gold CTA when enabled (never grey) */
#continueFromPreviewBtn:not(:disabled),
#continueFromQualityBtn:not(:disabled),
#continueFromSceneBtn:not(:disabled) {
    opacity: 1;
    background: var(--cta-bg) !important;
    color: var(--on-accent) !important;
    cursor: pointer;
    box-shadow: 0 2px 10px var(--accent-glow);
}
#continueFromPreviewBtn:not(:disabled):hover,
#continueFromQualityBtn:not(:disabled):hover,
#continueFromSceneBtn:not(:disabled):hover {
    background: var(--cta-bg-hover) !important;
    color: var(--on-accent) !important;
    box-shadow: 0 4px 14px var(--accent-glow);
}

/* Scene actions must not resemble an enabled purchase/generation action before a selection. */
#continueFromSceneBtn:disabled,
.extend-flow-continue:disabled {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color);
    box-shadow: none !important;
    opacity: 0.72;
}

/* Enhance Image — enabled/disabled handled by JS via the disabled attribute */
#enhanceImageBtn {
    position: relative;
}
#enhanceImageBtn.enhanced-done {
    opacity: 0.7;
    cursor: default;
    pointer-events: none;
    border-color: rgba(200, 164, 92, 0.5);
    color: var(--accent-light);
}

.image-preview-container.image-preview-enhanced {
    border: 2px solid rgba(200, 164, 92, 0.55);
    border-radius: 12px;
    padding: 0.5rem;
    background: rgba(200, 164, 92, 0.08);
}

.image-enhanced-badge {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent-light);
    background: rgba(200, 164, 92, 0.2);
    border-radius: 6px;
}

.generation-enhanced-badge,
.generation-enhanced-inline {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent-light);
    margin-left: 0.35rem;
}

.enhance-btn-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.generation-enhanced-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--on-accent);
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-primary) 100%);
    border-radius: var(--radius-sm);
}

.btn-add-audio {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-primary) 100%);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.95em;
    transition: all var(--transition-fast);
    font-weight: 600;
    box-shadow: 0 2px 10px var(--accent-glow);
    position: relative;
    overflow: hidden;
    justify-content: center;
}

.btn-add-audio::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-add-audio:hover:not(:disabled)::before {
    left: 100%;
}

.btn-add-audio:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-active) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--accent-glow);
}

.btn-add-audio:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.generation-audio-label {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--accent-light);
    font-size: 0.9em;
    font-weight: 600;
}

.generation-top-actions .btn-add-audio {
    flex: 0 0 auto;
    min-width: unset;
}

.btn-enhance-video {
    margin-left: 0.35rem;
}

/* ============================================================================
   FORM ELEMENTS (Legacy Support)
   ============================================================================ */
.new-session-form-container {
    max-width: 960px;
    margin: var(--spacing-xl) auto;
    padding: 0 var(--spacing-xl);
}

.form-preview-row {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
    margin-bottom: var(--spacing-xl);
}

.form-group-preview {
    flex: 1 1 58%;
    min-width: 280px;
    margin-bottom: 0;
}

.form-settings-column {
    flex: 0 1 380px;
    overflow-y: auto;
    max-height: min(75vh, 720px);
}

.form-group {
    margin-bottom: var(--spacing-xl);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1em;
}

input[type="file"] {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    cursor: pointer;
    color: var(--text-primary);
    transition: all var(--duration-fast) var(--ease-out);
}

/* The picker button inside file inputs rendered as a plain white browser button. */
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-elevated, var(--bg-secondary));
    color: var(--text-primary);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--accent-primary); }

input[type="file"]:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}

input[type="file"]:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.image-preview {
    margin-top: var(--spacing-md);
    text-align: center;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

.image-preview:empty {
    border: 2px dashed var(--text-muted);
}

.image-preview img {
    max-width: 100%;
    max-height: 520px;
    width: auto;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.quality-buttons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.quality-btn {
    flex: 1;
    min-width: 100px;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.9em;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-primary);
    font-weight: 500;
}

.quality-btn:hover {
    background: var(--bg-card);
    border-color: var(--accent-blue);
}

.quality-btn.selected {
    background: var(--accent-blue);
    color: var(--on-accent-blue);
    border-color: var(--accent-blue);
}

.required {
    color: var(--error);
    font-weight: 600;
}

.error-message {
    color: var(--error);
    font-size: 0.9em;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid var(--error);
    border-radius: var(--radius-sm);
}

.error-message.hidden {
    display: none;
}

.submit-btn {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--accent-blue);
    color: var(--on-accent-blue);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.submit-btn:hover:not(:disabled) {
    background: var(--accent-blue-hover);
    color: var(--on-accent-blue-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.submit-btn:disabled {
    background: var(--bg-tertiary);
    cursor: not-allowed;
    color: var(--text-muted);
    opacity: 0.6;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-blue);
}

/* ============================================================================
   SESSION HISTORY
   ============================================================================ */
.session-history {
    flex: 1;
    padding: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.generation-item {
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--border-color);
    animation: fadeInUp 0.3s ease-out;
}

.generation-item:first-child {
    border-top: none;
    padding-top: 0;
}

/* Load more older generations (session history windowing) */
.session-history-older {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--spacing-lg);
}

.session-history-btn-row {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
}

.btn-load-more-generations {
    align-self: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid rgba(200, 164, 92, 0.35);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.btn-load-more-generations:hover:not(:disabled) {
    background: rgba(200, 164, 92, 0.08);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.btn-load-more-generations:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
/* These sit inside .action-btn rows, which paint every button solid gold: keep them secondary. */
.btn-load-more-generations.action-btn {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, transparent);
    color: var(--text-primary);
    white-space: nowrap;
}
.btn-load-more-generations.action-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}
/* "Play video" under a not-yet-loaded clip had no style at all (plain white browser button). */
.btn-retry-video-load {
    display: block;
    margin: 10px auto 0;
    padding: 8px 18px;
    min-height: 40px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}
.btn-retry-video-load:hover { border-color: var(--accent-primary); }
/* Before a clip loads, "Play video" sits on the player itself, the only play control
   (the player's own bar appears once it loads). */
.generation-video .generation-video-load {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 10px 22px;
    min-height: 48px;
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-weight: 600;
    z-index: 2;
}
.generation-video .generation-video-load[hidden] { display: none; }


.session-overrides.hidden {
    display: none;
}

.generation-header {
    margin-bottom: 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.generation-title {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.01em;
    flex: 1;
}

.generation-origin-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: 0.16em;
    margin-left: 0.35rem;
    padding: 2px 7px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.58em;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.generation-version-badge,
.generation-current-version-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: 0.16em;
    margin-left: 0.35rem;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.58em;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.generation-version-badge {
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.035);
}

.generation-current-version-badge {
    border: 1px solid rgba(231, 179, 65, 0.48);
    color: #f1cf79;
    background: rgba(231, 179, 65, 0.12);
}

.generation-item.is-current-version {
    border-color: rgba(231, 179, 65, 0.42);
    box-shadow: 0 0 0 1px rgba(231, 179, 65, 0.08), 0 18px 42px rgba(0, 0, 0, 0.18);
}

.generation-meta {
    font-size: 0.9em;
    color: var(--text-muted);
    white-space: nowrap;
    margin-top: 2px;
}

.initial-image-settings {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

/* Suggested next (scene style actions from suggest-next API) */
.suggested-next-wrapper {
    margin-top: var(--spacing-md);
}
.suggested-next-wrapper .generation-header {
    margin-bottom: var(--spacing-sm);
}
.suggested-next-content {
    font-size: 0.95em;
}
.suggested-next-loading,
.suggested-next-empty {
    color: var(--text-muted);
}
.scene-picker-state {
    min-height: 112px;
    width: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-alt, rgba(255,255,255,0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    text-align: left;
    box-sizing: border-box;
}
.scene-picker-state.is-error { border-color: rgba(239, 68, 68, 0.45); }
.scene-picker-state-title { margin: 0; color: var(--text-primary); font-weight: 650; }
.scene-picker-state-detail { margin: 0.25rem 0 0; color: var(--text-secondary); font-size: 0.875rem; }
.scene-picker-state .scene-picker-retry { width: auto; margin-left: auto; flex: 0 0 auto; }
.scene-picker-state-spinner {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: guided-image-suggest-spin 0.8s linear infinite;
}
.suggested-next-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}
.suggested-next-card {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: var(--spacing-sm);
    background: var(--surface-alt, rgba(255,255,255,0.06));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 6px);
    width: 168px;
    max-width: 168px;
    min-width: 0;
    overflow: hidden;
    cursor: default;
    text-align: left;
}
.suggested-next-card-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: calc(var(--radius-md, 6px) - 2px);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}
.suggested-next-card.guided-suggestion-card {
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.suggested-next-card.guided-suggestion-card:hover {
    border-color: var(--accent-color);
    background: var(--surface-hover, rgba(255,255,255,0.08));
}
.suggested-next-card.selected,
.suggested-next-card.guided-suggestion-card.selected {
    border-color: var(--accent-color);
    border-width: 2px;
    background: rgba(200, 164, 92, 0.12);
}
/* Session view "Suggested next" cards: clickable, same affordance as guided */
.suggested-next-card.session-suggestion-card {
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.suggested-next-card.session-suggestion-card:hover {
    border-color: var(--accent-color);
    background: var(--surface-hover, rgba(255,255,255,0.08));
}
.suggested-next-card-title {
    font-weight: 600;
    color: var(--text-primary);
    min-height: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    word-break: break-word;
    line-height: 1.3;
}
.suggested-next-card-credit {
    flex-shrink: 0;
    align-self: center;
    display: inline-block;
    margin-top: 0.25rem;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 0.7em;
    font-weight: 700;
}
.suggested-next-card-credit.step-1-option-badge--credit {
    border: 1px solid rgba(200, 164, 92, 0.3);
}
.suggested-next-card-reason {
    font-size: 0.78em;
    color: var(--text-muted);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    word-break: break-word;
}

/* Step 5: Choose experience (Guided | Advanced) */
.experience-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
}
.experience-choice-card {
    padding: var(--spacing-lg);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md, 6px);
    background: var(--surface-alt, rgba(255,255,255,0.06));
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.experience-choice-card:hover {
    border-color: var(--accent-color);
    background: var(--surface-hover, rgba(255,255,255,0.08));
}
.experience-choice-card.selected {
    border-color: var(--accent-color);
    background: rgba(200, 164, 92, 0.12);
}
.experience-choice-card .card-title,
.experience-choice-card .experience-choice-title {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}
.experience-choice-card .card-desc,
.experience-choice-card .experience-choice-desc {
    font-size: 0.95em;
    color: var(--text-secondary);
    line-height: 1.35;
}
/* Step 5: higher contrast so 40+ users can scan quickly */
#step5 .step-description {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.scene-library .step5-suggest-block,
.step-card > .step5-suggest-block {
    margin-top: var(--spacing-xl, 1.75rem);
    padding: var(--spacing-md, 1rem) var(--spacing-md, 1rem) var(--spacing-sm, 0.75rem);
    border: 1px solid rgba(200, 164, 92, 0.22);
    border-radius: var(--radius-lg, 12px);
    background: linear-gradient(180deg, rgba(200, 164, 92, 0.08) 0%, rgba(200, 164, 92, 0.03) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.step5-suggest-block--secondary .generation-item-suggest-initial {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.step5-suggest-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-full);
    background: rgba(200, 164, 92, 0.18);
    color: var(--accent-light);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.scene-library .step5-suggest-block .generation-header,
.step-card > .step5-suggest-block .generation-header {
    flex-direction: column;
    align-items: stretch;
    border-bottom: none;
    margin-bottom: 0.5rem;
    padding-bottom: 0;
}

.generation-item-suggest-initial {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.step5-suggest-block .suggested-next-cards,
.step5-suggest-cards-compact {
    margin-top: var(--spacing-sm);
}

.step5-suggest-cards-compact .suggested-next-card {
    width: 148px;
    max-width: 148px;
    background: rgba(0, 0, 0, 0.18);
    border-color: rgba(200, 164, 92, 0.28);
}

#step5 .experience-choice-card .experience-choice-title {
    font-size: 1.15rem;
    color: var(--text-primary);
}
#step5 .experience-choice-card .experience-choice-desc {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Step 6: Guided suggestions vs Advanced (tabs) */
.scene-tabs-experience {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}
.scene-tabs-experience .tab-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95em;
}
.scene-tabs-experience .tab-btn:hover {
    color: var(--text-primary);
}
.scene-tabs-experience .tab-btn.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}
.guided-suggestions-wrapper .suggested-next-cards {
    margin-top: var(--spacing-sm);
}

/* Guided: suggest from image (step 6) */
.guided-image-suggest-wrap {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color, #333);
}
.guided-image-suggest-prompt {
    margin-bottom: var(--spacing-sm);
    font-size: 0.95em;
    color: var(--text-secondary, #aaa);
}
.guided-image-suggest-status {
    display: inline-block;
    margin-top: var(--spacing-sm);
    font-size: 0.9em;
}
.guided-image-suggest-status.error {
    color: var(--error-color, #f87171);
}
.guided-image-suggest-results {
    margin-top: var(--spacing-sm);
}
.guided-image-suggest-results .suggested-next-cards {
    margin-top: var(--spacing-xs);
}

/* Overlay + spinner while image analysis runs (covers step 6 card, blocks clicks) */
#step6 .step-card {
    position: relative;
}
.guided-image-suggest-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: inherit;
    pointer-events: auto;
}
.guided-image-suggest-overlay.hidden {
    display: none;
}
.guided-image-suggest-overlay:not(.hidden) {
    display: flex;
}
.guided-image-suggest-spinner-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text-primary);
}
.guided-image-suggest-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #333);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: guided-image-suggest-spin 0.8s linear infinite;
}
@keyframes guided-image-suggest-spin {
    to { transform: rotate(360deg); }
}
.guided-image-suggest-overlay-text {
    font-size: 0.95rem;
}
.guided-image-suggest-overlay-hint {
    font-size: 0.8rem;
    opacity: 0.85;
}

/* Guided: interest picker (What are you generally interested in?) */
.guided-interest-section .guided-interest-prompt {
    margin-bottom: var(--spacing-md);
    font-size: 1em;
    color: var(--text-primary);
}
.guided-interest-categories {
    margin-bottom: var(--spacing-md);
}
.guided-interest-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}
.guided-interest-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md, 6px);
    background: var(--surface-alt, rgba(255,255,255,0.06));
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.95em;
    transition: border-color 0.2s, background 0.2s;
}
.guided-interest-btn:hover {
    border-color: var(--accent-color);
    background: var(--surface-hover, rgba(255,255,255,0.08));
}
.guided-interest-btn .guided-interest-label {
    font-weight: 500;
}
/* Visual interest cards: image + label (constrain size; B2 proxy serves full-size image) */
.guided-interest-btn .guided-interest-card-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 140px;
    max-height: 140px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-sm, 4px);
    margin-bottom: var(--spacing-xs);
    background: var(--surface-alt, rgba(0,0,0,0.2));
}
.guided-interest-btn:has(.guided-interest-card-img) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 140px;
    max-width: 180px;
    width: 180px;
    padding: var(--spacing-sm);
    text-align: center;
    overflow: hidden;
}
.guided-interest-btn:has(.guided-interest-card-img) .guided-interest-label {
    font-size: 0.9rem;
    line-height: 1.25;
}
.guided-change-interest {
    margin: 0 0 0 auto;
    width: auto;
    min-width: max-content;
}
.guided-suggestions-section {
    margin-top: var(--spacing-sm);
}
.guided-selection-context {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

/* Selected interest: show chosen card image + label above suggestions */
.guided-selected-interest {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-md, 6px);
    background: var(--surface-alt, rgba(255,255,255,0.06));
    border: 1px solid var(--border-color);
}
.guided-selected-interest.hidden {
    display: none;
}
.guided-selected-interest-img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: var(--radius-sm, 4px);
    background: var(--surface-alt, rgba(0,0,0,0.2));
}
.guided-selected-interest-img[hidden] {
    display: none;
}
.guided-selected-interest .guided-interest-label {
    display: block;
    font-weight: 500;
    font-size: 0.95em;
    color: var(--text-primary);
}
.guided-selected-interest-eyebrow {
    display: block;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.generation-settings-chosen {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

.generation-post-process-errors {
    margin: var(--spacing-sm) 0 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--error-border, var(--error));
    background: var(--error-bg);
    font-size: var(--text-sm);
    color: var(--error-text, var(--error));
}

.generation-post-process-errors p {
    margin: 0;
}

.generation-post-process-errors p + p {
    margin-top: var(--spacing-xs);
}

.generation-custom-prompt {
    margin: var(--spacing-sm) 0;
    font-size: 0.9em;
}

.generation-custom-prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.generation-custom-prompt-label {
    font-weight: 600;
    color: var(--accent-blue-light);
}

.generation-custom-prompt .btn-copy-prompt {
    flex-shrink: 0;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.85em;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.generation-custom-prompt .btn-copy-prompt:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.generation-custom-prompt-box {
    font-size: 0.9em;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-blue);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

.generation-polish-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.85em;
    margin-top: var(--spacing-xs);
}

.generation-polish-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.generation-polish-value {
    font-weight: 600;
}

.generation-polish-value.polish-used {
    color: var(--success);
}

.generation-polish-value.polish-not-used {
    color: var(--text-muted);
}

.generation-seed {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.85em;
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.generation-seed-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.generation-seed-value {
    color: var(--accent-blue-light);
    font-weight: 600;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

.generation-seed-source {
    color: var(--text-muted);
    font-size: 0.85em;
    font-weight: 400;
    font-family: inherit;
    margin-left: var(--spacing-xs);
}

.generation-video {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    position: relative;
}

.generation-video video {
    max-width: 100%;
    max-height: 600px;
    width: 100%;
    height: auto;
    /* Keep the player's box while the poster loads (it is 1px tall until then and
       the download/rate/flag buttons spill over the text below). */
    aspect-ratio: auto 9 / 16;
    border-radius: var(--radius-lg);
    background: #000;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    display: block;
    object-fit: contain;
}

/* --- Video Action Buttons Overlay (download, feedback, refund) --- */
.generation-video-actions {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.generation-video:hover .generation-video-actions,
.generation-video-actions:focus-within {
    opacity: 1;
    pointer-events: auto;
}
/* On touch devices always show the buttons */
@media (hover: none) {
    .generation-video-actions {
        opacity: 1;
        pointer-events: auto;
    }
}
.gva-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    padding: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.gva-btn:hover {
    background: rgba(88, 166, 255, 0.35);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(88, 166, 255, 0.4);
}
.gva-btn:active {
    transform: scale(0.95);
}
.gva-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.gva-btn.gva-feedback--rated-good {
    background: rgba(34, 197, 94, 0.5);
    color: #4ade80;
}
.gva-btn.gva-feedback--rated-bad {
    background: rgba(239, 68, 68, 0.5);
    color: #f87171;
}
.gva-btn.gva-refund--pending {
    background: rgba(250, 204, 21, 0.4);
    color: #fde047;
}
.gva-btn.gva-refund--approved {
    background: rgba(34, 197, 94, 0.4);
    color: #4ade80;
}
.gva-btn.gva-refund--denied {
    background: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

/* Feedback popup (thumbs up/down) */
.gva-feedback-popup {
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    background: var(--bg-card, #1a1f2e);
    border: 1px solid var(--border-color, #2d3548);
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 180px;
    z-index: 20;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.gva-feedback-popup h4 {
    font-size: 0.8rem;
    color: #8b949e;
    margin: 0 0 10px;
    text-align: center;
    font-weight: 500;
}
.gva-feedback-popup-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.gva-rate-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #2d3548);
    background: transparent;
    color: #8b949e;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.gva-rate-btn:hover {
    border-color: #58a6ff;
    transform: scale(1.1);
}
.gva-rate-btn.gva-rate-btn--good:hover,
.gva-rate-btn.gva-rate-btn--good.active {
    background: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
    color: #4ade80;
}
.gva-rate-btn.gva-rate-btn--bad:hover,
.gva-rate-btn.gva-rate-btn--bad.active {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #f87171;
}
.gva-feedback-popup .gva-feedback-done {
    text-align: center;
    color: #4ade80;
    font-size: 0.85rem;
    padding: 4px 0;
}

/* Refund request modal */
.gva-refund-popup {
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    background: var(--bg-card, #1a1f2e);
    border: 1px solid var(--border-color, #2d3548);
    border-radius: 12px;
    padding: 14px 16px;
    min-width: 260px;
    max-width: 320px;
    z-index: 20;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
@media (max-width: 600px) {
    .gva-refund-popup {
        left: 0;
        min-width: 0;
        width: min(260px, calc(100vw - 2 * var(--spacing-lg)));
        max-height: calc(100dvh - 2 * var(--spacing-md));
        overflow-y: auto;
    }
}
.gva-refund-popup h4 {
    font-size: 0.85rem;
    color: #c9d1d9;
    margin: 0 0 10px;
    font-weight: 600;
}
.gva-refund-popup textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color, #2d3548);
    border-radius: 8px;
    color: #c9d1d9;
    padding: 8px 10px;
    font-size: 0.8rem;
    resize: none;
    min-height: 60px;
    font-family: inherit;
}
.gva-refund-popup textarea:focus {
    outline: none;
    border-color: #58a6ff;
}
.gva-refund-popup .gva-refund-charcount {
    font-size: 0.7rem;
    color: #6e7681;
    text-align: right;
    margin-top: 2px;
}
.gva-refund-popup .gva-refund-submit {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border-radius: 8px;
    border: none;
    background: #58a6ff;
    color: #0d1117;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
}
.gva-refund-popup .gva-refund-submit:hover {
    background: #79b8ff;
}
.gva-refund-popup .gva-refund-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.gva-refund-popup .gva-refund-free-desc {
    font-size: 0.8rem;
    color: #8b949e;
    margin: 0 0 10px;
    line-height: 1.4;
}
.gva-refund-popup .gva-refund-offer {
    color: var(--accent-color, #c8a45c);
    font-weight: 600;
}
.gva-refund-popup .gva-refund-free-btn {
    width: 100%;
    margin-top: 4px;
    padding: 8px 12px;
    background: var(--accent-primary);
    color: var(--text-on-accent, #14110a);
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.gva-refund-popup .gva-refund-free-btn:hover:not(:disabled) {
    background: var(--accent-hover, var(--accent-primary));
}
.gva-refund-popup .gva-refund-status {
    text-align: center;
    font-size: 0.8rem;
    padding: 6px 0;
    color: #8b949e;
}
.gva-refund-popup .gva-refund-status.pending { color: #fde047; }
.gva-refund-popup .gva-refund-status.approved { color: #4ade80; }
.gva-refund-popup .gva-refund-status.denied { color: #f87171; }

.generation-actions-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    margin-top: 10px;
    width: 100%;
}

/* Single toolbar for completed-generation actions */
.generation-action-bar,
.generation-actions-wrapper .generation-action-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.generation-action-bar-heading {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c9c4bc;
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

.generation-action-bar-subheading {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #a8a299;
    margin: 4px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    line-height: 1.3;
}

.generation-action-bar-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.generation-action-bar-body > button,
.generation-action-bar-body > .btn-retry-completed,
.generation-action-bar-body > .action-btn,
.generation-action-bar-body > .btn-add-audio {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 0.8125rem !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap;
    vertical-align: middle;
}

.generation-action-bar-body > .gen-action-primary {
    grid-column: 1 / -1;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* High-contrast overrides — beats .action-btn / .btn-add-audio gold-on-gold legacy rules */
.generation-action-bar-body > .gen-action-primary.step-btn-primary {
    background: var(--cta-bg) !important;
    color: var(--on-accent) !important;
    border: 1px solid rgba(22, 19, 12, 0.25) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

.generation-action-bar-body > .gen-action-primary.step-btn-primary:hover:not(:disabled) {
    background: var(--cta-bg-hover) !important;
    color: var(--on-accent) !important;
}

.generation-action-bar-body > .step-btn-secondary.action-btn,
.generation-action-bar-body > .btn-add-audio,
.generation-action-bar-body > .btn-enhance-video,
.generation-action-bar-body > .btn-retry-completed {
    background: #2c2822 !important;
    color: #f4f2ee !important;
    border: 1px solid rgba(200, 164, 92, 0.5) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.generation-action-bar-body > .step-btn-secondary.action-btn:hover:not(:disabled),
.generation-action-bar-body > .btn-add-audio:hover:not(:disabled),
.generation-action-bar-body > .btn-enhance-video:hover:not(:disabled),
.generation-action-bar-body > .btn-retry-completed:hover:not(:disabled) {
    background: #3a342c !important;
    color: #ffffff !important;
    border-color: var(--cta-bg) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.generation-action-bar-body .btn-text,
.generation-action-bar-body .btn-icon,
.generation-action-bar-body .btn-icon svg {
    color: inherit !important;
    stroke: currentColor !important;
}

.generation-action-bar-body > .gen-action-primary .btn-text,
.generation-action-bar-body > .gen-action-primary .btn-icon svg {
    color: var(--on-accent) !important;
    stroke: var(--on-accent) !important;
}

/* Retry uses same gold secondary palette inside the bar (not standalone orange) — superseded above */
.generation-action-bar-body > .btn-retry-completed {
    background: #2c2822 !important;
    color: #f4f2ee !important;
    border: 1px solid rgba(200, 164, 92, 0.5) !important;
    box-shadow: none !important;
}

.generation-action-bar-body > .btn-retry-completed:hover:not(:disabled) {
    background: #3a342c !important;
    color: #ffffff !important;
    border-color: var(--cta-bg) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.generation-action-bar > button,
.generation-action-bar > .btn-retry-completed,
.generation-actions-wrapper .generation-action-bar > .action-btn,
.generation-actions-wrapper .generation-action-bar > .btn-add-audio {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    flex: 0 0 auto;
    min-width: unset;
    box-sizing: border-box !important;
    white-space: nowrap;
    vertical-align: middle;
}

.generation-action-bar .btn-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
}

.generation-action-bar .btn-add-audio::before {
    display: none !important;
}

.generation-action-bar .btn-add-audio:hover:not(:disabled),
.generation-action-bar .action-btn:hover:not(:disabled),
.generation-action-bar .btn-retry-completed:hover:not(:disabled) {
    transform: translateY(-1px);
}

.generation-action-bar .generation-audio-label,
.generation-action-bar .generation-enhanced-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.8125rem;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted, rgba(255, 255, 255, 0.65));
}

/* Legacy split rows — hide if empty; JS migrates to .generation-action-bar */
.generation-actions-wrapper .generation-top-actions,
.generation-actions-wrapper .generation-actions {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.generation-actions-wrapper .generation-top-actions:empty,
.generation-actions-wrapper .generation-actions:empty {
    display: none !important;
}

.generation-continue-from-here {
    margin: 8px 0 0 0;
    align-self: flex-start;
}

.generation-top-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.generation-top-actions .btn-retry-completed {
    flex: 0 0 auto;
}

.generation-failed-actions {
    margin: 0 0 var(--spacing-md) 0;
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-self: flex-start;
    width: 100%;
    max-width: 600px;
}

.generation-failed-actions button {
    flex: 1;
    min-width: 200px;
}

/* Retrying state (replaces failed actions while retry is in progress) */
.generation-retrying-state {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--text-secondary, #94a3b8);
    font-size: 0.95em;
    font-weight: 500;
}

.generation-retrying-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: generation-spin 0.8s linear infinite;
}

@keyframes generation-spin {
    to { transform: rotate(360deg); }
}

/* Retry buttons: brand gold for the main action, like every other primary button */
.btn-retry-same-seed,
.btn-retry-different-seed {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.95em;
    transition: all var(--transition-fast);
    font-weight: 600;
    position: relative;
    overflow: hidden;
    justify-content: center;
    box-shadow: 0 2px 10px var(--accent-glow);
}

.btn-retry-same-seed::before,
.btn-retry-different-seed::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-retry-same-seed:hover:not(:disabled)::before,
.btn-retry-different-seed:hover:not(:disabled)::before {
    left: 100%;
}

.btn-retry-same-seed {
    background: var(--cta-bg);
    color: var(--on-accent);
}

.btn-retry-same-seed:hover:not(:disabled) {
    background: var(--cta-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--accent-glow);
}

.btn-retry-different-seed {
    background: var(--bg-elevated);
    border: 1px solid var(--surface-border);
    box-shadow: none;
}

.btn-retry-different-seed:hover:not(:disabled) {
    border-color: var(--surface-border-accent);
    transform: translateY(-2px);
}

.btn-retry-same-seed:active:not(:disabled),
.btn-retry-different-seed:active:not(:disabled) {
    transform: translateY(0);
}

.btn-retry-same-seed:disabled,
.btn-retry-different-seed:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-retry-same-seed .btn-icon,
.btn-retry-different-seed .btn-icon {
    font-size: 1em;
    line-height: 1;
    opacity: 0.95;
}

.btn-retry-same-seed .btn-text,
.btn-retry-different-seed .btn-text {
    font-weight: 600;
}

/* Generation Actions - Improved alignment */
.generation-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.generation-actions .btn-retry-completed {
    margin: 0;
}

.generation-actions .step-btn-primary {
    width: auto;
}

.extend-video-btn {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 0.85rem !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}
.extend-video-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(200, 164, 92, 0.35);
}

/* Main content alignment improvements */
.main-content {
    display: flex;
    flex-direction: column;
}

/* Flex layout for generation card children — merged into the primary
   .generation-item rule above. We keep the override here for specificity
   so cards laid out inside .main-content still get flexbox. */
.main-content .generation-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Ensure consistent spacing and alignment */
.generation-item > * {
    width: 100%;
}

.generation-item .generation-video {
    width: 100%;
    max-width: 100%;
}

.generation-video:has(.generation-pending-image) {
    min-height: min(400px, 55vh);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Start Over from Initial Image - #486E59 (same size as Retry and Extend) */
.btn-continue-from-here {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    background: var(--bg-tertiary, var(--bg-secondary));
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.25;
    transition: all var(--transition-fast);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.btn-continue-from-here:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: none;
}

.btn-continue-from-here:active:not(:disabled) {
    transform: translateY(0);
}

.btn-continue-from-here:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-continue-from-here .btn-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.btn-continue-from-here .btn-icon svg {
    flex-shrink: 0;
    color: currentColor;
}

.btn-continue-from-here .btn-text {
    font-weight: 500;
}

/* Retry with New Seed - #C25928 (same size as Start Over and Extend) */
.btn-retry-completed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    background: #C25928;
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.25;
    transition: all var(--transition-fast);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.btn-retry-completed:hover:not(:disabled) {
    background: #a84a20;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(194, 89, 40, 0.35);
}

.btn-retry-completed:active:not(:disabled) {
    transform: translateY(0);
    background: #8f3f1b;
}

.btn-retry-completed:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-retry-completed .btn-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.btn-retry-completed .btn-icon svg {
    flex-shrink: 0;
    color: currentColor;
}

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

.btn-retry-completed .btn-text {
    font-weight: 500;
}

/* Retry Failed Button - Same style as retry-completed */
.btn-retry-failed {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-primary) 100%);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.95em;
    transition: all var(--transition-fast);
    font-weight: 600;
    box-shadow: 0 2px 10px var(--accent-glow);
    position: relative;
    overflow: hidden;
}

.btn-retry-failed::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-retry-failed:hover::before {
    left: 100%;
}

.btn-retry-failed:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-active) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--accent-glow);
}

.btn-retry-failed:active:not(:disabled) {
    transform: translateY(0);
}

.btn-retry-failed:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-retry-failed .btn-icon {
    font-size: 1.1em;
    line-height: 1;
}

.btn-retry-failed .btn-text {
    font-weight: 600;
}

/* New Path Button: quiet secondary next to the gold Retry */
.btn-new-path {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-elevated);
    color: var(--text-primary, #f4f4f5);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.95em;
    transition: all var(--transition-fast);
    font-weight: 600;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.btn-new-path::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-new-path:hover::before {
    left: 100%;
}

.btn-new-path:hover:not(:disabled) {
    border-color: var(--surface-border-accent);
    transform: translateY(-2px);
}

.btn-new-path:active:not(:disabled) {
    transform: translateY(0);
}

.btn-new-path:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-new-path .btn-icon {
    font-size: 1.1em;
    line-height: 1;
}

.btn-new-path .btn-text {
    font-weight: 600;
}

/* Legacy generation-actions - keeping for backward compatibility but using new styles above */

.action-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--accent-blue);
    color: var(--on-accent-blue);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9em;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 500;
}

.action-btn:hover:not(:disabled) {
    background: var(--accent-blue-hover);
    color: var(--on-accent-blue-hover);
    transform: translateY(-1px);
}

.action-btn:disabled {
    background: var(--bg-tertiary);
    cursor: not-allowed;
    color: var(--text-muted);
    opacity: 0.6;
}

.action-btn.secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.action-btn.secondary:hover:not(:disabled) {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--accent-blue);
}

.generation-path {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #b8b3aa;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.path-steps {
    display: inline;
}

.path-step {
    display: inline;
    color: var(--accent-blue);
}

.path-step::after {
    content: " → ";
    color: var(--text-muted);
}

.path-step:last-child::after {
    content: "";
}

/* ============================================================================
   STATUS MESSAGES
   ============================================================================ */
.status {
    margin: var(--spacing-md) var(--spacing-xl);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--text-sm);
    animation: fadeInUp 0.25s ease-out;
}

.status.hidden {
    display: none;
}

.status.info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue-light);
    border: 1px solid var(--accent-blue);
}

.status.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border: 1px solid var(--success);
}

/* A rule turned something down before any charge: calm, in the app's gold, never red. */
.status.notice {
    background: var(--accent-subtle, rgba(200, 164, 92, 0.1));
    color: var(--text-primary);
    border: 1px solid var(--surface-border-accent, rgba(200, 164, 92, 0.45));
}

.status.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
    border: 1px solid var(--error);
}

/* Short-lived confirmation toast (not written into session/image-gen HTML) */
.app-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    z-index: var(--z-toast, 800);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    animation: app-toast-in 0.25s ease;
}
.app-toast.app-toast--success { background: var(--success); }
.app-toast.app-toast--error { background: var(--error); }
.app-toast.app-toast--info { background: var(--info); }
@keyframes app-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.generation-pending {
    padding: var(--spacing-xl);
    background: var(--bg-tertiary);
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.generation-pending-failed {
    border-color: #d32f2f;
    color: #fca5a5;
}

.generation-in-progress {
    padding: var(--spacing-2xl) var(--spacing-xl);
    border: 1px solid rgba(200, 164, 92, 0.25);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        rgba(200, 164, 92, 0.08) 0%,
        rgba(59, 130, 246, 0.06) 50%,
        rgba(200, 164, 92, 0.08) 100%
    );
    animation: fadeInUp 0.4s ease-out;
}

/* Animated shimmer overlay on in-progress card */
.generation-in-progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(200, 164, 92, 0.06) 25%,
        rgba(200, 164, 92, 0.12) 50%,
        rgba(200, 164, 92, 0.06) 75%,
        transparent 100%
    );
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

/* Subtle pulsing glow on in-progress border */
.generation-in-progress::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(200, 164, 92, 0.3);
    animation: pulseGlow 2.5s ease-in-out infinite;
    pointer-events: none;
}

.generation-spinner {
    width: 52px;
    height: 52px;
    border: 3px solid rgba(200, 164, 92, 0.15);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    flex-shrink: 0;
}

.generation-status-message {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    transition: opacity var(--transition-base);
    letter-spacing: 0.01em;
}

/* Subtle helper text under the status message */
.generation-in-progress .generation-status-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(50%); }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

button.disabled-during-generation {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

#sessionView.session-interaction-locked .suggested-next-wrapper,
#sessionView.session-interaction-locked .generation-action-bar,
#sessionView.session-interaction-locked .generation-actions,
#sessionView.session-interaction-locked .generation-top-actions {
    pointer-events: none;
}

#sessionView.session-interaction-locked .suggested-next-card {
    opacity: 0.45;
    cursor: not-allowed;
}

.generation-pending-image {
    max-width: 100%;
    max-height: 400px;
    min-height: 120px;
    border-radius: var(--radius-lg);
    border: none;
    object-fit: contain;
    transition: opacity 0.18s ease;
}

/* ============================================================================
   SCROLLBAR
   ============================================================================ */
.sessions-list::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
    width: 8px;
}

.sessions-list::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.sessions-list::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: var(--radius-sm);
}

.sessions-list::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ============================================================================
   MODAL
   ============================================================================ */
.modal {
    display: flex;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.modal.hidden {
    display: none;
}

/* Modal content - Premium glassmorphism design */
.modal-content {
    background-color: var(--bg-elevated);
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.03) 0%,
        transparent 100%
    );
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 0;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    max-height: min(90vh, calc(100dvh - 32px));
    overflow-y: auto;
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 80px -20px rgba(200, 164, 92, 0.15);
    animation: modalSlideIn var(--duration-normal) var(--ease-out);
}

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

.modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    letter-spacing: -0.02em;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.25em;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out);
}

.modal-close:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.05);
}

.modal-close:active {
    transform: scale(0.95);
}

/* Ring only for keyboard focus: pop-ups focus the close button on open, which drew a heavy gold ring for mouse and touch users. */
.modal-close:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Focus moved to the close button on open (not by keyboard) shows no ring. */
.modal-close.fs-quiet-focus:focus-visible,
.pay-modal-close.fs-quiet-focus:focus-visible {
    outline: none;
}

.modal-body {
    padding: var(--spacing-lg);
    color: var(--text-primary);
}

.modal-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

/* Long pop-ups: the title and the action buttons stay in view and only the
   middle scrolls (Add sound put "Add sound · 2 credits" below the window).
   Applies to every pop-up built as header + body (+ footer). */
.modal-content:has(> .modal-body) {
    display: flex;
    flex-direction: column;
    max-height: min(90vh, calc(100dvh - 32px));
}
.modal-content:has(> .modal-body) > .modal-header,
.modal-content:has(> .modal-body) > .modal-footer {
    flex-shrink: 0;
}
.modal-content:has(> .modal-body) > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
@media (max-width: 768px) {
    /* Use the visible screen height. On iPhone Safari 85vh was 500px of a 549px
       screen, so pop-ups like Buy credits stopped early and scrolled inside. */
    .modal-content:has(> .modal-body) {
        max-height: 85vh;
        max-height: calc(100dvh - 24px);
    }
}

/* Guided moment picker modal (classes set by member-text.js) */
.guided-moment-intro { margin-bottom: var(--spacing-md); color: var(--text-secondary, #888); }
.guided-moment-list { max-height: 50vh; overflow-y: auto; }
.guided-moment-group { margin-bottom: var(--spacing-lg); }
.guided-moment-group-label { display: block; font-weight: 600; margin-bottom: var(--spacing-sm); color: var(--text-primary); }
.guided-moment-option { display: block; padding: var(--spacing-sm) 0; cursor: pointer; }
.guided-moment-option input { margin-right: var(--spacing-sm); }

/* Session moment picker modal, with its extra finish option */
.session-moment-intro { margin-bottom: var(--spacing-md); color: var(--text-secondary, #888); }
.session-moment-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; }
.session-moment-group { margin-bottom: var(--spacing-lg); display: flex; flex-direction: column; }
.session-moment-group-label { display: block; font-weight: 600; margin-bottom: var(--spacing-sm); color: var(--text-primary); }
.session-moment-option { display: block; padding: var(--spacing-sm) 0; cursor: pointer; width: 100%; }
.session-moment-option input { margin-right: var(--spacing-sm); }
.session-moment-extra { margin-top: var(--spacing-md); padding-top: var(--spacing-sm); border-top: 1px solid var(--border-color, #333); }
.session-moment-extra-option { display: block; cursor: pointer; }
.session-moment-extra-option input { margin-right: var(--spacing-sm); }

/* Login modal (index page) – overlay + centered card */
.modal-login {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    box-sizing: border-box;
    overflow: hidden; /* Prevent modal container from scrolling */
}
.modal-login .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15); /* Very light overlay - page almost fully visible */
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    cursor: pointer;
}
/* All auth modals (login, register, forgot, reset): compact card with premium styling */
.modal-login .modal-content-login,
.modal-login .modal-content-register,
.modal-login .modal-content-forgot,
.modal-login .modal-content-reset {
    position: relative;
    z-index: 1;
    max-width: 420px; /* Increased from 400px to fit Turnstile widget */
    width: calc(100% - 32px); /* Prevent horizontal scroll with side margins */
    margin: 0 16px;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    background: var(--bg-elevated);
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.03) 0%,
        transparent 50%,
        rgba(200, 164, 92, 0.02) 100%
    );
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px -15px rgba(200, 164, 92, 0.12);
    animation: modalSlideIn var(--duration-normal) var(--ease-out);
}
.modal-login .modal-header {
    padding: var(--spacing-md, 16px) var(--spacing-lg);
}
.modal-login .modal-header .modal-title {
    font-size: 1.15rem;
}
.modal-login .modal-body {
    padding: var(--spacing-md, 16px) var(--spacing-lg);
}

/* Reduce padding on narrower screens to fit Turnstile */
@media (max-width: 420px) {
    .modal-login {
        padding: 8px;
    }
    .modal-login .modal-content-login,
    .modal-login .modal-content-register,
    .modal-login .modal-content-forgot,
    .modal-login .modal-content-reset {
        width: 100%;
        margin: 0;
    }
    .modal-login .modal-header {
        padding-left: 12px;
        padding-right: 12px;
    }
    .modal-login .modal-body {
        padding: var(--spacing-md, 16px) 12px;
    }
}
.modal-login .auth-form {
    gap: var(--spacing-sm, 8px);
}
.modal-login .auth-field {
    gap: 4px;
}
.modal-login .auth-field label {
    font-size: 0.85rem;
}
.modal-login .auth-field input {
    padding: 8px 10px;
    font-size: 0.95rem;
}
.modal-login .auth-submit {
    margin-top: 4px;
    padding: 10px 16px;
    font-size: 0.95rem;
}
.modal-login .auth-divider {
    margin: 0.25rem 0 0.25rem;
    font-size: 0.85rem;
}
.modal-login .auth-social {
    gap: 8px;
    margin-top: 0.25rem;
}
.modal-login .auth-social-btn {
    padding: 9px 14px;
    font-size: 0.9rem;
}
.modal-login .auth-social-icon {
    width: 18px;
    height: 18px;
}
@media (max-width: 640px) {
    body.fs-modal-body-lock #mobileMenuToggle,
    /* Pop-ups that open without the body lock (Add sound, Continue video,
       confirm dialogs) left the floating menu button on top of them. */
    body:has(.modal:not(.hidden)) #mobileMenuToggle,
    body:has(.extend-flow-overlay) #mobileMenuToggle,
    body:has(.confirm-modal-overlay) #mobileMenuToggle {
        visibility: hidden;
        pointer-events: none;
    }
    /* Footer actions stay on one line: compact Cancel, main action takes the rest. */
    .modal-footer {
        gap: 10px;
    }
    .modal-footer > .btn-cancel {
        flex: 0 0 auto;
    }
    .modal-footer > .btn-submit {
        flex: 1 1 auto;
        white-space: nowrap;
    }
    /* Touch targets: pop-up footer and confirm buttons were 34px tall on phones. */
    .modal-footer > .btn-cancel,
    .modal-footer > .btn-submit,
    .confirm-modal-btn {
        min-height: 44px;
    }
    .modal-login .modal-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
    .modal-login .auth-field input,
    .modal-login .auth-submit,
    .modal-login .auth-social-btn {
        min-height: 44px;
    }
}
.modal-login .auth-disclaimer {
    margin-top: var(--spacing-sm, 8px);
    font-size: 0.75rem;
    line-height: 1.4;
}
.modal-login .auth-subtitle {
    margin-top: 0;
}
.auth-subtitle-modal {
    margin-bottom: var(--spacing-sm, 8px);
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.modal-login .auth-footer-modal {
    margin-top: var(--spacing-sm, 8px);
    font-size: 0.85em;
    color: var(--text-secondary);
    text-align: center;
}
.modal-login .cf-turnstile-wrap {
    margin: var(--spacing-sm, 8px) 0;
    width: 100%;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Turnstile flexible size adapts to container width */
.modal-login .cf-turnstile-wrap .cf-turnstile {
    width: 100%;
    min-width: 0;
}

.modal-login .cf-turnstile-wrap > div,
.modal-login .cf-turnstile-wrap iframe {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
/* Turnstile flexible mode follows the auth form width on narrow screens. */
.cf-turnstile-wrap {
    max-width: 100%;
    overflow: hidden;
}
.cf-turnstile-wrap iframe,
.cf-turnstile-wrap > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.modal-login .auth-error,
.modal-login .auth-success {
    margin-bottom: var(--spacing-sm, 8px);
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    font-size: 0.85rem;
}
.modal-login .auth-footer-modal a {
    color: var(--accent-blue-light);
    text-decoration: none;
}
.modal-login .auth-footer-modal a:hover {
    text-decoration: underline;
}
.auth-footer-modal .auth-footer-link,
.modal-login .auth-form .auth-footer-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--accent-blue-light);
    text-decoration: none;
    cursor: pointer;
}
.auth-footer-modal .auth-footer-link:hover,
.modal-login .auth-form .auth-footer-link:hover {
    text-decoration: underline;
}
.auth-footer-modal .auth-footer-link.auth-footer-cta {
    color: var(--auth-cta, #ec4899);
    font-weight: 600;
}
.auth-footer-modal .auth-footer-link.auth-footer-cta:hover {
    text-decoration: underline;
}

/* Logged-out marketing home (main content when not logged in) */
.logged-out-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
}
/* ============================================================================
   LANDER — Aggressive conversion landing page (v2.0)
   ============================================================================ */

/* Shared inner container */
.lander .lander-inner {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    width: 100%;
}

/* Generic placeholder styling for media slots */
.lander-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.5;
    background: linear-gradient(135deg, rgba(200, 164, 92,0.04) 0%, transparent 60%, rgba(200, 164, 92,0.03) 100%);
}
.lander-placeholder svg,
.lander-placeholder i { width: 32px; height: 32px; opacity: 0.45; }

/* Section tags + headings (shared) */
.lander-section-tag {
    margin: 0 0 var(--spacing-xs);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--accent-primary);
    text-align: center;
}
.lander-section-heading {
    margin: 0 0 var(--spacing-xl);
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3.5vw, 2.2rem);
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    text-align: center;
    line-height: 1.2;
}

/* ── SECTION 1: HERO ──────────────────────────────────────────────── */
.lander-hero {
    flex-shrink: 0;
    position: relative;
    min-height: clamp(420px, 70vh, 700px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.lander-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.lander-hero-bg video,
.lander-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    transform: translateZ(0);
}
.lander-hero-bg video {
    transform: scale(1.06) translateZ(0);
}
.lander-hero.is-parallax .lander-hero-bg video,
.lander-hero.is-parallax .lander-hero-bg img {
    transform: scale(1.08) translateY(var(--lander-hero-parallax, 0px)) translateZ(0);
}
.lander-hero-bg-placeholder {
    height: 100%;
}
.lander-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 20, 0.55) 0%,
        rgba(10, 10, 20, 0.80) 60%,
        rgba(10, 10, 20, 0.95) 100%
    );
}
.lander-hero-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(200, 164, 92, 0.12) 0%, transparent 70%);
    animation: lander-hero-glow 8s ease-in-out infinite;
    pointer-events: none;
    will-change: opacity;
}
@keyframes lander-hero-glow {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.85; }
}
.lander-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 680px;
    padding: var(--spacing-2xl) var(--spacing-md);
    animation: landerFadeUp 0.7s ease both;
}
@keyframes landerFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lander-hero-badge {
    display: inline-block;
    margin: 0 0 var(--spacing-md);
    padding: 4px 14px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #f87171;
    background: rgba(239, 68, 68, 0.08);
}
.lander-hero-headline {
    margin: 0 0 var(--spacing-sm);
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 6vw, 3.2rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.85);
}
.lander-hero-tagline {
    margin: 0 0 var(--spacing-md);
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    font-weight: 600;
    color: var(--accent-hover);
    letter-spacing: 0.02em;
}
.lander-hero-subline {
    margin: 0 auto var(--spacing-md);
    max-width: 540px;
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}
.lander-hero-trust {
    margin: 0 auto var(--spacing-lg);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
}
.lander-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
}
.lander-legal-note {
    max-width: 620px;
    margin: var(--spacing-md) auto 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: var(--text-xs);
    line-height: 1.45;
}
.lander-legal-note a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* CTA buttons (shared across lander) */
.btn-lander-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 14px 32px;
    background: var(--cta-bg);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-lg, 12px);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -0.01em;
    transition: all 0.2s ease;
    box-shadow: 0 2px 12px var(--accent-glow);
}
.btn-lander-primary:hover {
    background: var(--cta-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px var(--accent-glow);
}
.btn-lander-primary:active { transform: translateY(0) scale(0.98); }
.btn-lander-primary-lg { padding: 18px 44px; font-size: 1.15rem; }

.btn-lander-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 26px;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md, 10px);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-lander-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.btn-lander-ghost:active { transform: scale(0.98); }

/* ── SECTION 2: SOCIAL PROOF ──────────────────────────────────────── */
.lander-proof {
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lander-proof-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}
.lander-proof-stat {
    text-align: center;
}
.lander-proof-number {
    display: block;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.lander-proof-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted, #666);
    margin-top: 4px;
}
.lander-proof-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
}
.lander-proof-badges {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}
.lander-proof-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary, #999);
    font-weight: 500;
}
.lander-proof-badge svg,
.lander-proof-badge i { width: 16px; height: 16px; opacity: 0.6; }

/* ── SECTION 2.5: IMAGE GALLERY SLIDESHOW ───────────────────────────── */
.lander-slideshow {
    padding: var(--spacing-2xl) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lander-slideshow-subline {
    margin: calc(-1 * var(--spacing-md)) 0 var(--spacing-xl);
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-secondary, #999);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.lander-slideshow-wrap {
    position: relative;
    /* 3:4 slides: cap the width so the whole block (heading, slide, dots) fits on a laptop screen */
    max-width: min(720px, calc((100dvh - 320px) * 0.75));
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    background: var(--bg-secondary, #141428);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.lander-slideshow-track {
    display: flex;
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.lander-slideshow-slide {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
}
.lander-slideshow-slide .lander-placeholder {
    min-height: 280px;
}
.lander-slideshow-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lander-slideshow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, opacity 0.2s;
    opacity: 0.85;
}
.lander-slideshow-btn:hover {
    background: rgba(0, 0, 0, 0.75);
    opacity: 1;
}
.lander-slideshow-btn svg,
.lander-slideshow-btn i { width: 24px; height: 24px; }
.lander-slideshow-prev { left: var(--spacing-sm); }
.lander-slideshow-next { right: var(--spacing-sm); }
.lander-slideshow-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: var(--spacing-md) 0;
    position: relative;
    z-index: 2;
    background: var(--bg-secondary, #141428);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.lander-slideshow-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.lander-slideshow-dot:hover {
    background: rgba(255, 255, 255, 0.45);
}
.lander-slideshow-dot[aria-selected="true"] {
    background: var(--accent);
    transform: scale(1.2);
}
/* Mobile: full-bleed wrap, larger touch targets, no hover reliance */
@media (max-width: 768px) {
    .lander-slideshow-wrap {
        max-width: 100%;
        margin-left: var(--spacing-md);
        margin-right: var(--spacing-md);
        border-radius: var(--radius-md, 10px);
    }
    .lander-slideshow-slide .lander-placeholder { min-height: 240px; }
}
@media (max-width: 640px) {
    .lander-slideshow { padding: var(--spacing-xl) 0; }
    .lander-slideshow-subline { font-size: 0.9rem; margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
    .lander-slideshow-wrap {
        margin-left: var(--spacing-sm);
        margin-right: var(--spacing-sm);
    }
    /* 44px touch target for dots (mobile accessibility) */
    .lander-slideshow-dots { padding: var(--spacing-sm) 0; gap: 4px; }
    .lander-slideshow-dot {
        width: 44px;
        height: 44px;
        padding: 0;
    }
    /* Prev/next: keep 44px, ensure tappable on touch */
    .lander-slideshow-btn {
        min-width: 44px;
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }
    .lander-slideshow-prev { left: var(--spacing-xs); }
    .lander-slideshow-next { right: var(--spacing-xs); }
}
/* Allow vertical scroll; horizontal swipe handled in JS */
.lander-slideshow-track {
    touch-action: pan-y;
}
@media (prefers-reduced-motion: reduce) {
    .lander-slideshow-track { transition: none; }
}

/* ── SECTION 2.8: CATEGORY TEASERS ───────────────────────────────── */
.lander-categories {
    padding: var(--spacing-xl) 0 var(--spacing-lg);
}
.lander-categories-subline {
    text-align: center;
    max-width: 560px;
    margin: 0 auto var(--spacing-lg);
    color: var(--text-muted, #9ca3af);
    font-size: 0.92rem;
}
.lander-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    max-width: 900px;
    margin: 0 auto;
}
.lander-category-tile {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: #12121c;
    aspect-ratio: 4 / 3;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.lander-category-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(200, 164, 92, 0.55);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.lander-category-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    transition: opacity 0.25s ease;
}
.lander-category-tile:hover img { opacity: 1; }
.lander-category-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    color: #fff;
    text-align: left;
}

/* ── SECTION 3: SHOWCASE ──────────────────────────────────────────── */
.lander-showcase {
    padding: var(--spacing-2xl) 0;
}
.lander-showcase-subline {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--spacing-xl);
    color: var(--text-muted, #9ca3af);
    font-size: 0.95rem;
    line-height: 1.5;
}
.lander-showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}
.lander-showcase-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
    background: var(--bg-secondary, #141428);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, box-shadow 0.25s ease;
    min-height: 280px;
    will-change: transform;
}
.lander-showcase-label {
    margin: 0;
    padding: 10px 12px 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #e8e4dc);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lander-showcase-cat {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(200, 164, 92, 0.2);
    color: rgba(199, 210, 254, 0.95);
}
.lander-showcase-pair {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}
.lander-showcase-card:hover {
    border-color: rgba(200, 164, 92, 0.55);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(200, 164, 92, 0.25);
}
.lander-showcase-card-highlight {
    border-color: rgba(200, 164, 92, 0.9) !important;
    box-shadow: 0 0 0 2px rgba(200, 164, 92, 0.45), 0 16px 48px rgba(0, 0, 0, 0.45);
}
.lander-showcase-card-filtered-out {
    display: none !important;
}
.lander-category-tile.is-active {
    border-color: rgba(200, 164, 92, 0.9);
    box-shadow: 0 0 0 2px rgba(200, 164, 92, 0.35);
}
.lander-showcase-after video {
    opacity: 0;
    transition: opacity 0.35s ease;
}
.lander-showcase-card:hover .lander-showcase-after video,
.lander-showcase-after video.is-visible {
    opacity: 1;
}
.lander-showcase-before,
.lander-showcase-after {
    position: relative;
    flex: 1;
    aspect-ratio: 3 / 4;
    min-height: 220px;
    overflow: hidden;
}
.lander-showcase-before img,
.lander-showcase-after img,
.lander-showcase-after video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lander-showcase-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    color: var(--text-muted, #666);
}
.lander-showcase-arrow svg,
.lander-showcase-arrow i { width: 16px; height: 16px; }
.lander-showcase-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}
.lander-showcase-badge-after {
    background: rgba(200, 164, 92, 0.6);
    color: #fff;
}
.lander-showcase-badge-still {
    /* Neutral label so the reference reads as an input and "Finished clip" (gold) as the result. */
    background: rgba(20, 20, 22, 0.72);
    color: #f4f2ee;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

/* ── SECTION 3b: EXTEND MAGIC ─────────────────────────────────────── */
.lander-extend {
    padding: var(--spacing-2xl) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: linear-gradient(180deg, rgba(200, 164, 92, 0.04) 0%, transparent 40%);
}
.lander-extend-subline {
    margin: calc(-1 * var(--spacing-sm)) auto var(--spacing-xl);
    max-width: 640px;
    text-align: center;
    color: var(--text-secondary, #999);
    font-size: 0.95rem;
    line-height: 1.55;
}
.lander-extend-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    max-width: 1100px;
    margin: 0 auto;
}
.lander-extend-card {
    border: 1px solid rgba(200, 164, 92, 0.15);
    border-radius: var(--radius-lg, 12px);
    background: linear-gradient(145deg, rgba(20, 20, 40, 0.95) 0%, rgba(10, 10, 18, 0.98) 100%);
    overflow: hidden;
    padding: var(--spacing-lg);
}
.lander-extend-card-head {
    margin-bottom: var(--spacing-md);
}
.lander-extend-title {
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}
.lander-extend-card-sub {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted, #666);
}
.lander-extend-flow {
    display: grid;
    grid-template-columns: minmax(120px, 28%) 1fr minmax(0, 52%);
    gap: var(--spacing-md);
    align-items: stretch;
}
.lander-extend-still,
.lander-extend-video-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #0a0a14;
}
.lander-extend-still img,
.lander-extend-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lander-extend-arrows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0 4px;
}
.lander-extend-arrow-seg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #666);
}
.lander-extend-arrow-seg svg,
.lander-extend-arrow-seg i { width: 14px; height: 14px; color: rgba(200, 164, 92, 0.8); }
.lander-extend-step {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
}
.lander-extend-step-video {
    background: rgba(200, 164, 92, 0.65);
    color: #fff;
}
.lander-extend-step-clip {
    background: rgba(200, 164, 92, 0.72);
    color: #fff;
    max-width: calc(100% - 16px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lander-extend-timeline {
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    padding: var(--spacing-sm) 2px var(--spacing-md);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.lander-extend-handoff {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 52px;
    padding: 0 4px;
    color: rgba(167, 139, 250, 0.9);
}
.lander-extend-handoff-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-align: center;
    color: var(--text-muted, #888);
    max-width: 48px;
}
.lander-extend-handoff-frame {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid rgba(200, 164, 92, 0.55);
    box-shadow: 0 0 12px rgba(200, 164, 92, 0.25);
}
.lander-extend-handoff svg,
.lander-extend-handoff i { width: 20px; height: 20px; }
.lander-extend-tile {
    position: relative;
    flex: 0 0 auto;
    width: clamp(120px, 24vw, 200px);
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    scroll-snap-align: start;
    background: #0a0a12;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.lander-extend-tile-still {
    border-color: rgba(255, 255, 255, 0.14);
}
.lander-extend-tile-video {
    border-color: rgba(200, 164, 92, 0.35);
}
.lander-extend-tile img,
.lander-extend-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lander-extend-tile-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: rgba(200, 164, 92, 0.85);
    padding: 0 2px;
}
.lander-extend-tile-arrow svg,
.lander-extend-tile-arrow i { width: 18px; height: 18px; }
.lander-extend-seg-video { opacity: 0.94; transition: opacity 0.2s ease; }
.lander-extend-tile-video:hover .lander-extend-seg-video,
.lander-extend-seg-video.is-visible { opacity: 1; }

/* ── SECTION 4: HOW IT WORKS ──────────────────────────────────────── */
.lander-steps {
    padding: var(--spacing-2xl) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.lander-steps-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}
.lander-step-card {
    flex: 1;
    max-width: 280px;
    text-align: center;
    padding: var(--spacing-md);
}
.lander-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-active) 100%);
    color: var(--on-accent);
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: var(--spacing-md);
}
.lander-step-illustration {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
    background: var(--bg-secondary, #141428);
    margin-bottom: var(--spacing-md);
}
.lander-step-title {
    margin: 0 0 var(--spacing-xs);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}
.lander-step-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary, #999);
    line-height: 1.55;
}
.lander-step-connector {
    display: flex;
    align-items: center;
    padding-top: 100px;
    color: var(--text-muted, #555);
}
.lander-step-connector svg,
.lander-step-connector i { width: 20px; height: 20px; opacity: 0.35; }

/* ── SECTION 5: FEATURES ──────────────────────────────────────────── */
.lander-features {
    padding: var(--spacing-2xl) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.lander-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}
.lander-feature-card {
    padding: var(--spacing-xl);
    background: var(--bg-card, #161630);
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
    border-radius: var(--radius-xl, 16px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}
.lander-feature-card:hover {
    border-color: rgba(200, 164, 92, 0.35);
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
}
.lander-feature-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-md, 8px);
}
.lander-feature-icon svg,
.lander-feature-icon i { width: 22px; height: 22px; }
.lander-feature-icon-zap     { background: rgba(200, 164, 92, 0.12); color: var(--accent-primary); }
.lander-feature-icon-privacy  { background: rgba(200, 164, 92, 0.12); color: var(--accent-primary); }
.lander-feature-icon-extend   { background: rgba(200, 164, 92, 0.12); color: var(--accent-primary); }
.lander-feature-icon-quality  { background: rgba(200, 164, 92, 0.12); color: var(--accent-primary); }
.lander-feature-icon-refund   { background: rgba(200, 164, 92, 0.12); color: var(--accent-primary); }
.lander-feature-icon-images   { background: rgba(200, 164, 92, 0.12); color: var(--accent-primary); }
.lander-feature-icon-feedback { background: rgba(200, 164, 92, 0.12); color: var(--accent-primary); }
.lander-feature-icon-heart    { background: rgba(200, 164, 92, 0.12); color: var(--accent-primary); }
.lander-feature-title {
    margin: 0 0 var(--spacing-sm);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.lander-feature-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary, #999);
    line-height: 1.55;
}

/* ── SECTION 5b: EASY START (static reassurance) ──────────────────── */
.lander-easy-start {
    padding: var(--spacing-xl) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.lander-easy-start-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    max-width: 520px;
    margin: 0 auto;
    padding: 16px 22px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    background: var(--bg-card, #161630);
    text-align: left;
}
.lander-easy-start-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: rgba(200, 164, 92, 0.15);
    color: var(--accent-primary);
    flex-shrink: 0;
}
.lander-easy-start-icon svg {
    width: 20px;
    height: 20px;
}
.lander-easy-start-headline {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #eee);
    line-height: 1.4;
}
.lander-easy-start-sub {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary, #999);
    line-height: 1.5;
}

/* Scroll-triggered section reveals */
.lander-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.lander-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .lander-reveal { opacity: 1; transform: none; transition: none; }
    .lander-hero-overlay::after { animation: none; }
    .lander-pricing-card-popular { animation: none; }
}

/* ── SECTION 6: PRICING TEASER ────────────────────────────────────── */
.lander-pricing {
    padding: var(--spacing-2xl) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.lander-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}
.lander-pricing-card {
    position: relative;
    padding: var(--spacing-lg) var(--spacing-md);
    background: var(--bg-card, #161630);
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
    border-radius: var(--radius-xl, 16px);
    text-align: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}
.lander-pricing-card:hover {
    border-color: rgba(200, 164, 92, 0.4);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 24px rgba(200, 164, 92, 0.08);
}
.lander-pricing-card-popular {
    border-color: rgba(200, 164, 92, 0.45);
    box-shadow: 0 0 30px rgba(200, 164, 92, 0.12);
    animation: lander-popular-border 3s ease-in-out infinite;
}
@keyframes lander-popular-border {
    0%, 100% { box-shadow: 0 0 24px rgba(200, 164, 92, 0.12); border-color: rgba(200, 164, 92, 0.4); }
    50% { box-shadow: 0 0 40px rgba(200, 164, 92, 0.28); border-color: rgba(217, 185, 122, 0.65); }
}
.lander-pricing-popular-tag {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 14px;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-active) 100%);
    color: var(--on-accent);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 999px;
    white-space: nowrap;
}
.lander-pricing-tier {
    margin: 0 0 var(--spacing-sm);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.lander-pricing-price {
    margin-bottom: var(--spacing-md);
}
.lander-pricing-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
}
.lander-pricing-period {
    font-size: 0.85rem;
    color: var(--text-muted, #666);
    font-weight: 500;
}
.lander-pricing-perks {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.lander-pricing-perks li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.8rem;
    color: var(--text-secondary, #999);
}
.lander-pricing-perks li svg,
.lander-pricing-perks li i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #22c55e;
}
.lander-pricing-cta {
    text-align: center;
}

/* ── SECTION 7: FINAL CTA ────────────────────────────────────────── */
.lander-final-cta {
    padding: var(--spacing-2xl) 0 var(--spacing-xl);
    text-align: center;
}
.lander-final-headline {
    margin: 0 0 var(--spacing-lg);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.25;
}
.lander-legal-note--final {
    max-width: 540px;
    color: var(--text-muted);
}
.lander-legal-note--final a {
    color: var(--text-secondary);
}

/* ── LANDER RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .lander-pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .lander-showcase-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Landscape phones + narrow tablets: dvh avoids clipped hero; overflow visible for badge/headline */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .lander-hero {
        min-height: clamp(420px, 70dvh, 700px);
        overflow: visible;
    }
}
@media (max-width: 640px) {
    .lander-hero {
        align-items: flex-start;
        padding: var(--spacing-lg) 0 var(--spacing-xl);
    }
    .lander-hero-content { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
    /* Start below the phone menu bar so the 18+ badge isn't half hidden under it. */
    .lander-hero { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
    .lander-hero-headline { font-size: clamp(1.55rem, 7vw, 1.85rem); line-height: 1.15; }
    .lander-slideshow-wrap { max-width: 100%; }
    .lander-hero-cta { flex-direction: column; align-items: stretch; }
    .lander-proof-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    .lander-proof-divider { display: none; }
    .lander-proof-stat { min-height: 44px; }
    .lander-showcase-grid { grid-template-columns: 1fr; }
    .lander-showcase-pair { flex-direction: column; gap: var(--spacing-xs); }
    .lander-showcase-arrow { transform: rotate(90deg); width: auto; height: 24px; margin: 2px auto; }
    .lander-showcase-before,
    .lander-showcase-after { min-height: 200px; }
    .lander-categories-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
        max-width: 100%;
    }
    .lander-category-tile {
        flex: 0 0 44%;
        min-width: 148px;
        scroll-snap-align: start;
    }
    .lander-extend-tile { width: clamp(132px, 40vw, 176px); }
    .lander-extend-handoff { min-width: 44px; }
    .lander-extend-flow {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .lander-extend-arrows {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .lander-steps-grid { flex-direction: column; align-items: center; }
    .lander-step-connector { padding-top: 0; transform: rotate(90deg); margin: var(--spacing-sm) 0; }
    .lander-step-card { max-width: 100%; }
    .lander-features-grid { grid-template-columns: 1fr; }
    .lander-pricing-grid { grid-template-columns: 1fr; }
}

/* Legacy / shared */
.logged-out-inner { text-align: center; max-width: 360px; }
.logged-out-text { margin: 0 0 var(--spacing-lg); color: var(--text-secondary); font-size: 1.05rem; line-height: 1.5; }
.btn-login-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 24px;
    background: var(--cta-bg);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition-fast);
}
.btn-login-primary:hover {
    background: var(--cta-bg-hover);
}
.btn-login-primary:active { transform: scale(0.98); }

/* Modal variants */
.modal-content-small {
    max-width: 450px;
}

.modal-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.3em;
    font-weight: 700;
}

/* Modal actions (button container) */
.modal-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Modal buttons */
.btn-modal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    justify-content: center;
    background: var(--cta-bg);
    color: var(--on-accent);
}

.btn-modal:hover {
    background: var(--cta-bg-hover);
}

.btn-modal:active {
    transform: scale(0.95);
}

.btn-modal-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-modal-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-blue);
}

.btn-modal-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.btn-modal-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
}

@media (max-width: 640px) {
    .modal-actions {
        flex-direction: column-reverse;
        gap: var(--spacing-sm);
    }
    
    .btn-modal {
        width: 100%;
        min-height: 48px;
    }
}

/* Age gate modal (18+ attestation; cookie forgescene_mature_ok); heavy blur so it's first focus */
.mature-content-modal {
    z-index: 10001;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.mature-content-modal .mature-content-modal-inner {
    max-width: 440px;
}
.mature-content-modal .mature-content-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}
.mature-content-modal .mature-content-text {
    margin: 0 0 var(--spacing-md, 16px);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 0.95rem;
}
.mature-content-modal .mature-content-note {
    margin: 0 0 var(--spacing-md, 16px);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.mature-content-modal .mature-content-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0.5rem;
}
.mature-content-modal .mature-content-links-wrap {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.mature-content-modal .mature-content-link {
    color: var(--accent-light, var(--accent-primary));
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}
.mature-content-modal .mature-content-link:hover {
    color: var(--accent-hover, var(--accent-primary));
}
.mature-content-modal .mature-content-link:focus {
    outline: none;
}
.mature-content-modal .mature-content-link:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: 2px;
}
.btn-mature-confirm {
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-on-accent, #14110a);
    background: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-mature-confirm:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}
.btn-mature-confirm:focus {
    outline: none;
}
.btn-mature-confirm:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.btn-mature-leave {
    width: 100%;
    margin-top: 0.75rem;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-mature-leave:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-hover);
}
.btn-mature-leave:focus {
    outline: none;
}
.btn-mature-leave:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Cookie consent banner (global, bottom or top) */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-lg);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
.cookie-consent-banner.hidden { display: none; }
.cookie-consent-inner { max-width: 900px; margin: 0 auto; }
.cookie-consent-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.cookie-consent-desc {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.5;
}
.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.cookie-consent-link {
    color: var(--accent-blue, #3b82f6);
    text-decoration: underline;
    font-size: 0.9rem;
}
.cookie-consent-link:hover { color: var(--accent-blue-hover); }
.cookie-consent-btn-accept {
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-on-accent, #14110a);
    background: var(--accent-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}
.cookie-consent-btn-accept:hover { background: var(--accent-hover, var(--accent-primary)); filter: brightness(1.06); }
.cookie-consent-btn-secondary {
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.cookie-consent-btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-hover);
}

/* Keep conversion-critical auth controls reachable while regional consent is pending. */
@media (max-width: 720px) {
    .cookie-consent-banner:not(.hidden) {
        padding: 0.7rem 0.75rem max(0.7rem, env(safe-area-inset-bottom, 0px));
        max-height: 8rem;
        overflow-y: auto;
    }
    .cookie-consent-banner:not(.hidden) .cookie-consent-title {
        margin-bottom: 0.45rem;
        font-size: 0.95rem;
    }
    .cookie-consent-banner:not(.hidden) .cookie-consent-desc {
        display: none;
    }
    .cookie-consent-banner:not(.hidden) .cookie-consent-actions {
        gap: 0.45rem;
    }
    .cookie-consent-banner:not(.hidden) .cookie-consent-btn-accept,
    .cookie-consent-banner:not(.hidden) .cookie-consent-btn-secondary {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
    /* Auth pop-ups use the whole screen and sit centred... */
    body.fs-modal-body-lock .modal-login:not(.hidden) {
        align-items: center;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }
    body.fs-modal-body-lock .modal-login:not(.hidden) .modal-content-login,
    body.fs-modal-body-lock .modal-login:not(.hidden) .modal-content-register,
    body.fs-modal-body-lock .modal-login:not(.hidden) .modal-content-forgot,
    body.fs-modal-body-lock .modal-login:not(.hidden) .modal-content-reset {
        max-height: calc(100svh - 16px - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }
    /* ...and only leave room for the consent banner while it is actually showing. */
    body.fs-modal-body-lock:has(.cookie-consent-banner:not(.hidden)) .modal-login:not(.hidden) {
        align-items: flex-start;
        padding-bottom: calc(8.75rem + env(safe-area-inset-bottom, 0px));
    }
    body.fs-modal-body-lock:has(.cookie-consent-banner:not(.hidden)) .modal-login:not(.hidden) .modal-content-login,
    body.fs-modal-body-lock:has(.cookie-consent-banner:not(.hidden)) .modal-login:not(.hidden) .modal-content-register,
    body.fs-modal-body-lock:has(.cookie-consent-banner:not(.hidden)) .modal-login:not(.hidden) .modal-content-forgot,
    body.fs-modal-body-lock:has(.cookie-consent-banner:not(.hidden)) .modal-login:not(.hidden) .modal-content-reset {
        max-height: calc(100svh - 9.5rem - env(safe-area-inset-bottom, 0px));
    }
}

/* Cookie settings modal — must sit above the consent banner (z-index 9999) and sidebar */
.cookie-settings-modal {
    z-index: 99998;
}
.cookie-settings-modal .cookie-settings-content {
    max-width: 720px;
    max-height: min(85vh, calc(100dvh - 32px)); /* iPhone Safari: 85vh ran under the toolbar and hid the buttons */
    overflow-y: auto;
    padding: clamp(16px, 4vw, 28px); /* content was flush with the card edge */
}
.cookie-settings-title {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
.cookie-settings-desc {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.cookie-settings-layout {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.cookie-settings-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}
.cookie-settings-nav-item {
    padding: 8px 12px;
    text-align: left;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9rem;
}
.cookie-settings-nav-item:hover { background: var(--bg-tertiary); }
.cookie-settings-nav-item.active {
    border-left-color: var(--accent-primary);
    background: var(--bg-tertiary);
}
.cookie-settings-nav-item:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}
.cookie-settings-nav-item:focus:not(:focus-visible) { outline: none; }
@media (max-width: 560px) {
    .cookie-settings-nav-item { min-height: 44px; }
}
.cookie-settings-panels { flex: 1; }
.cookie-settings-panel { display: none; }
.cookie-settings-panel.active { display: block; }
.cookie-settings-panel-heading {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.cookie-settings-panel p {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.5;
}
.cookie-settings-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.cookie-settings-badge {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.cookie-settings-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0; /* a long label beside it squeezed the track and pushed the knob out */
}
.cookie-settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.cookie-settings-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-tertiary);
    border-radius: 24px;
    transition: 0.2s;
}
.cookie-settings-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: 0.2s;
}
.cookie-settings-toggle input:checked + .cookie-settings-slider {
    background: var(--accent-primary);
}
.cookie-settings-toggle input:checked + .cookie-settings-slider:before {
    transform: translateX(20px);
    background: #fff;
}
.cookie-settings-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 2px;
    border-top: 1px solid var(--border-color);
    /* Keep the choices reachable while the long descriptions scroll. */
    position: sticky;
    bottom: 0;
    background: var(--bg-elevated, var(--bg-secondary));
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.settings-toggle-label {
    font-size: 0.95rem;
    color: var(--text-primary);
}

/* --- Delete Account (danger section) --- */
.settings-delete-section {
    border-top: 1px solid rgba(220, 38, 38, 0.25);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
}
.settings-heading--danger {
    color: #3b82f6;
}
.settings-delete-warning {
    border-left: 3px solid #3b82f6;
    background: rgba(59, 130, 246, 0.06);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 14px 16px;
    margin-bottom: var(--spacing-md);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.settings-delete-warning p {
    margin: 0 0 8px;
}
.settings-delete-warning p:last-child {
    margin-bottom: 0;
}
.settings-delete-permanent {
    color: #3b82f6;
    text-decoration: underline;
    text-decoration-style: dotted;
}
.settings-delete-trigger {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
}
.settings-delete-trigger:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
}
.settings-confirm-box--danger {
    border-color: rgba(59, 130, 246, 0.3);
}
.settings-confirm-title--danger {
    color: #3b82f6;
    font-size: 1.3rem;
}
.settings-delete-username-display {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 0.9rem;
    color: #60a5fa;
    font-family: monospace;
    user-select: all;
}
.settings-delete-confirm-btn {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
}
.settings-delete-confirm-btn:hover:not(:disabled) {
    background: #2563eb !important;
    border-color: #2563eb !important;
}
.settings-delete-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cancel {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9em;
    transition: all var(--transition-fast);
}

.btn-cancel:hover {
    background: var(--bg-card);
    border-color: var(--accent-blue);
}

.btn-submit {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--cta-bg);
    border: 1px solid var(--cta-bg);
    border-radius: var(--radius-md);
    color: var(--on-accent);
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.btn-submit:hover {
    background: var(--cta-bg-hover);
    border-color: var(--cta-bg-hover);
}

/* ============================================================================
   EXTEND FLOW OVERLAY
   ============================================================================ */
.extend-flow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    overflow-y: auto;
}

/* A modal owns scene selection while open; suppress the page-level selection dock. */
body:has(.extend-flow-overlay) .scene-library-bar {
    visibility: hidden !important;
    pointer-events: none !important;
}

.extend-flow-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    max-height: min(90vh, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.extend-flow-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
}

.extend-flow-header h2 {
    color: var(--text-primary);
    font-size: 1.5em;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.extend-flow-header-credit {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 0.8em;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(200, 164, 92, 0.2) 0%, rgba(200, 164, 92, 0.15) 100%);
    border: 1px solid rgba(200, 164, 92, 0.3);
    color: var(--accent-primary);
}

.extend-flow-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 2em;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    line-height: 1;
}

.extend-flow-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.extend-flow-content {
    padding: var(--spacing-xl);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.extend-flow-step-title {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.extend-flow-step-description {
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    font-size: 1.1em;
}

.extend-browse-choice {
    margin-top: var(--spacing-lg);
}
.extend-browse-prompt {
    margin-bottom: var(--spacing-md);
    font-size: 1em;
    color: var(--text-secondary);
}
.extend-browse-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}
.extend-browse-buttons .step-btn {
    min-width: 10rem;
}
.extend-interest-cards {
    margin-top: var(--spacing-lg);
}
.extend-interest-cards .guided-interest-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}
/* Show me everything: full width so it sits clearly at the end of the row */
.extend-interest-cards .guided-interest-btn-explore {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
}
.extend-scenes-by-interest {
    margin-top: var(--spacing-lg);
}
.extend-change-interest-btn {
    margin-bottom: var(--spacing-md);
}
.extend-scenes-by-interest-grid .scene-grid {
    max-height: 50vh;
    overflow-y: auto;
}
.extend-guided-wrapper .scene-picker-state,
.guided-suggestions-wrapper .scene-picker-state {
    margin-top: var(--spacing-sm);
}
.extend-back-to-browse-btn {
    margin-bottom: var(--spacing-md);
}

@media (max-width: 640px) {
    .scene-picker-state {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .scene-picker-state .scene-picker-retry {
        width: 100%;
        margin-left: 0;
    }
    .guided-selection-context {
        align-items: stretch;
        flex-direction: column;
    }
    .guided-change-interest {
        width: 100%;
        margin-left: 0;
    }
}

.extend-scene-selection-wrapper {
    margin-top: var(--spacing-lg);
}

.extend-search-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
}

/* Scene grid in extend/initial flow: scrollable when many scenes (all breakpoints) */
.extend-scene-selection-wrapper .scene-grid,
#extendSceneGridContainer .scene-grid {
    max-height: 50vh;
    overflow-y: auto;
    padding-bottom: var(--spacing-md);
}

.session-history-loading {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-muted, rgba(255, 255, 255, 0.65));
    font-size: 0.95rem;
}

.session-history-loading--skeleton {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
    max-width: 720px;
    margin: 0 auto;
    padding: var(--spacing-lg) 0;
}

.session-skeleton-block {
    border-radius: var(--radius-lg);
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 0%,
        rgba(200, 164, 92, 0.12) 50%,
        var(--bg-tertiary) 100%
    );
    background-size: 200% 100%;
    animation: sessionSkeletonShimmer 1.4s ease-in-out infinite;
}

.session-skeleton-block--header {
    height: 48px;
    max-width: 420px;
}

.session-skeleton-block--media {
    height: min(400px, 55vh);
    width: 100%;
}

.session-history-loading-label {
    margin: 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@keyframes sessionSkeletonShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.extend-repeat-last-wrap {
    margin-bottom: var(--spacing-lg);
}

.extend-repeat-last-btn {
    width: 100%;
    text-align: center;
}

.extend-repeat-last-hint {
    margin: var(--spacing-sm) 0 0;
    font-size: 0.875rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.65));
    text-align: center;
}

.extend-flow-divider {
    border: none;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
    margin: 0 0 var(--spacing-lg);
}

.extend-same-scene-btn {
    margin-bottom: 0;
}

.extend-flow-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-xl);
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.extend-flow-cancel {
    flex: 0 0 auto;
    justify-content: center;
}

.extend-flow-continue {
    flex: 1;
    justify-content: center;
}

.extend-flow-note {
    text-align: right;
}

/* Coming back: one quiet line over the Create box that opens the last finished video. */
.dumpbox-return-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-md);
    padding: 10px 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    background: var(--bg-elevated, rgba(255, 255, 255, 0.04));
}
.dumpbox-return-card p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary, #b5b5b5);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}
.dumpbox-return-card strong {
    color: var(--text-primary, #f2f2f2);
    font-weight: 600;
}
.dumpbox-return-open {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--accent-primary, #c8a45c);
    border-radius: 8px;
    background: transparent;
    color: var(--accent-primary, #c8a45c);
    font-weight: 600;
    cursor: pointer;
}
.dumpbox-return-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--text-secondary, #b5b5b5);
    font-size: 1.25rem;
    cursor: pointer;
}

/* An error from this window, inside it next to the button (the page's status line is behind it). */
.extend-flow-navigation {
    flex-wrap: wrap;
}
.extend-flow-error {
    flex: 1 1 100%;
    order: -1;
    margin: 0;
    color: var(--error, #ef4444);
    font-size: 0.875rem;
    line-height: 1.4;
}
.extend-flow-error[hidden] {
    display: none;
}
/* Their own choice (Not now, Cancel): a calm line, not a red one. */
.extend-flow-error.is-calm {
    color: var(--text-secondary);
}

/* Phones: step buttons go full width, so stack them with the main action on
   top (Cancel used to push "Continue video" off the right edge). */
@media (max-width: 768px) {
    .extend-flow-navigation {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    .extend-flow-navigation .extend-flow-cancel,
    .extend-flow-navigation .extend-flow-continue {
        flex: 0 0 auto;
        width: 100%;
    }
    .extend-flow-note {
        text-align: center;
    }
    /* Column is reversed on phones, so the highest order sits on top, over Continue. */
    .extend-flow-navigation .extend-flow-error {
        order: 99;
        text-align: center;
    }
}

/* MOB-02: sticky Continue/Cancel on phones inside extend overlay (R15 partial) */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .extend-flow-container {
        display: flex;
        flex-direction: column;
        max-height: min(92dvh, 92vh);
    }
    .extend-flow-content {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0;
        --extend-flow-pad: var(--spacing-xl);
    }
    /* Opaque and edge to edge: the old background variable was never defined, so the form showed
       through the bar, and the content's own padding left a scrolling strip around and under it. */
    .extend-flow-navigation {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin: 0 calc(-1 * var(--extend-flow-pad));
        padding: var(--spacing-md) var(--extend-flow-pad) calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
        background: var(--bg-card, #141416);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
    }
}
@media (max-width: 480px) {
    .extend-flow-content { --extend-flow-pad: var(--spacing-md); }
}

/* Step 5 scene selection: reuse extend-flow layout so content uses full space (parity with extend modal) */
.step-card-scene-selection {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.step-card-scene-selection .extend-flow-content {
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-xl);
    box-sizing: border-box;
}
.step-card-scene-selection .extend-flow-step {
    width: 100%;
    max-width: 100%;
}
/* Guided wrapper and scene-by-interest section use full width so grid gets more columns and less vertical scroll */
.step-card-scene-selection .guided-suggestions-wrapper,
.step-card-scene-selection .extend-scenes-by-interest,
.step-card-scene-selection .extend-scenes-by-interest .suggested-next-content,
.step-card-scene-selection #guidedSuggestionsContent,
.step-card-scene-selection #guidedSuggestionsContent .extend-scenes-by-interest-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: block;
}
.step-card-scene-selection #guidedSuggestionsContent .extend-scenes-by-interest-grid .scene-grid {
    max-height: 50vh;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Force Step 5 scene grid to use full available width: override any constraint from ancestors */
#step5.step .step-card-scene-selection,
#step5.step .step-card-scene-selection .extend-flow-content,
#step5.step .step-card-scene-selection .extend-flow-step,
#step5.step .step-card-scene-selection .guided-suggestions-wrapper,
#step5.step .step-card-scene-selection .extend-scenes-by-interest,
#step5.step .step-card-scene-selection .extend-scenes-by-interest .suggested-next-content,
#step5.step #guidedSuggestionsContent,
#step5.step #guidedSuggestionsContent .extend-scenes-by-interest-grid {
    width: 100% !important;
    max-width: 100% !important;
}
#step5.step #guidedSuggestionsContent .extend-scenes-by-interest-grid .scene-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

/* Ensure step flow and step 5 container use full width so scene grid can expand */
.step-flow-container .step-container {
    width: 100%;
    min-width: 0;
}
#step5.step.active {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.scene-btn-optimized {
    border-color: var(--success) !important;
    position: relative;
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.scene-btn-optimized:hover {
    border-color: var(--success) !important;
    box-shadow: 0 0 12px -3px rgba(16, 185, 129, 0.3);
}

.scene-btn-optimized::after {
    content: "✓";
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--success);
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    font-size: 10px;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: bold;
}

/* Mobile menu toggle: hidden on desktop; shown on narrow/phone (see @media below) */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 12px));
    left: max(12px, env(safe-area-inset-left, 12px));
    z-index: 1100;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible {
    border-color: var(--accent-primary);
    outline: none;
}
body.sidebar-open .mobile-menu-toggle {
    opacity: 0;
    pointer-events: none;
}
/* Phones: content scrolling under the floating menu button is hidden by a solid
   bar down to the button's bottom edge (plus a short fade), so the button never
   sits on top of card edges, headings or photos. */
@media (max-width: 768px) {
    body:not(.sidebar-open):not(.fs-modal-body-lock)::before {
        content: "";
        position: fixed;
        inset: 0 0 auto 0;
        height: calc(72px + env(safe-area-inset-top, 0px));
        background: linear-gradient(var(--bg-primary) calc(100% - 12px), transparent);
        z-index: 1099;
        pointer-events: none;
    }
}

/* ============================================================================
   MOBILE RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
    /* Site header: compact nav, hide theme label, allow wrap */
    .site-header {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    .site-nav {
        gap: var(--spacing-sm);
        font-size: 0.9rem;
    }
    .theme-switcher .theme-label {
        display: none;
    }
    .site-header-actions .theme-switcher select {
        min-height: 44px;
        min-width: 44px;
    }
    /* Main content: full width; hamburger overlays top-left */
    .main-content {
        padding-left: 0;
        padding-top: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }
    /* Auth pages */
    .auth-main {
        padding: var(--spacing-md);
    }
    .auth-card {
        padding: var(--spacing-lg);
    }
    .auth-title {
        font-size: 1.5rem;
    }
    /* Modals: full-bleed on very small, safe margins */
    .modal-content {
        width: calc(100% - var(--spacing-lg));
        max-width: none;
        margin: var(--spacing-md);
        max-height: 85vh;
        max-height: calc(100dvh - 24px);
    }
    
    .generation-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .generation-meta {
        white-space: normal;
    }
    
    .generation-action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .generation-action-bar > button,
    .generation-action-bar > .btn-retry-completed {
        width: 100%;
        max-width: 100%;
    }

    .generation-action-bar-body > button,
    .generation-action-bar-body > .btn-retry-completed,
    .generation-action-bar-body > .action-btn,
    .generation-action-bar-body > .btn-add-audio,
    .generation-action-bar-body > .gen-action-primary {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }

    .generation-actions {
        max-width: 100%;
        flex-direction: column;
    }
    
    .generation-actions button {
        min-width: 100%;
        width: 100%;
    }
    
    .generation-failed-actions {
        flex-direction: column;
        max-width: 100%;
    }
    
    .generation-failed-actions button {
        min-width: 100%;
        width: 100%;
    }
    
    .generation-video video {
        max-width: 100%;
        max-height: 400px;
    }
    
    /* Sidebar mobile: off-canvas overlay (no persistent icon strip — full-bleed content) */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh; /* fallback */
        height: 100dvh; /* dynamic viewport height - accounts for mobile browser chrome */
        height: -webkit-fill-available; /* Safari iOS fallback */
        z-index: 1000;
        transform: translateX(-100%);
        box-shadow: var(--shadow-xl);
        transition: transform var(--duration-normal) var(--ease-out),
                    width var(--duration-fast) var(--ease-out);
        background: var(--bg-secondary);
        border-right: 1px solid var(--border-color);
        width: 280px;
        max-width: 85vw;
        min-width: 0;
    }
    
    /* Collapsed = fully hidden off-screen (hamburger opens expanded overlay) */
    .sidebar.sidebar-collapsed {
        transform: translateX(-100%);
        width: 280px;
        max-width: 85vw;
        min-width: 0;
        pointer-events: none;
    }

    .sidebar.sidebar-collapsed .sidebar-collapsed-strip {
        display: none !important;
        opacity: 0;
        pointer-events: none;
    }
    
    .sidebar.open {
        transform: translateX(0);
        width: 280px;
        max-width: 85vw;
        pointer-events: auto;
    }
    
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duration-normal) var(--ease-out);
    }
    
    .sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    
    /* Mobile: full-bleed content — no strip margin */
    .main-content {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        box-sizing: border-box;
        transition: none;
    }
    
    body.sidebar-open .main-content {
        margin-left: 0;
    }

    /* Floating hamburger (replaces collapsed strip on phone) */
    .mobile-menu-toggle {
        display: flex !important;
    }

    /* Clearance so hamburger does not cover step eyebrow / page titles */
    .step-flow-container,
    .main-content .content-header,
    .main-content .session-view > .content-header,
    .auth-content-wrap {
        padding-top: max(3.25rem, calc(44px + 12px + env(safe-area-inset-top, 0px)));
    }
    
    .main-content .auth-content-wrap {
        padding: var(--spacing-md);
        align-items: flex-start;
        padding-top: max(4.5rem, calc(72px + env(safe-area-inset-top, 0px)));
    }
    
    .content-header {
        padding: var(--spacing-lg);
        padding-top: var(--spacing-sm);
    }
    
    .content-header h1 {
        font-size: 1.5em;
    }
    
    .step-flow-container {
        padding: var(--spacing-md);
        padding-top: max(3.25rem, calc(44px + 12px + env(safe-area-inset-top, 0px)));
        max-width: 100%;
        margin: 0;
    }
    
    .imggen-standalone-container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        /* The standalone content header already owns hamburger clearance. */
        padding-top: 0;
    }
    
    .main-content .session-view,
    .main-content .content-header {
        max-width: 100%;
    }
    
    .step-progress {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
    
    .step-progress-item {
        font-size: 0.8em;
    }
    
    .step-progress-item-number {
        width: 28px;
        height: 28px;
        font-size: 0.9em;
    }
    
    .step-progress-connector {
        width: 20px;
    }
    
    .step-card {
        padding: var(--spacing-lg);
    }
    
    .step-title {
        font-size: 1.5em;
    }
    
    .step-1-alt-row {
        grid-template-columns: 1fr;
    }

    /* Compact step-1 so library + upload stay above the fold */
    .step-1-layout {
        gap: var(--spacing-md);
        margin-top: var(--spacing-md);
    }

    .step-1-option-primary.step-1-option-generate {
        min-height: 0;
        padding: 0.85rem 1rem 1rem;
        gap: 0.35rem;
    }

    .step-1-option-primary.step-1-option-generate .step-1-option-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 0.15rem;
    }

    .step-1-option-primary.step-1-option-generate .step-1-option-icon svg,
    .step-1-option-primary.step-1-option-generate .step-1-option-icon i,
    .step-1-option-primary.step-1-option-generate .step-1-option-icon [data-lucide] {
        width: 22px;
        height: 22px;
    }

    .step-1-option-primary.step-1-option-generate .step-1-option-label {
        font-size: 1.05rem;
    }

    .step-1-option-primary.step-1-option-generate .step-1-option-subtitle {
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .step-1-alt-label {
        margin-top: 0.15rem;
        font-size: 0.8rem;
    }

    .step-1-option-secondary {
        min-height: 0;
        padding: 0.85rem 1rem;
    }

    .step-1-options-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .step-1-option-card {
        min-height: 0;
    }

    #step1 .step-card {
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
    }

    #step1 .step-description {
        margin-bottom: 0.35rem;
        font-size: 0.95rem;
    }

    #step1 .step-hq-tip {
        font-size: 0.82rem;
        margin-bottom: 0.35rem;
        padding: 0 0.5rem;
    }

    #step1 .step-1-layout {
        margin-top: var(--spacing-sm);
    }

    .step-media-rights-note {
        padding: 0 0.25rem;
    }
    
    .quality-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .scene-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    /* Extend scene selection grid - optimized for mobile */
    .extend-scene-selection-wrapper .scene-grid,
    #extendSceneGridContainer .scene-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
        max-height: 60vh;
        overflow-y: auto;
        padding: var(--spacing-sm);
    }
    /* Step 5 scene grid - same as extend, full width and responsive */
    .step-card-scene-selection #guidedSuggestionsContent .extend-scenes-by-interest-grid .scene-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
        max-height: 60vh;
        overflow-y: auto;
        padding: var(--spacing-sm);
    }
    
    .scene-btn {
        font-size: 0.85em;
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 44px;
    }
    
    .step-navigation {
        flex-direction: column;
    }
    
    .step-btn {
        width: 100%;
        justify-content: center;
    }
    
    .session-history {
        padding: var(--spacing-md);
        padding-top: var(--spacing-sm);
        padding-bottom: max(4rem, calc(env(safe-area-inset-bottom, 0px) + 3rem));
    }
    
    .generation-item {
        padding: var(--spacing-sm) 0;
    }
    
    .generation-in-progress {
        padding: var(--spacing-xl) var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .auth-card {
        padding: var(--spacing-md);
    }
    .auth-title {
        font-size: 1.35rem;
    }
    .step-progress {
        display: none !important; /* hidden — re-enable when needed */
        padding: var(--spacing-sm);
        gap: var(--spacing-xs);
        overflow-x: auto;
        scrollbar-width: none;
    }
    
    .step-progress::-webkit-scrollbar {
        display: none;
    }
    
    .quality-grid {
        grid-template-columns: 1fr;
    }
    
    .scene-grid {
        grid-template-columns: 1fr;
    }
    
    /* Extend scene selection - single column on very small screens */
    .extend-scene-selection-wrapper .scene-grid,
    #extendSceneGridContainer .scene-grid {
        grid-template-columns: 1fr;
        max-height: 50vh;
        overflow-y: auto;
        padding-bottom: var(--spacing-md);
    }
    /* Step 5 scene grid - single column on very small screens */
    .step-card-scene-selection #guidedSuggestionsContent .extend-scenes-by-interest-grid .scene-grid {
        grid-template-columns: 1fr;
        max-height: 50vh;
        overflow-y: auto;
        padding-bottom: var(--spacing-md);
    }
    
    /* Scene tabs - scrollable on mobile (exclude compact SFW pill toggle) */
    .scene-tabs-primary:not(.scene-library-sfw-toggle) {
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--spacing-xs);
    }
    
    .scene-tabs-primary:not(.scene-library-sfw-toggle)::-webkit-scrollbar {
        height: 4px;
    }
    
    .step-1-option-btn {
        min-height: 150px;
        padding: var(--spacing-lg);
    }
    
    .extend-flow-overlay {
        padding: var(--spacing-md);
    }
    
    .extend-flow-container {
        max-height: 95vh;
        max-height: calc(100dvh - 24px);
    }
    
    /* No bottom padding: the sticky Continue/Cancel bar sits on the edge (MOB-02 above; a strip scrolled under it). */
    .extend-flow-content {
        padding: var(--spacing-md) var(--spacing-md) 0;
    }
    
    /* Generating view mobile styles */
    .generating-details {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }
    
    .generating-detail-item {
        min-width: 100%;
        width: 100%;
    }
    
    .generating-detail-item-full {
        min-width: 100%;
    }
    
    .generating-detail-header {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
    
    .generating-copy-btn {
        margin-top: 0;
        padding: var(--spacing-xs);
        min-width: 36px;
        justify-content: center;
    }
    
    .generating-copy-text {
        display: none; /* Hide text on mobile, show only icon */
    }
    
    .generating-detail-prompt-box {
        max-height: 150px;
        font-size: 0.9em;
        padding: var(--spacing-sm);
        line-height: 1.5;
    }
    
    .generating-title {
        font-size: 1.5em;
    }
    
    .generating-subtitle {
        font-size: 1em;
    }
}

/* ============================================================================
   CONTENT POLICY MODAL  (v1.0)
   ============================================================================ */
.cpmodal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 16px;
    animation: cpmodal-fade-in 0.3s ease;
}

.cpmodal-overlay.cpmodal-fade-out {
    opacity: 0;
    transition: opacity 0.35s ease;
}

@keyframes cpmodal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cpmodal-container {
    position: relative;
    background: var(--bg-elevated, #161616);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    max-height: min(90vh, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Close button */
.cpmodal-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color, #2a2a4a);
    border-radius: 8px;
    color: var(--text-secondary, #999);
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
}
.cpmodal-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #fff);
    border-color: var(--text-secondary, #666);
}
.cpmodal-close-btn svg {
    width: 18px;
    height: 18px;
}

/* Header */
.cpmodal-header {
    padding: 28px 28px 0;
    text-align: center;
    flex-shrink: 0;
}

.cpmodal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(200, 164, 92, 0.15);
    margin-bottom: 12px;
}

.cpmodal-icon svg {
    width: 28px;
    height: 28px;
    color: var(--accent-primary, #c8a45c);
}

.cpmodal-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary, #f0f0ff);
}

.cpmodal-subtitle {
    margin: 8px 0 0;
    font-size: 0.88rem;
    color: var(--text-secondary, #888);
    line-height: 1.5;
}

/* Scrollable body */
.cpmodal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 28px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}

.cpmodal-body::-webkit-scrollbar {
    width: 6px;
}

.cpmodal-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

/* Prohibited list */
.cpmodal-list {
    list-style: none;
    counter-reset: cpitem;
    margin: 0;
    padding: 0;
}

.cpmodal-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    counter-increment: cpitem;
}

.cpmodal-item:last-child {
    border-bottom: none;
}

.cpmodal-item-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.cpmodal-item-icon svg {
    width: 18px;
    height: 18px;
    color: #ef4444;
}

.cpmodal-item strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary, #f0f0ff);
    margin-bottom: 2px;
}

.cpmodal-item strong::before {
    content: counter(cpitem) ". ";
    color: var(--text-secondary, #888);
    font-weight: 500;
}

.cpmodal-item p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary, #999);
    line-height: 1.45;
}

/* Footer note */
.cpmodal-footer-note {
    margin-top: 16px;
    padding: 14px;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.cpmodal-footer-note p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary, #bbb);
    line-height: 1.5;
}

.cpmodal-footer-note a {
    color: var(--accent-primary);
    text-decoration: underline;
}

/* Actions bar */
.cpmodal-actions {
    padding: 16px 28px 24px;
    text-align: center;
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.cpmodal-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary, #888);
    margin-bottom: 12px;
    animation: cpmodal-bounce 1.4s ease infinite;
}

.cpmodal-scroll-hint svg {
    width: 14px;
    height: 14px;
}

@keyframes cpmodal-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

.cpmodal-agree-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.35);
}

.cpmodal-agree-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.cpmodal-agree-btn-active,
.cpmodal-agree-btn:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-active) 100%);
    color: var(--on-accent);
    opacity: 1;
    box-shadow: 0 4px 16px rgba(200, 164, 92, 0.35);
}

.cpmodal-agree-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(200, 164, 92, 0.45);
}

.cpmodal-agree-btn svg {
    width: 18px;
    height: 18px;
}

.cpmodal-spinner {
    animation: cpmodal-spin 0.8s linear infinite;
}

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

/* ── Compact content-policy modal (v2 — two responsibility cards) ─── */
/* Capped to the visible screen: the rules scroll and "I confirm" stays in view
   (with no cap, short phones cut off the top and the confirm button). */
.cpmodal-container--compact {
    max-width: 480px;
    max-height: min(90vh, calc(100dvh - 32px));
}
.cpmodal-body--compact {
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    padding: 20px 28px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cpmodal-responsibility-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary, #e8e6f0);
}
.cpmodal-responsibility-icon {
    flex-shrink: 0;
    font-size: 1.15rem;
    line-height: 1.4;
}
.cpmodal-continuing-note {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--text-muted, #777);
    text-align: center;
}
.cpmodal-rules-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--accent-primary);
    text-decoration: underline;
    text-align: center;
    justify-content: center;
}
.cpmodal-rules-link:hover {
    color: var(--accent-hover);
}
/* Welcome pop-up footer: the 18+ line and the two links sit above the consent tick and stay in view */
.cpmodal-actions .cpmodal-continuing-note {
    margin: 0 0 6px;
    line-height: 1.4;
}
.cpmodal-rules-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 16px;
    margin: 0 0 12px;
}

/* Compact responsibility summary (v3.0) */
.cpmodal-responsibility-summary {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
    margin: 0;
    text-align: center;
}

/* Prohibited list heading */
.cpmodal-prohibited-heading {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 6px;
    text-align: center;
}

/* Two-column prohibited categories grid */
.cpmodal-prohibited-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 16px;
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: prohibited;
}
.cpmodal-prohibited-grid li {
    counter-increment: prohibited;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    padding: 2px 0;
    line-height: 1.35;
}
.cpmodal-prohibited-grid li::before {
    content: counter(prohibited) ". ";
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    min-width: 22px;
    display: inline-block;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .cpmodal-container {
        max-height: 95vh;
        max-height: calc(100dvh - 24px);
        border-radius: 12px;
    }
    .cpmodal-container--compact {
        max-height: calc(100dvh - 24px);
    }
    /* Room for the 32px x at the right: the Russian title ran under it. */
    .cpmodal-header {
        padding: 20px 48px 0;
    }
    .cpmodal-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
    }
    .cpmodal-icon svg {
        width: 22px;
        height: 22px;
    }
    .cpmodal-body {
        padding: 16px 20px 8px;
    }
    /* In German, Russian, French and Japanese the rules and the agreement text do not both fit on a
       small phone, and the rules shrank to a hidden inner scroll of 1 to 4 lines. On phones the window
       scrolls as one instead: every rule reads in full, and the agree button follows them. */
    .cpmodal-container--compact {
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .cpmodal-body--compact {
        flex: 0 0 auto;
        overflow: visible;
        padding: 14px 20px 8px;
        gap: 10px;
    }
    .cpmodal-actions {
        padding: 12px 20px 20px;
    }
    #contentPolicyOverlay .cpmodal-actions {
        padding: 10px 20px 16px;
    }
    .cpmodal-responsibility-summary {
        font-size: 0.86rem;
    }
    .cpmodal-title {
        font-size: 1.15rem;
    }
    .cpmodal-prohibited-grid {
        gap: 2px 10px;
    }
    .cpmodal-prohibited-grid li {
        font-size: 0.74rem;
        padding: 0;
    }
}
/* Shorter screens (phones, most laptops): no icon, so the whole welcome pop-up fits without scrolling */
@media (max-height: 860px) {
    .cpmodal-icon {
        display: none;
    }
    #contentPolicyOverlay .cpmodal-header {
        padding-top: 18px;
    }
}


/* =============================================================================
   Step 3 crop + scene preview video v2.1 (L-05 / L-06)
   version: 1.0.7
   ============================================================================= */

.step-preview-controls {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin: calc(-1 * var(--spacing-sm)) 0 var(--spacing-lg);
}

.step-preview-controls .scene-library-motion-toggle:focus-within {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

.image-preview-container.is-cropping {
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    background: rgba(56, 139, 253, 0.08);
    border: 2px solid var(--accent-blue);
    box-shadow: 0 0 0 1px rgba(56, 139, 253, 0.15), var(--shadow-md);
}

.image-preview-crop-badge {
    display: inline-block;
    margin-bottom: var(--spacing-md);
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--on-accent-blue);
    background: var(--accent-blue);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}

.image-preview-crop-badge.hidden {
    display: none;
}

.step3-crop-stage {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    touch-action: none;
    user-select: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--border-color);
}

.step3-crop-source {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.step3-crop-shade {
    position: absolute;
    background: rgba(1, 4, 9, 0.62);
    pointer-events: none;
}

.step3-crop-shade[data-side="top"] {
    top: 0;
    left: 0;
    width: 100%;
}

.step3-crop-shade[data-side="bottom"] {
    left: 0;
    width: 100%;
}

.step3-crop-shade[data-side="left"] {
    left: 0;
}

.step3-crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--accent-blue);
    border: 2px solid #fff;
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
}

.step3-crop-handle.se {
    right: -7px;
    bottom: -7px;
    cursor: nwse-resize;
}

.step3-crop-box {
    position: absolute;
    border: 2px solid var(--accent-blue);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
    cursor: move;
    box-sizing: border-box;
}

.scene-library-motion-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.scene-library-motion-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
}

.scene-library-sort-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.scene-library-sort-label {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.scene-library-sort-select {
    height: 38px;
    min-width: 148px;
    padding: 0 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 13px;
}

@media (max-width: 768px) {
    .scene-library-chips--desktop {
        display: none !important;
    }

    .scene-library-category-mobile {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 0 2px;
    }

    .scene-library-category-select {
        flex: 1;
        min-width: 0;
        max-width: 100%;
        height: 42px;
        font-size: 16px;
    }
}

.scene-card-media-controls {
    position: absolute;
    right: 7px;
    bottom: 7px;
    z-index: 3;
    display: flex;
    gap: 5px;
    pointer-events: auto;
}

.scene-card-play-btn,
.scene-card-loop-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(10, 10, 11, 0.72);
    cursor: pointer;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.scene-card-play-btn:hover,
.scene-card-loop-btn:hover {
    background-color: rgba(20, 20, 24, 0.92);
    transform: scale(1.05);
}

.scene-card-play-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpolygon points='9 6 18 12 9 18 9 6'/%3E%3C/svg%3E");
    background-size: 12px;
}

.scene-card-play-btn.is-playing {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Crect x='7' y='6' width='4' height='12'/%3E%3Crect x='13' y='6' width='4' height='12'/%3E%3C/svg%3E");
    background-size: 12px;
}

.scene-card-loop-btn.is-loop-on {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M17 2l4 4-4 4'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpath d='M7 22l-4-4 4-4'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
    background-size: 13px;
}

.scene-card-loop-btn.is-loop-off {
    opacity: 0.55;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpath d='M17 2l4 4-4 4'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpath d='M7 22l-4-4 4-4'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
    background-size: 13px;
}

.scene-card-thumb.is-video-playing::after {
    opacity: 0.35;
}

.suggested-next-card-thumb-wrap .scene-card-media-controls {
    right: 4px;
    bottom: 4px;
    gap: 3px;
}

.suggested-next-card-thumb-wrap .scene-card-play-btn,
.suggested-next-card-thumb-wrap .scene-card-loop-btn {
    width: 22px;
    height: 22px;
}

@media (hover: none) and (pointer: coarse) {
    .scene-card-thumb:has(.scene-card-media-controls)::before {
        display: none;
    }
}


/* =============================================================================
   AFFILIATE SYSTEM STYLES
   version: 1.0.6
   ============================================================================= */

/* ---------- Info Page ---------- */
.affiliate-info-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.aff-hero {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
    margin-bottom: 2.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(200, 164, 92,0.12) 0%, rgba(200, 164, 92,0.08) 100%);
    border: 1px solid rgba(200, 164, 92,0.18);
}
.aff-hero__badge {
    display: inline-block;
    padding: 0.3rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-primary);
    border: 1px solid rgba(200, 164, 92, 0.35);
    border-radius: 20px;
    margin-bottom: 1rem;
}
.aff-hero__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.75rem;
}
.aff-hero__highlight {
    color: var(--accent-primary);
}
.aff-hero__subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary, #94a3b8);
    max-width: 600px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}
.aff-hero__cta {
    margin-top: 1.5rem;
}

/* Buttons */
.aff-btn {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.aff-btn--primary {
    background: var(--accent-primary);
    color: var(--on-accent);
}
.aff-btn--primary:hover {
    background: var(--cta-bg-hover);
    color: var(--on-accent);
    text-decoration: none;
}
.aff-btn--secondary {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #e2e8f0);
    border: 1px solid rgba(255,255,255,0.15);
}
.aff-btn--secondary:hover {
    background: rgba(255,255,255,0.12);
}
.aff-btn--lg {
    padding: 0.8rem 2rem;
    font-size: 1.05rem;
}

/* Sections */
.aff-section {
    margin-bottom: 2.5rem;
}
.aff-section__title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.aff-section--cta {
    text-align: center;
    padding: 2rem 0;
}
.aff-section__footnote {
    margin-top: 1rem;
    font-size: 0.9rem;
}
.aff-section__footnote a {
    color: var(--text-secondary, #94a3b8);
}

/* Steps */
.aff-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
}
.aff-step {
    padding: 1.25rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    text-align: center;
}
.aff-step__number {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--on-accent);
    font-weight: 700;
    font-size: 1rem;
    margin: 0 auto 0.75rem;
}
.aff-step__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.35rem;
}
.aff-step__desc {
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
}

/* Detail cards */
.aff-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
}
.aff-detail-card {
    padding: 1.25rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    text-align: center;
}
.aff-detail-card__icon {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}
.aff-detail-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.3rem;
}
.aff-detail-card__desc {
    font-size: 0.82rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
}

/* Info box */
.aff-info-box {
    padding: 1.25rem;
    background: rgba(200, 164, 92,0.06);
    border: 1px solid rgba(200, 164, 92,0.15);
    border-radius: 10px;
}
.aff-info-box--muted {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-secondary, #94a3b8);
    font-size: 0.9rem;
    line-height: 1.6;
}
.aff-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.aff-info-list li {
    padding: 0.4rem 0;
    padding-left: 1.2rem;
    position: relative;
    font-size: 0.9rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.6;
}
.aff-info-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
}

/* Two-column layout */
.aff-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 600px) {
    .aff-two-col { grid-template-columns: 1fr; }
}
.aff-col__title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.aff-col__title--good { color: #4ade80; }
.aff-col__title--bad { color: #f87171; }
.aff-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.aff-check-list li {
    padding: 0.35rem 0 0.35rem 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    position: relative;
}
.aff-check-list--good li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #4ade80;
    font-weight: 700;
}
.aff-check-list--bad li::before {
    content: '\2717';
    position: absolute;
    left: 0;
    color: #f87171;
    font-weight: 700;
}

/* FAQ */
.aff-faq__item {
    margin-bottom: 0.5rem;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
}
.aff-faq__q {
    padding: 0.85rem 1rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-primary, #e2e8f0);
    cursor: pointer;
    background: rgba(255,255,255,0.03);
}
.aff-faq__q:hover {
    background: rgba(255,255,255,0.05);
}
.aff-faq__a {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.6;
}

/* ---------- Application Page ---------- */
.affiliate-apply-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 1rem;
}
.aff-apply-header {
    margin-bottom: 1.5rem;
}
.aff-apply-header__title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.3rem;
}
.aff-apply-header__subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary, #94a3b8);
}
.aff-back-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    text-decoration: none;
}
.aff-back-link:hover { color: var(--text-primary, #e2e8f0); }

/* Alerts */
.aff-alert {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}
.aff-alert--error {
    background: rgba(248,113,113,0.1);
    border: 1px solid rgba(248,113,113,0.25);
    color: #fca5a5;
}
.aff-alert--success {
    background: rgba(74,222,128,0.1);
    border: 1px solid rgba(74,222,128,0.25);
    color: #86efac;
}

/* Form */
.aff-apply-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.aff-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.aff-form-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary, #e2e8f0);
}
.aff-required { color: #f87171; }
.aff-form-input,
.aff-form-textarea,
.aff-form-select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    color: var(--text-primary, #e2e8f0);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s;
}
.aff-form-input:focus,
.aff-form-textarea:focus,
.aff-form-select:focus {
    border-color: var(--accent-primary);
}
.aff-form-hint {
    font-size: 0.78rem;
    color: var(--text-tertiary, #64748b);
    margin: 0;
}

.aff-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}
@media (max-width: 500px) {
    .aff-checkbox-grid { grid-template-columns: 1fr; }
}
.aff-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
}
.aff-checkbox-label input[type="checkbox"] {
    accent-color: var(--accent-primary);
}

.aff-form-agreement {
    padding: 0.75rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}
.aff-form-agreement a {
    color: var(--accent-primary);
}
.aff-form-actions {
    text-align: center;
    padding-top: 0.5rem;
}
.aff-form-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- Dashboard ---------- */
.affiliate-dashboard-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1rem;
}
.aff-dash-header {
    margin-bottom: 1.5rem;
}
.aff-dash-header__title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
}

/* Status */
.aff-dash-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.aff-status-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 6px;
}
.aff-status-badge--pending { background: rgba(250,204,21,0.15); color: #fde047; }
.aff-status-badge--approved { background: rgba(74,222,128,0.15); color: #86efac; }
.aff-status-badge--suspended { background: rgba(251,146,60,0.15); color: #fdba74; }
.aff-status-badge--terminated { background: rgba(248,113,113,0.15); color: #fca5a5; }
.aff-status-badge--cleared { background: rgba(74,222,128,0.15); color: #86efac; }
.aff-status-badge--rejected { background: rgba(248,113,113,0.15); color: #fca5a5; }
.aff-status-badge--reversed { background: rgba(248,113,113,0.15); color: #fca5a5; }
.aff-status-badge--paid { background: rgba(74,222,128,0.15); color: #86efac; }
.aff-status-badge--processing { background: rgba(200, 164, 92,0.15); color: var(--accent-light); }
.aff-status-badge--cancelled { background: rgba(148,163,184,0.15); color: #94a3b8; }

.aff-dash-status__msg {
    font-size: 0.88rem;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
}
.aff-dash-status__msg--warn { color: #fdba74; }

/* Referral link */
.aff-dash-reflink {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(200, 164, 92,0.06);
    border: 1px solid rgba(200, 164, 92,0.15);
    border-radius: 10px;
}
.aff-reflink-row {
    display: flex;
    gap: 0.5rem;
}
.aff-reflink-input {
    flex: 1;
    font-family: monospace;
    font-size: 0.85rem;
}

/* Stats grid */
.aff-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.aff-stat-card {
    padding: 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    text-align: center;
}
.aff-stat-card--highlight {
    border-color: rgba(200, 164, 92,0.3);
    background: rgba(200, 164, 92,0.08);
}
.aff-stat-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}
.aff-stat-card__label {
    font-size: 0.78rem;
    color: var(--text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.2rem;
}

/* Info rows */
.aff-dash-info {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    overflow: hidden;
}
.aff-dash-info__row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.aff-dash-info__row:last-child { border-bottom: none; }
.aff-dash-info__label {
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
}
.aff-dash-info__value {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary, #e2e8f0);
}

/* Tables */
.aff-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}
.aff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.aff-table th {
    padding: 0.6rem 0.75rem;
    background: rgba(255,255,255,0.04);
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
}
.aff-table td {
    padding: 0.55rem 0.75rem;
    color: var(--text-primary, #e2e8f0);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.aff-table tr:last-child td { border-bottom: none; }

/* Scene preview modal (L-01 / L-02) */
.scene-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.scene-preview-overlay.hidden { display: none; }
body.scene-preview-open { overflow: hidden; }
.scene-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 12, 0.72);
    backdrop-filter: blur(10px);
}
.scene-preview-panel {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    max-height: min(94dvh, 94vh, 900px);
    display: flex;
    flex-direction: column;
    background: var(--bg-card, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg, 0 24px 48px rgba(0, 0, 0, 0.45));
    overflow: hidden;
}
.scene-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.scene-preview-eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary, #7a7a85);
}
.scene-preview-title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.25;
}
.scene-preview-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.scene-preview-body {
    flex: 1;
    overflow: hidden;
    padding: 14px 18px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.scene-preview-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    flex-shrink: 0;
}
.scene-preview-layout {
    display: grid;
    /* Mobile-first: one column. Desktop 2-col only when wide + fine pointer. */
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
    .scene-preview-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}
.scene-preview-media {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    overflow-y: auto;
    min-height: 0;
}

/* User-first sell layout: your photo → sample story */
.scene-preview-sell-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.scene-preview-user-hero {
    position: relative;
    width: 100%;
    max-height: min(48dvh, 48vh, 460px);
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
    border: 2px solid rgba(201, 169, 98, 0.45);
}
@supports not (height: 1dvh) {
    .scene-preview-user-hero { max-height: min(48vh, 460px); }
}
.scene-preview-user-hero--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: auto;
    min-height: 180px;
    max-height: none;
    padding: 24px 16px;
    background: var(--bg-tertiary);
    border-style: dashed;
}
.scene-preview-user-hero-media {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}
.scene-preview-user-hero-empty {
    margin: 0;
    font-size: 1rem;
    color: var(--text-secondary);
    text-align: center;
}
.scene-preview-user-micro {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
    pointer-events: none;
}
.scene-preview-user-hero--empty .scene-preview-user-micro {
    position: static;
    background: none;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.88rem;
    padding: 0;
}

.scene-preview-sample-panel {
    padding: 10px 10px 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}
.scene-preview-sample-title {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.scene-preview-sample-title span {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.9;
}
.scene-preview-sample-empty {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-secondary);
}
.scene-preview-sample-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-height: 0;
}
.scene-preview-sample-cell {
    position: relative;
    flex: 1;
    min-width: 0;
    aspect-ratio: 3 / 4;
    max-height: min(22dvh, 22vh, 200px);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #000;
}
.scene-preview-sample-cell--clip {
    flex: 1.15;
}
.scene-preview-sample-media {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}
.scene-preview-sample-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    color: var(--text-tertiary, #7a7a85);
    font-size: 1rem;
    font-weight: 600;
}

.scene-preview-pair-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    bottom: auto;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.78);
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 1;
}
.scene-preview-pair-badge-user {
    background: rgba(201, 169, 98, 0.85);
    color: #1a1508;
    border: 1px solid rgba(201, 169, 98, 0.7);
}
.scene-preview-pair-badge-before {
    background: rgba(16, 120, 60, 0.92);
    color: #ecfdf5;
    border: 1px solid rgba(34, 197, 94, 0.75);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.scene-preview-pair-badge-after {
    background: rgba(67, 56, 202, 0.92);
    color: #fff;
    border: 1px solid rgba(200, 164, 92, 0.75);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.scene-preview-outcome-note {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.scene-preview-close:focus-visible,
.scene-preview-optional-detail-summary:focus-visible,
.scene-preview-optional-advanced-summary:focus-visible {
    outline: 2px solid var(--border-focus, #c8a45c);
    outline-offset: 2px;
}
.scene-preview-empty-media {
    margin: 8px 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
}
.scene-preview-summary { overflow-y: auto; min-height: 0; padding-right: 4px; }
.scene-preview-desc { margin: 0 0 12px; line-height: 1.5; color: var(--text-primary); }
.scene-preview-desc--muted { color: var(--text-secondary); }
.scene-preview-tags { margin: 0; font-size: 0.9rem; color: var(--text-secondary); }
.scene-preview-tags-label { font-weight: 600; color: var(--text-primary); }
.scene-preview-timing {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.scene-preview-timing strong { font-weight: 600; }
.scene-preview-timing--unknown {
    color: var(--text-secondary);
    font-size: 0.88rem;
}
.scene-preview-credits {
    margin: 0 0 12px;
    font-size: 0.92rem;
    color: var(--text-primary);
}
.scene-preview-credits strong { font-weight: 600; color: var(--accent-gold, #c9a962); }
.scene-preview-retry-btn {
    margin-top: 12px;
}
.scene-preview-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary);
}
.scene-preview-error {
    color: var(--error-color, #f87171);
    margin: 0;
    padding: 12px 0;
}
.scene-preview-optional-detail {
    margin-top: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
}
.scene-preview-optional-detail-summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary);
    list-style: none;
}
.scene-preview-optional-detail-summary::-webkit-details-marker { display: none; }
.scene-preview-optional-tag {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 6px;
}
.scene-preview-optional-hint {
    margin: 10px 0 8px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.scene-preview-optional-textarea {
    width: 100%;
    min-height: 72px;
    max-height: 140px;
    resize: vertical;
    font-size: 16px;
    line-height: 1.4;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary, #161b22);
    color: var(--text-primary);
    box-sizing: border-box;
}
.scene-preview-optional-advanced {
    margin-top: 8px;
}
.scene-preview-optional-advanced-summary {
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-secondary);
    list-style: none;
}
.scene-preview-optional-advanced-summary::-webkit-details-marker { display: none; }
.scene-preview-replace-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-secondary);
    cursor: pointer;
}
.scene-preview-replace-checkbox {
    margin-top: 2px;
    flex-shrink: 0;
}

.scene-preview-overrides {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.scene-preview-overrides-title {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
.scene-preview-section {
    margin-bottom: 14px;
}
.scene-preview-section-title {
    margin: 0 0 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}
.scene-preview-section-hint {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.scene-preview-radio {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 0;
    font-size: 0.86rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.scene-preview-radio input {
    margin-top: 3px;
    accent-color: var(--accent-blue);
}

.sound-preset-modal-content {
    max-width: 28rem;
}
.sound-preset-section-label {
    margin: 14px 0 6px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.sound-preset-section-label:first-of-type {
    margin-top: 0;
}
.sound-preset-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sound-preset-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary, #161b22);
    cursor: pointer;
    font-size: 0.86rem;
    color: var(--text-secondary);
}
.sound-preset-option:hover {
    border-color: var(--accent-blue);
}
.sound-preset-option input {
    margin-top: 3px;
    accent-color: var(--accent-blue);
}

/* Narrow viewports OR real phones (coarse pointer) — never keep desktop 2-col sell layout */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .scene-preview-layout { grid-template-columns: 1fr; }
    .scene-preview-body { overflow: auto; -webkit-overflow-scrolling: touch; }
    .scene-preview-user-hero {
        height: clamp(180px, 40dvh, 380px);
        min-height: 180px;
        max-height: none;
    }
    .scene-preview-summary { max-height: none; }
    .scene-preview-sample-row {
        flex-direction: column;
        align-items: stretch;
    }
    .scene-preview-sample-arrow {
        width: auto;
        height: 18px;
    }
    .scene-preview-sample-arrow span {
        display: inline-block;
        transform: rotate(90deg);
    }
    .scene-preview-sample-cell {
        width: 100%;
        height: clamp(150px, 28dvh, 220px);
        min-height: 150px;
        max-height: none;
        aspect-ratio: auto;
        flex: none;
    }
    /* CSS backup: hide end still when clip is present (works across resize without re-render) */
    .scene-preview-sample-row:has(.scene-preview-sample-cell--clip) .scene-preview-sample-arrow:has(+ .scene-preview-sample-cell--end),
    .scene-preview-sample-row:has(.scene-preview-sample-cell--clip) .scene-preview-sample-cell--end {
        display: none;
    }
}
@media (max-width: 640px) {
    .scene-preview-user-hero {
        height: clamp(160px, 36dvh, 300px);
        min-height: 160px;
        max-height: none;
        aspect-ratio: auto;
    }
}
@media (max-width: 768px) {
    .scene-preview-overlay { padding: 0; align-items: stretch; }
    .scene-preview-panel {
        width: 100%;
        max-height: 100dvh;
        border-radius: 0;
    }
    @supports not (height: 1dvh) {
        .scene-preview-panel { max-height: 100vh; }
    }
    .scene-preview-header {
        padding-top: max(18px, env(safe-area-inset-top, 0px));
    }
    .scene-preview-footer {
        padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    }
    .scene-preview-footer .scene-preview-confirm {
        min-width: 8rem;
        min-height: 48px;
        font-size: 1.05rem;
    }
}

/* L-22: run folder + workflow artifacts on generation cards */
.generation-artifacts {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    max-width: 100%;
}

.generation-artifacts-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.generation-artifacts-subtitle {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
}

.generation-in-progress + .generation-artifacts,
.generation-pending + .generation-artifacts {
    margin-top: 14px;
}

.generation-artifacts-missing {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

.artifact-path-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.artifact-path-row:last-child {
    margin-bottom: 0;
}

.artifact-path-label {
    flex: 0 0 5.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.artifact-path-input {
    flex: 1 1 12rem;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.7rem;
    padding: 0.35rem 0.5rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.artifact-path-row .action-btn,
.artifact-path-row a.action-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Compact the quality decision on phones and large Android phone/tablet viewports.
   Chrome on S9 Ultra exposes a ~944px CSS viewport, so a 640px-only rule is not
   sufficient to prevent oversized cards there. */
@media (max-width: 1024px) {
    #step4 .quality-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
    }

    #step4 #modelTierGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #step4 .quality-card {
        min-height: 0;
        padding: 12px 6px;
    }

    #step4 .quality-card-label {
        margin-bottom: 2px;
        font-size: 0.9rem;
    }

    #step4 .quality-card-resolution {
        font-size: 0.75rem;
        line-height: 1.25;
    }

    #step4 .quality-card-badge {
        margin-top: 6px;
        padding: 4px 6px;
        font-size: 0.72rem;
    }

    /* The viewer is the decision point after a generation. Keep actions
       touch-sized, but in a compact tray so the preview stays visible. */
    .media-viewer-overlay {
        justify-content: flex-start;
        overflow-y: auto;
        padding: 56px 12px 12px;
    }

    .media-viewer-close {
        width: 44px;
        height: 44px;
        top: 6px;
        right: 6px;
    }

    .media-viewer-content,
    .media-viewer-media {
        max-width: calc(100vw - 24px);
        max-height: min(52dvh, 520px);
    }

    .media-viewer-content {
        flex: 0 1 auto;
        min-height: min(42dvh, 360px);
        margin-bottom: 8px;
    }

    .media-viewer-details,
    .media-viewer-actions {
        width: min(100%, 560px);
        box-sizing: border-box;
    }

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

    .media-viewer-actions .mv-btn {
        justify-content: center;
        min-width: 0;
        min-height: 44px;
        padding: 9px 8px;
        white-space: normal;
        text-align: center;
    }
}

/* Mobile Step 5: one page scroll, compact controls, and a reachable decision bar. */
@media (max-width: 640px) {
    /* Mobile uses the in-card sticky action row. Never hide its Continue action
       in favor of the desktop selected-scene dock. */
    .scene-library-bar {
        display: none !important;
    }

    body.scene-library-bar-open #continueFromSceneBtn {
        visibility: visible;
        pointer-events: auto;
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    #step5 .step-card-scene-selection {
        padding: 12px;
    }

    #step5 .step-card-scene-selection .extend-flow-content {
        padding: 12px;
    }

    #step5 .step5-mode-toggle {
        width: 100%;
        box-sizing: border-box;
        gap: 4px;
    }

    #step5 .step5-mode-tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 6px;
        font-size: 0.8rem;
    }

    #step5 .guided-selection-context {
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
    }

    #step5 .guided-selected-interest {
        flex: 0 0 auto;
        min-width: 86px;
        box-sizing: border-box;
    }

    #step5 .guided-selected-interest > span {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    #step5 .guided-change-interest {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        margin: 0;
    }

    #step5 .step-card-scene-selection #guidedSuggestionsContent .extend-scenes-by-interest-grid .scene-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: none;
        overflow: visible;
        padding: 0;
        scrollbar-width: none;
    }

    #step5 .step-card-scene-selection > .step-navigation {
        position: sticky;
        bottom: 0;
        z-index: 5;
        display: grid;
        grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.4fr);
        gap: 8px;
        margin: 12px 0 0;
        padding: 10px 0 max(10px, env(safe-area-inset-bottom, 0px));
        background: rgba(18, 18, 20, 0.97);
        box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.36);
    }

    #step5 .step-card-scene-selection > .step-navigation .step-btn {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .scene-preview-body,
    .scene-preview-media,
    .scene-preview-summary {
        scrollbar-width: none;
    }

    .scene-preview-body::-webkit-scrollbar,
    .scene-preview-media::-webkit-scrollbar,
    .scene-preview-summary::-webkit-scrollbar {
        display: none;
    }
}
/* Text-only sessions use a calm origin card instead of a broken image slot. */
.generation-text-origin {
    min-height: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.5rem;
    color: var(--text-secondary);
    text-align: center;
    background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary));
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
}
.generation-text-origin strong { color: var(--accent-primary); }

/* ForgeScene dumb-box composer ------------------------------------------------ */
.step-flow-container:has(#forgeDumpbox) .step-progress { display: none; }
/* Inactive legacy wizard steps are absolutely positioned. On mobile Chrome
   their off-screen contents still enlarge the scrollable overflow area and
   leave a blank screen below the composer. Keep only the active step in layout;
   image creation still works because its step becomes active before display. */
.step-flow-container:has(#forgeDumpbox) .step-container > .step:not(.active) { display: none !important; }
.dumpbox-card { max-width: 980px; margin: 0 auto; padding: clamp(20px, 4vw, 42px); border-color: var(--surface-border-accent); background: linear-gradient(180deg, rgba(200, 164, 92, .035), transparent 180px), var(--bg-secondary); }
.dumpbox-mode-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--text-muted); font-size: 12px; }
.dumpbox-mode-row p { margin: 0; }
.dumpbox-mode-toggle { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--surface-border-accent); border-radius: 999px; overflow: hidden; background: var(--bg-primary); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.dumpbox-mode { border: 0; background: transparent; color: var(--text-secondary); padding: 9px 16px; font-weight: 700; cursor: pointer; transition: background .16s ease, color .16s ease; }
.dumpbox-mode:hover { color: var(--text-primary); background: var(--bg-hover); }
.dumpbox-mode.active { color: var(--on-accent); background: var(--cta-bg); }
.dumpbox-mode:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.dumpbox-notice { padding: 11px 13px; border: 1px solid var(--surface-border-accent); border-radius: 8px; background: var(--accent-subtle); color: var(--accent-light); font-size: 12px; margin-bottom: 14px; }
.dumpbox-content-tier { min-width: 0; border: 0; padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--border-subtle); }
.dumpbox-content-tier legend { color: var(--text-primary); font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.dumpbox-content-tier .dumpbox-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
.dumpbox-content-tier > small { display: block; color: var(--text-muted); margin-top: 8px; font-size: 11px; }
/* Content type: big, plain and unmistakable. The picked button is filled gold with a check mark,
   the other stays dark with an empty circle (on 2026-10-10 customers picked the wrong one).
   On phones the two buttons sit one above the other so the words never wrap. */
.dumpbox-content-tier .dumpbox-content-choices { gap: 10px; max-width: 560px; }
.dumpbox-content-tier .dumpbox-content-choices button { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; text-align: left; font-size: 16px; border-width: 2px; border-radius: 12px; }
.dumpbox-choice-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dumpbox-choice-text strong { font-size: 18px; line-height: 1.2; color: var(--text-primary); }
.dumpbox-choice-text small { font-size: 15px; font-weight: 500; line-height: 1.25; color: var(--text-secondary); }
.dumpbox-choice-check { flex: 0 0 auto; width: 28px; height: 28px; border: 2px solid var(--text-muted); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 900; line-height: 1; }
.dumpbox-content-tier .dumpbox-content-choices button.active { background: var(--accent-primary); border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-subtle); }
.dumpbox-content-tier .dumpbox-content-choices button.active .dumpbox-choice-text strong,
.dumpbox-content-tier .dumpbox-content-choices button.active .dumpbox-choice-text small { color: var(--text-on-accent, #14110a); }
.dumpbox-content-tier .dumpbox-content-choices button.active .dumpbox-choice-check { border-color: var(--text-on-accent, #14110a); background: var(--text-on-accent, #14110a); color: var(--accent-primary); }
.dumpbox-content-tier .dumpbox-content-choices button.active .dumpbox-choice-check::before { content: "\2713"; }
.dumpbox-content-tier > small[data-dumpbox-content-status] { font-size: 15px; color: var(--text-secondary); }
.dumpbox-content-tier.is-picked > small[data-dumpbox-content-status] { color: var(--accent-light); font-weight: 700; }
@media (max-width: 640px) { .dumpbox-content-tier .dumpbox-content-choices { grid-template-columns: 1fr; } }
.dumpbox-length { min-width: 0; border: 0; padding: 0; margin: 18px 0 14px; }
.dumpbox-length legend { color: var(--text-primary); font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.dumpbox-length .dumpbox-length-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 760px; }
.dumpbox-length .dumpbox-length-choices button { position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; text-align: left; border-width: 2px; border-radius: 12px; }
.dumpbox-length .dumpbox-choice-check { width: 24px; height: 24px; font-size: 15px; }
.dumpbox-length .dumpbox-choice-text strong { font-size: 17px; white-space: nowrap; }
.dumpbox-length .dumpbox-choice-text small { font-size: 14px; }
.dumpbox-length .dumpbox-length-choices button.is-suggested { border-style: dashed; border-color: var(--accent-primary); }
.dumpbox-length .dumpbox-length-choices button.active { border-style: solid; background: var(--accent-primary); border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-subtle); }
.dumpbox-length .dumpbox-length-choices button.active .dumpbox-choice-text strong,
.dumpbox-length .dumpbox-length-choices button.active .dumpbox-choice-text small { color: var(--text-on-accent, #14110a); }
.dumpbox-length .dumpbox-length-choices button.active .dumpbox-choice-check { border-color: var(--text-on-accent, #14110a); background: var(--text-on-accent, #14110a); color: var(--accent-primary); }
.dumpbox-length .dumpbox-length-choices button.active .dumpbox-choice-check::before { content: "\2713"; }
.dumpbox-length-tag { position: absolute; top: -10px; right: 8px; padding: 1px 7px; border: 1px solid var(--accent-primary); border-radius: 999px; background: var(--bg-card); color: var(--accent-light); font-size: 11px; font-style: normal; font-weight: 800; line-height: 1.4; }
.dumpbox-length-tag[hidden] { display: none; }
.dumpbox-length > small[data-dumpbox-length-status] { display: block; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--accent-light); }
.dumpbox-length > small[data-dumpbox-length-status]:empty { display: none; }
@media (max-width: 720px) {
    .dumpbox-length .dumpbox-length-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Two per row on a phone: the check over the words, so "10 seconds" stays on one line. */
    .dumpbox-length .dumpbox-length-choices button { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 8px; text-align: center; }
    .dumpbox-length .dumpbox-choice-text { align-items: center; }
}
.dumpbox-label { display: block; color: var(--text-primary); font-size: 13px; margin-bottom: 6px; }
.dumpbox-wish-shell { position: relative; border: 1px solid rgba(200, 164, 92, .28); border-radius: 15px; background: var(--bg-primary); box-shadow: 0 14px 40px rgba(0,0,0,.22); padding: 0 10px 10px; transition: border-color .16s ease, box-shadow .16s ease; }
.dumpbox-wish-shell:focus-within, .dumpbox-wish-shell.dragover { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-subtle), 0 14px 40px rgba(0,0,0,.25); }
.dumpbox-wish-shell textarea { width: 100%; min-height: 126px; box-sizing: border-box; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--text-primary); padding: 14px 2px 10px; font-family: inherit; font-size: 15px; line-height: 1.5; }
.dumpbox-wish-shell textarea::placeholder { color: var(--text-muted); }
.dumpbox-tray { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 2px 0 10px; }
.dumpbox-tray.is-empty { display: none; }
.dumpbox-chip { min-width: 0; display: grid; grid-template-columns: 42px minmax(80px,1fr) auto auto; gap: 8px; align-items: center; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 9px; padding: 7px; }
.dumpbox-chip-primary { grid-template-columns: 42px minmax(80px,1fr) auto; border-color: var(--accent-primary); box-shadow: inset 0 0 0 1px var(--accent-subtle); }
.dumpbox-chip img, .dumpbox-chip-kind { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; background: var(--accent-subtle); display: grid; place-items: center; color: var(--accent-light); font-weight: 800; }
.dumpbox-chip-main { min-width: 0; display: flex; flex-direction: column; }
.dumpbox-chip-main strong { color: var(--text-primary); font-size: 12px; }
.dumpbox-chip-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 0.75rem; }
.dumpbox-chip-progress { display: block; height: 4px; margin-top: 6px; border-radius: 999px; background: var(--border-color); overflow: hidden; }
.dumpbox-chip-progress > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent-primary); transition: width 0.2s ease; }
.dumpbox-chip-status { margin-top: 3px; color: var(--accent-light); font-size: 0.75rem; font-style: normal; }
.dumpbox-chip select { grid-column: 2 / -1; min-width: 0; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-secondary); padding: 6px; font-size: 11px; }
.dumpbox-chip select:focus { border-color: var(--accent-primary); outline: 2px solid var(--accent-subtle); }
.dumpbox-chip button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; min-width: 36px; min-height: 36px; }
.dumpbox-chip button:hover { color: var(--accent-light); }
.dumpbox-chip-order { display: flex; }
.dumpbox-add-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dumpbox-add-media { display: flex; align-items: center; gap: 10px; min-width: 295px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-card); color: var(--text-primary); padding: 9px 11px; text-align: left; cursor: pointer; }
.dumpbox-add-media:hover { border-color: var(--accent-primary); background: var(--accent-subtle); }
.dumpbox-add-media:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.dumpbox-add-media span:not(.dumpbox-add-icon) { display: flex; flex-direction: column; }
.dumpbox-add-media small { color: var(--text-muted); font-size: 0.75rem; margin-top: 2px; }
.dumpbox-add-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; background: var(--cta-bg); color: var(--on-accent); font-size: 20px; }
.dumpbox-capacity { color: var(--text-muted); font-size: 11px; text-align: right; }
.dumpbox-add-menu { display: grid; width: max-content; min-width: 220px; max-width: 100%; box-sizing: border-box; margin-top: 8px; padding: 6px; border: 1px solid var(--surface-border-accent); border-radius: 10px; background: var(--bg-elevated); }
.dumpbox-add-menu.hidden { display: none; }
.dumpbox-add-menu button { border: 0; border-radius: 7px; padding: 10px 12px; color: var(--text-secondary); background: transparent; text-align: left; cursor: pointer; }
.dumpbox-add-menu button:hover { background: var(--accent-subtle); color: var(--accent-light); }
.dumpbox-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; margin-top: 20px; }
.dumpbox-simple-note { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--surface-border-accent); border-radius: 10px; background: var(--accent-subtle); color: var(--text-secondary); font-size: 12px; }
.dumpbox-simple-note strong { color: var(--accent-light); font-size: 13px; }
.dumpbox-card:not(.is-advanced) [data-dumpbox-advanced-controls] { display: none; }
.dumpbox-card.is-advanced .dumpbox-simple-note { display: none; }
.dumpbox-card:not(.is-advanced) .dumpbox-mode-copy--advanced,
.dumpbox-card.is-advanced .dumpbox-mode-copy--simple { display: none; }
.dumpbox-controls fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.dumpbox-controls legend { color: var(--text-primary); font-size: 12px; margin-bottom: 7px; }
.dumpbox-help { width: 26px; height: 26px; margin-left: 5px; border: 1px solid var(--border-color); border-radius: 50%; background: transparent; color: var(--text-muted); cursor: help; }
.dumpbox-help:hover { border-color: var(--accent-primary); color: var(--accent-light); }
.dumpbox-help[aria-expanded="true"] { border-color: var(--accent-primary); color: var(--accent-light); }
.dumpbox-help-pop { display: block; margin: 8px 0 2px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); background: var(--bg-elevated, var(--bg-secondary)); color: var(--text-secondary); font-size: 0.85rem; font-weight: 400; line-height: 1.45; white-space: normal; }
.dumpbox-help-pop[hidden] { display: none; }
.dumpbox-pills { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.dumpbox-pills button { min-height: 40px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-card); color: var(--text-secondary); font-weight: 700; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.dumpbox-pills button:hover { border-color: var(--border-hover); background: var(--bg-hover); color: var(--text-primary); }
.dumpbox-pills button.active { border-color: var(--accent-primary); background: var(--accent-subtle); color: var(--accent-light); box-shadow: inset 0 0 0 1px rgba(200,164,92,.12); }
.dumpbox-pills button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.generation-unstarted-wish { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; color: var(--text-secondary); font-size: 0.9rem; }
/* 16px so phones do not zoom into the box. */
.generation-unstarted-wish textarea { width: 100%; box-sizing: border-box; min-height: 76px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 16px; }
.generation-item-initial-prompt .dumpbox-pills { margin: 0 0 10px; }
.generation-item-initial-prompt .dumpbox-pills button { min-height: 48px; padding: 6px 4px; line-height: 1.2; }
.generation-item-initial-prompt .dumpbox-pills small { display: block; font-weight: 500; font-size: 0.75rem; }
@media (max-width: 420px) { .generation-item-initial-prompt .dumpbox-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.generation-unstarted-error { margin: 8px 0 0; color: var(--error, #ef4444); font-size: 0.875rem; line-height: 1.4; }
.generation-unstarted-error[hidden] { display: none; }
/* Their own choice (Cancel, Not now): a calm line, not a red one. */
.generation-unstarted-error.is-calm { color: var(--text-secondary); }
.dumpbox-wide { grid-column: 1 / -1; }
.dumpbox-shot-pills { grid-template-columns: repeat(3, minmax(0,1fr)); }
.dumpbox-controls fieldset > small { display: block; color: var(--text-muted); margin-top: 8px; font-size: 11px; }
.dumpbox-output-control input, .dumpbox-output-control select { width: 100%; height: 40px; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-primary); color: var(--text-primary); padding: 0 10px; accent-color: var(--accent-primary); }
.dumpbox-output-control input:focus, .dumpbox-output-control select:focus { border-color: var(--accent-primary); outline: 2px solid var(--accent-subtle); }
/* version: approved-features-1 - appearance notes and separate sound versions */
.dumpbox-output-control textarea { width: 100%; min-height: 76px; box-sizing: border-box; resize: vertical; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-primary); color: var(--text-primary); padding: 10px; font: inherit; }
.dumpbox-output-control textarea:focus { border-color: var(--accent-primary); outline: 2px solid var(--accent-subtle); }
.dumpbox-soundtrack-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; box-sizing: border-box; background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 14px; padding: 24px; }
.dumpbox-soundtrack-dialog::backdrop { background: rgb(0 0 0 / 70%); }
.dumpbox-soundtrack-dialog select, .dumpbox-soundtrack-dialog input { display: block; width: 100%; box-sizing: border-box; margin: 12px 0; padding: 10px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 7px; }
.dumpbox-soundtrack-dialog button { margin: 8px 8px 8px 0; padding: 10px 14px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 7px; cursor: pointer; }
.dumpbox-soundtrack-dialog button:disabled { opacity: .55; cursor: wait; }
.dumpbox-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); }
.dumpbox-option input { margin-top: 3px; accent-color: var(--accent-primary); }
.dumpbox-option span { display: grid; gap: 3px; }
.dumpbox-option small { color: var(--text-secondary); line-height: 1.35; }
.dumpbox-chip-edits { display: none; grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding-top: 7px; border-top: 1px solid var(--border-subtle); }
.dumpbox-card.is-advanced .dumpbox-chip-edits { display: grid; }
.dumpbox-chip-edits label { min-width: 0; color: var(--text-muted); font-size: 0.75rem; }
.dumpbox-chip-edits input, .dumpbox-chip-edits select { display: block; width: 100%; height: 32px; box-sizing: border-box; margin-top: 3px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-secondary); padding: 0 6px; accent-color: var(--accent-primary); }
.dumpbox-chip-edits input:focus, .dumpbox-chip-edits select:focus { border-color: var(--accent-primary); outline: 2px solid var(--accent-subtle); }
.dumpbox-error { margin: 15px 0 0; padding: 10px 12px; border: 1px solid #744047; border-radius: 8px; background: #241116; color: #ffadb7; font-size: 0.85rem; }
/* v2.54.43: Back or Cancel before anything is charged: a calm line, not a red error. */
.dumpbox-error.is-calm { border-color: var(--border-color); background: var(--bg-tertiary); color: var(--text-secondary); }
/* Out of credits: calm note with one way forward, same on the creator and image pages. */
.dumpbox-error.is-credits,
.imggen-credit-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--surface-border-accent, rgba(200,164,92,.35)); border-radius: 10px; background: rgba(200,164,92,.06); color: var(--text-primary); font-size: 0.9rem; line-height: 1.45; }
.imggen-credit-notice { margin: 0 0 16px; }
/* v2.54.42: Create images, "Not now" on the paused note: a calm line on the form. */
.imggen-not-started { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-tertiary); color: var(--text-secondary); font-size: 0.9rem; line-height: 1.45; }
/* A wish our rules turn down before any charge: the same calm line in the app's gold, never red. */
.imggen-not-started--refusal { border-color: var(--surface-border-accent, rgba(200,164,92,.35)); background: rgba(200,164,92,.06); color: var(--text-primary); }
/* Build with guidance when its choices don't load: the line with a Try again button. */
.imggen-choices-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dumpbox-error.is-credits.hidden { display: none; }
.dumpbox-credits-offer { flex: 1 1 100%; order: 1; color: var(--text-secondary); font-size: 0.85rem; }
.dumpbox-error.is-credits .fs-credits-cta { order: 2; }
.fs-credits-cta { flex: 0 0 auto; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 8px; background: var(--accent-primary); color: var(--text-on-accent, #14110a); font: inherit; font-weight: 600; cursor: pointer; }
.fs-credits-cta:hover { background: var(--accent-hover); }
.dumpbox-review { margin-top: 22px; min-width: 185px; max-width: 100%; justify-content: center; text-align: center; overflow-wrap: anywhere; }
/* Not ready yet: a calm neutral button instead of half-transparent gold. */
.dumpbox-review:disabled { opacity: 1; background: var(--bg-tertiary, var(--bg-secondary)); color: var(--text-muted); border-color: var(--border-color); box-shadow: none; }
/* Loading failures say so, with a retry, instead of looking like an empty account. */
.sidebar-load-error {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin: 6px 8px; padding: 10px 12px;
    border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px);
    background: var(--bg-tertiary, var(--bg-secondary)); color: var(--text-secondary); font-size: 0.85rem;
}
.sidebar-load-error-retry {
    flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px);
    background: transparent; color: var(--text-primary); cursor: pointer; font-size: 0.85rem;
}
.sidebar-load-error-retry:hover { border-color: var(--accent-primary); }
.account-sessions-error { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-lg, 12px); color: var(--text-secondary); }
.account-sessions-error p { margin: 0; }
.dumpbox-review-note { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-muted); }
.dumpbox-review-hint { margin: 22px 0 0; font-size: 0.85rem; color: var(--accent-light); }
.dumpbox-review-hint[hidden] { display: none; }
.dumpbox-review-hint:not([hidden]) + .dumpbox-review { margin-top: 8px; }
.dumpbox-legacy-hooks { display: none !important; }
.dumpbox-extension { margin: 18px 0; padding: 14px; border: 1px solid var(--surface-border-accent); border-radius: 12px; background: linear-gradient(180deg, rgba(200,164,92,.04), transparent), var(--bg-secondary); }
.dumpbox-extension-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: var(--text-primary); }
.dumpbox-extension-head span, .dumpbox-extension-row > span { color: var(--text-muted); font-size: 0.8rem; }
.dumpbox-extension textarea { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); padding: 10px 12px; font-size: 0.95rem; line-height: 1.5; }
.dumpbox-extension textarea:focus { border-color: var(--accent-primary); outline: 2px solid var(--accent-subtle); }
.dumpbox-extension-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.dumpbox-extension-hint { margin: 10px 0 0; color: var(--accent-light); font-size: 0.8rem; }
.dumpbox-extension-hint[hidden] { display: none; }
.dumpbox-extension-add { cursor: pointer; border: 1px solid var(--accent-primary); border-radius: 7px; background: var(--accent-subtle); color: var(--accent-light); padding: 8px 12px; font-size: 0.85rem; font-weight: 600; }
.dumpbox-extension-add:hover { background: rgba(200,164,92,.22); }
.dumpbox-extension-files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.dumpbox-extension-files span { border: 1px solid var(--border-color); border-radius: 999px; padding: 4px 10px; color: var(--text-secondary); font-size: 0.75rem; }
.dumpbox-extension-files span.is-new { border-color: var(--accent-primary); color: var(--accent-light); background: var(--accent-subtle); }
.dumpbox-extension-files button { border: 0; background: transparent; color: inherit; cursor: pointer; margin-left: 5px; }
.dumpbox-extension-more { margin-top: 12px; }
.dumpbox-extension-more > summary { cursor: pointer; color: var(--text-secondary); font-size: 0.9rem; min-height: 32px; display: flex; align-items: center; gap: 4px; }
.dumpbox-extension-more > summary span { color: var(--text-primary); }
.dumpbox-extension-settings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; max-width: 440px; }
.dumpbox-extension-settings label { display: flex; flex-direction: column; gap: 6px; color: var(--text-primary); font-size: 0.9rem; font-weight: 600; }
.dumpbox-extension-settings select, .dumpbox-extension-settings input { width: 100%; height: 44px; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); padding: 0 12px; font-size: 0.95rem; font-weight: 400; accent-color: var(--accent-primary); }
.dumpbox-extension-settings select:focus, .dumpbox-extension-settings input:focus { border-color: var(--accent-primary); outline: 2px solid var(--accent-subtle); }

@media (max-width: 720px) {
    .dumpbox-card { padding: 16px 12px; border-radius: 0; }
    .dumpbox-mode-row { align-items: flex-start; flex-direction: column; }
    .dumpbox-controls { grid-template-columns: 1fr; }
    .dumpbox-wide { grid-column: auto; }
    .dumpbox-add-row { align-items: stretch; flex-direction: column; }
    .dumpbox-add-media { min-width: 0; width: 100%; }
    .dumpbox-add-menu { width: 100%; }
    .dumpbox-add-menu button { min-height: 44px; }
    .dumpbox-capacity { text-align: left; }
    .dumpbox-pills { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .dumpbox-shot-pills { grid-template-columns: 1fr; }
    .dumpbox-tray { grid-template-columns: 1fr; }
    .dumpbox-chip-edits { grid-template-columns: 1fr 1fr; }
    .dumpbox-chip button { min-width: 44px; min-height: 44px; }
    .dumpbox-review { width: 100%; min-height: 46px; }
    .dumpbox-extension-head, .dumpbox-extension-row { align-items: flex-start; flex-direction: column; }
    .dumpbox-extension-settings { grid-template-columns: 1fr 1fr; }
}
.dumpbox-planning-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(13, 12, 10, .78);
    backdrop-filter: blur(8px);
}
.dumpbox-planning-overlay.hidden { display: none; }
.dumpbox-planning-card {
    width: min(720px, 100%);
    max-height: min(84vh, 900px);
    max-height: min(84vh, 900px, calc(100dvh - 32px));
    overflow: auto;
    padding: 22px;
    border: 1px solid rgba(210, 178, 120, .32);
    border-radius: 18px;
    background: #181714;
    color: #f3eadc;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}
.dumpbox-planning-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.dumpbox-planning-head small { color: #b99a69; text-transform: uppercase; letter-spacing: .08em; }
.dumpbox-planning-head h3 { margin: 5px 0 0; font-size: 1.35rem; }
.dumpbox-planning-head > button { flex: 0 0 44px; width: 44px; height: 44px; border: 0; background: transparent; color: #cdbfae; font-size: 1.75rem; cursor: pointer; }
.dumpbox-planning-section:empty { display: none; }
.dumpbox-planning-section h4 { margin: 22px 0 10px; }
.dumpbox-planning-section > label { display: grid; gap: 6px; margin: 12px 0; }
.dumpbox-planning-section textarea,
.dumpbox-planning-section input { width: 100%; border: 1px solid #4b4439; border-radius: 9px; background: #0f0e0c; color: #fff8ee; padding: 10px 12px; }
.dumpbox-timeline-list { display: grid; gap: 8px; }
.dumpbox-timeline-list label { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: center; }
.dumpbox-timeline-list label span { color: #c9a96e; font-variant-numeric: tabular-nums; }
.dumpbox-planning-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
body.dumpbox-planning-open { overflow: hidden; }
@media (max-width: 600px) {
    .dumpbox-planning-card { padding: 16px; max-height: 92vh; max-height: calc(100dvh - 24px); border-radius: 14px; }
    .dumpbox-planning-actions { position: sticky; bottom: -16px; margin: 16px -16px -16px; padding: 12px 16px; background: #181714; }
}

/* Note above a batch where only some images finished. */
.imggen-batch-notice {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
}

/* Touch screens: every tappable control gets at least a 44px target
   (Simple/Advanced, "?", session buttons, Copy and sidebar rows were 26-38px). */
@media (pointer: coarse) {
    .dumpbox-mode,
    .dumpbox-pills button,
    .btn-continue-from-here,
    .btn-load-more-generations.action-btn,
    .sidebar-section-toggle,
    .see-more-btn,
    .folder-item-new,
    .sidebar-header-logo {
        min-height: 44px;
    }
    .sidebar-header-logo {
        min-width: 44px;
    }
    /* Close buttons on every pop-up (Add sound's was 32px). */
    .modal-close,
    .pay-modal-close,
    .extend-flow-close {
        min-width: 44px;
        min-height: 44px;
    }
    .dumpbox-help,
    .btn-copy-prompt {
        position: relative;
    }
    .dumpbox-help::after,
    .btn-copy-prompt::after {
        content: '';
        position: absolute;
        inset: -9px;
    }
}

/* A tap made before the page scripts loaded: show it registered until it runs. */
.fs-early-pending {
    cursor: progress;
    opacity: 0.8;
}
.fs-early-pending::after {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: spin 0.8s linear infinite;
}

/* Keyboard focus on the settings switches: the real checkbox is hidden, so ring the visible slider. */
.cookie-settings-toggle input:focus-visible + .cookie-settings-slider { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* Touch screens: every control at least 44px tall (WCAG 2.5.5); text stays the same size. */
@media (pointer: coarse) {
    /* Keep the small "?" circle; widen only the area that takes the tap. */
    .dumpbox-help { position: relative; }
    .dumpbox-help::after { content: ""; position: absolute; inset: -9px; }
    .site-support-footer__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
    .legal-back a { display: inline-flex; align-items: center; min-height: 44px; }
    .pricing-cta, .auth-submit, .account-section-link, .imggen-all-options-link,
    .generation-custom-prompt .btn-copy-prompt, .btn-retry-video-load, #payModalCoin,
    .auth-form input[type="password"], .auth-form input[type="email"], .auth-form input[type="text"] { min-height: 44px; }
    .account-section-link, .imggen-all-options-link { display: inline-flex; align-items: center; }
    label:has(> #imggenGuidedQuickToggle) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Shown by fsConnection (main.js) while reads wait through a deploy. */
.fs-reconnecting {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 10050;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* v2.55.0 - picture to video (2026-10-13). */
/* A labelled "Make video" under each finished picture: one tap to the video page. */
.imggen-result-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.imggen-make-video {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-md, 8px);
    background: var(--accent-primary);
    color: var(--text-on-accent, #14110a);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}
.imggen-make-video:hover { background: var(--accent-hover); }
.imggen-make-video:focus-visible { outline: 3px solid var(--accent-light, #e3c98f); outline-offset: 2px; }
.imggen-make-video:disabled { opacity: 1; background: var(--bg-tertiary); color: var(--text-muted); cursor: wait; }
.imggen-make-video svg { flex: 0 0 auto; }
/* "Like one? Make it a video, 9 credits (you have 11)." under the pictures. */
.imggen-video-hint {
    display: flex;
    flex: 1 0 100%;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    text-align: center;
}
.imggen-video-hint[hidden] { display: none; }
.imggen-video-hint p { margin: 0; color: var(--text-primary); font-size: 0.95rem; line-height: 1.45; }
.imggen-video-hint.is-short {
    padding: 12px 14px;
    border: 1px solid var(--surface-border-accent, rgba(200,164,92,.35));
    border-radius: 10px;
    background: rgba(200,164,92,.06);
}
/* Under picture Create: the free first set, or "After this you'll have 2 credits. A video needs 9." */
.imggen-cost-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.45;
    text-align: center;
}
.imggen-cost-note[hidden] { display: none; }
.imggen-cost-note--free { color: var(--accent-light, #e3c98f); font-weight: 600; }
.imggen-custom-form > .imggen-cost-note { margin-top: calc(var(--spacing-sm) - var(--spacing-lg)); }
.imggen-random-content > .imggen-cost-note { margin-top: calc(var(--spacing-sm) - var(--spacing-xl)); }
.imggen-guided-nav + .imggen-cost-note { margin-top: var(--spacing-sm); text-align: right; }
.imggen-credit-badge--free { font-weight: 700; }
/* Create video: short of credits, said over the button before it is pressed. */
.dumpbox-short-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--surface-border-accent, rgba(200,164,92,.35));
    border-radius: 10px;
    background: rgba(200,164,92,.06);
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.45;
}
.dumpbox-short-note[hidden] { display: none; }
.dumpbox-short-note > span:first-child { flex: 1 1 180px; }
.dumpbox-short-note .fs-credits-cta { order: 2; }
.dumpbox-short-note:not([hidden]) + .dumpbox-review-hint:not([hidden]) { margin-top: 10px; }
/* Short of credits with a shorter length that fits: one tap picks it (forgescene_dumpbox.js). */
.dumpbox-fit-length { order: 2; flex: 0 0 auto; min-height: 44px; padding: 8px 16px; border: 1px solid var(--accent-primary); border-radius: 8px; background: transparent; color: var(--accent-light); font: inherit; font-weight: 600; cursor: pointer; }
.dumpbox-fit-length:hover, .dumpbox-fit-length:focus-visible { background: var(--accent-subtle); }
@media (max-width: 640px) {
    .imggen-guided-nav + .imggen-cost-note { text-align: center; }
    .imggen-results-actions .imggen-video-hint { order: 0; }
    .imggen-video-hint .fs-credits-cta { flex: 1 1 100%; min-height: 44px; }
    .dumpbox-short-note .fs-credits-cta { flex: 1 1 100%; min-height: 44px; }
    .dumpbox-short-note .dumpbox-fit-length, .dumpbox-error.is-credits .dumpbox-fit-length { flex: 1 1 100%; }
}

/* Create box: a photo or clip our automatic check turned down, or photos and clips being off.
   Calm gold note right under Add media, with a big button to the next step (forgescene_dumpbox.js). */
.dumpbox-media-note { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--surface-border-accent); border-radius: 10px; background: var(--accent-subtle); color: var(--text-secondary); font-size: 0.85rem; line-height: 1.45; }
.dumpbox-media-note[hidden] { display: none; }
.dumpbox-media-note strong { color: var(--accent-light); font-size: 0.95rem; }
.dumpbox-media-note-btn { align-self: flex-start; min-height: 44px; margin-top: 4px; padding: 10px 16px; border: 1px solid var(--accent-primary); border-radius: 10px; background: transparent; color: var(--accent-light); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.dumpbox-media-note-btn:hover, .dumpbox-media-note-btn:focus-visible { background: var(--accent-subtle); }

/* v2.54.41: iPhone Safari zooms the page into any text field whose text is under
   16px when it is tapped, and the page stays zoomed after the keyboard closes.
   Phones and touch screens get 16px text in every text field, list and box;
   larger ones (the sign-in code box) keep their size. Desktop is unchanged. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not(#emailCodeInput),
    textarea,
    select {
        font-size: max(16px, 1rem) !important;
    }
}