/* ──────────────────────────────────────────────
   CSS Custom Properties — Orchestriq (Cinema Noir)
   OKLCH-based design system. Dark-only. Gold is the brand.
   ────────────────────────────────────────────── */
:root {
    /* Core surfaces & foreground — deep noir blue / warm white */
    --background:         oklch(8% 0.018 265);
    --foreground:         oklch(95% 0.01 80);
    --surface:            oklch(11% 0.018 265);
    --surface-elevated:   oklch(16% 0.018 265);
    --card:               oklch(13% 0.018 265);
    --card-foreground:    oklch(95% 0.01 80);
    --popover:            oklch(13% 0.018 265);
    --popover-foreground: oklch(95% 0.01 80);
    --muted:              oklch(18% 0.016 265);
    --muted-foreground:   oklch(68% 0.012 260);

    /* Lines — translucent white over the dark canvas */
    --border:         oklch(100% 0 0 / 0.08);
    --border-strong:  oklch(100% 0 0 / 0.18);
    --input:          oklch(100% 0 0 / 0.10);

    /* Brand — gold replaces sage in Cinema Noir */
    --gold:              oklch(62% 0.18 65);
    --gold-soft:         oklch(28% 0.08 65);
    --brand:             var(--gold);
    --brand-foreground:  oklch(15% 0.02 65);
    --brand-soft:        oklch(28% 0.08 65);
    --brand-deep:        oklch(80% 0.15 65);

    /* Near-black cinematico */
    --film-dark:         oklch(6% 0.02 265);

    /* Semantics — tuned for the dark canvas */
    --destructive:            oklch(65% 0.2 27);
    --destructive-foreground: oklch(99% 0.002 80);
    --warning:                oklch(72% 0.15 75);
    --warning-foreground:     oklch(14% 0.01 260);
    --warning-soft:           oklch(28% 0.06 80);
    --accent-secondary:       oklch(72% 0.16 300);
    --accent-secondary-soft:  oklch(28% 0.06 300);
    --success:                oklch(74% 0.10 145);
    --success-soft:           oklch(28% 0.05 145);

    --ring: var(--gold);

    /* Geometry — Cinema Noir is sharper. Cards 4px, pills/buttons 0. */
    --radius:        4px;
    --radius-sm:     2px;
    --radius-pill:   0;
    --radius-round:  999px;

    /* Typography */
    --font:        'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif:  'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
    --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;

    /* Type scale */
    --font-size-badge: 0.72rem;

    /* Elevation — dark ramp */
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.35), 0 1px 3px oklch(0% 0 0 / 0.35);
    --shadow-md: 0 2px 4px oklch(0% 0 0 / 0.30), 0 6px 14px -4px oklch(0% 0 0 / 0.45);
    --shadow-lg: 0 4px 8px oklch(0% 0 0 / 0.35), 0 16px 32px -8px oklch(0% 0 0 / 0.55);

    /* Legacy aliases (preserve retro-compatibility across ~3000 usages) */
    --bg-primary:     var(--background);
    --bg-secondary:   var(--surface);
    --bg-card:        var(--card);
    --bg-card-alt:    var(--surface);
    --accent:         var(--brand);
    --accent-hover:   oklch(from var(--brand) calc(l + 0.06) c h);
    --accent-dim:     var(--brand-soft);
    --text-primary:   var(--foreground);
    --text-secondary: oklch(75% 0.01 80);
    --text-muted:     oklch(58% 0.012 260);
    --danger:         var(--destructive);
    --border-light:   var(--border);

    /* Safe-area insets for sticky/fixed elements on notched devices */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);

    /* App shell layout */
    --sidebar-width:  260px;
    --topbar-height:  64px;
    --rail-width:     312px;

    /* Cinematic premium layer — film accents */
    --film-ink:         oklch(6% 0.02 265);
    --film-accent:      oklch(78% 0.17 65);
    --film-accent-soft: oklch(40% 0.14 65 / 0.28);
    --cine-grad: linear-gradient(135deg,
        color-mix(in oklch, var(--gold) 92%, black 8%) 0%,
        color-mix(in oklch, var(--gold) 70%, var(--film-accent) 30%) 100%);
    --cine-shadow: 0 1px 0 oklch(100% 0 0 / 0.06) inset,
                   0 10px 30px -14px oklch(0% 0 0 / 0.65),
                   0 36px 80px -40px oklch(0% 0 0 / 0.72);
    --cine-ring: 0 0 0 1px color-mix(in oklab, var(--gold) 35%, transparent);

    /* Cinema Noir signature — diagonal hairline weave used on hero panels */
    --noir-weave: repeating-linear-gradient(
        135deg,
        oklch(100% 0 0 / 0.018) 0 1px,
        transparent 1px 8px
    );
}

/* ──────────────────────────────────────────────
   Card shadows
   ────────────────────────────────────────────── */
.project-card,
.detail-card,
.form-card,
.action-panel,
.workflow-steps,
.treatment-card,
.export-panel,
.export-preview,
.settings-section {
    box-shadow: var(--shadow-sm);
}

/* ──────────────────────────────────────────────
   Reset & Base
   ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 15px;
    overflow-x: clip;
    max-width: 100%;
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.2s ease, color 0.2s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    max-width: 100%;
}

/* Smooth token swaps on theme toggle */
body,
.app-shell,
.app-sidebar,
.app-topbar,
.app-main,
.project-card,
.detail-card,
.form-card,
.treatment-card,
.scene-card,
.settings-section,
.rail-card,
.auth-card,
.user-menu-panel,
input, select, textarea,
.btn, .badge, .chip, .prompt-textarea {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

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

pre, code { font-family: var(--font-mono); font-size: 0.875rem; }

/* ──────────────────────────────────────────────
   Nav
   ────────────────────────────────────────────── */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-8);
    background: var(--bg-card);
    border-bottom: none;
    box-shadow: 0 1px 0 var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-logo {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}
.nav-logo:hover { color: var(--accent); }

/* ──────────────────────────────────────────────
   Breadcrumb
   ────────────────────────────────────────────── */
.breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-8) 0;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.8rem;
    color: var(--text-muted);
}
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--text-muted); opacity: 0.6; }
.breadcrumb .current { color: var(--text-primary); }

/* ──────────────────────────────────────────────
   Footer
   ────────────────────────────────────────────── */
.footer {
    text-align: center;
    padding: var(--space-5) var(--space-8);
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    letter-spacing: 0.01em;
}

/* ──────────────────────────────────────────────
   Toast notifications (bottom-right, fixed)
   ────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}
.toast {
    padding: var(--space-3) var(--space-4);
    border-radius: 0;
    font-size: 0.9rem;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    max-width: 360px;
    word-break: break-word;
}
.toast.toast-visible {
    opacity: 1;
    transform: translateY(0);
}
.toast-success { background: var(--success-soft); border: 1px solid color-mix(in oklab, var(--success) 40%, transparent); color: oklch(from var(--success) calc(l + 0.1) c h); }
.toast-error   { background: color-mix(in oklab, var(--destructive) 14%, var(--background)); border: 1px solid color-mix(in oklab, var(--destructive) 38%, transparent); color: oklch(from var(--destructive) calc(l + 0.1) c h); }
.toast-info    { background: color-mix(in oklab, var(--gold) 14%, var(--background)); border: 1px solid color-mix(in oklab, var(--gold) 38%, transparent); color: var(--brand-deep); }
.flash {
    padding: var(--space-3) var(--space-4);
    border-radius: 0;
    font-size: 0.9rem;
    margin-bottom: var(--space-4);
    word-break: break-word;
}
.flash-success { background: var(--success-soft); border: 1px solid color-mix(in oklab, var(--success) 40%, transparent); color: oklch(from var(--success) calc(l + 0.1) c h); }
.flash-error   { background: color-mix(in oklab, var(--destructive) 14%, var(--background)); border: 1px solid color-mix(in oklab, var(--destructive) 38%, transparent); color: oklch(from var(--destructive) calc(l + 0.1) c h); }
.flash-info    { background: color-mix(in oklab, var(--gold) 14%, var(--background)); border: 1px solid color-mix(in oklab, var(--gold) 38%, transparent); color: var(--brand-deep); }

/* ──────────────────────────────────────────────
   Buttons
   ────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.18s, box-shadow 0.18s, opacity 0.15s, border-color 0.15s;
    text-decoration: none;
    letter-spacing: 0.01em;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary   { background: var(--brand); color: var(--brand-foreground); border: none; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); color: var(--brand-foreground); box-shadow: 0 2px 10px color-mix(in oklab, var(--brand) 35%, transparent); }
.btn-secondary { background: var(--card); color: var(--foreground); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--muted); border-color: var(--border-strong); color: var(--foreground); }
.btn-success   { background: color-mix(in oklab, var(--success) 10%, transparent); color: var(--success); border: 1px solid color-mix(in oklab, var(--success) 35%, transparent); border-radius: var(--radius-pill); }
.btn-success:hover:not(:disabled) { background: color-mix(in oklab, var(--success) 18%, transparent); }
.btn-danger    { background: color-mix(in oklab, var(--destructive) 8%, transparent); color: var(--destructive); border: 1px solid color-mix(in oklab, var(--destructive) 30%, transparent); border-radius: var(--radius-pill); }
.btn-danger:hover:not(:disabled) { background: color-mix(in oklab, var(--destructive) 15%, transparent); color: var(--destructive); }
.btn-danger-text { background: transparent; color: var(--destructive); font-size: 0.8rem; padding: 0.25rem var(--space-2); }
.btn-danger-text:hover { background: color-mix(in oklab, var(--destructive) 10%, transparent); }
.btn-sm { padding: 0.3rem 0.9rem; font-size: 0.8rem; border-radius: var(--radius-pill); }

.btn-copy {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    letter-spacing: 0.02em;
}
.btn-copy:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.btn-copy.copied { color: var(--success); border-color: color-mix(in oklab, var(--brand) 40%, transparent); background: color-mix(in oklab, var(--brand) 6%, transparent); }

/* ──────────────────────────────────────────────
   Badges
   ────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 0.15rem var(--space-2);
    border-radius: 0;
    font-size: var(--font-size-badge);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
@keyframes badge-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 35%, transparent); transform: scale(1); }
    50%  { box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand) 0%, transparent);  transform: scale(1.05); }
    100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 0%, transparent);    transform: scale(1); }
}
.badge.is-updated { animation: badge-pulse 0.6s ease-out; }

/* Status badge palette — OKLCH tokens, theme-aware via color-mix() */
.status-draft                  { background: var(--muted);            color: var(--muted-foreground); }
.status-treatment-ready        { background: var(--success-soft);     color: var(--success); }
.status-scene-ready            { background: var(--success-soft);     color: var(--success); }
.status-scenes-ready           { background: var(--success-soft);     color: var(--success); }
.status-image-prompt-ready     { background: var(--warning-soft);     color: var(--warning); }
.status-image-generated        { background: var(--warning-soft);     color: var(--warning); }
.status-image-approved         { background: var(--success-soft);     color: var(--success); }
.status-animation-prompt-ready { background: var(--accent-secondary-soft); color: var(--accent-secondary); }
.status-prompts-ready          { background: var(--accent-secondary-soft); color: var(--accent-secondary); }
.status-ready-for-render       { background: var(--warning-soft);     color: var(--warning); }
.status-completed              { background: var(--success-soft);     color: var(--success); }

.status-treatment-ready,
.status-scene-ready,
.status-scenes-ready,
.status-image-approved,
.status-completed        { color: var(--success); }
.status-image-prompt-ready,
.status-image-generated,
.status-ready-for-render { color: var(--warning); }
.status-animation-prompt-ready,
.status-prompts-ready    { color: var(--accent-secondary); }

/* Map status → accent color for card border-left accents */
.status-border-draft                  { border-left-color: var(--border-strong); }
.status-border-treatment-ready        { border-left-color: var(--brand); }
.status-border-scene-ready            { border-left-color: var(--brand); }
.status-border-scenes-ready           { border-left-color: var(--brand); }
.status-border-image-prompt-ready     { border-left-color: var(--warning); }
.status-border-image-generated        { border-left-color: var(--warning); }
.status-border-image-approved         { border-left-color: var(--brand); }
.status-border-animation-prompt-ready { border-left-color: var(--accent-secondary); }
.status-border-prompts-ready          { border-left-color: var(--accent-secondary); }
.status-border-ready-for-render       { border-left-color: var(--warning); }
.status-border-completed              { border-left-color: var(--brand); }

/* ──────────────────────────────────────────────
   Page header
   ────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-8);
    gap: var(--space-4);
    flex-wrap: wrap;
}
.page-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: var(--space-1);
    color: var(--foreground);
}
.page-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: var(--space-1);
}
.page-header .count-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted-foreground);
    margin-left: var(--space-3);
    padding: 0.18rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    translate: 0 -2px;
}
.header-actions { display: flex; gap: var(--space-2); align-items: center; }

.page-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}
.page-eyebrow-sep {
    display: inline-block;
    width: 1px;
    height: 0.75em;
    background: var(--border);
    opacity: 0.8;
}

/* ──────────────────────────────────────────────
   Project grid (dashboard)
   ────────────────────────────────────────────── */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

.project-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.project-card:hover { border-color: var(--brand); background: var(--surface-elevated); color: var(--foreground); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.project-card-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: -0.15rem;
}
.project-card-eyebrow-seq { color: var(--text-secondary); }
.project-card-eyebrow-dot {
    width: 1px;
    height: 0.75em;
    background: var(--border-strong);
    opacity: 0.7;
}

.project-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.project-card-header h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }
.project-card-meta { display: flex; gap: var(--space-3); font-size: 0.8rem; color: var(--text-secondary); flex-wrap: wrap; align-items: center; }
.project-card-meta .sep { color: var(--text-muted); opacity: 0.6; }
.project-card-prompt { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.project-card-footer { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted); }

/* Rosette progress marker on the project card.
   Reuses the six-petal brand mark so the logo itself becomes the
   progress indicator: completed phases light up in brand green,
   the current phase is accented in gold, pending phases stay dim.
   The petals use fixed shade ramp so the filled portion matches
   the hero logo exactly. */
.card-rosette-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-2) 0 var(--space-1);
}
.card-rosette {
    flex-shrink: 0;
    line-height: 0;
}
.card-rosette svg { display: block; }
.card-rosette-seg {
    transition: fill 0.25s ease, opacity 0.25s ease;
}
.card-rosette-seg.is-pending {
    fill: var(--border-strong);
    opacity: 0.35;
}
/* Cinema Noir progress ramp — petals brighten through a gold curve */
.card-rosette-seg.is-done       { fill: oklch(45% 0.13 65); opacity: 1; }
.card-rosette-seg.is-done:nth-of-type(2) { fill: oklch(52% 0.15 65); }
.card-rosette-seg.is-done:nth-of-type(3) { fill: oklch(60% 0.17 65); }
.card-rosette-seg.is-done:nth-of-type(4) { fill: oklch(68% 0.18 65); }
.card-rosette-seg.is-done:nth-of-type(5) { fill: oklch(76% 0.16 65); }
.card-rosette-seg.is-done:nth-of-type(6) { fill: oklch(84% 0.13 65); }
.card-rosette-seg.is-active {
    fill: var(--gold);
    opacity: 1;
}
.project-card:hover .card-rosette-seg.is-active {
    filter: drop-shadow(0 0 3px color-mix(in oklab, var(--gold) 65%, transparent));
}

.card-rosette-caption {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.card-rosette-step {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.card-rosette-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--foreground);
    letter-spacing: -0.005em;
}

/* ── Filmstrip — horizontal pipeline progress indicator
   prompt → treatment → scenes → prompts → stills → video.
   Replaces the rosette+caption row on project cards: lays the six
   beats out left-to-right with a connecting rail that fills as you
   advance, the active beat pulses, done beats carry a check, and a
   caption underneath names the active beat plus the next nudge. */
.fstrip {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: var(--space-3);
    margin-top: var(--space-2);
    border-top: 1px solid var(--border);
}
.fstrip-track {
    position: relative;
    padding: 6px 0 22px;
}
.fstrip-rail,
.fstrip-rail-fill {
    position: absolute;
    top: 11px;
    left: 5px;
    right: 5px;
    height: 1px;
}
.fstrip-rail {
    background: var(--border-strong);
    opacity: 0.55;
}
.fstrip-rail-fill {
    right: auto;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--brand) 60%, transparent),
        var(--brand));
    box-shadow: 0 0 8px color-mix(in oklab, var(--brand) 45%, transparent);
    transition: width 0.5s cubic-bezier(.2,.8,.2,1);
}
.fstrip-nodes {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}
.fstrip-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.fstrip-dot {
    width: 11px;
    height: 11px;
    border-radius: var(--radius-round);
    background: var(--card);
    border: 1.5px solid var(--border-strong);
    display: grid;
    place-items: center;
    position: relative;
    z-index: 2;
    color: var(--card);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    flex-shrink: 0;
}
.fstrip-dot svg { display: block; }
.fstrip-node.is-done .fstrip-dot {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-foreground);
}
.fstrip-node.is-active .fstrip-dot {
    background: var(--card);
    border-color: var(--brand);
    border-width: 2px;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent);
    transform: scale(1.18);
}
.fstrip-node.is-pending .fstrip-dot {
    background: var(--card);
    border-color: var(--border-strong);
}
.fstrip-pulse {
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-round);
    border: 1.5px solid var(--brand);
    animation: fstrip-pulse 1.6s ease-out infinite;
    pointer-events: none;
}
@keyframes fstrip-pulse {
    0%   { transform: scale(0.7); opacity: 0.85; }
    100% { transform: scale(2.4); opacity: 0; }
}
.fstrip-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.1;
    text-align: center;
}
.fstrip-num { font-size: 0.55rem; opacity: 0.55; }
.fstrip-name { color: var(--text-muted); font-weight: 500; letter-spacing: 0.08em; }
.fstrip-node.is-done .fstrip-num,
.fstrip-node.is-done .fstrip-name { color: var(--text-secondary); }
.fstrip-node.is-active .fstrip-name {
    color: color-mix(in oklab, var(--brand) 65%, var(--foreground));
    font-weight: 700;
    letter-spacing: 0.1em;
}
.fstrip-node.is-active .fstrip-num { color: var(--brand); opacity: 1; }
.fstrip-caption {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.fstrip-caption-now {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--foreground);
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.fstrip-caption-hint {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.fstrip-caption-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--brand);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.fstrip-caption-of { color: var(--text-muted); font-weight: 400; }

/* Mini variant — for tight spaces (Today on set, sidebar peeks).
   Dots only, no labels, no caption. */
.fstrip-mini {
    border-top: 0;
    margin-top: 0.4rem;
    padding-top: 0;
    gap: 0;
}
.fstrip-mini .fstrip-track { padding: 6px 0 4px; }
.fstrip-mini .fstrip-rail,
.fstrip-mini .fstrip-rail-fill { top: 9px; }
.fstrip-mini .fstrip-dot { width: 9px; height: 9px; }
.fstrip-mini .fstrip-node.is-active .fstrip-dot { transform: scale(1.1); }

/* When the active beat is the final one and everything is done, the
   pulse would otherwise look unfinished — let it ride, it doubles as
   a "render's running" cue. */
.fstrip-node.is-active.is-final .fstrip-dot {
    background: var(--brand);
    color: var(--brand-foreground);
}

.empty-state {
    text-align: center;
    padding: 5rem var(--space-8);
    color: var(--text-secondary);
}
.empty-state .empty-icon { font-size: 1.5rem; margin-bottom: var(--space-4); color: var(--text-muted); opacity: 0.4; letter-spacing: 0.12em; }
.empty-state h2 { font-size: 1rem; font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-3); letter-spacing: -0.01em; }
.empty-state p { margin-bottom: var(--space-6); font-size: 0.875rem; line-height: 1.65; max-width: 420px; margin-left: auto; margin-right: auto; }

