/* ── App stylesheet (index.html) ──────────────────────────────
 *
 * The full CSS for the in-app view. Extracted from the inline
 * <style> block in index.html as part of Phase 4a of the
 * roadmap. Loaded after /assets/tokens.css and /assets/lightbox
 * .css so any rules here can override the shared tokens or
 * lightbox styles for index-specific contexts.
 *
 * To split this further into per-feature stylesheets (e.g.
 * auth.css, generate.css), extract a contiguous section here
 * into a new file and add another <link> in index.html.
 * ───────────────────────────────────────────────────────────── */

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

    /* Page-specific token override: index uses pure black for the
       app shell (bg, button-on-button contrast). All other tokens
       inherit from /assets/tokens.css. */
    :root {
        --bg: #000000;
    }

    html {
        scroll-behavior: smooth;
        overflow-x: hidden;
        max-width: 100%;
        background: #000000;
        color-scheme: dark;
    }

    body {
        background: #000000;
        color: var(--text);
        font-family: var(--sans);
        font-size: 15px;
        line-height: 1.5;
        min-height: 100vh;
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
        pointer-events: none;
        z-index: 0;
        opacity: 0.4;
        overflow: hidden;
    }

    /* ── Header ── */
    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 24px;
        border-bottom: 1px solid var(--border);
        background: rgba(0, 0, 0, 0.92);
        backdrop-filter: blur(12px);
        position: sticky;
        top: 0;
        z-index: 200;
        width: 100%;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .logo-text {
        font-size: 17px;
        font-weight: 700;
        color: var(--text);
        letter-spacing: -0.025em;
        line-height: 1;
    }
    .logo-text span {
        color: var(--accent-bright);
    }

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

    .nav-link {
        font-size: 13px;
        font-weight: 500;
        color: #9090b0;
        text-decoration: none;
        padding: 6px 14px;
        border-radius: 6px;
        transition: all 0.15s;
    }
    .nav-link:hover {
        color: var(--text);
        background: var(--surface2);
    }

    .nav-btn {
        font-size: 13px;
        font-weight: 600;
        color: white;
        background: var(--accent-ui);
        border: none;
        padding: 7px 16px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s;
        font-family: var(--sans);
    }
    .nav-btn:hover {
        background: var(--accent-bright);
        color: #0d0d14;
    }

    /* ── Header auth state ── */
    .header-user {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .header-credits {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--text-dim);
        background: var(--surface2);
        border: 1px solid var(--border-bright);
        padding: 4px 9px;
        border-radius: 100px;
        white-space: nowrap;
    }
    .header-credits.low {
        color: var(--amber);
        border-color: rgba(251, 191, 36, 0.3);
        background: rgba(251, 191, 36, 0.08);
    }
    .header-plan-badge {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.06em;
        padding: 3px 8px;
        border-radius: 4px;
        text-transform: uppercase;
    }
    .badge-free {
        background: var(--surface2);
        color: var(--text-muted);
        border: 1px solid var(--border-bright);
    }
    .badge-starter {
        background: rgba(52, 211, 153, 0.1);
        color: var(--green);
        border: 1px solid rgba(52, 211, 153, 0.25);
    }
    .badge-creator {
        background: var(--accent-glow);
        color: var(--accent-bright);
        border: 1px solid rgba(124, 109, 240, 0.3);
    }
    .badge-pro {
        background: rgba(251, 191, 36, 0.1);
        color: var(--amber);
        border: 1px solid rgba(251, 191, 36, 0.3);
    }
    .header-avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--accent-ui);
        color: white;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 2px solid transparent;
        transition: border-color 0.15s;
        position: relative;
    }
    .header-avatar:hover {
        border-color: var(--accent-bright);
    }
    .avatar-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background: var(--surface);
        border: 1px solid var(--border-bright);
        border-radius: 8px;
        padding: 6px;
        min-width: 160px;
        z-index: 300;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        display: none;
    }
    .avatar-menu.open {
        display: block;
    }
    .avatar-menu-email {
        font-size: 11px;
        color: var(--text-muted);
        padding: 6px 8px 10px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 4px;
        word-break: break-all;
    }
    .avatar-menu-item {
        font-size: 13px;
        color: var(--text-dim);
        padding: 7px 8px;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.1s;
    }
    .avatar-menu-item:hover {
        background: var(--surface2);
        color: var(--text);
    }

    /* ── Auth modal ── */
    .auth-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        z-index: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }
    .auth-overlay.open {
        opacity: 1;
        pointer-events: all;
    }
    .auth-modal {
        background: var(--surface);
        border: 1px solid var(--border-bright);
        border-radius: 16px;
        padding: 36px 32px;
        width: 100%;
        max-width: 400px;
        position: relative;
        transform: translateY(12px);
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .auth-overlay.open .auth-modal {
        transform: translateY(0);
    }
    .auth-close {
        position: absolute;
        top: 14px;
        right: 14px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 20px;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        line-height: 1;
        transition: color 0.1s;
    }
    .auth-close:hover {
        color: var(--text);
    }
    .auth-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }
    .auth-title {
        font-size: 20px;
        font-weight: 700;
        color: var(--text);
        text-align: center;
        margin-bottom: 6px;
        letter-spacing: -0.02em;
    }
    .auth-sub {
        font-size: 13px;
        color: var(--text-muted);
        text-align: center;
        margin-bottom: 28px;
        line-height: 1.5;
    }
    .auth-google-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: white;
        color: #1a1a1a;
        border: none;
        border-radius: 8px;
        padding: 11px 20px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition:
            background 0.15s,
            box-shadow 0.15s;
        font-family: var(--sans);
    }
    .auth-google-btn:hover {
        background: #f5f5f5;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    .auth-google-btn svg {
        flex-shrink: 0;
    }
    .auth-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 20px 0;
        color: var(--text-muted);
        font-size: 12px;
    }
    .auth-divider::before,
    .auth-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border);
    }
    .auth-magic-wrap {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .auth-magic-input {
        width: 100%;
        background: var(--bg);
        border: 1px solid var(--border-bright);
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 14px;
        color: var(--text);
        font-family: var(--sans);
        outline: none;
        transition: border-color 0.15s;
    }
    .auth-magic-input:focus {
        border-color: var(--accent-ui);
    }
    .auth-magic-input::placeholder {
        color: var(--text-muted);
    }
    .auth-magic-btn {
        width: 100%;
        background: var(--surface2);
        border: 1px solid var(--border-bright);
        border-radius: 8px;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        cursor: pointer;
        transition:
            background 0.15s,
            border-color 0.15s;
        font-family: var(--sans);
    }
    .auth-magic-btn:hover {
        background: var(--border);
        border-color: var(--accent-ui);
    }
    .auth-magic-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .auth-magic-sent {
        text-align: center;
        color: var(--green);
        font-size: 13px;
        padding: 8px;
        display: none;
    }
    .auth-terms {
        font-size: 11px;
        color: var(--text-muted);
        text-align: center;
        margin-top: 20px;
        line-height: 1.5;
    }

    /* ── No-credits / upgrade modal ── */
    .upgrade-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        z-index: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }
    .upgrade-overlay.open {
        opacity: 1;
        pointer-events: all;
    }
    .upgrade-modal {
        background: var(--surface);
        border: 1px solid var(--border-bright);
        border-radius: 16px;
        padding: 36px 32px;
        width: 100%;
        max-width: 440px;
        position: relative;
        transform: translateY(12px);
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .upgrade-overlay.open .upgrade-modal {
        transform: translateY(0);
    }
    .upgrade-modal-title {
        font-size: 20px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 8px;
        letter-spacing: -0.02em;
    }
    .upgrade-modal-sub {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 24px;
        line-height: 1.5;
    }
    .upgrade-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .upgrade-option {
        background: var(--bg);
        border: 1px solid var(--border-bright);
        border-radius: 10px;
        padding: 16px 18px;
        cursor: pointer;
        transition:
            border-color 0.15s,
            background 0.15s;
        text-align: left;
        width: 100%;
        font-family: var(--sans);
    }
    .upgrade-option:hover {
        border-color: var(--accent-ui);
        background: var(--surface2);
    }
    .upgrade-option-name {
        font-size: 15px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 2px;
    }
    .upgrade-option-price {
        font-size: 13px;
        color: var(--accent-bright);
        margin-bottom: 6px;
        font-family: var(--mono);
    }
    .upgrade-option-desc {
        font-size: 12px;
        color: var(--text-muted);
    }
    .upgrade-option.featured {
        border-color: rgba(124, 109, 240, 0.4);
        background: rgba(124, 109, 240, 0.05);
    }
    .upgrade-option.featured:hover {
        border-color: var(--accent-bright);
        background: rgba(124, 109, 240, 0.1);
    }
    .upgrade-modal-cancel {
        width: 100%;
        margin-top: 14px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 13px;
        cursor: pointer;
        padding: 6px;
        font-family: var(--sans);
        transition: color 0.1s;
    }
    .upgrade-modal-cancel:hover {
        color: var(--text);
    }

    /* ── Hero ── */
    .hero {
        position: relative;
        padding: 72px 24px 40px;
        text-align: center;
        max-width: 720px;
        width: 100%;
        margin: 0 auto;
        z-index: 1;
        /* No background — page-wrap supplies the dark bg, and keeping
           .hero transparent lets the .storyboard-bg icons behind it
           remain visible at narrow viewports where the hero would
           otherwise overlap them. */
        overflow: hidden;
    }

    .hero-glow {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(600px, 100vw);
        height: 260px;
        background: radial-gradient(
            ellipse at center top,
            rgba(124, 109, 240, 0.12) 0%,
            transparent 65%
        );
        pointer-events: none;
        overflow: hidden;
    }

    .hero-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--accent-bright);
        background: rgba(124, 109, 240, 0.12);
        border: 1px solid rgba(124, 109, 240, 0.3);
        padding: 4px 12px;
        border-radius: 100px;
        margin-bottom: 24px;
        letter-spacing: 0.05em;
    }

    .hero-tag::before {
        content: "";
        width: 6px;
        height: 6px;
        background: var(--accent-bright);
        border-radius: 50%;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0.4;
        }
    }

    .hero h1 {
        font-size: clamp(36px, 5.5vw, 58px);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.05;
        margin-bottom: 20px;
        color: #f2f2f7;
    }

    .hero h1 .highlight {
        background: linear-gradient(135deg, #a78bfa 0%, #7c6df0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero p {
        font-size: 17px;
        color: #a0a0b8;
        max-width: 480px;
        margin: 0 auto 40px;
        font-weight: 400;
        line-height: 1.65;
    }

    /* ── Progress ── */
    .progress-wrap {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
        background: var(--bg);
        padding: 0 16px 0;
        overflow: hidden;
        width: 100%;
    }

    .progress-track {
        display: flex;
        align-items: center;
        background: var(--surface);
        border: 1px solid var(--border-bright);
        border-radius: 100px;
        padding: 6px 8px;
        overflow-x: auto;
        max-width: 100%;
        scrollbar-width: none;
        margin: 8px 0 32px;
    }
    .progress-track::-webkit-scrollbar {
        display: none;
    }

    .prog-step {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 12px;
        border-radius: 100px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        transition: all 0.25s;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .prog-step.active {
        background: var(--accent-ui);
        color: white;
    }
    .prog-step.done {
        color: var(--green);
    }

    /* On mobile, hide label text on inactive steps to save space */
    @media (max-width: 500px) {
        .prog-step:not(.active) span {
            display: none;
        }
        .prog-step:not(.active) {
            padding: 5px 6px;
        }
    }
    .prog-divider {
        width: 20px;
        height: 1px;
        background: var(--border-bright);
        flex-shrink: 0;
    }

    .prog-num {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        color: var(--bg);
        flex-shrink: 0;
        font-family: var(--mono);
    }
    .prog-step.active .prog-num {
        background: white;
        color: var(--accent-ui);
    }
    .prog-step.done .prog-num {
        background: var(--green);
        color: var(--bg);
    }
    .prog-step.done .prog-num::after {
        content: "✓";
    }
    .prog-step:not(.done) .prog-num::after {
        content: attr(data-n);
    }

    /* ── Main ── */
    .main {
        position: relative;
        z-index: 1;
        max-width: 860px;
        width: 100%;
        margin: 0 auto;
        padding: 0 16px 80px;
        background: #000000;
    }

    /* ── Panel ── */
    .panel {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 16px;
    }

    .panel-header {
        padding: 18px 24px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .panel-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: var(--surface2);
        border: 1px solid var(--border-bright);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
    }

    .panel-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text);
        letter-spacing: -0.01em;
    }
    .panel-sub {
        font-size: 12px;
        color: #8080a0;
        margin-top: 1px;
    }
    .panel-body {
        padding: 24px;
    }

    /* ── Section label ── */
    .section-label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 12px;
    }

    .field {
        margin-bottom: 24px;
    }
    .field:last-child {
        margin-bottom: 0;
    }
    .field-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 8px;
        display: block;
    }
    .field-hint {
        font-size: 12px;
        color: #8080a0;
        margin-left: 6px;
        font-weight: 400;
    }

    /* ── Platform chips ── */
    .platform-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 8px;
    }

    .plat-chip {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 16px;
        border: 1px solid var(--border);
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.15s;
        background: var(--surface2);
        user-select: none;
        position: relative;
    }
    .plat-chip:hover {
        border-color: var(--border-bright);
        background: #1e1e2a;
    }
    .plat-chip.selected {
        border-color: var(--accent);
        background: rgba(124, 109, 240, 0.08);
    }
    .plat-chip .plat-icon {
        font-size: 20px;
    }
    /* ── UI icon images (assets/ui/icons/*.svg) ──────────────────
       Two layouts:
       1. Standalone icon (img is the only child of its container) —
          set img to block so there's no inline-baseline gap.
       2. Icon-prefix to text — parent becomes a flex row with the
          icon as the first item and the text as the next; flex-shrink:0
          keeps the icon at its declared width when text wraps. */
    .panel-icon img,
    .plat-chip .plat-icon img,
    .sec-plat-chip img,
    .vtype-icon img,
    .clarify-icon img,
    .upload-icon img,
    .asset-label img,
    .platform-format-note img,
    .action-panel-btn img,
    .result-header-left img,
    .history-group-header img,
    .history-rename-btn img {
        display: block;
        flex-shrink: 0;
    }
    .asset-label {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .platform-format-note {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }
    .plat-chip .plat-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        letter-spacing: -0.01em;
    }
    .plat-chip .plat-spec {
        font-family: var(--mono);
        font-size: 10px;
        color: #707090;
    }
    .plat-chip.selected .plat-name {
        color: var(--accent-bright);
    }
    .plat-chip.selected .plat-spec {
        color: var(--accent);
    }

    .plat-check {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1.5px solid var(--border-bright);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
    }
    .plat-chip.selected .plat-check {
        background: var(--accent);
        border-color: var(--accent);
    }
    .plat-check svg {
        display: none;
    }
    .plat-chip.selected .plat-check svg {
        display: block;
    }

    /* ── Format strategy ── */
    .strategy-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .strat-card {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 18px 16px;
        cursor: pointer;
        transition: all 0.15s;
        background: var(--surface2);
        user-select: none;
        text-align: center;
    }
    .strat-card:hover {
        border-color: var(--border-bright);
    }
    .strat-card.selected {
        border-color: var(--accent);
        background: rgba(124, 109, 240, 0.07);
    }

    .strat-visual {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-bottom: 12px;
        height: 36px;
    }
    .fmt-rect {
        border-radius: 3px;
        border: 1.5px solid var(--text-muted);
        transition: border-color 0.15s;
    }
    .strat-card.selected .fmt-rect {
        border-color: var(--accent-bright);
    }
    .fmt-wide {
        width: 40px;
        height: 24px;
    }
    .fmt-tall {
        width: 15px;
        height: 28px;
    }
    .fmt-sq {
        width: 24px;
        height: 24px;
    }
    .arrow-icon {
        color: var(--text-muted);
        font-size: 12px;
    }
    .strat-card.selected .arrow-icon {
        color: var(--accent-bright);
    }

    .strat-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 4px;
        letter-spacing: -0.01em;
    }
    .strat-card.selected .strat-title {
        color: var(--accent-bright);
    }
    .strat-desc {
        font-size: 11px;
        color: #9090b0;
        line-height: 1.5;
    }
    .strat-badge {
        display: inline-block;
        margin-top: 8px;
        font-family: var(--mono);
        font-size: 9px;
        padding: 2px 6px;
        border-radius: 3px;
        background: var(--surface);
        color: var(--text-muted);
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    .strat-card.selected .strat-badge {
        background: var(--accent);
        color: white;
    }

    /* ── Format leader (multi-platform) ── */
    .format-leader-section {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--border);
    }
    .format-leader-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.07em;
        margin-bottom: 10px;
    }
    .format-leader-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 10px;
    }
    .format-leader-card {
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 14px 12px;
        cursor: pointer;
        transition: all 0.15s;
        background: var(--surface2);
        text-align: center;
        user-select: none;
    }
    .format-leader-card:hover { border-color: var(--border-bright); }
    .format-leader-card.selected {
        border-color: var(--accent);
        background: rgba(124,109,240,0.08);
    }
    .fl-visual {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        margin-bottom: 8px;
    }
    .fl-rect {
        border-radius: 3px;
        border: 1.5px solid var(--text-muted);
        transition: border-color 0.15s;
    }
    .format-leader-card.selected .fl-rect { border-color: var(--accent-bright); }
    .fl-wide { width: 44px; height: 26px; }
    .fl-tall { width: 16px; height: 30px; }
    .fl-sq   { width: 26px; height: 26px; }
    .fl-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 3px;
    }
    .format-leader-card.selected .fl-name { color: var(--accent-bright); }
    .fl-spec { font-size: 10.5px; color: var(--text-muted); line-height: 1.4; }
    .format-leader-hint {
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.5;
        min-height: 18px;
        padding: 4px 0 0;
        font-style: italic;
    }

    /* ── Clarify Panel ── */
    .clarify-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        z-index: 5000;
        align-items: center;
        justify-content: center;
        padding: 16px;
        backdrop-filter: blur(4px);
    }
    .clarify-overlay.open { display: flex; }
    .clarify-panel {
        position: relative;
        background: var(--surface);
        border: 1px solid var(--border-bright);
        border-radius: 18px;
        padding: 32px 28px 28px;
        max-width: 500px;
        width: 100%;
        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
    }
    .clarify-close {
        position: absolute;
        top: 10px;
        right: 12px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 18px;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        line-height: 1;
        opacity: 0.4;
        transition: color 0.15s, opacity 0.15s, background 0.15s;
    }
    .clarify-close:hover {
        color: var(--text);
        opacity: 0.85;
        background: rgba(255,255,255,0.04);
    }
    .clarify-header { text-align: center; margin-bottom: 28px; }
    .clarify-icon { font-size: 30px; margin-bottom: 10px; display: flex; justify-content: center; }
    .clarify-title {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-bottom: 6px;
    }
    .clarify-subtitle {
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.5;
    }
    .clarify-question-block { margin-bottom: 20px; }
    .clarify-question-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 8px;
        line-height: 1.4;
    }
    .clarify-question-input {
        width: 100%;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text);
        padding: 10px 12px;
        font-family: var(--sans);
        font-size: 13.5px;
        resize: none;
        transition: border-color 0.15s;
    }
    .clarify-question-input:focus {
        outline: none;
        border-color: var(--accent);
    }
    .clarify-actions {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 8px;
    }
    .clarify-skip {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 13px;
        cursor: pointer;
        padding: 0;
        font-family: var(--sans);
        text-decoration: underline;
        text-decoration-color: var(--border-bright);
        transition: color 0.15s;
    }
    .clarify-skip:hover { color: var(--text-dim); }

    /* Lightbox overlay styles live in /assets/lightbox.css.
       This rule stays here because it's specific to the style-
       frame wrap, not the lightbox itself. */
    .style-frame-img-wrap img { cursor: zoom-in; }

    /* ── Toast notification ── */
    .toast {
        position: fixed;
        top: 76px;
        left: 50%;
        transform: translateX(-50%) translateY(-12px);
        background: #0e1f14;
        border: 1px solid rgba(52, 211, 153, 0.35);
        color: var(--green);
        padding: 10px 18px 10px 12px;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        transition: opacity 0.25s, transform 0.25s;
        pointer-events: none;
        white-space: nowrap;
    }
    .toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* ── Secondary platforms ── */
    .secondary-plat-section {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--border);
    }
    .secondary-plat-label {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.07em;
        margin-bottom: 10px;
    }
    .secondary-plat-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .recut-tip {
        display: flex;
        gap: 8px;
        background: rgba(124, 109, 240, 0.07);
        border: 1px solid rgba(124, 109, 240, 0.18);
        border-radius: 8px;
        padding: 9px 13px;
        margin-top: 10px;
        font-size: 12px;
        color: #9898b8;
        line-height: 1.5;
    }
    .recut-tip-icon { flex-shrink: 0; margin-top: 1px; }
    .sec-plat-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 11px;
        border: 1px solid var(--border);
        border-radius: 20px;
        background: var(--surface2);
        cursor: pointer;
        transition: all 0.15s;
        user-select: none;
        font-size: 12px;
        color: var(--text-muted);
    }
    .sec-plat-chip:hover { border-color: var(--border-bright); color: var(--text); }
    .sec-plat-chip.selected {
        border-color: var(--accent);
        background: rgba(124,109,240,0.08);
        color: var(--text);
    }

    /* ── Inputs ── */
    input[type="text"],
    input[type="url"],
    input[type="color"],
    textarea,
    select {
        width: 100%;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 11px 14px;
        font-family: var(--sans);
        font-size: 14px;
        color: var(--text);
        outline: none;
        transition:
            border-color 0.15s,
            box-shadow 0.15s;
        appearance: none;
    }
    input::placeholder,
    textarea::placeholder {
        color: var(--text-muted);
    }
    input:focus,
    textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
    }
    textarea {
        resize: vertical;
        min-height: 88px;
        line-height: 1.6;
    }

    /* ── Duration ── */
    .dur-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .dur-pill {
        font-family: var(--mono);
        font-size: 12px;
        padding: 6px 14px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface2);
        color: #a0a0b8;
        cursor: pointer;
        transition: all 0.15s;
        user-select: none;
    }
    .dur-pill:hover {
        border-color: var(--border-bright);
        color: var(--text);
    }
    .dur-pill.selected {
        border-color: var(--accent);
        color: var(--accent-bright);
        background: rgba(124, 109, 240, 0.1);
    }

    /* ── Tone ── */
    .tone-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .tone-pill {
        font-size: 13px;
        font-weight: 500;
        padding: 7px 16px;
        border: 1px solid var(--border);
        border-radius: 100px;
        background: var(--surface2);
        color: #a0a0b8;
        cursor: pointer;
        transition: all 0.15s;
        user-select: none;
    }
    .tone-pill:hover {
        border-color: var(--border-bright);
        color: var(--text);
    }
    .tone-pill.selected {
        border-color: var(--accent);
        color: var(--accent-bright);
        background: rgba(124, 109, 240, 0.1);
    }

    /* ══════════════════════════════════════════
   ASSET ROWS - new expandable system
══════════════════════════════════════════ */
    .asset-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .asset-item {
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 8px;
        overflow: hidden;
        transition: border-color 0.15s;
        background: var(--surface2);
    }
    .asset-item.selected {
        border-color: var(--accent);
    }
    .asset-item.is-scratch {
    }
    .asset-item.is-scratch.selected {
        border-color: var(--green);
    }

    .asset-trigger {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 16px;
        cursor: pointer;
        user-select: none;
    }

    .asset-box {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        border: 1.5px solid var(--border-bright);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.15s;
    }
    .asset-item.selected .asset-box {
        background: var(--accent);
        border-color: var(--accent);
    }
    .asset-item.is-scratch.selected .asset-box {
        background: var(--green);
        border-color: var(--green);
    }
    .asset-box svg {
        display: none;
    }
    .asset-item.selected .asset-box svg {
        display: block;
    }

    .asset-label {
        font-size: 13px;
        font-weight: 600;
        color: #a0a0b8;
        flex: 1;
        transition: color 0.15s;
    }
    .asset-item.selected .asset-label {
        color: var(--text);
    }

    .asset-chevron {
        font-size: 10px;
        color: var(--text-muted);
        transition: transform 0.2s;
        opacity: 0;
    }
    .asset-item.selected .asset-chevron {
        opacity: 1;
    }
    .asset-item.selected.open .asset-chevron {
        transform: rotate(180deg);
    }

    /* ── Asset expanded panel ── */
    .asset-panel {
        display: none;
        border-top: 1px solid var(--border);
        padding: 16px;
        background: rgba(13, 13, 20, 0.5);
    }
    .asset-item.selected.open .asset-panel {
        display: block;
    }

    /* Tip box */
    .asset-tip {
        display: flex;
        gap: 10px;
        background: rgba(124, 109, 240, 0.07);
        border: 1px solid rgba(124, 109, 240, 0.18);
        border-radius: 8px;
        padding: 10px 14px;
        margin-bottom: 14px;
        font-size: 12px;
        color: #9898b8;
        line-height: 1.55;
    }
    .asset-tip-icon {
        font-size: 14px;
        flex-shrink: 0;
        margin-top: 1px;
    }

    /* File upload zone */
    .upload-zone {
        border: 1.5px dashed var(--border-bright);
        border-radius: 8px;
        padding: 20px 16px;
        text-align: center;
        cursor: pointer;
        transition: all 0.15s;
        margin-bottom: 10px;
        position: relative;
    }
    .upload-zone:hover {
        border-color: var(--accent);
        background: rgba(124, 109, 240, 0.04);
    }
    .upload-zone.has-file {
        border-color: var(--green);
        border-style: solid;
        background: var(--green-dim);
    }

    .upload-zone input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
        padding: 0;
        border: none;
        background: none;
    }
    .upload-icon {
        font-size: 22px;
        margin-bottom: 6px;
        display: flex;
        justify-content: center;
    }
    .upload-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-dim);
    }
    .upload-sub {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 2px;
        font-family: var(--mono);
    }
    .upload-preview {
        display: none;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        font-weight: 600;
        color: var(--green);
    }
    .upload-zone.has-file .upload-default {
        display: none;
    }
    .upload-zone.has-file .upload-preview {
        display: flex;
        justify-content: center;
    }

    /* OR divider */
    .or-divider {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 12px 0;
        font-family: var(--mono);
        font-size: 10px;
        color: var(--text-muted);
        letter-spacing: 0.08em;
    }
    .or-divider::before,
    .or-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border);
    }

    /* Color picker row */
    .color-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }
    .color-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex: 1;
        min-width: 90px;
    }
    .color-field label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        font-family: var(--mono);
    }
    .color-input-wrap {
        display: flex;
        align-items: center;
        gap: 0;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
        transition: border-color 0.15s;
        height: 40px;
    }
    .color-input-wrap:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
    }

    /* The colored square on the left - clicking it opens the native picker */
    .color-swatch-btn {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border: none;
        border-right: 1px solid var(--border);
        cursor: pointer;
        padding: 0;
        position: relative;
        transition: opacity 0.15s;
    }
    .color-swatch-btn:hover {
        opacity: 0.85;
    }
    .color-swatch-btn input[type="color"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
        border: none;
        padding: 0;
        background: none;
    }

    /* The hex text input */
    .color-hex {
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 500;
        color: var(--text);
        background: none;
        border: none;
        padding: 0 12px;
        width: 100%;
        outline: none;
        letter-spacing: 0.04em;
    }
    .color-hex::placeholder {
        color: var(--text-muted);
    }
    .color-hex:focus {
        box-shadow: none;
    }

    /* Advanced toggle */
    .advanced-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        cursor: pointer;
        user-select: none;
        margin-top: 4px;
        margin-bottom: 14px;
        transition: color 0.15s;
    }
    .advanced-toggle:hover {
        color: var(--accent-bright);
    }
    .advanced-toggle .adv-arrow {
        font-size: 10px;
        transition: transform 0.2s;
    }
    .advanced-toggle.open .adv-arrow {
        transform: rotate(180deg);
    }

    .advanced-panel {
        display: none;
    }
    .advanced-panel.open {
        display: block;
    }

    /* URL fields */
    .url-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Output rows */
    .output-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .output-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface2);
        cursor: pointer;
        transition: all 0.15s;
        user-select: none;
    }
    .output-row:hover {
        border-color: var(--border-bright);
    }
    .output-row.selected {
        border-color: var(--accent);
        background: rgba(124, 109, 240, 0.06);
    }
    .output-row-disabled {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }

    .output-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .output-row-icon {
        font-size: 18px;
        width: 28px;
        text-align: center;
    }
    .output-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        letter-spacing: -0.01em;
    }
    .output-desc {
        font-size: 12px;
        color: #8888a8;
        margin-top: 1px;
    }

    .output-tier {
        font-family: var(--mono);
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 4px;
        font-weight: 500;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }
    .tier-free {
        background: var(--green-dim);
        color: var(--green);
        border: 1px solid rgba(52, 211, 153, 0.2);
    }
    .tier-pro {
        background: rgba(124, 109, 240, 0.12);
        color: var(--accent-bright);
        border: 1px solid rgba(124, 109, 240, 0.25);
    }

    /* ── Callout ── */
    .callout {
        display: flex;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 10px;
        font-size: 13px;
        line-height: 1.55;
        margin-top: 16px;
    }
    .callout-info {
        background: rgba(124, 109, 240, 0.07);
        border: 1px solid rgba(124, 109, 240, 0.2);
        color: #9898b8;
    }
    .callout-icon {
        flex-shrink: 0;
        font-size: 15px;
        margin-top: 1px;
    }

    /* ── Buttons ── */
    .btn-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--border);
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 22px;
        border-radius: 8px;
        font-family: var(--sans);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all 0.15s;
        letter-spacing: -0.01em;
    }
    .btn-primary {
        background: var(--accent-ui);
        color: white;
    }
    .btn-primary:hover {
        background: var(--accent-bright);
        color: #0d0d14;
        transform: translateY(-1px);
        box-shadow: 0 4px 20px var(--accent-ui-glow);
    }
    .btn-primary:disabled {
        background: var(--border);
        color: var(--text-muted);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
    .btn-ghost {
        background: transparent;
        color: var(--text-dim);
        border: 1px solid var(--border);
    }
    .btn-ghost:hover {
        border-color: var(--border-bright);
        color: var(--text);
    }
    .btn-generate {
        background: linear-gradient(135deg, #7c6df0 0%, #a78bfa 100%);
        color: white;
        padding: 12px 28px;
        font-size: 15px;
        box-shadow: 0 0 40px rgba(124, 109, 240, 0.3);
    }
    .btn-generate:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(124, 109, 240, 0.45);
    }

    .divider {
        height: 1px;
        background: var(--border);
        margin: 20px 0;
    }

    /* ── Output section ── */
    #output-section {
        display: none;
    }

    .loading-panel {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 64px 40px;
        text-align: center;
        margin-bottom: 16px;
    }
    .spinner-ring {
        width: 44px;
        height: 44px;
        border: 2px solid var(--border-bright);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
        margin: 0 auto 20px;
    }
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
    .loading-label {
        font-family: var(--mono);
        font-size: 12px;
        color: #a0a0b8;
        letter-spacing: 0.05em;
    }

    /* ── Result cards ── */
    .result-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 12px;
        animation: slideUp 0.35s ease both;
    }
    .result-header {
        padding: 14px 20px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--surface2);
        cursor: pointer;
        user-select: none;
    }
    .result-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        letter-spacing: -0.01em;
    }
    .result-body {
        padding: 0 24px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1),
                    padding 0.3s ease;
    }
    .result-card.is-open .result-body {
        max-height: 9999px;
        padding: 24px;
    }
    .result-chevron {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--text-muted);
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
        margin-left: 10px;
    }
    .result-card.is-open .result-chevron {
        transform: rotate(180deg);
    }
    .result-body pre {
        font-family: "DM Sans", "Bricolage Grotesque", sans-serif;
        font-size: 13.5px;
        line-height: 1.85;
        color: #d0d0e8;
        white-space: pre-wrap;
        letter-spacing: 0.01em;
    }

    /* ── Formatted doc output ── */
    .doc-body {
        font-family: "DM Sans", var(--sans);
        font-size: 13.5px;
        line-height: 1.85;
        color: #d0d0e8;
        letter-spacing: 0.01em;
    }
    .doc-section {
        margin-bottom: 20px;
    }
    .doc-section:last-child {
        margin-bottom: 0;
    }
    .doc-heading {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        color: var(--accent-bright);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 8px;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--border);
    }
    .doc-line {
        margin-bottom: 3px;
        white-space: pre-wrap;
    }
    .doc-line:last-child {
        margin-bottom: 0;
    }
    .doc-timestamp {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--accent-bright);
        font-weight: 600;
        letter-spacing: 0.04em;
    }
    .doc-beat {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--amber);
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .doc-scene {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--text-muted);
        letter-spacing: 0.04em;
    }
    .doc-divider {
        height: 1px;
        background: var(--border);
        margin: 14px 0;
    }

    .copy-btn {
        font-family: var(--mono);
        font-size: 10px;
        padding: 4px 10px;
        background: transparent;
        border: 1px solid var(--border-bright);
        border-radius: 5px;
        color: var(--text-dim);
        cursor: pointer;
        transition: all 0.15s;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    .copy-btn:hover {
        border-color: var(--accent);
        color: var(--accent-bright);
    }

    /* ── Storyboard: compact shot list ── */
    .shot-list-row {
        display: grid;
        grid-template-columns: 24px 72px 1fr 40px;
        gap: 10px;
        align-items: baseline;
        padding: 8px 0;
        border-bottom: 1px solid var(--border);
        font-size: 12.5px;
        line-height: 1.5;
    }
    .shot-list-row:last-child { border-bottom: none; }
    .shot-num {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--accent-bright);
        font-weight: 600;
    }
    .shot-type-badge {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .shot-desc {
        color: var(--text);
    }
    .shot-dur {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--text-muted);
        text-align: right;
    }

    /* ── Style frames ── */
    .style-frames-section {
        margin-bottom: 24px;
    }
    .style-frames-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        gap: 12px;
    }
    .style-frames-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
    }
    .style-frames-sub {
        font-size: 11.5px;
        color: var(--text-muted);
        margin-top: 2px;
    }
    .style-frames-generate-btn {
        flex-shrink: 0;
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.15s;
        white-space: nowrap;
    }
    .style-frames-generate-btn:hover { opacity: 0.85; }
    .style-frames-generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .style-frames-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 20px;
    }
    /* Portrait (TikTok/Reels/Shorts) */
    .style-frames-grid--vertical .style-frame-img-wrap {
        aspect-ratio: 9 / 16;
    }
    /* Square (Instagram feed) */
    .style-frames-grid--square .style-frame-img-wrap {
        aspect-ratio: 1 / 1;
    }
    @media (max-width: 600px) {
        .style-frames-grid { grid-template-columns: repeat(2, 1fr); }
    }
    .style-frame-tile {
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--border);
        background: var(--surface2);
    }
    .style-frame-img-wrap {
        aspect-ratio: 16/9;
        background: linear-gradient(135deg, #1a1a28 0%, #111118 100%);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .style-frame-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .style-frame-skeleton {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,
            rgba(255,255,255,0.03) 0%,
            rgba(255,255,255,0.07) 50%,
            rgba(255,255,255,0.03) 100%);
        background-size: 200% 100%;
        animation: shimmer 1.6s infinite;
    }
    @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }
    .style-frame-error-msg {
        font-size: 11px;
        color: var(--text-muted);
        text-align: center;
        padding: 12px;
        line-height: 1.4;
    }
    .style-frame-footer {
        padding: 8px 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
    }
    .style-frame-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.07em;
    }
    .style-frame-revise-btn {
        background: transparent;
        border: 1px solid var(--border-bright);
        color: var(--text-muted);
        border-radius: 5px;
        padding: 3px 9px;
        font-size: 11px;
        cursor: pointer;
        transition: border-color 0.15s, color 0.15s;
        white-space: nowrap;
    }
    .style-frame-revise-btn:hover { border-color: var(--accent); color: var(--accent-bright); }
    .style-frame-revise-btn--paid { border-color: rgba(124,109,240,0.4); color: #c4b5fd; }
    .style-frame-revise-btn--paid:hover { border-color: var(--accent); color: #fff; background: rgba(124,109,240,0.15); }
    .style-frame-revise-wrap {
        padding: 0 10px 10px;
        display: none;
    }
    .style-frame-revise-wrap.open { display: block; }
    .style-frame-revise-input {
        width: 100%;
        background: var(--surface);
        border: 1px solid var(--border-bright);
        border-radius: 6px;
        color: var(--text);
        font-size: 12px;
        padding: 7px 10px;
        resize: none;
        outline: none;
        line-height: 1.4;
        font-family: var(--sans);
        box-sizing: border-box;
        transition: border-color 0.15s;
    }
    .style-frame-revise-input:focus { border-color: var(--accent); }
    .style-frame-revise-actions {
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        margin-top: 6px;
    }
    .style-frame-revise-cancel {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text-muted);
        border-radius: 5px;
        padding: 4px 10px;
        font-size: 11px;
        cursor: pointer;
    }
    .style-frame-revise-submit {
        background: var(--accent);
        border: none;
        color: #fff;
        border-radius: 5px;
        padding: 4px 12px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.15s;
    }
    .style-frame-revise-submit:hover { opacity: 0.85; }
    .style-frame-revise-submit:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ── Style anchor ── */
    .style-frame-tile.anchor-selected {
        border: 2px solid var(--accent);
        box-shadow: 0 0 0 3px rgba(124,109,240,0.2);
    }
    .style-frame-anchor-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: rgba(124,109,240,0.1);
        border: 1px solid rgba(124,109,240,0.25);
        color: #c4b5fd;
        font-size: 10px;
        font-weight: 600;
        font-family: var(--sans);
        cursor: pointer;
        padding: 3px 8px;
        border-radius: 4px;
        transition: all 0.15s;
        letter-spacing: 0.02em;
    }
    .style-frame-anchor-btn:hover {
        background: rgba(124,109,240,0.2);
        border-color: var(--accent);
        color: #fff;
    }
    .anchor-selected .style-frame-anchor-btn {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

    /* ── Storyboard panel grid ── */
    .storyboard-panel-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 16px;
    }
    .storyboard-panel-tile {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--border);
        background: var(--surface2);
    }
    .storyboard-panel-tile img {
        width: 100%;
        display: block;
        cursor: zoom-in;
    }
    .storyboard-panel-num {
        position: absolute;
        top: 6px;
        left: 6px;
        background: rgba(0,0,0,0.6);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        font-family: var(--mono);
        padding: 2px 6px;
        border-radius: 4px;
    }
    .storyboard-panel-error {
        padding: 24px 12px;
        text-align: center;
        font-size: 11px;
        color: var(--text-muted);
    }
    .storyboard-panel-retry {
        display: inline-block;
        margin-top: 8px;
        padding: 5px 12px;
        font-size: 11px;
        font-weight: 600;
        color: var(--accent-bright);
        background: rgba(124, 109, 240, 0.1);
        border: 1px solid rgba(124, 109, 240, 0.35);
        border-radius: 999px;
        cursor: pointer;
        transition: all 0.15s;
    }
    .storyboard-panel-retry:hover { background: rgba(124, 109, 240, 0.2); }
    .storyboard-panel-retry:disabled { opacity: 0.6; cursor: default; }
    .storyboard-panel-failed-actions {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }
    .storyboard-panel-failed-actions .storyboard-panel-retry {
        margin-top: 0;
        padding: 6px 10px;
        text-align: center;
    }
    .storyboard-panel-free {
        display: block;
        font-size: 10px;
        color: var(--text-muted);
        margin-top: 4px;
    }
    .storyboard-panel-revise-btn {
        position: absolute;
        bottom: 6px;
        right: 6px;
        padding: 3px 8px;
        font-size: 10px;
        font-weight: 600;
        color: #c4b5fd;
        background: rgba(0, 0, 0, 0.55);
        border: 1px solid rgba(124, 109, 240, 0.4);
        border-radius: 999px;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.15s;
        backdrop-filter: blur(4px);
    }
    .storyboard-panel-tile:hover .storyboard-panel-revise-btn { opacity: 1; }
    .storyboard-panel-revise-btn:hover { border-color: var(--accent); color: #fff; background: rgba(124, 109, 240, 0.35); }
    .storyboard-panel-tile:has(.storyboard-panel-revise-wrap.open) .storyboard-panel-revise-btn { display: none; }
    .storyboard-panel-revise-wrap {
        display: none;
        padding: 8px;
        background: var(--surface2);
        border-top: 1px solid var(--border);
    }
    .storyboard-panel-revise-wrap.open { display: block; }
    .storyboard-panel-revise-input {
        width: 100%;
        min-height: 48px;
        font-size: 11px;
        padding: 6px 8px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--text);
        font-family: inherit;
        resize: vertical;
        box-sizing: border-box;
    }
    .storyboard-panel-revise-input:focus { border-color: var(--accent); outline: none; }
    .storyboard-panel-revise-actions {
        display: flex;
        gap: 6px;
        justify-content: flex-end;
        margin-top: 6px;
    }
    .storyboard-panel-revise-cancel, .storyboard-panel-revise-submit {
        padding: 4px 10px;
        font-size: 10px;
        font-weight: 600;
        border-radius: 999px;
        cursor: pointer;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--text-muted);
        transition: all 0.15s;
    }
    .storyboard-panel-revise-submit {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }
    .storyboard-panel-revise-submit:hover { opacity: 0.85; }
    .storyboard-panel-revise-submit:disabled { opacity: 0.5; cursor: not-allowed; }
    .anchor-status {
        display: none;
        font-size: 11px;
        color: var(--accent-bright);
        font-family: var(--mono);
    }
    @media (max-width: 600px) {
        .storyboard-panel-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ── Style frames card (standalone) ── */
    .result-card--style-frames {
        background: linear-gradient(160deg, rgba(124,109,240,0.08) 0%, rgba(59,130,246,0.03) 50%, var(--surface) 100%);
        border-color: rgba(124,109,240,0.35);
        box-shadow: 0 0 0 1px rgba(124,109,240,0.12), 0 4px 24px rgba(124,109,240,0.08);
        margin-top: 8px;
    }
    .result-card--style-frames .result-header {
        border-bottom-color: rgba(124,109,240,0.18);
    }
    .style-frames-card-intro {
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.6;
        margin-bottom: 16px;
    }
    .platform-format-note {
        font-size: 12.5px;
        color: #93c5fd;
        background: rgba(59, 130, 246, 0.08);
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: 8px;
        padding: 10px 12px;
        margin-bottom: 16px;
        line-height: 1.6;
    }
    .scene-picker-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.07em;
        margin-bottom: 8px;
    }
    .scene-options {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 12px;
        max-height: 180px;
        overflow-y: auto;
    }
    .scene-option {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: var(--surface2);
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
        text-align: left;
        width: 100%;
    }
    .scene-option:hover { border-color: var(--border-bright); }
    .scene-option.active {
        border-color: var(--accent);
        background: rgba(124,109,240,0.07);
    }
    .scene-option-num {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--accent-bright);
        font-weight: 600;
        margin-top: 2px;
        flex-shrink: 0;
        min-width: 18px;
    }
    .scene-option-text {
        font-size: 12.5px;
        color: var(--text);
        line-height: 1.45;
    }
    .scene-custom-label {
        font-size: 11.5px;
        color: var(--text-muted);
        margin-bottom: 5px;
    }
    .scene-custom-input {
        width: 100%;
        background: var(--surface);
        border: 1px solid var(--border-bright);
        border-radius: 7px;
        color: var(--text);
        font-size: 12.5px;
        padding: 9px 12px;
        resize: none;
        outline: none;
        line-height: 1.5;
        font-family: var(--sans);
        box-sizing: border-box;
        transition: border-color 0.15s;
        margin-bottom: 12px;
    }
    .scene-custom-input:focus { border-color: var(--accent); }
    .style-frames-generate-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .style-frames-style-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
    }
    .style-frames-credit-note {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        letter-spacing: 0.02em;
    }
    .sf-save-btn {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 12px;
        font-family: var(--sans);
        cursor: pointer;
        text-decoration: underline;
        text-decoration-color: var(--border-bright);
        text-underline-offset: 3px;
        padding: 4px 0;
        transition: color 0.15s;
        letter-spacing: 0.01em;
    }
    .sf-save-btn:hover { color: var(--text); }
    .sf-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ── History panel ── */
    .history-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(4px);
        z-index: 400;
        align-items: flex-start;
        justify-content: flex-end;
    }
    .history-overlay.open { display: flex; }
    .history-panel {
        width: 100%;
        max-width: 420px;
        height: 100vh;
        background: #111118;
        border-left: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        animation: slideInRight 0.2s ease;
    }
    @keyframes slideInRight {
        from { transform: translateX(100%); }
        to   { transform: translateX(0); }
    }
    .history-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }
    .history-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text);
        letter-spacing: -0.02em;
    }
    .history-close {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 20px;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 6px;
        line-height: 1;
    }
    .history-close:hover { color: var(--text); background: var(--surface2); }
    .history-list {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
    }
    .history-empty {
        padding: 48px 24px;
        text-align: center;
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.6;
    }
    .history-group-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 4px 6px;
        margin-top: 12px;
        font-family: var(--mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--accent-bright);
        border-top: 1px solid var(--border);
    }
    .history-group-header:first-child {
        margin-top: 0;
        border-top: none;
        padding-top: 0;
    }
    .history-group-header--none { color: var(--text-muted); }
    .history-group-count {
        background: var(--surface2);
        color: var(--text-muted);
        padding: 2px 7px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.04em;
    }
    .history-item {
        padding: 14px 16px;
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 8px;
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
    }
    .history-item:hover {
        border-color: var(--accent-bright);
        background: rgba(124,109,240,0.05);
    }
    .history-item-date {
        font-size: 11px;
        font-family: var(--mono);
        color: var(--text-muted);
        margin-bottom: 5px;
    }
    .history-item-topic {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .history-item-outputs {
        font-size: 11px;
        color: var(--text-muted);
    }
    .history-item-status {
        display: inline-block;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 7px;
        border-radius: 10px;
        margin-top: 6px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .history-status-complete { background: rgba(52,211,153,0.12); color: #34d399; }
    .history-status-pending  { background: rgba(251,191,36,0.12);  color: #fbbf24; }
    .history-status-failed   { background: rgba(239,68,68,0.12);   color: #ef4444; }
    .history-rename-btn {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 14px;
        cursor: pointer;
        padding: 2px 6px;
        border-radius: 4px;
        flex-shrink: 0;
        opacity: 0;
        transition: opacity 0.15s;
    }
    .history-item:hover .history-rename-btn { opacity: 1; }
    .history-rename-wrap {
        display: flex;
        gap: 6px;
        align-items: center;
    }
    .history-rename-input {
        flex: 1;
        background: var(--surface2);
        border: 1px solid var(--accent-bright);
        border-radius: 6px;
        padding: 6px 10px;
        font-size: 12px;
        color: var(--text);
        font-family: var(--sans);
        outline: none;
    }
    .history-rename-save {
        background: var(--accent);
        color: white;
        border: none;
        border-radius: 6px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        font-family: var(--sans);
    }
    .history-rename-cancel {
        background: none;
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 6px 8px;
        font-size: 12px;
        color: var(--text-muted);
        cursor: pointer;
        font-family: var(--sans);
    }
    .history-btn {
        background: none;
        border: none;
        padding: 6px 12px;
        cursor: pointer;
        color: var(--text-dim);
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 500;
        border-radius: 6px;
        transition: color 0.15s, background 0.15s;
        line-height: 1;
    }
    .history-btn:hover { color: var(--text); background: var(--surface2); }

    /* ── Storyboard image generation ── */
    .storyboard-image-section {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--border);
    }
    .storyboard-style-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.07em;
        margin-bottom: 10px;
    }
    .storyboard-style-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
    }
    .style-chip {
        padding: 6px 14px;
        border-radius: 20px;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s;
        font-family: var(--sans);
    }
    .style-chip:hover {
        border-color: var(--accent-bright);
        color: var(--text);
    }
    .style-chip.active {
        background: rgba(124, 109, 240, 0.15);
        border-color: var(--accent-bright);
        color: var(--accent-bright);
    }
    .storyboard-gen-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.15s;
        font-family: var(--sans);
    }
    .storyboard-gen-btn:hover { opacity: 0.85; }
    .storyboard-gen-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .storyboard-img-wrap {
        margin-top: 16px;
    }
    .storyboard-img-loading {
        padding: 24px;
        text-align: center;
        color: var(--text-muted);
        font-size: 13px;
        background: rgba(255,255,255,0.02);
        border: 1px solid var(--border);
        border-radius: 10px;
        animation: pulse 1.8s ease-in-out infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
    .storyboard-img-result {
        width: 100%;
        border-radius: 10px;
        border: 1px solid var(--border);
        display: block;
    }
    .storyboard-img-download {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
        font-size: 12px;
        color: var(--accent-bright);
        text-decoration: none;
        font-weight: 500;
    }
    .storyboard-img-download:hover { text-decoration: underline; }

    /* ── Upgrade gate ── */
    .upgrade-gate {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 24px 28px;
        background: linear-gradient(
            135deg,
            rgba(124, 109, 240, 0.12) 0%,
            rgba(167, 139, 250, 0.07) 100%
        );
        border: 1px solid rgba(124, 109, 240, 0.3);
        border-radius: 14px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }
    .upgrade-text h3 {
        font-size: 17px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 4px;
        letter-spacing: -0.02em;
    }
    .upgrade-text p {
        font-size: 13px;
        color: var(--text-dim);
        line-height: 1.5;
    }
    .upgrade-features {
        display: flex;
        gap: 12px;
        margin-top: 10px;
        flex-wrap: wrap;
    }
    .upgrade-feat {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--accent-bright);
        background: rgba(124, 109, 240, 0.12);
        border: 1px solid rgba(124, 109, 240, 0.2);
        padding: 3px 8px;
        border-radius: 4px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    .btn-upgrade {
        background: var(--accent);
        color: white;
        padding: 11px 22px;
        border-radius: 8px;
        font-family: var(--sans);
        font-size: 14px;
        font-weight: 700;
        border: none;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
        letter-spacing: -0.01em;
    }
    .btn-upgrade:hover {
        background: var(--accent-bright);
        color: #0d0d14;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px var(--accent-glow);
    }

    /* ── Format strategy panel ── */
    #format-strategy-panel {
        display: none;
    }

    /* ── Refine panel ── */
    /* ── Action panel (refine + export) ── */
    .action-panel {
        background: linear-gradient(135deg, rgba(124,109,240,0.06) 0%, rgba(79,70,180,0.03) 100%);
        border: 1px solid rgba(124,109,240,0.2);
        border-radius: 14px;
        padding: 18px 20px;
        margin-bottom: 16px;
    }
    .action-panel-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 0;
    }
    .action-panel-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 10px 18px;
        font-size: 13px;
        font-weight: 600;
        font-family: var(--sans);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.15s;
    }
    .action-panel-btn--refine {
        background: rgba(124,109,240,0.12);
        border: 1px solid rgba(124,109,240,0.3);
        color: #c4b5fd;
    }
    .action-panel-btn--refine:hover {
        background: rgba(124,109,240,0.2);
        border-color: var(--accent);
        color: #fff;
    }
    .action-panel-btn--export {
        background: rgba(255,255,255,0.04);
        border: 1px solid var(--border-bright);
        color: var(--text-dim);
    }
    .action-panel-btn--export:hover {
        background: rgba(255,255,255,0.08);
        border-color: var(--text-muted);
        color: var(--text);
    }
    .refine-block {
        background: var(--surface);
        border: 1px solid var(--border-bright);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 0;
        margin-top: 12px;
        display: none;
    }
    .refine-block.open { display: block; }
    .refine-block-body {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 16px 20px 20px;
        border-top: 1px solid var(--border);
    }

    .refine-textarea {
        width: 100%;
        background: var(--surface2);
        border: 1px solid var(--border-bright);
        border-radius: 8px;
        padding: 12px 14px;
        font-family: "DM Sans", var(--sans);
        font-size: 13.5px;
        color: var(--text);
        resize: vertical;
        min-height: 88px;
        outline: none;
        transition: border-color 0.15s;
        line-height: 1.6;
    }
    .refine-textarea::placeholder {
        color: var(--text-muted);
    }
    .refine-textarea:focus {
        border-color: var(--accent);
    }

    .refine-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }
    .refine-hint {
        font-size: 11px;
        color: var(--text-muted);
        font-family: var(--mono);
        flex: 1;
        line-height: 1.5;
    }
    .refine-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .refine-cancel {
        font-family: var(--sans);
        font-size: 13px;
        color: var(--text-muted);
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px 8px;
        transition: color 0.15s;
    }
    .refine-cancel:hover {
        color: var(--text);
    }
    .refine-submit {
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 700;
        color: white;
        background: var(--accent-ui);
        border: none;
        padding: 9px 22px;
        border-radius: 7px;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
    }
    .refine-submit:hover {
        background: var(--accent-bright);
        color: #0d0d14;
    }
    .refine-submit:disabled {
        background: var(--border);
        color: var(--text-muted);
        cursor: not-allowed;
    }

    .refine-status {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--accent-bright);
        letter-spacing: 0.04em;
        display: none;
    }

    /* ── Bottom action row ── */
    .results-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 8px 0 24px;
        flex-wrap: wrap;
    }
    .results-footer .btn {
        min-width: 160px;
        justify-content: center;
    }
    .export-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        font-size: 12.5px;
        font-weight: 600;
        font-family: var(--sans);
        border: 1px solid rgba(124,109,240,0.3);
        border-radius: 8px;
        background: rgba(124,109,240,0.08);
        color: #c4b5fd;
        cursor: pointer;
        transition: all 0.15s;
    }
    .export-btn:hover {
        background: rgba(124,109,240,0.15);
        border-color: var(--accent);
        color: #fff;
    }
    .export-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* ════════════════════════════════
   ANIMATIONS