/* ──────────────────────────────────────────────
   Forms
   ────────────────────────────────────────────── */
.form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-8);
    max-width: 800px;
}

.form-section {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--border-light);
}
.form-section:last-of-type { border-bottom: none; }
.form-section h2 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-5);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
.form-section-number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.form-group { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.form-group label { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); }
.form-group:last-child { margin-bottom: 0; }

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    background: var(--surface-elevated);
    border: 1px solid var(--input);
    border-radius: var(--radius-sm);
    color: var(--foreground);
    font-family: var(--font);
    font-size: 0.9rem;
    line-height: 1.4;
    padding: var(--space-2) var(--space-3);
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    outline: none;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
}
textarea { resize: vertical; min-height: 80px; }
select option { background: var(--card); color: var(--foreground); }

.required { color: var(--danger); margin-left: 2px; }
.optional { color: var(--text-muted); font-size: 0.8rem; font-weight: 400; }
.help-text { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-1); }

.toggle-group { display: flex; gap: var(--space-2); }
.toggle { display: flex; align-items: center; gap: var(--space-1); cursor: pointer; font-size: 0.875rem; }
.toggle input { width: auto; }

.scene-preview {
    background: var(--accent-dim);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: var(--space-2);
}

.form-actions { display: flex; gap: var(--space-3); justify-content: flex-end; padding-top: var(--space-4); }

/* ──────────────────────────────────────────────
   Tabs
   ────────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-8);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.6rem 1.1rem;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.15s ease-in;
}
.tab-panel.active { display: block; opacity: 1; }

/* ──────────────────────────────────────────────
   Detail cards
   ────────────────────────────────────────────── */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.detail-card h3 {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.detail-list { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem var(--space-4); font-size: 0.875rem; }
.detail-list dt { color: var(--text-secondary); white-space: nowrap; }
.detail-list dd { color: var(--text-primary); }

.card-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }

.prompt-text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; white-space: pre-wrap; }

/* ──────────────────────────────────────────────
   Reference image gallery
   ────────────────────────────────────────────── */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.gallery-item {
    position: relative;
    width: 140px;
    height: 105px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    display: block;
    transition: border-color 0.15s, transform 0.15s;
}
.gallery-item:hover { border-color: var(--accent); transform: scale(1.02); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: oklch(0% 0 0 / 0.55);
    color: oklch(100% 0 0);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    padding: 0;
}
.gallery-item:hover .gallery-item-delete { opacity: 1; }
.gallery-item-delete:hover { background: var(--danger, #e53e3e); }

.upload-form { margin-top: var(--space-2); }

/* ──────────────────────────────────────────────
   Action panel
   ────────────────────────────────────────────── */
.action-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.action-panel h3 { font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: var(--space-3); }
.action-buttons { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }

/* ──────────────────────────────────────────────
   Workflow steps panel
   ────────────────────────────────────────────── */
.workflow-steps {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.workflow-steps-header {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}
.workflow-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
    position: relative;
}
.workflow-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    position: relative;
    min-width: 0;
}
.workflow-step.is-active {
    border-color: var(--accent);
    background: color-mix(in oklab, var(--brand) 5%, transparent);
}
.workflow-step.is-done {
    border-color: color-mix(in oklab, var(--brand) 25%, transparent);
    opacity: 0.8;
}
.workflow-step-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-muted);
}
.workflow-step.is-active .workflow-step-header { color: var(--accent); }
.workflow-step.is-done .workflow-step-header { color: var(--success); }
.workflow-step-num {
    font-family: var(--font-mono);
    font-weight: 500;
    opacity: 0.7;
}
.workflow-step-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
.workflow-step.is-done .workflow-step-name { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: rgba(136,146,164,0.3); }
.workflow-step-action { margin-top: auto; }
.workflow-step-action .btn { width: 100%; justify-content: center; font-size: 0.78rem; }
.workflow-step-check { color: var(--success); }

/* ──────────────────────────────────────────────
   Treatment cards
   ────────────────────────────────────────────── */
.treatment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}
.treatment-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
}
.treatment-card.full-width { grid-column: 1 / -1; }
.treatment-card h3 { font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: var(--space-3); }
.treatment-card p, .treatment-card ol { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; }
.treatment-card ol { padding-left: var(--space-5); }
.treatment-card li { margin-bottom: 0.35rem; }

.color-palette { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--space-1); }
.color-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0;
    font-size: 0.78rem;
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: var(--font-mono);
    min-width: 2rem;
    min-height: 1.2rem;
    text-shadow: none;
}

/* Treatment tab sticky CTA */
.treatment-cta-bar {
    position: sticky;
    bottom: var(--space-4);
    margin-top: var(--space-6);
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    box-shadow: var(--shadow-md);
    flex-wrap: wrap;
}
.treatment-cta-bar p { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }

.variant-list { display: flex; flex-direction: column; gap: var(--space-3); }
.variant-item { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.variant-item strong { color: var(--accent); display: block; margin-bottom: var(--space-1); }
.variant-item p { font-size: 0.875rem; color: var(--text-secondary); margin: 0; }

/* ──────────────────────────────────────────────
   Variant tabs (scenes)
   ────────────────────────────────────────────── */
.variant-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-6); flex-wrap: wrap; }
.variant-tab-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.4rem 0.85rem;
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.variant-tab-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 500; }
.variant-tab-count {
    font-size: 0.72rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 0.05rem 0.4rem;
    border-radius: 0;
}
.variant-tab-btn.active .variant-tab-count { color: var(--accent); background: color-mix(in oklab, var(--brand) 12%, transparent); }

.variant-panel { display: none; }
.variant-panel.active { display: block; }
.variant-concept { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: var(--space-4); padding: var(--space-3); background: var(--bg-card); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.batch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}
.batch-actions-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-right: var(--space-3);
    border-right: 1px solid var(--border);
}
.batch-actions-group:last-of-type { border-right: none; padding-right: 0; }
.batch-actions-group-label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-right: var(--space-1);
}
.batch-actions-advanced {
    margin-left: auto;
}

/* Menu label inside pd-menu panels (e.g. "Rewrite" in Advanced) */
.pd-menu-label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.35rem 0.75rem 0.2rem;
}

/* ──────────────────────────────────────────────
   Scene cards
   ────────────────────────────────────────────── */
.scenes-list { display: flex; flex-direction: column; gap: var(--space-5); }

.scene-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.scene-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card-alt);
    border-bottom: 1px solid var(--border-light);
    gap: var(--space-2);
    flex-wrap: wrap;
}
.scene-card-title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.scene-number { font-weight: 700; font-size: 0.95rem; }
.scene-number-dot { color: var(--text-muted); margin: 0 0.35rem; }
.scene-timing {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}
.scene-duration-chip {
    font-size: 0.72rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 0.1rem var(--space-2);
    border-radius: 0;
}

.scene-narrative { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-light); }
.scene-field { display: flex; gap: var(--space-2); margin-bottom: 0.4rem; font-size: 0.875rem; }
.scene-field-label { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; min-width: 70px; }
.scene-title-value { font-weight: 600; }
.scene-details summary { cursor: pointer; font-size: 0.8rem; color: var(--accent); margin-top: var(--space-2); }
.scene-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-top: var(--space-3); }

/* Directorial chips (scene type, pacing, phase, shot scale, energy) */
.scene-director-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    line-height: 1.4;
}
.chip-label { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.65rem; }
.chip-value { color: var(--text-primary); font-weight: 500; }
.chip-phase   { border-color: color-mix(in oklab, var(--brand) 35%, transparent); }
.chip-type    { border-color: color-mix(in oklab, var(--accent-secondary) 35%, transparent); }
.chip-pacing  { border-color: color-mix(in oklab, var(--warning) 35%, transparent); }
.chip-scale   { border-color: rgba(90,130,170,0.35); }
.chip-energy  { gap: 0.4rem; }
.chip-energy-bar {
    display: inline-block;
    width: 42px;
    height: 5px;
    border-radius: 3px;
    background: var(--bg-secondary);
    overflow: hidden;
    border: 1px solid var(--border-light);
}
.chip-energy-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, color-mix(in oklab, var(--brand) 70%, transparent), color-mix(in oklab, var(--warning) 90%, transparent));
}

.badge-warning {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid color-mix(in oklab, var(--warning) 35%, transparent);
}

/* Directorial intent block (inside scene details) */
.directorial-intent {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-left: 2px solid rgba(130,90,150,0.35);
    border-radius: 4px;
}
.directorial-intent-title {
    margin: 0 0 var(--space-2) 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}
.directorial-intent .scene-detail-grid { margin-top: 0; }

.prompt-section {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-light);
    border-left: 2px solid transparent;
}
.prompt-section-still { border-left-color: color-mix(in oklab, var(--brand) 25%, transparent); }
.prompt-section-animation { border-left-color: color-mix(in oklab, var(--brand) 50%, transparent); }
.prompt-section-minor {
    padding: var(--space-3) var(--space-5);
    background: var(--bg-secondary);
}
.prompt-section.prompt-locked { opacity: 0.5; border-left-color: transparent; }

.prompt-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    gap: var(--space-2);
    flex-wrap: wrap;
}
.prompt-section-header h4 { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.prompt-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.lock-hint { font-size: 0.78rem; color: var(--text-muted); }

.prompt-textarea {
    width: 100%;
    min-height: 90px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.6;
    padding: var(--space-2) var(--space-3);
    resize: vertical;
}
.prompt-textarea:focus { border-color: var(--ring); outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent); }
.prompt-textarea:disabled { opacity: 0.4; cursor: not-allowed; }
.prompt-text-small { font-size: 0.8rem; color: var(--text-muted); font-family: var(--font-mono); }

.video-status {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
}
.vg-label { color: var(--text-secondary); font-size: 0.8rem; }

.scene-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    flex-wrap: wrap;
    gap: var(--space-3);
}
.scene-card-footer-admin {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.scene-card-footer-admin summary {
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text-muted);
    list-style: none;
    padding: 0.25rem var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.scene-card-footer-admin summary::-webkit-details-marker { display: none; }
.scene-card-footer-admin summary:hover { color: var(--text-secondary); border-color: var(--border); }
.scene-card-footer-admin[open] summary { color: var(--text-secondary); border-color: var(--border); }
.scene-card-footer-admin-panel {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: var(--space-2);
}
.status-update select {
    font-size: 0.78rem;
    padding: 0.25rem var(--space-2);
    width: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}

/* ──────────────────────────────────────────────
   Export
   ────────────────────────────────────────────── */
.export-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}
.export-panel h3 { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); }
.export-buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Grouped export sections — "The plan" vs "Media" */
.export-group + .export-group {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}
.export-group-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--foreground);
    text-transform: none;
    margin-bottom: var(--space-1);
}
.export-group-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
    max-width: 56ch;
}

/* Blocked export button (awaiting clip prefetch) */
.export-buttons .btn.is-blocked {
    opacity: 0.5;
    pointer-events: none;
}

/* Prefetch status panel — uses design tokens per state */
.export-prefetch-panel {
    margin-top: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
}
.export-prefetch-panel[hidden] { display: none; }
.export-prefetch-panel--pending {
    background: var(--warning-soft);
    border-color: color-mix(in oklab, var(--warning) 30%, transparent);
}
.export-prefetch-panel--ready {
    background: var(--success-soft);
    border-color: color-mix(in oklab, var(--success) 30%, transparent);
}
.export-prefetch-panel--error {
    background: color-mix(in oklab, var(--destructive) 12%, var(--background));
    border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
}
.export-prefetch-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--foreground);
}
.export-prefetch-panel--pending .export-prefetch-title { color: oklch(from var(--warning) calc(l - 0.1) c h); }
.export-prefetch-panel--ready   .export-prefetch-title { color: oklch(from var(--success) calc(l - 0.1) c h); }
.export-prefetch-panel--error   .export-prefetch-title { color: var(--destructive); }
.export-prefetch-detail {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.export-format-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.export-format-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.export-format-item .btn { flex-shrink: 0; min-width: 150px; justify-content: center; }
.export-format-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.export-format-desc strong { display: block; color: var(--text-primary); font-weight: 600; font-size: 0.88rem; margin-bottom: 0.1rem; }

.export-preview {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
}
.export-preview h2 { font-size: 0.875rem; margin-bottom: var(--space-4); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.export-preview pre { font-size: 0.8rem; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; max-height: 600px; overflow-y: auto; }

/* ──────────────────────────────────────────────
   Generating overlay (loading states)
   ────────────────────────────────────────────── */
.generating-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in oklab, var(--background) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-4);
    color: var(--foreground);
}
.generating-overlay .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.generating-overlay-message {
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-align: center;
    max-width: 340px;
    line-height: 1.5;
}
.generating-overlay-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.generating-overlay-elapsed {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    opacity: 0;
    transition: opacity 0.5s;
}
.generating-overlay-elapsed.visible { opacity: 1; }
.generating-overlay-dismiss { margin-top: var(--space-3); }

/* ── Job activity log panel (inside the generating overlay) ── */
.job-log-panel {
    width: 100%;
    max-width: 540px;
    margin-top: var(--space-4);
}
.job-log-summary {
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.job-log-summary::-webkit-details-marker { display: none; }
.job-log-summary::before { content: '▶'; font-size: 0.6rem; transition: transform 0.2s; }
.job-log-panel[open] .job-log-summary::before { transform: rotate(90deg); }
.job-log-count {
    background: var(--border);
    color: var(--text-secondary);
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 9px;
    font-variant-numeric: tabular-nums;
}
.job-log-entries {
    margin-top: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.72rem;
    line-height: 1.6;
    max-height: 220px;
    overflow-y: auto;
    scroll-behavior: smooth;
    color: var(--foreground);
}
.job-log-line { display: flex; gap: 8px; }
.job-log-time {
    color: var(--muted-foreground);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.job-log-line--info  { color: var(--foreground); }
.job-log-line--success { color: var(--success); }
.job-log-line--error { color: var(--destructive); }
.job-log-line--warn  { color: var(--warning); }

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

/* ──────────────────────────────────────────────
   Auto-generate panel
   ────────────────────────────────────────────── */
.auto-generate-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-6);
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}
.auto-generate-panel--secondary { border-left-color: var(--text-muted); }
.auto-generate-icon { font-size: 1.4rem; flex-shrink: 0; opacity: 0.7; }
.auto-generate-content { flex: 1; min-width: 0; }
.auto-generate-content h3 { font-size: 1rem; font-weight: 600; margin-bottom: var(--space-1); }
.auto-generate-content p  { font-size: 0.875rem; color: var(--text-secondary); margin: 0; }

/* ──────────────────────────────────────────────
   Lens controls (scene card)
   ────────────────────────────────────────────── */
.lens-controls {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}
.lens-control {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
    min-width: 120px;
}
.lens-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.lens-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 0.875rem;
    padding: var(--space-2) var(--space-3);
    width: 100%;
    outline: none;
    transition: border-color 0.15s;
}
.lens-select:focus { border-color: var(--accent); }

/* ──────────────────────────────────────────────
   Still image preview (scene card)
   ────────────────────────────────────────────── */
.still-image-preview-wrap {
    margin-top: var(--space-3);
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-width: 400px;
    border: 1px solid var(--border);
}
.still-image-preview-wrap--empty { display: none; }
.still-image-preview { width: 100%; height: auto; display: block; }
.still-image-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-top: var(--space-1);
}
.still-upload-hint-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}
.still-upload-hint  { font-size: 0.8rem; color: var(--text-muted); }
.still-upload-label { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ──────────────────────────────────────────────
   Utility classes
   ────────────────────────────────────────────── */
.text-muted { color: var(--text-muted); font-size: 0.875rem; }
.text-secondary { color: var(--text-secondary); }

/* ──────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav { padding: var(--space-3) var(--space-4); }
    .breadcrumb { padding: var(--space-3) var(--space-4) 0; }

    .page-header { margin-bottom: var(--space-5); }
    .page-header h1 { font-size: 1.65rem; letter-spacing: -0.02em; }

    .project-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .treatment-grid { grid-template-columns: 1fr; }

    .form-card { padding: var(--space-5); }
    .form-section { margin-bottom: var(--space-6); padding-bottom: var(--space-6); }
    .form-row { grid-template-columns: 1fr; }

    .workflow-list { grid-template-columns: 1fr 1fr; }

    .scene-card-header { padding: var(--space-3) var(--space-4); }
    .scene-narrative,
    .prompt-section { padding: var(--space-3) var(--space-4); }
    .prompt-section-minor { padding: var(--space-3) var(--space-4); }
    .scene-card-footer { padding: var(--space-3) var(--space-4); }
    .scene-detail-grid { grid-template-columns: 1fr; }

    .prompt-section-header { align-items: flex-start; flex-direction: column; }
    .prompt-actions { width: 100%; }

    .export-format-item { flex-direction: column; align-items: stretch; }
    .export-format-item .btn { min-width: 0; }

    .treatment-cta-bar { flex-direction: column; align-items: stretch; text-align: center; }

    .auto-generate-panel { flex-direction: column; align-items: flex-start; padding: var(--space-4); }
    .auto-generate-content { width: 100%; }

    .empty-state { padding: 2rem var(--space-4); }

    .still-image-preview-wrap { max-width: 100%; }

    .lens-controls { gap: var(--space-3); }
}

@media (max-width: 480px) {
    html { font-size: 14px; }
    .nav { padding: var(--space-2) var(--space-3); }
    .breadcrumb { padding: var(--space-2) var(--space-3) 0; }

    .page-header { flex-direction: column; align-items: stretch; }
    .page-header .header-actions { justify-content: stretch; }
    .page-header h1 { font-size: 1.5rem; letter-spacing: -0.02em; }

    /* Touch targets: minimum 44px height for all buttons */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 36px; }

    .form-card { padding: var(--space-4); }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn { width: 100%; justify-content: center; }

    .workflow-list { grid-template-columns: 1fr; }
    .workflow-step-header { flex-wrap: wrap; }

    .gallery-item { width: 100px; height: 75px; }
    .project-card { padding: var(--space-4); }

    /* Tabs: compact on small screens */
    .tab-btn { padding: 0.4rem 0.7rem; font-size: 0.8rem; }

    /* Scene card header: stack vertically on phones */
    .scene-card-header { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .scene-card-title { flex-wrap: wrap; gap: var(--space-1); }
    .scene-timing { font-size: 0.72rem; }
    .scene-field-label { min-width: 0; font-size: 0.72rem; }

    /* Prompt actions: stack buttons full-width */
    .prompt-actions { flex-direction: column; align-items: stretch; }
    .prompt-actions .btn { width: 100%; justify-content: center; font-size: 0.8rem; }

    /* Lens controls: single column */
    .lens-controls { flex-direction: column; }
    .lens-control { min-width: 0; width: 100%; }

    /* Still image: full width */
    .still-image-preview-wrap { max-width: 100%; }

    /* Empty state: reduce padding */
    .empty-state { padding: 1.5rem var(--space-3); }

    .variant-tabs { flex-direction: column; }
    .variant-tab-btn { justify-content: space-between; width: 100%; }

    /* Export: full-width button */
    .export-format-item .btn { width: 100%; justify-content: center; }
}

/* ──────────────────────────────────────────────
   Settings Page
   Three-tab layout: Workspace / AI / Advanced.
   ────────────────────────────────────────────── */

.settings-form { max-width: 960px; }

.settings-tabs {
    margin-bottom: var(--space-3);
    gap: var(--space-3);
}
.settings-tabs .tab-btn { font-size: 0.95rem; }
.settings-tabs .tab-count {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-left: 0.35rem;
    padding: 0.08rem 0.42rem;
    background: var(--muted);
    border-radius: var(--radius-pill);
    font-weight: 500;
}
.settings-tabs .tab-btn.active .tab-count {
    color: var(--brand);
    background: color-mix(in oklab, var(--brand) 10%, transparent);
}

.settings-tab-intro {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 var(--space-5);
    max-width: 56ch;
}
.settings-tab-intro[hidden] { display: none; }

.settings-tab-panel[hidden] { display: none; }

/* Per-tab Save block (one per settings tab). Lives at the bottom of
   every .settings-tab-panel and only touches that tab's fields. */
.settings-tab-save {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
}
.settings-tab-save-note {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1 1 260px;
}

.settings-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-7);
    margin-bottom: var(--space-5);
    scroll-margin-top: 72px;
}

.settings-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin: 0 0 var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.settings-section-title .form-section-number {
    font-size: 0.65rem;
    opacity: 0.6;
}

.settings-subsection-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: var(--space-5) 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.06));
}

/* Prompt style tabs */
.prompt-tabs { margin-top: var(--space-3); }
.prompt-tabs .tab-buttons {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-2);
}
.prompt-tabs .tab-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 0.3rem var(--space-3);
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
}
.prompt-tabs .tab-btn:hover { color: var(--text-primary); background: var(--bg-secondary); }
.prompt-tabs .tab-btn.active { color: var(--accent); font-weight: 600; }
.prompt-tabs .tab-pane { display: none; }
.prompt-tabs .tab-pane.active { display: block; }

/* Workflow status grid */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.status-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.status-row input { flex: 1; }
.status-key {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
    min-width: 160px;
}

/* Sticky save bar */
.settings-save-bar {
    position: sticky;
    bottom: 0;
    background: var(--bg-secondary, var(--bg-primary));
    border-top: 1px solid var(--border);
    padding: var(--space-3) var(--space-5);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    z-index: 20;
    border-radius: 0 0 var(--radius) var(--radius);
    margin-top: var(--space-2);
}
.settings-save-spacer { flex: 1; }
.settings-save-note {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 780px) {
    .settings-section { padding: var(--space-4); }
    .settings-tabs { flex-wrap: wrap; gap: var(--space-2); }
    .settings-tab-intro { font-size: 0.88rem; }
}

@media (max-width: 480px) {
    .settings-section { padding: var(--space-3); }
    .settings-save-bar { padding: var(--space-2) var(--space-3); flex-wrap: wrap; }
    .settings-save-note { display: none; }
    .status-row { flex-direction: column; align-items: stretch; }
    .status-key { min-width: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   APP SHELL — Orchestriq sidebar + topbar layout
   (layout tokens --sidebar-width / --topbar-height / --rail-width
    live in the top :root block)
   ══════════════════════════════════════════════════════════════ */

/* Body reset for new layout */
body {
    display: block; /* override old flex-column */
}

/* ── Shell grid ── */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
    min-width: 0;
}

@media (min-width: 781px) {
    .app-shell.app-shell--sidebar-collapsed {
        grid-template-columns: 72px 1fr;
    }
}

.app-frame {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

/* ── Sidebar ── */
.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--border-light);
    background: var(--bg-card);
    background-image: linear-gradient(180deg, color-mix(in oklch, var(--brand) 3%, transparent) 0%, transparent 30%);
    display: flex;
    flex-direction: column;
    z-index: 110;
    scrollbar-width: none;
}
.app-sidebar::-webkit-scrollbar { display: none; }

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}
.sidebar-brand-mark { color: var(--accent); flex-shrink: 0; }
.sidebar-brand-text { flex: 1; min-width: 0; }
.sidebar-brand-name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.15rem;
    letter-spacing: -0.015em;
    color: var(--foreground);
    white-space: nowrap;
    line-height: 1.1;
}
.sidebar-brand-tag {
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sidebar-brand-tag::after {
    content: '· 00:00';
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    color: var(--brand);
    opacity: 0.6;
    flex-shrink: 0;
}
.sidebar-collapse {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-collapse:hover { color: var(--text-primary); background: var(--bg-secondary); }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: var(--space-3) var(--space-2);
    gap: 1px;
}
.sidebar-nav--secondary {
    padding-top: var(--space-2);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.45rem var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
    position: relative;
    white-space: nowrap;
}
.sidebar-nav-item:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.sidebar-nav-item.is-active {
    background: color-mix(in oklab, var(--brand) 8%, transparent);
    color: var(--accent);
}
.sidebar-nav-item.is-soon {
    opacity: 0.6;
    pointer-events: none;
}
.sidebar-icon {
    flex-shrink: 0;
    opacity: 0.75;
}
.sidebar-nav-item.is-active .sidebar-icon { opacity: 1; }
.sidebar-nav-label { flex: 1; }
.sidebar-nav-soon {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.1rem 0.4rem;
    border-radius: 0;
}

.sidebar-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-1) var(--space-3);
    flex-shrink: 0;
}

.sidebar-user-tile {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
    margin-top: auto;
}
.sidebar-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.sidebar-user-text { flex: 1; min-width: 0; }
.sidebar-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-email {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-menu {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: color 0.12s, background 0.12s;
}
.sidebar-user-menu:hover { background: var(--bg-secondary); color: var(--text-primary); }

/* ── Topbar ── */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--topbar-height);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-6);
    flex-shrink: 0;
}

.topbar-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.topbar-hamburger:hover { background: var(--bg-secondary); color: var(--text-primary); }

.topbar-switcher {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.75rem;
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: default;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.topbar-switcher-icon { color: var(--text-muted); flex-shrink: 0; }
.topbar-switcher-chevron { color: var(--text-muted); flex-shrink: 0; }
.topbar-switcher-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.topbar-search {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-4);
    height: 36px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.topbar-search:focus-within {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 20%, transparent);
}
.topbar-search-icon { color: var(--text-muted); flex-shrink: 0; }
.topbar-search-input {
    background: none;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: var(--text-primary);
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    font-family: var(--font);
    width: 100%;
}
.topbar-search-input::placeholder { color: var(--text-muted); }
.topbar-search-kbd {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    flex-shrink: 0;
    font-family: var(--font);
    pointer-events: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    margin-left: auto;
}
.topbar-new-btn {
    white-space: nowrap;
    gap: var(--space-1);
    padding: 0.35rem var(--space-4);
    font-size: 0.85rem;
}
.topbar-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.topbar-icon-btn:hover { background: var(--muted); color: var(--foreground); }

.topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-foreground);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* ── Main area ── */
.app-main {
    flex: 1;
    padding: var(--space-6) var(--space-8);
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   BREADCRUMB (inside app-main, no max-width constraint)
   ══════════════════════════════════════════════════════════════ */
.app-main .breadcrumb {
    max-width: none;
    margin: 0 0 var(--space-4);
    padding: 0;
}

/* ══════════════════════════════════════════════════════════════
   META STRIP
   ══════════════════════════════════════════════════════════════ */
.meta-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
}
.meta-dot { color: var(--text-muted); opacity: 0.5; }

/* ══════════════════════════════════════════════════════════════
   PROJECT DETAIL LAYOUT
   ══════════════════════════════════════════════════════════════ */
.pd-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.pd-title {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--foreground);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.pd-title a { color: inherit; text-decoration: none; }
.pd-title a:hover { color: var(--accent); }
.pd-header-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Project detail — overflow menu (kebab) */
.pd-menu {
    position: relative;
    list-style: none;
}
.pd-menu > summary { list-style: none; cursor: pointer; }
.pd-menu > summary::-webkit-details-marker,
.pd-menu > summary::marker { display: none; content: ''; }

.pd-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pd-menu[open] > .pd-menu-trigger,
.pd-menu > summary:hover {
    background: var(--muted);
    border-color: var(--border-strong);
    color: var(--foreground);
}

.pd-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    min-width: 220px;
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: pd-menu-in 0.12s ease-out;
}
@keyframes pd-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.pd-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.pd-menu-item:hover { background: var(--muted); }
.pd-menu-item--danger { color: var(--destructive); }
.pd-menu-item--danger:hover {
    background: color-mix(in oklab, var(--destructive) 10%, transparent);
    color: var(--destructive);
}
.pd-menu-sep {
    height: 1px;
    background: var(--border);
    margin: var(--space-1) 0;
}
.pd-menu-form { margin: 0; display: contents; }

@media (max-width: 480px) {
    .pd-menu-panel { right: auto; left: 0; min-width: 200px; }
}

.pd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    gap: var(--space-8);
    align-items: start;
}
.pd-main { min-width: 0; }
.pd-section { margin-bottom: var(--space-6); }

/* ── Page-level tab count badge ── */
.pd-page-tabs .tab-count {
    font-size: 0.72rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    margin-left: var(--space-1);
}

/* ── Description card ── */
.description-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-5);
    align-items: start;
}
.description-card-body { min-width: 0; }
.description-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}
.description-overflow { display: none; }
.description-overflow.is-open { display: inline; }
.description-showmore {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
    margin-left: var(--space-1);
    font-weight: 500;
}
.description-showmore:hover { text-decoration: underline; }
.description-card-stats {
    display: flex;
    gap: var(--space-5);
    flex-shrink: 0;
    align-items: flex-start;
}
.description-stat { text-align: center; }
.description-stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.description-stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.description-stat-continuity {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--success);
}

/* ── Treatment summary card ── */
.treatment-summary {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
/* When the full treatment is visible, keep the summary pinned at the top
   of the viewport so the user always has the concept + Collapse toggle
   in view while scrolling through the cards. */
.treatment-summary[data-treatment-summary] {
    position: sticky;
    top: calc(var(--topbar-height, 64px) + var(--space-2));
    z-index: 5;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: color-mix(in oklab, var(--card) 92%, transparent);
}
.treatment-summary-toggle {
    flex-shrink: 0;
}
.treatment-summary--empty { opacity: 0.85; }
.treatment-summary-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.treatment-summary-body { flex: 1; min-width: 0; }
.treatment-summary-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.treatment-summary-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.treatment-summary-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Scenes section ── */
.scenes-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.scenes-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.scenes-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
}
.scenes-section-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
/* Board/Table view switcher (segmented control) */
.scenes-view-switch {
    display: inline-flex;
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 2px;
}
.scenes-view-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.scenes-view-switch-btn:hover { color: var(--foreground); }
.scenes-view-switch-btn.is-active {
    background: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-sm);
}

/* ── Scenes Board view (card grid) ── */
.scenes-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.scenes-board[hidden] { display: none; }

/* Mobile: Board is the only viable view. Hide the Table switcher,
   tighten the grid to a single column with shorter thumbs so a
   full scene takes roughly a screen height. */
@media (max-width: 640px) {
    .scenes-view-switch-btn[data-scenes-view="table"] { display: none; }
    .scenes-board {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .scene-board-card-thumb { aspect-ratio: 16 / 10; }
    .scene-board-card-body { padding: var(--space-3) var(--space-3) var(--space-2); }
    .scene-board-card-footer {
        padding: var(--space-2) var(--space-3);
        flex-wrap: wrap;
        row-gap: var(--space-2);
    }
}

.scene-board-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.scene-board-card:hover {
    border-color: color-mix(in oklab, var(--brand) 40%, var(--border));
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.scene-board-card.is-expanded {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 25%, transparent), var(--shadow-md);
}
.scene-board-card-surface {
    all: unset;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
}
.scene-board-card-surface:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.scene-board-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--muted);
    overflow: hidden;
}
.scene-board-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scene-board-card-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-muted);
    opacity: 0.5;
}
.scene-board-card-index {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: oklch(99% 0 0);
    background: oklch(0% 0 0 / 0.6);
    backdrop-filter: blur(4px);
    padding: 0.18rem 0.45rem;
    border-radius: var(--radius-sm);
}
.scene-board-card-duration {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    color: oklch(99% 0 0);
    background: oklch(0% 0 0 / 0.6);
    backdrop-filter: blur(4px);
    padding: 0.18rem 0.45rem;
    border-radius: var(--radius-sm);
}

.scene-board-card-body {
    padding: var(--space-3) var(--space-4) var(--space-2);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.scene-board-card-timing {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.scene-board-card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--foreground);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.scene-board-card-desc {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scene-board-card-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    background: oklch(from var(--surface) l c h / 0.4);
}
.scene-board-card-icons {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}
.scene-board-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--text-muted);
    background: var(--muted);
    border-radius: var(--radius-sm);
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.scene-board-card-icon.is-done {
    color: var(--brand);
    background: color-mix(in oklab, var(--brand) 12%, transparent);
    opacity: 1;
}

/* ── Shared scene detail stack (below both views) ── */
.scene-detail-stack { margin-top: var(--space-4); }
.scene-detail { margin-bottom: var(--space-4); }
.scene-detail[hidden] { display: none; }
.scenes-search-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.25rem var(--space-3);
    height: 32px;
    transition: border-color 0.15s;
}
.scenes-search-wrap:focus-within { border-color: var(--accent); }
.scenes-search-icon { color: var(--text-muted); flex-shrink: 0; }
.scenes-search {
    background: none;
    border: none;
    outline: none;
    font-size: 0.8rem;
    color: var(--text-primary);
    font-family: var(--font);
    width: 160px;
}
.scenes-search::placeholder { color: var(--text-muted); }

/* ── Scenes table ── */
.scenes-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: var(--space-4);
    -webkit-overflow-scrolling: touch;
}
.scenes-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    background: var(--bg-card);
    font-size: 0.875rem;
}
.scenes-table thead { background: var(--bg-card-alt); }
.scenes-table th {
    padding: 0.6rem var(--space-3);
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.scenes-table td {
    padding: 0.75rem var(--space-3);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.scenes-table tbody tr.scene-row:last-of-type td { border-bottom: none; }
.scenes-table tbody tr.scene-row { transition: background 0.12s; cursor: default; }
.scenes-table tbody tr.scene-row:hover { background: var(--bg-secondary); }
.scenes-table tbody tr.scene-row.is-expanded { background: color-mix(in oklab, var(--brand) 4%, transparent); }

.col-num    { width: 44px; }
.col-timing { width: 110px; }
.col-scene  { min-width: 220px; }
.col-still  { width: 170px; }
.col-anim   { width: 185px; }
.col-status { width: 110px; }
.col-menu   { width: 36px; text-align: center; }

.scene-row-num {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}
.scene-row-time {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.scene-row-dur {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 2px;
}
.scene-row-scene {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.scene-row-thumb {
    width: 52px;
    height: 38px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-secondary);
    display: block;
}
.scene-row-thumb--empty {
    width: 52px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.scene-row-info { min-width: 0; }
.scene-row-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.scene-row-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.scene-row-prompt-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    font-family: var(--font);
    transition: opacity 0.12s;
    text-align: left;
}
.scene-row-prompt-link:hover { opacity: 0.75; text-decoration: underline; }
.scene-row-prompt-empty { color: var(--text-muted); font-size: 0.82rem; }
.scene-row-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: background 0.12s, color 0.12s;
    letter-spacing: 0.04em;
}
.scene-row-menu-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }

.scene-detail .scene-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* ── Right rail ── */
.pd-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-4));
    max-height: calc(100vh - var(--topbar-height) - var(--space-8));
    overflow-y: auto;
    scrollbar-width: thin;
}

.rail-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.rail-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}
.rail-card-count { font-weight: 400; color: var(--text-muted); }
.rail-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.rail-card-head .rail-card-title { margin-bottom: 0; }
.rail-card-viewall {
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 500;
}
.rail-card-viewall:hover { text-decoration: underline; }