════════════════════════════════ */

    /* Logo draw-on */
    .logo-svg .bracket {
        stroke-dasharray: 60;
        stroke-dashoffset: 60;
        animation: drawBracket 0.4s cubic-bezier(0.4, 0, 0.2, 1)
            forwards;
    }
    .logo-svg .bracket-tl {
        animation-delay: 0.05s;
    }
    .logo-svg .bracket-tr {
        animation-delay: 0.2s;
    }
    .logo-svg .bracket-bl {
        animation-delay: 0.35s;
    }
    .logo-svg .bracket-br {
        animation-delay: 0.5s;
    }

    .logo-svg .play-arrow {
        opacity: 0;
        transform-origin: 37px 36px;
        transform: scale(0.4);
        animation: popArrow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s
            forwards;
    }

    @keyframes drawBracket {
        to {
            stroke-dashoffset: 0;
        }
    }
    @keyframes popArrow {
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Logo idle pulse (after draw-on completes) */
    .logo-svg .play-arrow {
        animation:
            popArrow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s
                forwards,
            arrowPulse 2.8s ease-in-out 1.5s infinite;
    }
    @keyframes arrowPulse {
        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.7;
            transform: scale(0.88);
        }
    }

    /* Wordmark letter rise */
    .wm-letter {
        display: inline-block;
        opacity: 0;
        transform: translateY(10px);
        animation: letterRise 0.35s cubic-bezier(0.4, 0, 0.2, 1)
            forwards;
    }
    @keyframes letterRise {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Loading state */
    .scan-ring {
        position: relative;
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
    }
    .scan-ring-outer {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: #7c6df0;
        border-right-color: #7c6df0;
        animation: ringRotate 1.2s linear infinite;
    }
    .scan-ring-inner {
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        border: 1.5px solid transparent;
        border-bottom-color: #a78bfa;
        animation: ringRotate 0.8s linear infinite reverse;
    }
    .scan-center {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .scan-center svg {
        animation: centerPulse 1.2s ease-in-out infinite;
    }
    @keyframes ringRotate {
        to {
            transform: rotate(360deg);
        }
    }
    @keyframes centerPulse {
        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.5;
            transform: scale(0.82);
        }
    }

    .loading-dots {
        display: flex;
        gap: 6px;
        justify-content: center;
        margin-top: 14px;
    }
    .loading-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #3d3d55;
        animation: dotPulse 1.2s ease-in-out infinite;
    }
    .loading-dot:nth-child(2) {
        animation-delay: 0.2s;
    }
    .loading-dot:nth-child(3) {
        animation-delay: 0.4s;
    }
    @keyframes dotPulse {
        0%,
        100% {
            background: #3d3d55;
            transform: scale(1);
        }
        50% {
            background: #7c6df0;
            transform: scale(1.5);
        }
    }

    /* Result card slide-in with stagger */
    .result-card {
        opacity: 0;
        transform: translateY(16px);
        animation: cardSlide 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    @keyframes cardSlide {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Skeleton shimmer */
    .skeleton {
        height: 11px;
        background: linear-gradient(
            90deg,
            #22222e 25%,
            #2e2e3e 50%,
            #22222e 75%
        );
        background-size: 200% 100%;
        border-radius: 5px;
        margin-bottom: 10px;
        animation: shimmer 1.4s infinite;
    }
    .skeleton:last-child {
        margin-bottom: 0;
    }
    @keyframes shimmer {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }

    /* Plan ready celebration */
    .plan-ready-banner {
        position: relative;
        overflow: hidden;
        padding: 28px 24px;
        background: linear-gradient(
            135deg,
            rgba(124, 109, 240, 0.12) 0%,
            rgba(167, 139, 250, 0.07) 100%
        );
        border: 1px solid rgba(124, 109, 240, 0.3);
        border-radius: 14px;
        margin-bottom: 12px;
        text-align: center;
    }
    .plan-ready-icon {
        font-size: 28px;
        display: block;
        margin-bottom: 8px;
        animation: iconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)
            0.1s both;
    }
    .plan-ready-banner h3 {
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--text);
        margin-bottom: 4px;
        animation: textSlide 0.4s ease-out 0.45s both;
    }
    .plan-ready-banner p {
        font-size: 13px;
        color: var(--text-dim);
        animation: textSlide 0.4s ease-out 0.6s both;
    }
    .plan-ready-banner {
        animation: bannerGlow 1s ease-out 0.1s both;
    }
    @keyframes iconBounce {
        from {
            opacity: 0;
            transform: scale(0.3);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes textSlide {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes bannerGlow {
        0% {
            border-color: var(--border);
            box-shadow: none;
        }
        40% {
            border-color: rgba(124, 109, 240, 0.6);
            box-shadow: 0 0 40px rgba(124, 109, 240, 0.25);
        }
        100% {
            border-color: rgba(124, 109, 240, 0.3);
            box-shadow: none;
        }
    }

    /* Particles */
    .particle {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        pointer-events: none;
        animation: particleFly 0.9s ease-out forwards;
        opacity: 0;
    }
    .p1 {
        background: #7c6df0;
        top: 50%;
        left: 50%;
        animation-delay: 0.15s;
        --tx: -90px;
        --ty: -55px;
    }
    .p2 {
        background: #a78bfa;
        top: 50%;
        left: 50%;
        animation-delay: 0.2s;
        --tx: 80px;
        --ty: -65px;
    }
    .p3 {
        background: #34d399;
        top: 50%;
        left: 50%;
        animation-delay: 0.18s;
        --tx: -65px;
        --ty: 55px;
    }
    .p4 {
        background: #fbbf24;
        top: 50%;
        left: 50%;
        animation-delay: 0.22s;
        --tx: 85px;
        --ty: 45px;
    }
    .p5 {
        background: #7c6df0;
        top: 50%;
        left: 50%;
        animation-delay: 0.25s;
        --tx: 5px;
        --ty: -95px;
    }
    .p6 {
        background: #a78bfa;
        top: 50%;
        left: 50%;
        animation-delay: 0.17s;
        --tx: -25px;
        --ty: 85px;
    }
    @keyframes particleFly {
        0% {
            opacity: 1;
            transform: translate(0, 0) scale(1);
        }
        100% {
            opacity: 0;
            transform: translate(var(--tx), var(--ty)) scale(0);
        }
    }

    /* ── Video type selector ── */
    .vtype-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    @media (max-width: 560px) {
        .vtype-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .vtype-chip {
        background: var(--surface2);
        border: 1px solid var(--border-bright);
        border-radius: 10px;
        padding: 14px 12px;
        cursor: pointer;
        transition: all 0.15s;
        text-align: center;
        user-select: none;
    }
    .vtype-chip:hover {
        border-color: var(--accent);
        background: rgba(124, 109, 240, 0.06);
    }
    .vtype-chip.selected {
        border-color: var(--accent-ui);
        background: rgba(91, 106, 240, 0.1);
        box-shadow: 0 0 0 1px var(--accent-ui);
    }
    .vtype-icon {
        font-size: 22px;
        margin-bottom: 6px;
        display: flex;
        justify-content: center;
    }
    .vtype-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        letter-spacing: -0.01em;
        margin-bottom: 3px;
    }
    .vtype-alias {
        font-weight: 500;
        font-size: 11px;
        color: var(--text-muted);
        letter-spacing: 0;
    }
    .vtype-desc {
        font-size: 11px;
        color: var(--text-muted);
        line-height: 1.4;
    }
    .vtype-chip.selected .vtype-name {
        color: var(--accent-bright);
    }

    /* ── Responsive ── */
    @media (max-width: 640px) {
        header {
            padding: 14px 20px;
        }
        .hero {
            padding: 48px 20px 36px;
        }
        .main {
            padding: 0 16px 60px;
        }
        .strategy-cards {
            grid-template-columns: 1fr;
        }
        .platform-grid {
            grid-template-columns: 1fr 1fr;
        }
        .header-nav .nav-link {
            display: none;
        }
        .color-row {
            flex-direction: column;
        }
        .logo-text {
            display: none;
        }
    }

    /* ── Landing page: storyboard background + sample preview ──
     * Ambient storyboard panels distributed down the WHOLE page (set 1
     * = oil-change tutorial, 16 panels of real generated frames),
     * faded so they read as a creative wall behind the form and
     * output. Plus a three-card sample-plan preview (logged-out) /
     * three-card dashboard (logged-in) between the hero and stepper.
     *
     * Layout: .page-wrap is a positioning context; .storyboard-bg
     * spans inset:0 within it; each .sb-panel--N is absolutely
     * positioned at a top value chosen to spread evenly down the
     * page. Below 600 px viewport the whole strip hides. */

    .page-wrap {
        position: relative;
        background: var(--bg);
    }
    .hero-wrap {
        position: relative;
        width: 100%;
        background: transparent;
    }

    .storyboard-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
    }
    .sb-panel {
        position: absolute;
        width: 110px;
        height: 110px;
        opacity: 0.16;
    }
    /* Top: hero + sample preview area (~0-700 px) */
    .sb-panel--1  { top:   90px; left:   30px; width: 120px; transform: rotate(-7deg); }
    .sb-panel--2  { top:  170px; right:  40px; width: 110px; transform: rotate(5deg); }
    .sb-panel--3  { top:  380px; left:   60px; width: 100px; transform: rotate(-4deg); }
    .sb-panel--4  { top:  470px; right:  70px; width: 130px; transform: rotate(6deg); }
    .sb-panel--5  { top:  660px; left:   50px; width: 115px; transform: rotate(-8deg); }
    /* Mid: form area (~800-2000 px) */
    .sb-panel--6  { top:  860px; right:  60px; width: 120px; transform: rotate(4deg); }
    .sb-panel--7  { top: 1040px; left:   40px; width: 130px; transform: rotate(-5deg); }
    .sb-panel--8  { top: 1200px; right:  50px; width: 110px; transform: rotate(7deg); }
    .sb-panel--9  { top: 1400px; left:   55px; width: 115px; transform: rotate(-6deg); }
    .sb-panel--10 { top: 1580px; right:  70px; width: 120px; transform: rotate(4deg); }
    .sb-panel--11 { top: 1780px; left:   40px; width: 105px; transform: rotate(-7deg); }
    /* Lower: result + footer area (~2000-3200 px) */
    .sb-panel--12 { top: 1980px; right:  60px; width: 130px; transform: rotate(5deg); }
    .sb-panel--13 { top: 2220px; left:   60px; width: 115px; transform: rotate(-3deg); }
    .sb-panel--14 { top: 2460px; right:  80px; width: 120px; transform: rotate(6deg); }
    .sb-panel--15 { top: 2720px; left:   45px; width: 110px; transform: rotate(-8deg); }
    .sb-panel--16 { top: 2980px; right:  60px; width: 115px; transform: rotate(5deg); }

    @media (max-width: 900px) {
        /* Halve density on tablets — keep one per ~250 px scroll */
        .sb-panel--3, .sb-panel--5, .sb-panel--7, .sb-panel--9,
        .sb-panel--11, .sb-panel--13, .sb-panel--15 { display: none; }
        .sb-panel { width: 160px; }
        .sb-panel--1 { left: -50px; }
        .sb-panel--2 { right: -50px; }
    }
    @media (max-width: 600px) {
        .storyboard-bg { display: none; }
    }

    .sample-preview {
        max-width: 920px;
        margin: 0 auto 36px;
        padding: 0 24px;
        position: relative;
        z-index: 2;
    }
    .sample-preview-header {
        text-align: center;
        margin-bottom: 20px;
    }
    .sample-preview-tag {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.12em;
        color: var(--accent-bright);
        background: var(--accent-glow);
        padding: 3px 10px;
        border-radius: 100px;
        display: inline-block;
    }
    .sample-preview-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--text);
        margin: 10px 0 4px;
        letter-spacing: -0.01em;
    }
    .sample-preview-sub {
        color: var(--text-muted);
        font-size: 13px;
        max-width: 540px;
        margin: 0 auto;
        line-height: 1.5;
    }
    .sample-preview-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        opacity: 0.7;
        transition: opacity 0.3s;
    }
    .sample-preview-grid:hover {
        opacity: 1;
    }
    .sample-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 14px 16px;
    }
    .sample-card-header {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 8px;
        letter-spacing: -0.01em;
    }
    .sample-card-header img {
        display: block;
    }
    .sample-card p {
        font-size: 11.5px;
        line-height: 1.55;
        color: var(--text-muted);
        margin: 0;
    }
    @media (max-width: 700px) {
        .sample-preview-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ── Logged-in dashboard (replaces .sample-preview when signed in) ── */
    .logged-in-dash {
        max-width: 920px;
        margin: 0 auto 36px;
        padding: 0 24px;
        position: relative;
        z-index: 2;
    }
    .dash-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .dash-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        min-height: 110px;
    }
    .dash-card-tag {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.12em;
        color: var(--accent-bright);
        margin-bottom: 6px;
    }
    .dash-card-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text);
        letter-spacing: -0.01em;
        line-height: 1.3;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dash-card-meta {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--text-muted);
        margin-bottom: auto;
    }
    .dash-card-action {
        background: transparent;
        border: none;
        padding: 8px 0 0;
        color: var(--accent-bright);
        font-family: var(--sans);
        font-size: 12px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        transition: color 0.15s;
        margin-top: auto;
    }
    .dash-card-action:hover {
        color: white;
    }
    .dash-campaigns-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: auto;
    }
    .campaign-chip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 0;
        font-size: 12px;
        color: var(--text);
    }
    .campaign-chip .campaign-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .campaign-chip .campaign-count {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--text-muted);
        background: var(--surface2);
        padding: 1px 6px;
        border-radius: 100px;
        flex-shrink: 0;
    }
    .dash-card--tip .dash-card-tip {
        font-size: 13px;
        line-height: 1.5;
        color: var(--text-dim);
    }
    @media (max-width: 700px) {
        .dash-grid {
            grid-template-columns: 1fr;
        }
    }