/* ── Workflow stepper (vertical, rail) ── */
.workflow-stepper {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.workflow-stepper-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem 0;
    border-radius: var(--radius-sm);
    position: relative;
    font-size: 0.875rem;
}
.workflow-stepper-item + .workflow-stepper-item {
    border-top: 1px solid var(--border-light);
}
.workflow-stepper-item.is-active {
    background: color-mix(in oklab, var(--brand) 5%, transparent);
    border-radius: var(--radius-sm);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    margin: 0 -var(--space-2);
}
.workflow-stepper-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.72rem;
}
.workflow-stepper-item.is-done .workflow-stepper-indicator {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
}
.workflow-stepper-item.is-active .workflow-stepper-indicator {
    border-color: var(--accent);
    background: var(--brand);
    color: var(--brand-foreground);
}
.workflow-stepper-item.is-active .workflow-stepper-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-foreground);
    display: block;
}
.workflow-stepper-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    display: block;
}
.workflow-stepper-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 20px;
}
.workflow-stepper-name {
    font-weight: 500;
    color: var(--text-secondary);
    flex: 1;
}
.workflow-stepper-item.is-active .workflow-stepper-name { color: var(--accent); font-weight: 600; }
.workflow-stepper-item.is-done .workflow-stepper-name { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(110,110,115,0.35); }

/* ── References grid (rail) ── */
.references-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.references-grid-item {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 4/3;
    display: block;
    transition: border-color 0.15s, transform 0.15s;
}
.references-grid-item:hover { border-color: var(--accent); transform: scale(1.02); }
.references-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.references-grid-item {
    position: relative;
}
.ref-kind-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 0;
    padding: 0.14rem 0.4rem;
    background: oklch(0% 0 0 / 0.72);
    color: oklch(100% 0 0);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.ref-label-badge {
    position: absolute;
    right: 6px;
    top: 6px;
    max-width: calc(100% - 12px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 0.64rem;
    border-radius: 0;
    padding: 0.14rem 0.4rem;
    background: oklch(0% 0 0 / 0.72);
    color: oklch(100% 0 0);
}
.reference-controls {
    margin-top: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ref-meta-form {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(76px, 0.7fr) minmax(120px, 1fr);
    gap: 0.35rem;
    align-items: center;
}
.ref-file-name {
    font-size: 0.72rem;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.reference-meta-feedback {
    grid-column: 1 / -1;
    font-size: 0.68rem;
    min-height: 1.05em;
}
.reference-meta-feedback--ok {
    color: var(--success);
}
.reference-meta-feedback--error {
    color: var(--danger);
}
/* ── Continuity rail card ── */
.continuity-consistent {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
.continuity-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}
.continuity-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}
.continuity-btn { width: 100%; justify-content: center; }

/* ── detail-list ordered ── */
.detail-list-ol {
    padding-left: var(--space-5);
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.detail-list-ol li { margin-bottom: 0.3rem; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — rail collapses, sidebar goes offcanvas
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    :root { --rail-width: 260px; }
}

@media (max-width: 1050px) {
    .pd-layout {
        grid-template-columns: 1fr;
    }
    .pd-rail {
        position: static;
        max-height: none;
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
        gap: var(--space-4);
    }
}

/* ── Mobile: project-info rail collapses into a bottom sheet ── */
.pd-rail-fab,
.pd-rail-backdrop { display: none; }

@media (max-width: 640px) {
    /* Hide the rail by default; opens on FAB tap. */
    .pd-rail {
        display: none;
    }
    .pd-rail--sheet-open {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 85vh;
        overflow-y: auto;
        padding: var(--space-4) var(--space-4)
                 max(var(--space-5), calc(var(--safe-bottom) + var(--space-4)));
        background: var(--card);
        border-top: 1px solid var(--border);
        border-radius: var(--radius) var(--radius) 0 0;
        box-shadow: var(--shadow-lg);
        z-index: 250;
        animation: pd-rail-sheet-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
        -webkit-overflow-scrolling: touch;
    }
    .pd-rail--sheet-open::before {
        content: "";
        display: block;
        width: 44px;
        height: 4px;
        border-radius: var(--radius-pill);
        background: var(--border-strong);
        margin: 0 auto var(--space-3);
        flex-shrink: 0;
    }
    @keyframes pd-rail-sheet-in {
        from { transform: translateY(100%); }
        to   { transform: none; }
    }

    .pd-rail-fab {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        position: fixed;
        right: var(--space-4);
        bottom: max(var(--space-4), calc(var(--safe-bottom) + var(--space-3)));
        z-index: 240;
        padding: 0.6rem 0.95rem;
        border: 1px solid color-mix(in oklab, var(--brand) 45%, var(--border));
        border-radius: var(--radius-pill);
        background: var(--card);
        color: var(--foreground);
        font-size: 0.82rem;
        font-weight: 600;
        box-shadow: var(--shadow-lg);
        cursor: pointer;
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .pd-rail-fab:hover,
    .pd-rail-fab:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px -10px color-mix(in oklab, var(--brand) 55%, transparent),
                    var(--shadow-md);
        outline: none;
    }
    .pd-rail-fab[aria-expanded="true"] {
        background: var(--brand);
        color: var(--brand-foreground);
        border-color: var(--brand);
    }
    .pd-rail-fab-icon { flex-shrink: 0; }
    .pd-rail-fab-label { white-space: nowrap; }
    .pd-rail-fab-badge {
        font-family: var(--font-mono);
        font-size: 0.66rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        padding: 0.1rem 0.45rem;
        background: color-mix(in oklab, var(--brand) 14%, transparent);
        color: var(--brand);
        border-radius: var(--radius-pill);
        font-variant-numeric: tabular-nums;
    }
    .pd-rail-fab[aria-expanded="true"] .pd-rail-fab-badge {
        background: color-mix(in oklab, oklch(100% 0 0) 22%, transparent);
        color: var(--brand-foreground);
    }

    .pd-rail-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 245;
        background: color-mix(in oklab, var(--film-ink, #0a0a0a) 50%, transparent);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        animation: pd-rail-backdrop-in 0.18s ease-out;
    }
    .pd-rail-backdrop[hidden] { display: none; }
    @keyframes pd-rail-backdrop-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

@media (max-width: 900px) {
    :root { --sidebar-width: 200px; }
    .topbar-search-input { font-size: 0.82rem; }
    .scenes-search { width: 120px; }
    .scenes-section-actions { width: 100%; }
    .batch-actions { flex-wrap: wrap; }
    .batch-actions .btn { flex: 1 1 220px; justify-content: center; }
}

@media (max-width: 680px) {
    .scenes-section-actions {
        align-items: stretch;
    }
    .scenes-search-wrap {
        order: 2;
        width: 100%;
        height: 36px;
    }
    .scenes-search {
        width: 100%;
    }
    .scenes-view-switch {
        order: 1;
    }
    .batch-actions {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--radius);
        padding: var(--space-3);
        gap: var(--space-2);
    }
    .batch-actions-group {
        flex-wrap: wrap;
        width: 100%;
        padding-right: 0;
        border-right: none;
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--border);
    }
    .batch-actions-group:last-of-type {
        padding-bottom: 0;
        border-bottom: none;
    }
    .batch-actions-group .btn { flex: 1 1 100%; }
    .batch-actions-advanced { margin-left: 0; align-self: flex-end; }
}

@media (max-width: 780px) {
    .app-shell {
        grid-template-columns: 1fr;
    }
    .app-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(var(--sidebar-width), 80vw);
        transform: translateX(-100%);
        transition: transform 0.25s ease, box-shadow 0.25s;
        box-shadow: none;
        z-index: 200;
    }
    .app-shell--sidebar-open .app-sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.14);
    }
    .topbar-hamburger { display: flex; }
    .app-topbar { padding: 0 var(--space-4); gap: var(--space-2); }
    .topbar-new-btn span { display: none; }
    .topbar-new-btn { padding: 0.35rem var(--space-3); }
    .topbar-search { display: none; }
    .app-main { padding: var(--space-4); min-width: 0; }
    .description-card {
        grid-template-columns: 1fr;
    }
    .description-card-stats { gap: var(--space-4); flex-wrap: wrap; }
    .pd-title-row { flex-direction: column; align-items: stretch; }
    .pd-title { font-size: 1.2rem; }
    .pd-header-actions { justify-content: flex-start; }
    .pd-header-actions .btn { flex: 1 1 calc(50% - var(--space-2)); justify-content: center; }
    .pd-header-actions .pd-menu { flex: 0 0 auto; }
    .pd-header-actions form .btn { width: 100%; }
}

@media (max-width: 540px) {
    .topbar-icon-btn[aria-label="Notifications"] { display: none; }
    .scenes-table th:is(.col-still, .col-anim) { display: none; }
    .scenes-table td:is(.col-still, .col-anim) { display: none; }
    .topbar-search-kbd { display: none; }
}

/* ──────────────────────────────────────────────
   Auth pages (login / register)
   ────────────────────────────────────────────── */
body.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--film-dark);
    padding: var(--space-6);
    position: relative;
    overflow: hidden;
}
body.auth-body::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    animation: grain 1.2s steps(1) infinite;
}
.auth-shell {
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
}
.auth-card {
    background: oklch(13% 0.018 265);
    border: 1px solid oklch(100% 0 0 / 0.1);
    border-radius: var(--radius);
    padding: var(--space-8) var(--space-7);
    box-shadow: 0 8px 32px oklch(0% 0 0 / 0.5), 0 2px 8px oklch(0% 0 0 / 0.4);
}
.auth-card .auth-brand-name,
.auth-card .auth-title {
    color: oklch(97% 0.004 80);
}
.auth-card .auth-brand-tag,
.auth-card .auth-subtitle { color: oklch(60% 0.012 260); }
.auth-card .form-group label { color: oklch(65% 0.012 260); }
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
    background: oklch(9% 0.018 265);
    border-color: oklch(100% 0 0 / 0.1);
    color: oklch(97% 0.004 80);
}
.auth-card input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px oklch(76% 0.11 145 / 0.2);
}
.auth-card .auth-alt { color: oklch(55% 0.012 260); }
.auth-card .auth-back { color: oklch(50% 0.012 260); }
.auth-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-7);
}
.auth-brand-mark {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--accent-dim);
    color: var(--accent);
}
.auth-brand-name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.35rem;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--foreground);
}
.auth-brand-tag {
    font-size: 0.78rem;
    color: var(--muted-foreground);
}
.auth-title {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--foreground);
    margin-bottom: var(--space-3);
}
.auth-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}
.auth-form .form-group { margin-bottom: var(--space-5); }
.auth-form .btn-block {
    width: 100%;
    margin-top: var(--space-3);
}
.auth-alt {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: var(--space-6);
    text-align: center;
}
.auth-alt a { color: var(--accent); font-weight: 500; }
.btn-block { width: 100%; }

/* Input con azione inline (es. password toggle) */
.input-with-action {
    position: relative;
    display: flex;
    align-items: center;
}
.input-with-action input {
    padding-right: 2.5rem;
}
.password-toggle {
    position: absolute;
    right: var(--space-3);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    transition: color 0.15s;
    line-height: 1;
}
.password-toggle:hover { color: var(--text-secondary); }
.password-toggle svg { pointer-events: none; }

/* ──────────────────────────────────────────────
   Secret field (API keys, tokens)
   ────────────────────────────────────────────── */
.secret-field { display: flex; flex-direction: column; gap: var(--space-2); }

.secret-field-stored {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.55rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-height: 42px;
}
.secret-field-mask {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.secret-field-mask-dots { color: var(--text-muted); }
.secret-field-mask-last4 { color: var(--text-primary); font-weight: 500; }
.secret-field-status {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--success);
    padding: 0.15rem 0.5rem;
    background: var(--success-soft);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}
.provider-health-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.provider-test-result {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.provider-test-result--ok  { color: var(--success); }
.provider-test-result--err { color: var(--destructive); }
.secret-field-replace-btn,
.secret-field-keep-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.secret-field-replace-btn:hover,
.secret-field-keep-btn:hover {
    background: var(--muted);
    border-color: var(--border-strong);
    color: var(--foreground);
}
.secret-field-keep-btn {
    align-self: flex-start;
    color: var(--text-muted);
}
.secret-field-edit[hidden] { display: none; }

/* ──────────────────────────────────────────────
   uiConfirm — branded alert dialog
   ────────────────────────────────────────────── */
.ui-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: color-mix(in oklab, var(--film-ink, #0a0a0a) 55%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: ui-dialog-fade-in 0.15s ease-out;
}
.ui-dialog-backdrop.is-leaving { animation: ui-dialog-fade-out 0.12s ease-in forwards; }
@keyframes ui-dialog-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ui-dialog-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.ui-dialog {
    width: 100%;
    max-width: 440px;
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: ui-dialog-pop-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.ui-dialog-backdrop.is-leaving .ui-dialog {
    animation: ui-dialog-pop-out 0.12s ease-in forwards;
}
@keyframes ui-dialog-pop-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
@keyframes ui-dialog-pop-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(4px) scale(0.98); }
}

.ui-dialog-head {
    padding: var(--space-5) var(--space-5) var(--space-2);
    border-bottom: 1px solid transparent;
}
.ui-dialog-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--foreground);
}
.ui-dialog--danger .ui-dialog-title  { color: var(--destructive); }
.ui-dialog--warning .ui-dialog-title { color: var(--warning); }

.ui-dialog-body { padding: 0 var(--space-5) var(--space-5); }
.ui-dialog-message {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

.ui-dialog-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    padding: var(--space-4) var(--space-5);
    background: var(--muted);
    border-top: 1px solid var(--border);
}
.ui-dialog-actions .btn {
    min-width: 96px;
    justify-content: center;
}

/* Solid destructive/warning buttons used only inside the dialog
   confirm slot — distinct from the ghost btn-danger used elsewhere. */
.btn-danger-solid {
    background: var(--destructive);
    color: var(--destructive-foreground);
    border: none;
    border-radius: var(--radius-pill);
}
.btn-danger-solid:hover:not(:disabled) {
    background: oklch(from var(--destructive) calc(l - 0.05) c h);
    box-shadow: 0 2px 10px color-mix(in oklab, var(--destructive) 35%, transparent);
}
.btn-warning-solid {
    background: var(--warning);
    color: var(--warning-foreground);
    border: none;
    border-radius: var(--radius-pill);
}
.btn-warning-solid:hover:not(:disabled) {
    background: oklch(from var(--warning) calc(l - 0.05) c h);
    box-shadow: 0 2px 10px color-mix(in oklab, var(--warning) 35%, transparent);
}

@media (max-width: 480px) {
    .ui-dialog { max-width: 100%; }
    .ui-dialog-actions { flex-direction: column-reverse; }
    .ui-dialog-actions .btn { width: 100%; }
}

/* ──────────────────────────────────────────────
   Error pages (404/403/419/500/503)
   Cinematic title-card aesthetic, within design system.
   ────────────────────────────────────────────── */
.error-body {
    background: var(--background);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.error-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    gap: var(--space-6);
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}
.error-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.15s;
}
.error-brand:hover { color: var(--foreground); }
.error-brand-name {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.error-card {
    position: relative;
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(var(--space-6), 6vw, 3rem) clamp(var(--space-5), 5vw, 2.5rem);
    text-align: center;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.error-card-bars { position: absolute; inset: 0; pointer-events: none; }
.error-card-bars span {
    position: absolute;
    left: 0;
    right: 0;
    height: 14px;
    background: var(--film-dark, #111);
    opacity: 0.9;
}
.error-card-bars span:first-child { top: 0; }
.error-card-bars span:last-child  { bottom: 0; }

.error-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}
.error-card-eyebrow-code { color: var(--foreground); }
.error-card-eyebrow-sep {
    width: 1px;
    height: 0.75em;
    background: var(--border-strong);
}

.error-card-code {
    font-family: var(--font-serif);
    font-size: clamp(4rem, 17vw, 9rem);
    font-weight: 400;
    font-style: italic;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--foreground);
    margin: 0;
    user-select: none;
}
.error-card-title {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 3vw, 1.6rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--foreground);
    margin: var(--space-3) 0 var(--space-3);
    text-wrap: balance;
}
.error-card-message {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 42ch;
    margin: 0 auto var(--space-6);
}
.error-card-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.error-footer-note {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}
.error-footer-note a {
    color: var(--foreground);
    text-decoration: none;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 1px;
}
.error-footer-note a:hover { border-bottom-color: var(--brand); color: var(--brand); }

@media (max-width: 480px) {
    .error-shell { gap: var(--space-5); padding: var(--space-5) var(--space-3); }
    .error-card { padding: var(--space-5) var(--space-4); }
    .error-card-bars span { height: 10px; }
    .error-card-eyebrow {
        font-size: 0.64rem;
        letter-spacing: 0.1em;
        gap: var(--space-1);
        margin-top: var(--space-3);
        margin-bottom: var(--space-3);
        flex-wrap: wrap;
        justify-content: center;
    }
    .error-card-message { font-size: 0.88rem; }
    .error-card-actions { width: 100%; flex-direction: column-reverse; }
    .error-card-actions .btn { width: 100%; justify-content: center; }
    .error-footer-note {
        font-size: 0.68rem;
        padding: 0 var(--space-3);
        text-wrap: balance;
    }
}

@media (max-width: 380px) {
    .error-card-code { font-size: 4.25rem; }
    .error-card-title { font-size: 1.1rem; }
    .error-brand-name { font-size: 0.72rem; letter-spacing: 0.1em; }
}

/* ──────────────────────────────────────────────
   Sidebar user tile — dropdown + logout
   ────────────────────────────────────────────── */
.sidebar-user-tile { position: relative; }
.sidebar-user-menu-panel {
    position: absolute;
    bottom: calc(100% + 6px);
    left: var(--space-4);
    right: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    display: none;
    z-index: 50;
}
.sidebar-user-tile.is-open .sidebar-user-menu-panel { display: block; }
.sidebar-user-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}
.sidebar-user-menu-item:hover { background: var(--bg-secondary); }
.sidebar-user-menu-item.is-danger { color: var(--danger); }

/* Desktop collapsed sidebar */
@media (min-width: 781px) {
    .app-shell.app-shell--sidebar-collapsed .app-sidebar {
        overflow-x: hidden;
    }
    .app-shell.app-shell--sidebar-collapsed .sidebar-brand {
        justify-content: center;
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
    .app-shell.app-shell--sidebar-collapsed .sidebar-brand-text,
    .app-shell.app-shell--sidebar-collapsed .sidebar-nav-label,
    .app-shell.app-shell--sidebar-collapsed .sidebar-user-text,
    .app-shell.app-shell--sidebar-collapsed .sidebar-divider {
        display: none;
    }
    .app-shell.app-shell--sidebar-collapsed .sidebar-nav {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
    .app-shell.app-shell--sidebar-collapsed .sidebar-nav-item {
        justify-content: center;
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
    .app-shell.app-shell--sidebar-collapsed .sidebar-user-tile {
        justify-content: center;
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
}

/* Project card delete affordance */
.project-card-delete {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.project-card:hover .project-card-delete,
.project-card:focus-within .project-card-delete,
.project-card-delete:focus-visible { opacity: 1; }
.project-card-delete:hover,
.project-card-delete:focus-visible {
    background: rgba(185, 28, 28, 0.08);
    color: var(--danger);
    outline: none;
}
.project-card-delete svg { display: block; }
.project-card { position: relative; }

/* ──────────────────────────────────────────────
 * New Project — Easy/Advanced tabs
 * ────────────────────────────────────────────── */
.hidden { display: none !important; }

.mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.mode-tab {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 14px 18px;
    text-align: left;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}
.mode-tab:hover:not(.active) {
    background: var(--hover);
    color: var(--text);
}
.mode-tab.active {
    background: var(--card);
    color: var(--text);
    border-color: var(--border);
    border-bottom-color: var(--card);
    font-weight: 500;
}
.mode-tab-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 2px;
}
.mode-tab-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 400;
}
.mode-panel { animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────────
 * Easy mode — reference image preview grid
 * ────────────────────────────────────────────── */
.easy-ref-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.easy-ref-preview:empty { display: none; }
.easy-ref-thumb {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--card);
    display: flex;
    flex-direction: column;
}
.easy-ref-thumb img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}
.easy-ref-thumb-name {
    font-size: 0.72rem;
    color: var(--text-muted);
    padding: 4px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ──────────────────────────────────────────────
   PWA / standalone — iOS notch safe-area insets
 * ────────────────────────────────────────────── */
@supports (padding: max(0px)) {
    .app-topbar {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-left: max(var(--space-4, 16px), env(safe-area-inset-left));
        padding-right: max(var(--space-4, 16px), env(safe-area-inset-right));
    }
    .app-main {
        padding-left: max(var(--space-4, 16px), env(safe-area-inset-left));
        padding-right: max(var(--space-4, 16px), env(safe-area-inset-right));
        padding-bottom: max(var(--space-4, 16px), env(safe-area-inset-bottom));
    }
}

/* ==================================================================
   Landing page
   ================================================================== */

.landing-body {
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: block;
    font-family: var(--font);
}

/* Landing-only button size (hero / closing CTA) */
.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    border-radius: var(--radius);
    font-weight: 500;
}

/* Top nav ---------------------------------------------------------- */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0.9rem 2rem;
    background: color-mix(in oklab, var(--background) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border-light);
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--text-primary);
    font-weight: 600;
}
.landing-brand:hover { color: var(--text-primary); }

.landing-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.landing-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}
.landing-brand-name { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em; }
.landing-brand-tag  { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; }

.landing-nav-actions {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
}

.landing-nav-link {
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
}
.landing-nav-link:hover { color: var(--text-primary); }

/* Flash ------------------------------------------------------------ */
.landing-flash {
    max-width: 960px;
    margin: 1.25rem auto 0;
    border-radius: var(--radius);
}

/* Hero ------------------------------------------------------------- */
.landing-hero {
    max-width: 960px;
    margin: 0 auto;
    padding: 6rem 1.5rem 4.5rem;
    text-align: center;
}

.landing-eyebrow {
    display: inline-block;
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.32rem 0.7rem;
    border-radius: var(--radius-pill);
    margin-bottom: 1.75rem;
}

.landing-headline {
    font-family: var(--font-serif);
    font-size: clamp(2.75rem, 5.2vw, 4.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--foreground);
    margin-bottom: 1.4rem;
}
.landing-headline em,
.landing-headline i {
    font-style: italic;
    color: var(--brand);
}

.landing-subhead {
    max-width: 640px;
    margin: 0 auto 2.2rem;
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.landing-cta-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.landing-hero-meta {
    margin-top: 2.5rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

/* Section heads ---------------------------------------------------- */
.landing-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}
.landing-section-head h2 {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--foreground);
    margin-bottom: 0.6rem;
}
.landing-section-head p {
    color: var(--text-secondary);
    font-size: 0.98rem;
}

/* Features --------------------------------------------------------- */
.landing-features {
    max-width: 1120px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    border-top: 1px solid var(--border-light);
}

.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.landing-feature {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.6rem 1.4rem;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.landing-feature:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.landing-feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-dim);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.landing-feature h3 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--foreground);
    margin-bottom: 0.4rem;
}
.landing-feature p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* How-it-works steps ---------------------------------------------- */
.landing-steps {
    max-width: 1120px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    border-top: 1px solid var(--border-light);
}

.landing-step-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    padding: 0;
    margin: 0;
}
.landing-step-list--six {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
    .landing-step-list--six { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .landing-step-list--six { grid-template-columns: 1fr; }
}

.landing-step {
    padding: 1.6rem 1.4rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    position: relative;
}

.landing-step-num {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 0.9rem;
}

.landing-step h3 {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--foreground);
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.landing-step p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Closing CTA band ------------------------------------------------- */
.landing-closing {
    margin: 0 1.5rem 4rem;
    padding: 3.25rem 1.5rem;
    text-align: center;
    background: var(--accent-dim);
    border-radius: calc(var(--radius) * 2);
}

.landing-closing h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--foreground);
    letter-spacing: -0.015em;
    line-height: 1.1;
    margin-bottom: 0.6rem;
}
.landing-closing p {
    color: var(--text-secondary);
    margin-bottom: 1.75rem;
    font-size: 0.98rem;
}

/* Footer ----------------------------------------------------------- */
.landing-footer {
    border-top: 1px solid var(--border);
    padding: 3rem 1.5rem 1.5rem;
    background: var(--surface);
}
.landing-footer-grid {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
.landing-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.landing-footer-col--brand {
    max-width: 320px;
}
.landing-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--brand);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: 0.2rem;
}
.landing-footer-brand > span:last-child {
    color: var(--foreground);
    font-weight: 400;
}
.landing-footer-tagline {
    color: var(--muted-foreground);
    font-size: 0.88rem;
    line-height: 1.55;
    margin-top: 0.35rem;
}
.landing-footer-title {
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
    margin-bottom: 0.4rem;
}
.landing-footer-link {
    color: var(--foreground);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.15s ease;
}
.landing-footer-link:hover { color: var(--brand); }
.landing-footer-meta {
    color: var(--muted-foreground);
    font-size: 0.82rem;
    font-family: var(--font-mono);
}
.landing-footer-bottom {
    max-width: 1120px;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.8rem;
}
.landing-footer-sep { opacity: 0.5; }

@media (max-width: 780px) {
    .landing-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
    .landing-footer-col--brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 480px) {
    .landing-footer-grid { grid-template-columns: 1fr; }
}

/* Auth "back to home" link ---------------------------------------- */
.auth-back {
    display: block;
    text-align: center;
    margin-bottom: 1.25rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}
.auth-back:hover { color: var(--text-primary); }

/* Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
    .landing-feature-grid,
    .landing-step-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .landing-nav { padding: 0.75rem 1rem; }
    .landing-nav-actions { gap: 0.85rem; }
    .landing-nav-link[href="#features"],
    .landing-nav-link[href="#how"] { display: none; }
    .landing-hero { padding: 4rem 1.25rem 3rem; }
    .landing-features,
    .landing-steps { padding: 3rem 1.25rem; }
    .landing-feature-grid,
    .landing-step-list { grid-template-columns: 1fr; }
    .landing-closing { padding: 2.5rem 1.25rem; margin: 0 1rem 3rem; }
}

/* ==================================================================
   Landing page v2 — Demo / Editorial style
   ================================================================== */

/* Shared utilities ------------------------------------------------- */
.grid-bg {
    background-image:
        linear-gradient(to right, var(--border) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border) 1px, transparent 1px);
    background-size: 56px 56px;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.15); }
}
.animate-pulse-dot {
    animation: pulse-dot 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes grain {
    0%   { transform: translate(0,    0   ) }
    10%  { transform: translate(-2%,  -3% ) }
    20%  { transform: translate(3%,   2%  ) }
    30%  { transform: translate(-1%,  4%  ) }
    40%  { transform: translate(4%,   -1% ) }
    50%  { transform: translate(-3%,  2%  ) }
    60%  { transform: translate(2%,   -4% ) }
    70%  { transform: translate(-4%,  1%  ) }
    80%  { transform: translate(3%,   3%  ) }
    90%  { transform: translate(-2%,  -1% ) }
    100% { transform: translate(0,    0   ) }
}
.animate-fade-up {
    animation: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lv2-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 1024px) { .lv2-container { padding: 0 2.5rem; } }

/* Hero v2 ---------------------------------------------------------- */
.landing-hero-v2 {
    background: var(--film-dark);
    color: var(--background);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.landing-hero-v2::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--brand) 40%, oklch(76% 0.11 145) 60%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}
.landing-hero-v2::after {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.06;
    pointer-events: none;
    z-index: 1;
    animation: grain 1.2s steps(1) infinite;
}

.landing-hero-grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, oklch(100% 0 0 / 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, oklch(100% 0 0 / 0.12) 1px, transparent 1px);
    background-size: 56px 56px;
    mix-blend-mode: overlay;
    opacity: 0.35;
}

.landing-hero-topbar {
    position: relative;
    z-index: 1;
    border-bottom: 1px solid oklch(100% 0 0 / 0.1);
}
.landing-hero-topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (min-width: 1024px) { .landing-hero-topbar-inner { padding: 0.75rem 2.5rem; } }

.lv2-mono {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: oklch(100% 0 0 / 0.7);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lv2-mono-sep {
    display: inline-block;
    width: 1px;
    height: 0.75rem;
    background: oklch(100% 0 0 / 0.2);
}
.lv2-mono--hidden-mobile { display: none; }
@media (min-width: 768px) { .lv2-mono--hidden-mobile { display: flex; } }

.lv2-live-dot {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}

.landing-hero-body {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 5rem 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    min-height: 82vh;
}
@media (min-width: 1024px) {
    .landing-hero-body {
        padding: 7rem 2.5rem 6rem;
    }
}

.landing-hero-eyebrow-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.landing-eyebrow-rule {
    display: block;
    width: 2.5rem;
    height: 1px;
    background: oklch(100% 0 0 / 0.4);
    flex-shrink: 0;
}
.landing-hero-eyebrow-mono {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: oklch(100% 0 0 / 0.7);
}

.landing-headline-v2 {
    margin-top: 2rem;
    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 9vw, 9rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: oklch(100% 0 0);
}
.landing-headline-v2 em {
    font-style: italic;
    color: oklch(100% 0 0 / 0.85);
}
.landing-headline-underline {
    position: relative;
    display: inline-block;
    font-style: italic;
}
.landing-headline-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand);
}

.landing-hero-footer-grid {
    margin-top: auto;
    padding-top: 2rem;
    border-top: 1px solid oklch(100% 0 0 / 0.15);
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) {
    .landing-hero-footer-grid {
        grid-template-columns: 5fr 4fr 2fr;
        align-items: start;
    }
}

.landing-hero-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: oklch(100% 0 0 / 0.8);
}
@media (min-width: 768px) { .landing-hero-desc { font-size: 1.1rem; } }

.landing-hero-cta-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.landing-hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-sm);
    background: oklch(100% 0 0);
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.btn-hero-primary:hover { opacity: 0.9; color: var(--foreground); }

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid oklch(100% 0 0 / 0.3);
    color: oklch(100% 0 0);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-hero-secondary:hover { background: oklch(100% 0 0 / 0.1); color: oklch(100% 0 0); }

.landing-hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.75rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: oklch(100% 0 0 / 0.7);
}
.landing-hero-badge {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.landing-hero-badge-dot {
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}

.landing-hero-spec {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: oklch(100% 0 0 / 0.6);
    line-height: 1.8;
}
@media (max-width: 767px) { .landing-hero-spec { display: none; } }

/* Before/After comparison ------------------------------------------ */
.landing-compare {
    border-bottom: 1px solid var(--border);
    padding: 6rem 0;
}
@media (min-width: 1024px) { .landing-compare { padding: 9rem 0; } }

.landing-split-grid {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--border);
}
@media (min-width: 768px) {
    .landing-split-grid { grid-template-columns: 1fr 1fr; }
}

.landing-split-before {
    background: var(--background);
    padding: 2.5rem;
}
@media (min-width: 1024px) { .landing-split-before { padding: 3.5rem; } }

.landing-split-after {
    background: var(--foreground);
    color: oklch(100% 0 0);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) { .landing-split-after { padding: 3.5rem; } }

.landing-split-after-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    background-image:
        linear-gradient(to right, oklch(100% 0 0 / 0.25) 1px, transparent 1px),
        linear-gradient(to bottom, oklch(100% 0 0 / 0.25) 1px, transparent 1px);
    background-size: 56px 56px;
}

.landing-split-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted-foreground);
}
.landing-split-label-dot {
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--muted-foreground);
    flex-shrink: 0;
}

.landing-split-label-dark {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: oklch(100% 0 0 / 0.7);
}
.landing-split-label-dot-brand {
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}

.landing-split-title {
    margin-top: 1.5rem;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: oklch(from var(--foreground) l c h / 0.55);
    text-wrap: balance;
}

.landing-split-title-light {
    margin-top: 1.5rem;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: oklch(100% 0 0);
}
.landing-split-title-light em {
    font-style: italic;
    color: oklch(100% 0 0 / 0.85);
}

.landing-tools-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
}
.landing-tool-tag {
    padding: 0.25rem 0.625rem;
    border: 1px dashed var(--border-strong);
    border-radius: 0.375rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    text-decoration: line-through;
}

.landing-split-text {
    margin-top: 2rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--muted-foreground);
    max-width: 28rem;
}
.landing-split-text-dark {
    margin-top: 2rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: oklch(100% 0 0 / 0.8);
    max-width: 28rem;
}

.landing-pipeline-mini {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}
.landing-pipeline-mini-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid oklch(100% 0 0 / 0.15);
    background: oklch(100% 0 0 / 0.05);
}
.landing-pipeline-mini-num {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: oklch(100% 0 0 / 0.6);
    flex-shrink: 0;
}
.landing-pipeline-mini-label {
    font-size: 0.875rem;
    font-weight: 500;
}
.landing-pipeline-mini-spacer {
    flex: 1;
    height: 1px;
    background: oklch(100% 0 0 / 0.1);
}
.landing-pipeline-mini-ok {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--brand);
    flex-shrink: 0;
}

/* Stats section ---------------------------------------------------- */
.landing-stats {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 6rem 0;
}
@media (min-width: 1024px) { .landing-stats { padding: 8rem 0; } }

.landing-stats-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.3;
    background-image:
        linear-gradient(to right, var(--border) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}

.landing-stats-header {
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.landing-stats-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted-foreground);
}
.landing-stats-title {
    margin-top: 1.5rem;
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--foreground);
}
.landing-stats-title em {
    font-style: italic;
    color: var(--brand);
}

.landing-stats-grid {
    margin: 4rem auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--border);
    max-width: 64rem;
    position: relative;
}
@media (min-width: 768px) {
    .landing-stats-grid { grid-template-columns: repeat(4, 1fr); }
}

.landing-stat {
    background: var(--background);
    padding: 2rem;
    text-align: center;
}
@media (min-width: 1024px) { .landing-stat { padding: 2.5rem; } }

.landing-stat-number {
    font-family: var(--font-mono);
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
}
.landing-stat-label {
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--muted-foreground);
}

/* Pillars section (Why Orchestriq) --------------------------------- */
.landing-pillars {
    border-bottom: 1px solid var(--border);
    padding: 6rem 0;
}
@media (min-width: 1024px) { .landing-pillars { padding: 8rem 0; } }

.landing-section-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.landing-section-eyebrow::before {
    content: '';
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}

.landing-section-title {
    margin-top: 1rem;
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
    max-width: 36rem;
    color: var(--foreground);
}
.landing-section-title em {
    font-style: italic;
    color: var(--brand);
}

.landing-pillars-grid {
    margin-top: 4rem;
    display: grid;
    gap: 1px;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--border);
}
@media (min-width: 768px) {
    .landing-pillars-grid { grid-template-columns: repeat(3, 1fr); }
}

.landing-pillar {
    background: var(--background);
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: background 0.15s;
}
.landing-pillar:hover { background: var(--surface); }
@media (min-width: 1024px) { .landing-pillar { padding: 2.5rem; } }

.landing-pillar-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--brand);
    letter-spacing: 0.1em;
}
.landing-pillar-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--foreground);
}
.landing-pillar-body {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--muted-foreground);
    text-wrap: pretty;
}

/* Pipeline demo section -------------------------------------------- */
.landing-pipeline-section {
    position: relative;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 6rem 0;
}
@media (min-width: 1024px) { .landing-pipeline-section { padding: 9rem 0; } }

.landing-pipeline-grid-v2 {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: var(--border);
}
@media (min-width: 640px) {
    .landing-pipeline-grid-v2 { grid-template-columns: repeat(6, 1fr); }
}

.landing-pipeline-step-v2 {
    background: var(--background);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.landing-pipeline-step-v2.is-active {
    background: var(--surface-elevated);
}

.landing-pipeline-step-num {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--muted-foreground);
}
.landing-pipeline-step-label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--muted-foreground);
}
.landing-pipeline-step-v2.is-active .landing-pipeline-step-label {
    color: var(--foreground);
}
.landing-pipeline-step-active-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--brand);
    margin-top: 0.25rem;
}

/* Pull quote ------------------------------------------------------- */
.landing-quote {
    border-bottom: 1px solid var(--border);
    padding: 8rem 0;
}
@media (min-width: 1024px) { .landing-quote { padding: 10rem 0; } }

.landing-quote-inner {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
    padding: 0 1.5rem;
}
@media (min-width: 1024px) { .landing-quote-inner { padding: 0 2.5rem; } }

.landing-quote-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted-foreground);
}
.landing-quote-text {
    margin-top: 2.5rem;
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: -0.03em;
    text-wrap: balance;
    color: var(--foreground);
}
.landing-quote-text em {
    font-style: italic;
    color: var(--muted-foreground);
}
.landing-quote-underline {
    border-bottom: 2px solid var(--brand);
    padding-bottom: 0.15rem;
}
.landing-quote-sub {
    max-width: 40rem;
    margin: 2.5rem auto 0;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--muted-foreground);
    text-wrap: pretty;
}

/* Dark CTA --------------------------------------------------------- */
.landing-cta-dark {
    position: relative;
    overflow: hidden;
    background: var(--film-dark);
    color: oklch(100% 0 0);
    padding: 6rem 0;
    border-top: 1px solid oklch(100% 0 0 / 0.06);
}
@media (min-width: 1024px) { .landing-cta-dark { padding: 9rem 0; } }

.landing-cta-dark-grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.07;
    background-image:
        linear-gradient(to right, oklch(100% 0 0 / 0.18) 1px, transparent 1px),
        linear-gradient(to bottom, oklch(100% 0 0 / 0.18) 1px, transparent 1px);
    background-size: 56px 56px;
}

.landing-cta-dark-inner {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
    position: relative;
}
@media (min-width: 1024px) { .landing-cta-dark-inner { padding: 0 2.5rem; } }

.landing-cta-dark-title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: oklch(100% 0 0);
}
.landing-cta-dark-title em {
    font-style: italic;
    color: oklch(100% 0 0 / 0.8);
}
.landing-cta-dark-sub {
    margin: 1.5rem auto 0;
    max-width: 36rem;
    font-size: 1rem;
    color: oklch(100% 0 0 / 0.75);
    line-height: 1.7;
}
@media (min-width: 768px) { .landing-cta-dark-sub { font-size: 1.125rem; } }

.landing-cta-dark-actions {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
@media (min-width: 640px) { .landing-cta-dark-actions { flex-direction: row; } }

.btn-dark-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    border-radius: var(--radius-sm);
    background: oklch(100% 0 0);
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.btn-dark-primary:hover { opacity: 0.9; color: var(--foreground); }

.btn-dark-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid oklch(100% 0 0 / 0.3);
    color: oklch(100% 0 0);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-dark-secondary:hover { background: oklch(100% 0 0 / 0.1); color: oklch(100% 0 0); }

/* Sections that use var(--foreground) as a dark-panel background would invert
   to near-white in light contexts — lock them to a fixed deep dark instead. */
.landing-hero-v2,
.landing-split-after,
.landing-cta-dark {
    background: oklch(8% 0.018 265);
}
.landing-hero-cinematic-overlay {
    background: linear-gradient(
        to bottom,
        oklch(8% 0.018 265 / 0.4) 0%,
        oklch(8% 0.018 265 / 0.3) 40%,
        oklch(8% 0.018 265 / 0.92) 100%
    );
}
.btn-dark-primary,
.btn-dark-primary:hover,
.btn-hero-primary,
.btn-hero-primary:hover {
    color: oklch(15% 0.02 65);
}

/* ==================================================================
   User menu (shared dropdown — topbar + landing nav)
   ================================================================== */

.user-menu {
    position: relative;
    display: inline-flex;
}

.user-menu-trigger {
    background: var(--brand);
    color: var(--brand-foreground);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
    padding: 0;
}
.user-menu-trigger:hover {
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.user-menu-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
    padding: var(--space-2);
    z-index: 50;
    display: none;
    flex-direction: column;
    gap: 2px;
}
.user-menu.is-open .user-menu-panel {
    display: flex;
}

.user-menu-identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-1);
}
.user-menu-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.user-menu-ident-text { min-width: 0; flex: 1; }
.user-menu-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu-email {
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.55rem var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.87rem;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.user-menu-item:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.user-menu-item svg { color: var(--text-secondary); flex-shrink: 0; }
.user-menu-item:hover svg { color: var(--text-primary); }

.user-menu-item--danger { color: var(--danger); }
.user-menu-item--danger:hover { background: rgba(185,28,28,0.08); color: var(--danger); }
.user-menu-item--danger svg { color: var(--danger); }

.user-menu-sep {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-1) 0;
}

.user-menu-form { margin: 0; }

/* ==================================================================
   Sidebar user tile — now an anchor to /account
   ================================================================== */
a.sidebar-user-tile {
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}
a.sidebar-user-tile:hover {
    background: var(--bg-secondary);
}
a.sidebar-user-tile.is-active {
    background: var(--accent-dim);
}
.sidebar-user-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
}
a.sidebar-user-tile:hover .sidebar-user-chevron { color: var(--text-primary); }

/* ==================================================================
   Landing — authed eyebrow + landing avatar trigger
   ================================================================== */
.landing-eyebrow--welcome {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 500;
}

.landing-avatar { /* inherits from .user-menu-trigger */ }

/* ==================================================================
   Account page
   ================================================================== */
.account-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 780px;
}

.account-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.account-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.account-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.account-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-dim);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.account-card-icon--danger {
    background: rgba(185,28,28,0.09);
    color: var(--danger);
}

.account-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.2rem;
    letter-spacing: -0.005em;
}
.account-card-sub {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0;
}

.account-form .form-group label {
    color: var(--text-primary);
    font-weight: 500;
}

.account-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    margin-bottom: var(--space-4);
}
.account-meta-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    font-weight: 600;
}
.account-meta-value { color: var(--text-primary); }

.account-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-light);
    margin-top: var(--space-3);
}

/* Danger zone */
.account-danger { border-color: rgba(185,28,28,0.2); }
.account-danger-reveal > summary {
    list-style: none;
    display: inline-flex;
    cursor: pointer;
}
.account-danger-reveal > summary::-webkit-details-marker { display: none; }
.account-danger-reveal[open] > summary { display: none; }
.account-danger-form {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: rgba(185,28,28,0.04);
    border: 1px solid rgba(185,28,28,0.2);
    border-radius: var(--radius);
}
.account-danger-form code {
    background: var(--bg-card);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.82em;
    color: var(--danger);
}

/* Mobile tweaks for user menu */
@media (max-width: 640px) {
    .user-menu-panel { min-width: 220px; right: -4px; }
}

/* ══════════════════════════════════════════════════════════════════════
   LANDING — nav active state
   ══════════════════════════════════════════════════════════════════════ */
.landing-nav-link--active {
    color: var(--text-primary);
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════
   LANDING — hero cinematic background image
   ══════════════════════════════════════════════════════════════════════ */
.landing-hero-cinematic-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.landing-hero-cinematic-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.landing-hero-cinematic-overlay {
    position: absolute;
    inset: 0;
}
/* Film frame canvas — floats above the overlay, inside cinematic-bg */
.landing-hero-film-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
/* Cinematic scan line */
.landing-hero-scanline {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}
.landing-hero-scanline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        oklch(100% 0 0 / 0.04) 15%,
        oklch(76% 0.11 145 / 0.22) 50%,
        oklch(100% 0 0 / 0.04) 85%,
        transparent 100%
    );
    filter: blur(1px);
    animation: hero-scanline 11s linear infinite;
}
@keyframes hero-scanline {
    0%   { top: -2px; }
    100% { top: 100%;  }
}
/* Ensure hero content sits above the image */
.landing-hero-v2 .landing-hero-grid-bg,
.landing-hero-v2 .landing-hero-topbar,
.landing-hero-v2 .landing-hero-body {
    position: relative;
    z-index: 1;
}
/* Fade bottom of hero into page background */
.landing-hero-v2::after {
    content: '';
    position: absolute;
    inset-x: 0;
    bottom: 0;
    height: 12rem;
    background: linear-gradient(to bottom, transparent, var(--background));
    z-index: 1;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   LANDING — provider bar
   ══════════════════════════════════════════════════════════════════════ */
.landing-provider-bar {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 2.5rem 0;
}
.landing-provider-bar-label {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: 1.25rem;
}
.landing-provider-bar-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 2.25rem;
    color: var(--text-secondary);
}
.landing-provider-bar-items span {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: oklch(from var(--foreground) l c h / 0.7);
}

/* ══════════════════════════════════════════════════════════════════════
   LANDING — live prompt streaming section
   ══════════════════════════════════════════════════════════════════════ */
.landing-live-section {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 6rem 0 9rem;
}
.landing-live-grid {
    display: grid;
    gap: 4rem;
}
@media (min-width: 1024px) {
    .landing-live-grid {
        grid-template-columns: 5fr 7fr;
        gap: 3rem;
        align-items: start;
    }
}
.landing-live-copy {
    position: sticky;
    top: 7rem;
}
.landing-live-title { margin-top: 0.5rem; }
.landing-live-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--muted-foreground);
    margin-top: 1rem;
    max-width: 42ch;
}
.landing-live-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: gap 0.15s;
}
.landing-live-link:hover { gap: 0.6rem; }

/* Prompt stream widget */
.landing-prompt-stream {
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-md);
}
.landing-prompt-stream-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: oklch(from var(--background) l c h / 0.6);
    padding: 0.625rem 1rem;
}
.landing-prompt-stream-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--muted-foreground);
}
.landing-prompt-stream-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--muted-foreground);
}
.landing-prompt-stream-model {
    background: var(--muted);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.375rem;
}
.landing-prompt-stream-body {
    padding: 2rem 1.5rem;
}
.landing-prompt-stream-text {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: oklch(from var(--foreground) l c h / 0.9);
    margin: 0;
}
.landing-prompt-stream-chevron {
    margin-right: 0.5rem;
    color: var(--muted-foreground);
}
.landing-prompt-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    vertical-align: text-bottom;
    background: var(--foreground);
    margin-left: 1px;
    animation: blink 1s step-end infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.landing-prompt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 1.5rem;
}
.landing-prompt-tag {
    border: 1px solid var(--border);
    background: var(--background);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--muted-foreground);
}

/* Mini pipeline v2 */
.landing-pipeline-mini-v2 {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--border);
    list-style: none;
    padding: 0;
}
@media (min-width: 640px) {
    .landing-pipeline-mini-v2 { grid-template-columns: repeat(6, 1fr); }
}
.landing-pipeline-mini-v2-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--background);
    padding: 1rem;
}
.landing-pipeline-mini-v2-item.is-active { background: var(--surface-elevated); }
.landing-pipeline-mini-v2-num {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--muted-foreground);
}
.landing-pipeline-mini-v2-label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.landing-pipeline-mini-v2-label.is-dim { color: oklch(from var(--foreground) l c h / 0.6); }
.landing-pipeline-mini-v2-active {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--brand);
}

/* ══════════════════════════════════════════════════════════════════════
   LANDING — gallery section
   ══════════════════════════════════════════════════════════════════════ */
.landing-gallery-section {
    border-bottom: 1px solid var(--border);
    padding: 6rem 0 8rem;
}
.landing-gallery-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3.5rem;
}
.landing-gallery-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: gap 0.15s;
    white-space: nowrap;
}
.landing-gallery-all-link:hover { gap: 0.6rem; }
.landing-gallery-grid {
    display: grid;
    gap: 1rem;
}
@media (min-width: 640px) {
    .landing-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        align-items: start;
    }
    .landing-gallery-item--offset { transform: translateY(2rem); }
}
.landing-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
}
.landing-gallery-img-wrap {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.landing-gallery-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}
.landing-gallery-item:hover .landing-gallery-img-wrap img { transform: scale(1.04); }
.landing-gallery-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    background: oklch(from var(--background) l c h / 0.95);
    padding: 0.75rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--muted-foreground);
}
.landing-gallery-caption span:first-child { color: oklch(from var(--foreground) l c h / 0.85); }

/* ══════════════════════════════════════════════════════════════════════
   LANDING — audience section
   ══════════════════════════════════════════════════════════════════════ */
.landing-audience-section {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 6rem 0 8rem;
}
.landing-audience-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 3.5rem;
}
@media (min-width: 768px) { .landing-audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .landing-audience-grid { grid-template-columns: repeat(4, 1fr); } }
.landing-audience-card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    padding: 1.5rem;
    transition: box-shadow 0.2s;
}
.landing-audience-card:hover { box-shadow: var(--shadow-md); }
.landing-audience-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
}
.landing-audience-body {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: oklch(from var(--foreground) l c h / 0.85);
}

/* ══════════════════════════════════════════════════════════════════════
   SUBPAGES — shared page header (pipeline / features / manifesto)
   ══════════════════════════════════════════════════════════════════════ */
.lp-page-header {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.lp-page-header-inner {
    max-width: 87.5rem;
    margin: 0 auto;
    padding: 5rem 1.5rem 7rem;
}
@media (min-width: 1024px) {
    .lp-page-header-inner { padding: 7rem 2.5rem; }
}
.lp-page-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.lp-page-title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    max-width: 22ch;
    margin-top: 1.25rem;
}
.lp-page-lead {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--muted-foreground);
    max-width: 60ch;
    margin-top: 1.25rem;
}
@media (min-width: 768px) {
    .lp-page-lead { font-size: 1.1875rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   SUBPAGES — pipeline steps
   ══════════════════════════════════════════════════════════════════════ */
.lp-steps-section { padding: 5rem 0 7rem; }
.lp-steps-inner {
    max-width: 87.5rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 1024px) { .lp-steps-inner { padding: 0 2.5rem; } }
.lp-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.lp-step {
    position: relative;
    display: grid;
    gap: 2rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: var(--background);
    padding: 2rem;
    transition: border-color 0.15s, background 0.15s;
}
.lp-step:hover {
    border-color: var(--border);
    background: var(--surface);
}
@media (min-width: 1024px) {
    .lp-step {
        grid-template-columns: 3fr 5fr 4fr;
        gap: 2.5rem;
        padding: 3rem;
    }
}
.lp-step-num-col { }
.lp-step-num-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.lp-step-num-mono {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--muted-foreground);
}
.lp-step-num-rule {
    flex: 1;
    height: 1px;
    background: var(--border);
}
.lp-step-num-large {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: oklch(from var(--foreground) l c h / 0.25);
    margin-top: 1rem;
    transition: color 0.15s;
}
@media (min-width: 1024px) { .lp-step-num-large { font-size: 4.5rem; } }
.lp-step:hover .lp-step-num-large { color: var(--text-primary); }
.lp-step-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}
@media (min-width: 768px) { .lp-step-title { font-size: 2.125rem; } }
.lp-step-lead {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--muted-foreground);
    margin-top: 0.75rem;
}
@media (min-width: 768px) { .lp-step-lead { font-size: 1rem; } }
.lp-step-bullets ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.lp-step-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: oklch(from var(--foreground) l c h / 0.85);
}
.lp-step-bullet-dot {
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
    margin-top: 0.55rem;
}
.lp-step-connector {
    display: none;
    position: absolute;
    left: 50%;
    bottom: -0.25rem;
    width: 1px;
    height: 0.5rem;
    background: var(--border);
    transform: translateX(-50%);
}
@media (min-width: 1024px) { .lp-step-connector { display: block; } }

/* ══════════════════════════════════════════════════════════════════════
   SUBPAGES — bottom CTA (shared by pipeline/features)
   ══════════════════════════════════════════════════════════════════════ */
.lp-cta-section {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 5rem 0;
    text-align: center;
}
.lp-cta-inner {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.lp-cta-title {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}
.lp-cta-sub {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--muted-foreground);
    margin-top: 0.75rem;
}
.lp-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* ══════════════════════════════════════════════════════════════════════
   SUBPAGES — features grid
   ══════════════════════════════════════════════════════════════════════ */
.lp-features-section { padding: 5rem 0 7rem; }
.lp-features-inner {
    max-width: 87.5rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 1024px) { .lp-features-inner { padding: 0 2.5rem; } }
.lp-features-grid {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--border);
}
@media (min-width: 768px) { .lp-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-features-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-feature-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--background);
    padding: 2rem;
    transition: background 0.15s;
}
.lp-feature-card:hover { background: var(--surface); }
@media (min-width: 1024px) { .lp-feature-card { padding: 2.5rem; } }
.lp-feature-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.lp-feature-dot {
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}
.lp-feature-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}
.lp-feature-body {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

/* ══════════════════════════════════════════════════════════════════════
   SUBPAGES — styles + formats section (features page)
   ══════════════════════════════════════════════════════════════════════ */
.lp-styles-formats-section {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 5rem 0 7rem;
}
.lp-styles-formats-grid {
    display: grid;
    gap: 3rem;
}
@media (min-width: 1024px) {
    .lp-styles-formats-grid { grid-template-columns: repeat(2, 1fr); gap: 5rem; }
}
.lp-subpage-section-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin-top: 0.75rem;
}
.lp-subpage-section-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--muted-foreground);
    margin-top: 0.5rem;
}
.lp-styles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
}
.lp-style-card {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.lp-style-swatch {
    position: absolute;
    inset: 0;
    transition: transform 0.3s ease;
}
.lp-style-card:hover .lp-style-swatch { transform: scale(1.05); }
.lp-style-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, oklch(0 0 0 / 0.4), transparent 60%);
}
.lp-style-label {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
}
.lp-formats-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 2.5rem;
}
.lp-format-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.lp-format-box {
    width: 80px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    transition: border-color 0.15s;
}
.lp-format-box:hover { border-color: var(--text-primary); }
.lp-format-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--muted-foreground);
}

/* ══════════════════════════════════════════════════════════════════════
   SUBPAGES — manifesto page
   ══════════════════════════════════════════════════════════════════════ */
.lp-manifesto-header {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.lp-manifesto-header-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 6rem 1.5rem 9rem;
}
@media (min-width: 1024px) { .lp-manifesto-header-inner { padding: 9rem 2.5rem; } }
.lp-manifesto-title {
    font-family: var(--font-serif);
    font-size: clamp(2.75rem, 8vw, 6rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-top: 1.5rem;
}
.lp-manifesto-underline {
    border-bottom: 2px solid var(--brand);
    padding-bottom: 2px;
}
.lp-manifesto-lead {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--muted-foreground);
    max-width: 62ch;
    margin-top: 2rem;
}
@media (min-width: 768px) { .lp-manifesto-lead { font-size: 1.1875rem; } }

.lp-principles-section { padding: 5rem 0 7rem; }
.lp-principles-inner {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 1024px) { .lp-principles-inner { padding: 0 2.5rem; } }
.lp-principles-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
@media (min-width: 1024px) { .lp-principles-list { gap: 6rem; } }
.lp-principle {
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .lp-principle { grid-template-columns: 80px 1fr; gap: 3rem; }
}
.lp-principle-num {
    font-family: var(--font-serif);
    font-size: 3rem;
    line-height: 1;
    color: oklch(from var(--foreground) l c h / 0.22);
    text-align: left;
}
@media (min-width: 1024px) {
    .lp-principle-num { font-size: 4rem; text-align: right; }
}
.lp-principle-title {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}
.lp-principle-body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--muted-foreground);
    margin-top: 1.25rem;
}
@media (min-width: 768px) { .lp-principle-body { font-size: 1.0625rem; } }

.lp-manifesto-close {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 6rem 0;
    text-align: center;
}
.lp-manifesto-close-inner {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.lp-manifesto-close-quote {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

/* ── Streaming text display panels (treatment + scene planning) ───────────── */
/* Same editorial aesthetic as .landing-prompt-stream on the marketing site:
   live dot + slug + model badge on the left, status pill on the right,
   rotating "director's note" above the actual token output. */

.stream-panel {
    margin-top: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.stream-panel--standalone {
    margin: 0 auto;
    max-width: 640px;
    box-shadow: var(--shadow-lg);
}

.stream-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--border);
    background: oklch(from var(--background) l c h / 0.6);
}
.stream-panel-header-left,
.stream-panel-header-right {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.stream-panel-slug {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
}
.stream-panel-model {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    background: var(--muted);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stream-panel-status {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
    padding: 0.1rem 0.5rem;
    border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--brand) 8%, transparent);
}
.stream-panel--error .stream-panel-status {
    color: var(--destructive);
    border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
    background: color-mix(in oklab, var(--destructive) 8%, transparent);
}
.stream-panel--done .stream-panel-status {
    color: var(--success);
    border-color: color-mix(in oklab, var(--success) 30%, transparent);
    background: color-mix(in oklab, var(--success) 8%, transparent);
}

.stream-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent);
    animation: stream-live-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes stream-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(0.88); }
}
.stream-panel--done .stream-live-dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 18%, transparent); animation: none; }
.stream-panel--error .stream-live-dot { background: var(--destructive); box-shadow: 0 0 0 4px color-mix(in oklab, var(--destructive) 18%, transparent); animation: none; }

.stream-panel-body {
    padding: 1.25rem 1.25rem 1rem;
    max-height: 420px;
    overflow-y: auto;
}
.stream-panel-note {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin: 0 0 var(--space-3);
    min-height: 1.2em;
    transition: opacity 0.3s ease;
}
.stream-panel-note.is-fading { opacity: 0; }

.stream-panel-text {
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.65;
    color: oklch(from var(--foreground) l c h / 0.9);
    margin: 0;
}
.stream-panel-chevron {
    display: inline;
    color: var(--muted-foreground);
    margin-right: 0.4rem;
}
.stream-panel-cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    background: var(--foreground);
    margin-left: 1px;
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
}
.stream-panel--done .stream-panel-cursor,
.stream-panel--error .stream-panel-cursor { display: none; }

.stream-output {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    background: transparent;
}

@media (max-width: 640px) {
    .stream-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    .stream-panel-header-right { margin-left: 0; }
    .stream-panel-body { padding: var(--space-4); }
}

/* ── Image generation shimmer placeholder ─────────────────────────────────── */

.image-gen-shimmer-wrap {
    width: 100%;
}

.image-gen-shimmer {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 64px;
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--bg-secondary, #e8e8e8) 0px,
        var(--border, #f0f0f0) 80px,
        var(--bg-secondary, #e8e8e8) 160px
    );
    background-size: 400px 100%;
    animation: shimmer-sweep 1.4s ease-in-out infinite;
}

@keyframes shimmer-sweep {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.still-image-preview--fade-in {
    animation: still-img-fade-in 0.35s ease-out both;
}

@keyframes still-img-fade-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Inline video player ──────────────────────────────────────────────────── */

.video-inline-player {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
    width: 100%;
    max-width: 480px;
}

.video-inline-preview {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
    background: #000;
    border: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERHAUL
   Premium hamburger drawer + per-page mobile fixes.
   Loaded last so it wins via cascade over earlier @media blocks.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hamburger icon: morph from bars → X via SVG path transforms ────────── */
.topbar-hamburger-icon {
    display: block;
    overflow: visible;
}
.topbar-hamburger-line {
    transform-origin: 12px 12px;
    transition: transform 0.22s ease, opacity 0.18s ease;
}
.topbar-hamburger[aria-expanded="true"] .topbar-hamburger-line--top {
    transform: translateY(5px) rotate(45deg);
}
.topbar-hamburger[aria-expanded="true"] .topbar-hamburger-line--mid {
    opacity: 0;
    transform: scaleX(0);
}
.topbar-hamburger[aria-expanded="true"] .topbar-hamburger-line--bot {
    transform: translateY(-5px) rotate(-45deg);
}

/* ── Sidebar drawer backdrop (only visible on mobile when drawer is open) ── */
.app-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 20, 0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 150;
    display: none;
}
.app-backdrop { background: rgba(0, 0, 0, 0.62); }
.app-shell--sidebar-open .app-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* ── Body scroll lock when drawer or bottom-sheet is open ────────────────── */
body.sidebar-locked {
    overflow: hidden;
    touch-action: none;
}

/* ── User-menu bottom-sheet backdrop ──────────────────────────────────────── */
.user-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 20, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 140;
    display: none;
}
.user-menu-backdrop { background: rgba(0, 0, 0, 0.55); }

/* ─── @media (max-width: 780px): drawer is active, topbar refinements ─── */
@media (max-width: 780px) {
    .app-backdrop { display: block; }

    /* Bigger drawer on phones with respect for very narrow screens */
    .app-sidebar {
        width: min(320px, 88vw);
        will-change: transform;
        -webkit-overflow-scrolling: touch;
    }

    /* Topbar: bigger touch target, breathing room */
    .topbar-hamburger {
        display: flex;
        min-width: 44px;
        min-height: 44px;
    }
    .app-topbar {
        gap: var(--space-3);
        padding: 0 var(--space-3);
    }
    .topbar-switcher {
        max-width: 50%;
        padding: 0.3rem 0.6rem;
        font-size: 0.78rem;
    }
    .topbar-actions { gap: var(--space-2); }
    .topbar-avatar { width: 36px; height: 36px; font-size: 0.78rem; }
    .topbar-icon-btn {
        min-width: 40px;
        min-height: 40px;
    }
    .topbar-new-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 0.4rem;
        justify-content: center;
    }
}

/* ─── @media (max-width: 640px): intermediate phone breakpoint ─── */
@media (max-width: 640px) {
    /* Universal touch targets per WCAG 2.5.5 */
    .btn, .btn-sm, .topbar-icon-btn, .user-menu-trigger { min-height: 44px; }
    .btn-sm { min-height: 40px; }

    /* Topbar: hide section switcher (already shown in sidebar + breadcrumb) */
    .topbar-switcher { display: none; }
    .app-topbar { padding: 0 var(--space-3); }
    .topbar-actions { gap: var(--space-1); }

    /* User menu becomes a bottom-sheet */
    .user-menu-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: none;
        min-width: 0;
        border-radius: var(--radius) var(--radius) 0 0;
        border-bottom: 0;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
        padding: var(--space-3) var(--space-3) calc(var(--space-4) + var(--safe-bottom));
        gap: var(--space-1);
        transform: translateY(100%);
        transition: transform 0.26s ease;
        z-index: 200;
        display: flex !important;
    }
    .user-menu .user-menu-panel { /* ensure base display:flex even when not open */
        visibility: hidden;
    }
    .user-menu.is-open .user-menu-panel {
        transform: translateY(0);
        visibility: visible;
    }
    .user-menu.is-open ~ .user-menu-backdrop,
    body.user-menu-open .user-menu-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
    /* Visual handle for the sheet */
    .user-menu-panel::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: var(--border-strong);
        margin: 0 auto var(--space-2);
        opacity: 0.6;
    }
    .user-menu-item { padding: 0.7rem var(--space-3); font-size: 0.92rem; }
    .user-menu-identity { padding: var(--space-3); }

    /* PROJECT DETAIL — header actions full-width below 640 */
    .pd-header-actions .btn,
    .pd-header-actions form,
    .pd-header-actions form .btn { flex: 1 1 100%; width: 100%; }
    .description-card-stats { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

    /* SCENE CARD — earlier stacking + textarea overflow guard */
    .scene-card-header { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .scene-card-title { flex-wrap: wrap; gap: var(--space-2); }
    .scene-director-chips { gap: var(--space-1); flex-wrap: wrap; }
    .prompt-actions { flex-wrap: wrap; gap: var(--space-2); }
    .prompt-actions .btn { flex: 1 1 calc(50% - var(--space-2)); justify-content: center; }
    .prompt-textarea, .prompt-section textarea, .scene-card textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* DASHBOARD — tighter gaps on small viewports */
    .project-grid { gap: var(--space-3); }

    /* SETTINGS TABS — keep on one line with horizontal scroll */
    .settings-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .settings-tabs::-webkit-scrollbar { display: none; }
    .settings-tabs .tab-btn { flex-shrink: 0; white-space: nowrap; }
    .settings-save-bar {
        padding-bottom: max(var(--space-2), var(--safe-bottom));
    }

    /* EXPORT — preview must scroll inside, not break the layout */
    .export-preview pre,
    .export-panel pre {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        word-break: normal;
        white-space: pre;
    }
    .export-buttons { flex-wrap: wrap; gap: var(--space-2); }
    .export-buttons .btn { flex: 1 1 100%; }
}

/* ─── @media (max-width: 480px): tightest phone fixes ─── */
@media (max-width: 480px) {
    /* Project detail title: drop down further */
    .pd-title { font-size: 1.05rem; line-height: 1.2; }

    /* Auth card: less padding so it doesn't dwarf the form */
    .auth-card { padding: var(--space-6) var(--space-5); }
    body.auth-body { padding: var(--space-3); }

    /* Password toggle: ensure proper touch target */
    .password-toggle {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        right: var(--space-2);
    }
    .input-with-action input { padding-right: 2.75rem; }

    /* Toast container: safe-area + edge padding */
    .toast-container {
        bottom: max(var(--space-3), var(--safe-bottom));
        left: var(--space-3);
        right: var(--space-3);
        max-width: none;
    }

    /* Topbar new btn keeps icon visible only */
    .topbar-new-btn span { display: none; }
}

/* ─── Reduced motion: disable drawer / sheet / morph transitions ─── */
@media (prefers-reduced-motion: reduce) {
    .app-sidebar,
    .app-backdrop,
    .user-menu-backdrop,
    .user-menu-panel,
    .topbar-hamburger-line,
    .landing-nav-actions,
    .landing-nav-backdrop,
    .landing-nav-toggle-line {
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   LANDING NAV — mobile hamburger drawer
   Shared by landing.php, pipeline.php, features.php, manifesto.php
   ══════════════════════════════════════════════════════════════════════════ */

.landing-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
}
.landing-nav-toggle:hover { background: var(--bg-secondary); }
.landing-nav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.landing-nav-toggle-icon { display: block; overflow: visible; }
.landing-nav-toggle-line {
    transform-origin: 12px 12px;
    transition: transform 0.22s ease, opacity 0.18s ease;
}
.landing-nav-toggle[aria-expanded="true"] .landing-nav-toggle-line--top {
    transform: translateY(5px) rotate(45deg);
}
.landing-nav-toggle[aria-expanded="true"] .landing-nav-toggle-line--mid {
    opacity: 0;
    transform: scaleX(0);
}
.landing-nav-toggle[aria-expanded="true"] .landing-nav-toggle-line--bot {
    transform: translateY(-5px) rotate(-45deg);
}

.landing-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 20, 0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 150;
    display: none;
}
.landing-nav-backdrop { background: rgba(0, 0, 0, 0.62); }
body.landing-nav-open .landing-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 780px) {
    .landing-nav {
        padding: 0.75rem 1rem;
        gap: var(--space-2);
    }
    /* When open, lift the whole nav above the backdrop so the fixed drawer
       (trapped in the nav's stacking context by the sticky z-index) wins. */
    .landing-nav.is-open { z-index: 201; }
    .landing-brand-tag { display: none; }
    .landing-brand-mark { width: 28px; height: 28px; }
    .landing-brand-mark svg { width: 24px; height: 24px; }

    .landing-nav-toggle { display: inline-flex; }
    .landing-nav-backdrop { display: block; }

    /* Hero: source image is 1920x1080 with ~12% anamorphic letterbox bars
       top and bottom. On a narrow portrait viewport, object-fit: cover
       shows the full image height (letterbox included), producing a
       visible black band. Zoom + shorter hero hide the letterbox on
       mobile without cropping away the silhouette. */
    .landing-hero-body { min-height: 68vh; padding: 3.5rem 1.25rem 3rem; }
    .landing-hero-cinematic-bg img {
        transform: scale(1.3);
        transform-origin: center 55%;
    }

    .landing-nav-actions {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        height: 100dvh;
        width: min(340px, 92vw);
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.25rem;
        padding: calc(4.75rem + var(--safe-top)) var(--space-5) calc(var(--space-5) + var(--safe-bottom));
        background: var(--background);
        border-left: 1px solid var(--border);
        box-shadow: -12px 0 32px rgba(0, 0, 0, 0.22);
        transform: translateX(105%);
        transition: transform 0.26s ease;
        z-index: 200;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .landing-nav-actions { box-shadow: -12px 0 32px rgba(0, 0, 0, 0.5); }
    .landing-nav.is-open .landing-nav-actions {
        transform: translateX(0);
    }

    .landing-nav-actions .landing-nav-link {
        display: block;
        padding: 0.85rem 0.25rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--border-light);
        color: var(--text-primary);
    }
    .landing-nav-actions .btn,
    .landing-nav-actions .btn-sm {
        width: 100%;
        justify-content: center;
        margin-top: var(--space-2);
    }
    .landing-nav-actions .user-menu {
        margin-top: var(--space-3);
        align-self: stretch;
    }
}

/* Very narrow phones: keep header items from touching edges */
@media (max-width: 360px) {
    .landing-brand-name { font-size: 0.92rem; }
}

/* ══════════════════════════════════════════════════════════════
   Creative enhancement layer — cinematographic character
   ══════════════════════════════════════════════════════════════ */

/* Quote em color accent */
.landing-quote-text em { color: var(--brand); }
.landing-cta-dark-title em { color: oklch(76% 0.11 145); }

/* Audience cards — more editorial */
.landing-audience-card {
    border-top: 2px solid var(--border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.landing-audience-card:hover { border-top-color: var(--brand); }

.landing-audience-tag {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Gallery items — cinematic framing */
.landing-gallery-item { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.landing-gallery-item:hover { transform: translateY(-4px); }

.landing-gallery-caption {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Nav — cinematic dark always (landing page) */
.landing-nav {
    background: color-mix(in oklab, var(--film-dark) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom-color: oklch(100% 0 0 / 0.07);
}
.landing-brand-name { color: oklch(97% 0.004 80); }
.landing-brand-tag  { color: oklch(55% 0.01 260); }
.landing-nav-link   { color: oklch(65% 0.01 260); }
.landing-nav-link:hover { color: oklch(92% 0.004 80); }

/* Empty state — more expressive */
.empty-state h2 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.02em;
}

/* Pipeline step numbers — bolder mono */
.landing-pipeline-step-v2 .landing-pipeline-step-num,
.landing-pipeline-mini-v2-num {
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Stats section: brand color on active number on hover */
.landing-stat:hover .landing-stat-number { color: var(--brand); transition: color 0.2s; }

/* Topbar: atmospheric noir glass — slightly translucent over the canvas */
.app-topbar {
    background: color-mix(in oklch, var(--background) 85%, transparent);
    border-bottom-color: oklch(100% 0 0 / 0.07);
}

/* Project card: top accent bar that appears on hover */
.project-card {
    border-top: 2px solid transparent;
}
.project-card:hover {
    border-top-color: var(--brand);
}

/* Scene card header number — more editorial in mono */
.scene-number {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--brand);
    text-transform: uppercase;
}

/* Landing hero body: ensure full cinematic height */
.landing-hero-body { min-height: 88vh; }

/* Footer: film-dark background for drama */
.landing-footer {
    background: var(--film-dark);
    border-top-color: oklch(100% 0 0 / 0.07);
}
.landing-footer-brand,
.landing-footer-link,
.landing-footer-tagline,
.landing-footer-meta,
.landing-footer-title { color: oklch(65% 0.01 260); }
.landing-footer-link:hover { color: var(--brand); }
.landing-footer-brand { color: var(--brand); }
.landing-footer-bottom {
    color: oklch(40% 0.01 260);
    border-top-color: oklch(100% 0 0 / 0.06);
}

/* Auth back link in dark context */
.auth-back { color: oklch(45% 0.01 260); }
.auth-back:hover { color: oklch(75% 0.01 260); }

/* Auth brand mark on film-dark background */
.auth-card .auth-brand-mark {
    background: color-mix(in oklab, var(--gold) 22%, transparent);
    color: var(--brand);
}

/* ══════════════════════════════════════════════════════════════════════════
   CINEMATIC PREMIUM LAYER
   Elevates key components toward a darker, bolder, more editorial feel.
   Appended last so selectors reliably override the base cascade.
   (token definitions --film-ink / --film-accent / --cine-grad / --cine-shadow
    / --cine-ring live in the top :root block)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cinematic buttons: sharper kerning, richer primary, subtle gloss ── */
.btn {
    letter-spacing: 0.015em;
    font-weight: 550;
    font-variation-settings: 'wght' 560;
}
.btn-primary {
    background: var(--cine-grad);
    box-shadow:
        inset 0 1px 0 oklch(100% 0 0 / 0.18),
        0 6px 18px -8px color-mix(in oklab, var(--brand) 55%, transparent);
}
.btn-primary:hover:not(:disabled) {
    box-shadow:
        inset 0 1px 0 oklch(100% 0 0 / 0.22),
        0 10px 24px -8px color-mix(in oklab, var(--brand) 60%, transparent);
    transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

/* AI-action variant: same brand button, with a spark prefix that
   animates on hover to signal "something generative is about to
   happen." Stack on top of .btn .btn-primary:

     <button class="btn btn-primary btn-ai">Generate treatment</button>
*/
.btn-ai { position: relative; }
.btn-ai::before {
    content: "✦";
    display: inline-block;
    margin-right: 0.35rem;
    font-size: 0.92em;
    line-height: 1;
    color: currentColor;
    opacity: 0.85;
    transform-origin: center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}
.btn-ai:hover:not(:disabled)::before {
    transform: rotate(180deg) scale(1.18);
    opacity: 1;
}
.btn-ai.btn-primary:hover:not(:disabled) {
    box-shadow:
        inset 0 1px 0 oklch(100% 0 0 / 0.22),
        0 10px 28px -8px color-mix(in oklab, var(--brand) 70%, transparent),
        0 0 0 1px color-mix(in oklab, var(--gold) 30%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .btn-ai::before { transition: opacity 0.15s; }
    .btn-ai:hover:not(:disabled)::before { transform: none; }
}
.btn-sm { font-weight: 550; }

/* Ghost variant for secondary cinematic actions */
.btn-ghost {
    background: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 550;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}
.btn-ghost:hover { background: var(--muted); border-color: var(--border-strong); }
.btn-ghost.is-active {
    background: color-mix(in oklab, var(--brand) 12%, transparent);
    border-color: color-mix(in oklab, var(--brand) 40%, transparent);
    color: var(--brand);
}

/* ── Page header: richer editorial spacing ── */
.page-header h1 {
    font-weight: 400;
    letter-spacing: -0.03em;
}
.page-header h1::first-letter {
    font-style: italic;
    color: color-mix(in oklab, var(--brand) 70%, var(--foreground));
}
.page-eyebrow {
    letter-spacing: 0.14em;
}
.page-subtitle { max-width: 60ch; line-height: 1.55; }

/* ── Cinematic dashboard toolbar (filters + search) ── */
.dash-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg,
            color-mix(in oklch, var(--brand) 2.5%, transparent) 0%,
            transparent 60%),
        var(--card);
    box-shadow: var(--shadow-sm);
}
.dash-toolbar {
    background:
        linear-gradient(180deg,
            color-mix(in oklch, var(--brand) 6%, transparent) 0%,
            transparent 70%),
        var(--card);
}
.dash-toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.dash-filter {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 550;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: var(--font);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.dash-filter:hover { color: var(--foreground); border-color: var(--border-strong); }
.dash-filter.is-active {
    background: color-mix(in oklab, var(--brand) 12%, transparent);
    border-color: color-mix(in oklab, var(--brand) 45%, transparent);
    color: var(--brand);
}
.dash-filter-count {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    background: var(--muted);
    color: var(--muted-foreground);
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-pill);
    line-height: 1.4;
}
.dash-filter.is-active .dash-filter-count {
    background: color-mix(in oklab, var(--brand) 20%, transparent);
    color: var(--brand);
}
.dash-search {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.85rem;
    min-width: 220px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dash-search:focus-within {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 18%, transparent);
}
.dash-search svg { color: var(--text-muted); flex-shrink: 0; }
.dash-search input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 0.85rem;
    color: var(--foreground);
    width: 100%;
    box-shadow: none !important;
}
.dash-search input::placeholder { color: var(--text-muted); }

/* ── Metrics strip (top of dashboard) ── */
.dash-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.dash-metric {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    background: var(--card);
    position: relative;
    overflow: hidden;
}
.dash-metric::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--brand) 65%, transparent),
        transparent);
}
.dash-metric-label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.dash-metric-value {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    line-height: 1;
    color: var(--foreground);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.dash-metric-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

/* ── Today on set — shown for workspaces with a small number of projects ── */
.dash-today {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg,
            color-mix(in oklch, var(--brand) 5%, transparent) 0%,
            transparent 45%),
        var(--card);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
    position: relative;
    overflow: hidden;
}
.dash-today::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--brand) 65%, transparent),
        transparent);
}
.dash-today-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}
.dash-today-line {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--foreground);
    margin: 0;
}
.dash-today-line strong {
    font-family: var(--font);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.dash-today-line--calm {
    color: var(--text-secondary);
    font-style: italic;
}
.dash-today-list {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.dash-today-item {
    margin: 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px dashed color-mix(in oklab, var(--border) 65%, transparent);
}
.dash-today-item:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-today-item .fstrip-mini { max-width: 360px; }
.dash-today-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.25rem 0;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.4;
    transition: color 0.15s;
}
.dash-today-link::before {
    content: "→";
    color: var(--brand);
    flex-shrink: 0;
    font-family: var(--font-mono);
    transform: translateY(0);
    transition: transform 0.15s;
}
.dash-today-link:hover { color: var(--brand); }
.dash-today-link:hover::before { transform: translateX(2px); }
.dash-today-label { font-weight: 500; }
.dash-today-sep {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.dash-today-project {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--foreground);
}

@media (max-width: 560px) {
    .dash-today { padding: var(--space-4); }
    .dash-today-line { font-size: 1.1rem; }
    .dash-today-link { flex-wrap: wrap; gap: 0.35rem; }
}

/* ── Project cards: cinematic lift, crisper frame, quieter chrome ── */
.project-card {
    border-radius: calc(var(--radius) + 2px);
    background:
        linear-gradient(180deg,
            color-mix(in oklch, var(--brand) 3%, transparent) 0%,
            transparent 35%),
        var(--bg-card);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.project-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: radial-gradient(80% 120% at 50% 100%,
        color-mix(in oklab, var(--brand) 5%, transparent),
        transparent 65%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 0;
}
.project-card > * { position: relative; z-index: 1; }
.project-card:hover::after { opacity: 1; }
.project-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--cine-shadow);
    border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
}
.project-card-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.project-card-prompt {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Delete button: always discoverable but confined, with destructive hover */
.project-card-delete {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--background) 60%, transparent);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s, background 0.15s, border-color 0.15s;
    z-index: 2;
    padding: 0;
}
.project-card:hover .project-card-delete,
.project-card:focus-within .project-card-delete { opacity: 1; transform: translateY(0); }
.project-card-delete:hover,
.project-card-delete:focus-visible {
    color: var(--destructive);
    border-color: color-mix(in oklab, var(--destructive) 45%, transparent);
    background: color-mix(in oklab, var(--destructive) 10%, var(--card));
    outline: none;
}

/* ── Empty state: editorial framing ── */
.empty-state {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background:
        repeating-linear-gradient(135deg,
            transparent 0, transparent 12px,
            color-mix(in oklab, var(--brand) 4%, transparent) 12px,
            color-mix(in oklab, var(--brand) 4%, transparent) 13px),
        var(--card);
    padding: 4rem var(--space-8);
}
.empty-state h2 {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--foreground);
    margin-bottom: var(--space-2);
}
.empty-state p { font-size: 0.95rem; }

/* ── Sidebar: subtle cinematic wash + crisper active state ── */
.app-sidebar {
    background-image:
        linear-gradient(180deg,
            color-mix(in oklch, var(--brand) 5%, transparent) 0%,
            transparent 18%,
            transparent 82%,
            color-mix(in oklch, var(--brand) 4%, transparent) 100%);
}
.app-sidebar {
    background-image:
        linear-gradient(180deg,
            color-mix(in oklch, var(--brand) 8%, transparent) 0%,
            transparent 22%,
            transparent 78%,
            color-mix(in oklch, var(--brand) 7%, transparent) 100%);
}
.sidebar-nav-item.is-active {
    background: color-mix(in oklab, var(--brand) 14%, transparent);
    color: var(--brand);
    box-shadow: inset 2px 0 0 var(--brand);
    border-radius: var(--radius-sm);
}
.sidebar-brand-name {
    font-weight: 500;
}

/* ── Topbar: premium glassy surface in both themes ── */
.app-topbar {
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    background: color-mix(in oklab, var(--card) 86%, transparent);
}
.app-topbar {
    background: color-mix(in oklab, var(--background) 78%, transparent);
}
.topbar-new-btn {
    padding: 0.4rem var(--space-4);
    font-weight: 550;
    letter-spacing: 0.02em;
}

/* ── Status badges: a touch bolder & more uniform sizing ── */
.badge {
    padding: 0.2rem 0.55rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
    border: 1px solid transparent;
    font-variant-caps: all-small-caps;
}
.status-draft                  { border-color: var(--border); }
.status-treatment-ready,
.status-scene-ready,
.status-scenes-ready,
.status-image-approved,
.status-completed              { border-color: color-mix(in oklab, var(--success) 30%, transparent); }
.status-image-prompt-ready,
.status-image-generated,
.status-ready-for-render       { border-color: color-mix(in oklab, var(--warning) 30%, transparent); }
.status-animation-prompt-ready,
.status-prompts-ready          { border-color: color-mix(in oklab, var(--accent-secondary) 30%, transparent); }

/* ── Count pill on page header: match editorial tone ── */
.page-header .count-pill {
    color: var(--foreground);
    background: color-mix(in oklab, var(--brand) 10%, transparent);
    border-color: color-mix(in oklab, var(--brand) 25%, transparent);
}

/* ── Landing hero eyebrow/headline: tighter, bolder accent underline ── */
.landing-headline-v2 em {
    font-family: var(--font-serif);
    font-style: italic;
    color: color-mix(in oklab, var(--film-accent) 75%, var(--foreground));
}
.landing-headline-underline {
    background-image: linear-gradient(90deg,
        color-mix(in oklab, var(--brand) 60%, transparent),
        color-mix(in oklab, var(--film-accent) 55%, transparent));
    background-repeat: no-repeat;
    background-size: 100% 0.12em;
    background-position: 0 92%;
    padding: 0 0.05em;
}

/* ── Responsive: toolbar collapses gracefully ── */
@media (max-width: 640px) {
    .dash-toolbar { padding: var(--space-3); }
    .dash-search { min-width: 0; flex: 1; }
    .dash-metrics { grid-template-columns: repeat(2, 1fr); }
    .dash-metric-value { font-size: 1.8rem; }
    .project-grid { grid-template-columns: 1fr; }
    .project-card-header h3 { font-size: 1.15rem; }
}

/* ── Keyboard focus visibility ── */
.dash-filter:focus-visible,
.btn-ghost:focus-visible,
.project-card-delete:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════
   Empty-state pipeline diagram (dashboard)
   ══════════════════════════════════════════════ */
.empty-state--pipeline {
    padding: 4rem var(--space-8);
}
.empty-state-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}
.empty-pipeline-diagram {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    margin: var(--space-8) auto var(--space-8);
    max-width: 860px;
    flex-wrap: wrap;
    row-gap: var(--space-2);
}
.empty-pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    min-width: 110px;
    flex: 1;
    transition: border-color 0.15s, background 0.15s;
}
.empty-pipeline-step:hover {
    border-color: color-mix(in oklch, var(--brand) 40%, transparent);
    background: color-mix(in oklch, var(--brand) 5%, var(--surface));
}
.empty-pipeline-num {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1;
}
.empty-pipeline-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.empty-pipeline-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
    max-width: 120px;
}
@media (max-width: 680px) {
    .empty-pipeline-diagram { flex-direction: column; align-items: stretch; }
    .empty-pipeline-step { flex-direction: row; align-items: flex-start; gap: var(--space-3); min-width: 0; }
    .empty-pipeline-desc { max-width: none; text-align: left; }
}

/* ══════════════════════════════════════════════
   Easy-create pipeline preview ("What happens next")
   ══════════════════════════════════════════════ */
.easy-pipeline-preview {
    margin: var(--space-6) 0 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in oklch, var(--brand) 4%, var(--surface));
}
.easy-pipeline-heading {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}
.easy-pipeline-steps {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.easy-pipeline-step {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 90px;
}
.easy-pipeline-num {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-muted);
    line-height: 1;
}
.easy-pipeline-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.easy-pipeline-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.easy-pipeline-arrow {
    font-size: 0.9rem;
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.4;
}
@media (max-width: 680px) {
    .easy-pipeline-steps { flex-direction: column; align-items: stretch; }
    .easy-pipeline-arrow { display: none; }
    .easy-pipeline-step { flex-direction: row; align-items: center; gap: var(--space-3); }
    .easy-pipeline-name, .easy-pipeline-desc { display: inline; }
}

/* ══════════════════════════════════════════════
   Project Creation Wizard
   ══════════════════════════════════════════════ */

.wizard-wrap {
    max-width: 720px;
    margin: 0 auto;
}

/* ── Progress stepper ── */
.wizard-progress {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-8);
}
.wizard-progress.hidden { display: none !important; }

.wizard-progress-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.wizard-progress-connector {
    flex: 1;
    height: 1px;
    background: var(--border);
    margin: 0 var(--space-3);
    min-width: 32px;
    transition: background 0.3s;
}
.wizard-progress-connector.is-done { background: var(--brand); }

.wizard-progress-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    border: 2px solid var(--border);
    color: var(--text-muted);
    background: var(--card);
    flex-shrink: 0;
    transition: all 0.2s;
}
.wizard-progress-step.is-done .wizard-progress-dot {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
}
.wizard-progress-step.is-active .wizard-progress-dot {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-foreground);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 20%, transparent);
}
.wizard-progress-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.wizard-progress-step.is-active .wizard-progress-label { color: var(--foreground); font-weight: 600; }
.wizard-progress-step.is-done  .wizard-progress-label { color: var(--brand); }

/* ── Mode picker cards ── */
.wizard-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-2);
}
.wizard-mode-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-5);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    box-shadow: var(--shadow-sm);
}
.wizard-mode-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
}
.wizard-mode-card.is-selected {
    border-color: var(--brand);
    background: var(--brand-soft);
}
.wizard-mode-icon {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--brand);
    font-family: var(--font-mono);
}
.wizard-mode-label {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--foreground);
}
.wizard-mode-desc {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.wizard-mode-badge {
    display: inline-flex;
    align-items: center;
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 10px;
    margin-top: var(--space-1);
    width: fit-content;
}

/* ── Step heading ── */
.wizard-step-heading {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border);
}
.wizard-step-heading h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 var(--space-1);
}
.wizard-step-heading p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Step panels ── */
.wizard-panel { animation: fadeIn 0.2s ease-out; }
.wizard-panel-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-7);
    box-shadow: var(--shadow-sm);
}

/* ── Optional notes (collapsible) ── */
.wizard-optional-notes {
    margin-top: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.wizard-optional-notes summary {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.wizard-optional-notes summary::before {
    content: '▸';
    font-size: 0.72rem;
    color: var(--brand);
    transition: transform 0.15s;
}
.wizard-optional-notes[open] summary::before { transform: rotate(90deg); }
.wizard-optional-notes summary::-webkit-details-marker { display: none; }
.wizard-optional-content {
    padding: var(--space-5) var(--space-4);
    border-top: 1px solid var(--border);
}

/* ── Input validation error state ── */
.input-invalid {
    border-color: var(--destructive) !important;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 15%, transparent) !important;
}

/* ── Wizard nav bar ── */
.wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-6);
    margin-top: var(--space-6);
    border-top: 1px solid var(--border);
}
.wizard-nav-right {
    display: flex;
    gap: var(--space-3);
}

@media (max-width: 600px) {
    .wizard-mode-grid { grid-template-columns: 1fr; }
    .wizard-progress-label { display: none; }
    .wizard-nav { flex-wrap: wrap; gap: var(--space-3); }
    .wizard-nav-right { flex: 1; justify-content: flex-end; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CINEMA NOIR — final pass
   Promoted from the handoff's `.variant-daring` selector. Sharp corners on
   buttons / pills / badges, uppercase tracked CTAs, tighter serif headlines,
   diagonal hairline weave on the dashboard hero. Appended last so it wins.
   ══════════════════════════════════════════════════════════════════════════ */

/* Squared corners on every interactive chrome — radius tokens already drop
   to 0 / 4px, this catches the components that hard-code their own radius. */
.btn,
.btn-sm,
.btn-success,
.btn-danger,
.btn-danger-text,
.btn-danger-solid,
.btn-warning-solid,
.btn-copy,
.badge,
.pill,
.chip,
.color-chip,
.scene-duration-chip,
.variant-tab-count,
.brief-pill,
.scene-chip,
.stream-tag,
.stream-status-pill,
.ref-chip,
.ref-kind-badge,
.ref-label-badge,
.dash-filter,
.topbar-new-btn,
.flash,
.toast,
.pd-rail-fab,
.pd-rail-fab-badge,
.sidebar-nav-soon {
    border-radius: 0;
}

/* Rosette / dot-style elements stay perfectly round in noir */
.fstrip-dot,
.fstrip-pulse,
.live-dot,
.topbar-avatar,
.user-menu-avatar,
.landing-avatar,
.sidebar-user-avatar,
.auth-avatar {
    border-radius: var(--radius-round);
}

/* Cards keep a hairline 4px corner — already encoded in --radius, but lock it
   for components that hard-code 8/12/16px so the noir geometry is consistent. */
.dash-hero,
.treatment-card,
.stream-panel,
.scene-card,
.scene-board-card,
.project-card,
.rail-card,
.pillar,
.brief-card,
.provider-card {
    border-radius: 4px;
}

/* Cinema-noir CTAs: uppercase, tracked, tight. Override the cinematic premium
   layer's serif-ish kerning so the gold pills read as press kit nameplates. */
.btn {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 600;
    font-variation-settings: 'wght' 600;
}
.btn-sm { font-size: 0.72rem; letter-spacing: 0.08em; }

/* Editorial serif headlines tighten to a press-kit tracking */
.page-header h1,
.pd-title,
.dash-hero-title,
.dash-metric-value,
.section-title,
.brief-title,
.auth-title,
.error-card-title {
    letter-spacing: -0.04em;
}

/* Dashboard hero gains the noir hairline weave overlay */
.dash-hero {
    background-image: var(--noir-weave);
    background-blend-mode: screen;
}

/* Bump the landing-hero film grain so the noir feel reads on first impression
   (was 0.06 in the base layer — too subtle on the deeper canvas). */
.landing-hero-v2::after,
.landing-hero-film-canvas {
    opacity: 0.12;
}