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

        html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f5f5f5;
            color: #333;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }

        /* Step content design tokens — shared with timeline/workspace for consistent typography and colors */
        :root {
            --step-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            --step-font-size: 0.9em;
            --step-font-size-body: 0.84em;
            --step-text: #333;
            --step-text-muted: #64748b;
            --step-text-muted-alt: #666;
            --step-border: #e0e0e0;
            --step-border-alt: #dbe2ea;
        }

        /* Scroll still works (wheel, trackpad, touch, keyboard); bars hidden for a cleaner UI */
        .hide-scrollbar,
        .workspace-tabs,
        .workspace-content .latex-content {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .hide-scrollbar::-webkit-scrollbar,
        .workspace-tabs::-webkit-scrollbar,
        .workspace-content .latex-content::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
            background: transparent;
        }

        /* Menu Bar */
        .menu-bar {
            background: white;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            padding: 2px 10px;
            min-height: 36px;
            height: auto;
            flex-shrink: 0;
            z-index: 100;
        }

        .menu-item {
            position: relative;
            padding: 6px 12px;
            font-size: 0.85em;
            color: #333;
            cursor: pointer;
            user-select: none;
            border-radius: 3px;
            transition: background 0.15s;
        }

        .menu-item:hover {
            background: #f0f0f0;
        }

        .menu-item.active {
            background: #e8e8e8;
        }

        .menu-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background: white;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            min-width: 180px;
            padding: 4px 0;
            display: none;
            z-index: 1000;
            margin-top: 2px;
        }

        .menu-item.active .menu-dropdown {
            display: block;
        }

        .menu-dropdown-item {
            padding: 6px 20px 6px 30px;
            font-size: 0.9em;
            color: #333;
            cursor: pointer;
            white-space: nowrap;
            position: relative;
        }

        .menu-dropdown-item:hover {
            background: #f0f4ff;
        }

        .menu-dropdown-item.disabled {
            color: #999;
            cursor: not-allowed;
        }

        .menu-dropdown-item.disabled:hover {
            background: transparent;
        }

        .menu-dropdown-separator {
            height: 1px;
            background: #e0e0e0;
            margin: 4px 0;
        }

        .menu-dropdown-item .shortcut {
            position: absolute;
            right: 12px;
            color: #999;
            font-size: 0.85em;
        }

        /* Nested Submenu Support */
        .menu-dropdown-item.has-submenu {
            padding-right: 30px;
        }

        .menu-dropdown-item.has-submenu::after {
            content: '\25B6';
            position: absolute;
            right: 8px;
            font-size: 0.7em;
            color: #999;
        }

        .menu-submenu {
            position: absolute;
            left: 100%;
            top: 0;
            background: white;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            min-width: 200px;
            padding: 4px 0;
            display: none;
            z-index: 1001;
            margin-left: 2px;
        }

        .menu-dropdown-item:hover > .menu-submenu,
        .menu-submenu-item:hover > .menu-submenu {
            display: block;
        }

        .menu-submenu-item {
            padding: 6px 20px 6px 30px;
            font-size: 0.9em;
            color: #333;
            cursor: pointer;
            white-space: nowrap;
            position: relative;
        }

        .menu-submenu-item:hover {
            background: #f0f4ff;
        }

        .menu-submenu-item.has-submenu {
            padding-right: 30px;
        }

        .menu-submenu-item.has-submenu::after {
            content: '\25B6';
            position: absolute;
            right: 8px;
            font-size: 0.7em;
            color: #999;
        }

        /* Ensure submenus don't go off screen */
        .menu-submenu {
            max-height: 80vh;
            overflow-y: auto;
        }

        /* App menu: single icon button + vertical flyout */
        .app-menu-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 28px;
            padding: 0;
            margin: 0 4px 0 0;
            border: none;
            background: transparent;
            color: #333;
            cursor: pointer;
            border-radius: 4px;
            flex-shrink: 0;
        }
        .app-menu-btn:hover {
            background: #f0f0f0;
        }
        .app-menu-btn:focus {
            outline: none;
        }
        .app-menu-btn svg {
            flex-shrink: 0;
        }

        .app-menu-flyout {
            display: none;
            position: absolute;
            left: 10px;
            top: 100%;
            margin-top: 2px;
            min-width: 200px;
            max-height: min(80vh, 520px);
            overflow: visible;
            background: white;
            border: 1px solid #d0d0d0;
            border-radius: 6px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            z-index: 1001;
            padding: 6px 0;
        }
        .app-menu-flyout.open {
            display: block;
        }

        /* Top-level items (File, Edit, etc.) – labels only; submenu opens to the right */
        .app-menu-flyout .menu-item {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 0;
            margin: 0;
            border-radius: 4px;
            font-weight: 500;
            box-sizing: border-box;
        }
        .app-menu-flyout .menu-item > .menu-dropdown {
            display: none;
        }
        .app-menu-flyout .menu-item.active > .menu-dropdown {
            display: block;
        }
        /* Clickable parent row: label + caret */
        .app-menu-flyout .menu-item .app-menu-section-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 8px 12px 8px 14px;
            cursor: pointer;
            box-sizing: border-box;
        }
        .app-menu-flyout .menu-item .app-menu-section-label:hover {
            background: #f0f0f0;
        }
        .app-menu-flyout .menu-item.active .app-menu-section-label {
            background: #e8e8e8;
        }
        /* Caret: always right-pointing (submenu opens to the right) */
        .app-menu-flyout .menu-item .app-menu-section-label::after {
            content: '\25B6';
            font-size: 0.65em;
            color: #888;
            margin-left: 8px;
            flex-shrink: 0;
        }
        /* Submenu panel: opens to the RIGHT of the main menu, not nested below */
        .app-menu-flyout .menu-dropdown {
            position: absolute;
            left: 100%;
            top: 0;
            margin-left: 2px;
            min-width: 200px;
            max-width: 280px;
            max-height: min(80vh, 480px);
            overflow-y: auto;
            padding: 6px 0;
            background: white;
            border: 1px solid #d0d0d0;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
            z-index: 1002;
        }
        .app-menu-flyout .menu-item.active > .menu-dropdown {
            display: block;
        }
        .app-menu-flyout .menu-dropdown-item {
            padding: 6px 20px 6px 28px;
        }
        .app-menu-flyout .menu-submenu {
            left: 100%;
            top: 0;
            margin-left: 2px;
        }

        /* User Info Section in Menu Bar */
        .menu-bar {
            justify-content: space-between;
        }

        /* Workspace tabs merged into top bar (saves a full row above the editor) */
        .menu-bar-tabs-wrap {
            display: flex;
            align-items: center;
            min-width: 0;
            flex: 0 0 0;
            max-width: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .menu-bar-tabs-wrap:has(.workspace-tab) {
            flex: 1 1 auto;
            max-width: none;
            margin: 0 6px;
        }

        .menu-bar .menu-bar-integrated-tabs.workspace-tabs {
            flex: 1;
            min-width: 0;
            border-bottom: none;
            background: transparent;
            padding: 0 2px;
        }

        .menu-bar .menu-bar-integrated-tabs .workspace-tab {
            padding: 4px 10px 5px;
            font-size: 0.68em;
        }

        .menu-bar .menu-bar-integrated-tabs .workspace-tab-close {
            width: 14px;
            height: 14px;
            font-size: 0.8em;
            margin-left: 2px;
        }

        .menu-bar-left {
            display: flex;
            align-items: center;
            gap: 15px;
            position: relative;
        }

        .menu-bar-title {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 8px;
            border-right: 1px solid #e0e0e0;
            margin-right: 5px;
        }

        .papira-brand-logo {
            height: 28px;
            width: auto;
            display: block;
            flex-shrink: 0;
        }

        .papira-brand-logo--menu {
            height: 26px;
        }

        .papira-brand-logo--auth {
            height: 44px;
            margin: 0 auto;
        }

        .menu-bar-title h1 {
            font-size: 1.235em;
            font-weight: 700;
            color: #333;
            margin: 0;
            line-height: 1;
        }

        .menu-bar-subtitle {
            font-size: 0.75em;
            color: #666;
            line-height: 1;
        }

        /* ═══════════════════════════════════════════════
           LANDING PAGE — Professional visual redesign
           ═══════════════════════════════════════════════ */

        html.landing-html {
            height: auto;
            min-height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
        }

        html.landing-html body.landing-page {
            height: auto;
            min-height: 100vh;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .landing-page {
            margin: 0;
            min-height: 100vh;
            background: #fafbfd;
            color: #0f172a;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        /* ─── Top bar ─── */
        .landing-topbar {
            position: sticky;
            top: 0;
            z-index: 100;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 28px;
            background: rgba(250, 251, 253, 0.88);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(15, 23, 42, 0.06);
        }

        .landing-topbar-brand {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .landing-topbar-brand .papira-brand-logo {
            height: 30px;
        }

        .landing-brand-name {
            font-size: 1.35em;
            font-weight: 800;
            line-height: 1;
            color: #0f172a;
            letter-spacing: -0.02em;
        }

        .landing-topbar-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .landing-topbar-link {
            border: none;
            background: transparent;
            color: #475569;
            font-size: 0.84em;
            font-weight: 600;
            cursor: pointer;
            padding: 6px 10px;
            border-radius: 7px;
            transition: color 0.15s, background 0.15s;
        }

        .landing-topbar-link:hover {
            color: #0f172a;
            background: rgba(15, 23, 42, 0.04);
        }

        .landing-login-btn {
            border: 1px solid #0f172a;
            background: #0f172a;
            color: #ffffff;
            border-radius: 8px;
            padding: 7px 16px;
            font-size: 0.84em;
            font-weight: 650;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, transform 0.1s;
        }

        .landing-login-btn:hover {
            background: #1e293b;
            border-color: #1e293b;
        }

        .landing-login-btn.secondary {
            border-color: transparent;
            background: transparent;
            color: #475569;
        }

        .landing-login-btn.secondary:hover {
            color: #0f172a;
            background: rgba(15, 23, 42, 0.04);
        }

        /* ─── Main container ─── */
        .landing-main {
            max-width: 1120px;
            margin: 0 auto;
            padding: 0 32px 0;
        }

        /* ─── Scroll-reveal ─── */
        .landing-reveal {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .landing-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ─── Section titles ─── */
        .landing-section-title {
            text-align: center;
            margin: 0 0 12px;
            font-size: clamp(1.6rem, 2.8vw, 2.2rem);
            font-weight: 780;
            letter-spacing: -0.025em;
            color: #0f172a;
            line-height: 1.15;
        }

        .landing-section-desc {
            text-align: center;
            margin: 0 auto 36px;
            max-width: 520px;
            font-size: 0.97em;
            line-height: 1.6;
            color: #64748b;
        }

        .landing-title-paren {
            font-weight: 650;
            color: #64748b;
            font-size: 0.92em;
        }

        /* ═══════ HERO ═══════ */
        .landing-hero {
            display: flex;
            flex-direction: column;
            padding: 56px 0 80px;
            min-height: calc(100vh - 56px);
        }

        /* Full-width headline row — fills the F-pattern top bar */
        .landing-hero-headline {
            margin-bottom: 40px;
        }

        .landing-hero-title {
            margin: 0;
            font-size: clamp(2.3rem, 4.4vw, 3.5rem);
            line-height: 1.08;
            letter-spacing: -0.035em;
            color: #0f172a;
            font-weight: 820;
            max-width: 980px;
        }

        /* Two-column body below headline */
        .landing-hero-body {
            display: grid;
            grid-template-columns: 5fr 7fr;
            gap: 40px;
            align-items: start;
            flex: 1;
        }

        .landing-hero-content {
            max-width: 440px;
            padding-top: 4px;
        }

        .landing-hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px 6px 10px;
            border: 1px solid #e2e8f0;
            border-radius: 999px;
            background: #ffffff;
            font-size: 0.8em;
            font-weight: 600;
            color: #475569;
            margin-top: 16px;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        }

        .landing-hero-pill-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
            flex-shrink: 0;
        }

        .landing-hero-subtitle {
            margin: 0 0 12px;
            font-size: 1.1em;
            line-height: 1.6;
            color: #64748b;
            max-width: 420px;
        }

        .landing-hero-tagline {
            margin: 0 0 32px;
            font-size: 0.95em;
            line-height: 1.5;
            color: #475569;
            font-weight: 700;
            max-width: 420px;
        }

        .landing-hl {
            display: inline;
            padding: 1px 7px;
            border-radius: 5px;
            font-weight: 680;
        }

        .landing-hl-green {
            background: #dcfce7;
            color: #15803d;
        }

        .landing-hl-red {
            background: #fee2e2;
            color: #b91c1c;
            text-decoration: line-through;
            text-decoration-color: rgba(185, 28, 28, 0.35);
        }

        .landing-hero-actions {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 36px;
        }

        .landing-cta-primary {
            border: none;
            background: #0f172a;
            color: #ffffff;
            border-radius: 12px;
            padding: 14px 28px;
            font-size: 0.95em;
            font-weight: 660;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            transition: transform 0.12s, box-shadow 0.18s, background 0.15s;
        }

        .landing-cta-primary:hover {
            background: #1e293b;
            transform: translateY(-1px);
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
        }

        .landing-cta-ghost {
            border: none;
            background: transparent;
            color: #475569;
            padding: 14px 8px;
            font-size: 0.95em;
            font-weight: 600;
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-color: #cbd5e1;
            transition: color 0.15s, text-decoration-color 0.15s;
        }

        .landing-cta-ghost:hover {
            color: #0f172a;
            text-decoration-color: #0f172a;
        }

        .landing-hero-venues {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        .landing-venue-group {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .landing-venue-domain {
            font-size: 0.68em;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0 !important;
            border: none !important;
            background: none !important;
            margin-right: 2px;
        }

        .landing-venue-domain:hover {
            border-color: transparent !important;
            color: #94a3b8 !important;
        }

        .landing-hero-venues span:not(.landing-venue-domain):not(.landing-venue-more) {
            display: inline-flex;
            align-items: center;
            padding: 3px 9px;
            border: 1px solid #e9ecf1;
            border-radius: 6px;
            font-size: 0.73em;
            font-weight: 580;
            color: #64748b;
            background: #ffffff;
            transition: border-color 0.15s, color 0.15s;
        }

        .landing-hero-venues span:not(.landing-venue-domain):not(.landing-venue-more):hover {
            border-color: #94a3b8;
            color: #334155;
        }

        .landing-venue-more {
            font-size: 0.73em;
            font-weight: 560;
            color: #94a3b8;
            cursor: default;
            padding: 0 !important;
            border: none !important;
            background: none !important;
        }

        /* ─── Hero mockup ─── */
        .landing-hero-mockup {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .landing-mockup-caption {
            margin: 0 0 16px;
            font-size: 0.88em;
            line-height: 1.5;
            color: #64748b;
            text-align: center;
            max-width: 500px;
            font-weight: 500;
        }

        .landing-mockup-window {
            width: 100%;
            max-width: 704px;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            background: #ffffff;
            box-shadow:
                0 1px 2px rgba(15, 23, 42, 0.04),
                0 8px 24px rgba(15, 23, 42, 0.06),
                0 24px 56px rgba(15, 23, 42, 0.06);
            overflow: hidden;
            animation: landing-mockup-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
        }

        @keyframes landing-mockup-enter {
            from {
                opacity: 0;
                transform: translateY(20px) scale(0.97);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .landing-mockup-titlebar {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 14px;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
        }

        .landing-mockup-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #e2e8f0;
        }

        .landing-mockup-dot:first-child { background: #fca5a5; }
        .landing-mockup-dot:nth-child(2) { background: #fcd34d; }
        .landing-mockup-dot:nth-child(3) { background: #86efac; }

        .landing-mockup-title {
            margin-left: 8px;
            font-size: 0.75em;
            font-weight: 600;
            color: #64748b;
        }

        .landing-mockup-body {
            display: grid;
            grid-template-columns: 120px 1fr;
            min-height: 280px;
        }

        .landing-mockup-sidebar {
            background: #f8fafc;
            border-right: 1px solid #e2e8f0;
            padding: 12px 0;
        }

        .landing-mockup-nav-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 7px 12px;
            font-size: 0.72em;
            font-weight: 550;
            color: #64748b;
            cursor: default;
            transition: background 0.12s;
        }

        .landing-mockup-nav-item.active {
            color: #0f172a;
            background: #ffffff;
            font-weight: 650;
            border-right: 2px solid #3b82f6;
        }

        .landing-mockup-main {
            padding: 18px 16px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .landing-mockup-card {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .landing-mockup-card-label {
            font-size: 0.72em;
            font-weight: 650;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .landing-mockup-score-ring {
            position: relative;
            width: 48px;
            height: 48px;
            flex-shrink: 0;
        }

        .landing-mockup-score-ring svg {
            width: 100%;
            height: 100%;
        }

        .landing-ring-animate {
            animation: landing-ring-draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
        }

        @keyframes landing-ring-draw {
            from { stroke-dasharray: 0 214; }
            to { stroke-dasharray: 186 214; }
        }

        .landing-mockup-score-text {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75em;
            font-weight: 750;
            color: #0f172a;
        }

        /* ─── Two-column split layout ─── */
        .landing-mockup-split {
            display: grid;
            grid-template-columns: 45% 55%;
            gap: 12px;
            align-items: start;
        }

        .landing-mockup-bars {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .landing-mockup-bar-row {
            display: grid;
            grid-template-columns: 45px 1fr;
            align-items: center;
            gap: 10px;
        }

        .landing-mockup-bar-row .landing-mockup-bar {
            max-width: 80%;
        }

        .landing-mockup-bar-row span {
            font-size: 0.65em;
            color: #475569;
            font-weight: 580;
        }

        .landing-mockup-bar {
            height: 6px;
            border-radius: 999px;
            background: #f1f5f9;
            overflow: hidden;
        }

        .landing-mockup-bar i {
            display: block;
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #3b82f6, #60a5fa);
            animation: landing-bar-grow 1s ease-out 0.6s both;
        }

        @keyframes landing-bar-grow {
            from { width: 0 !important; }
        }

        /* ─── Conference context ─── */
        .landing-mockup-context {
            display: flex;
            gap: 16px;
            padding: 10px 12px;
            background: #f8fafc;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            margin-bottom: 4px;
        }

        .landing-mockup-context-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.7em;
        }

        .landing-mockup-context-label {
            color: #64748b;
            font-weight: 550;
        }

        .landing-mockup-context-value {
            color: #0f172a;
            font-weight: 650;
        }

        /* ─── Feedback items ─── */
        .landing-mockup-feedback {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .landing-mockup-feedback-item {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            font-size: 0.66em;
            padding: 5px 7px;
            border-radius: 5px;
            line-height: 1.35;
            min-width: 100%;
        }

        .landing-mockup-feedback-item svg {
            flex-shrink: 0;
            width: 12px;
            height: 12px;
            margin-top: 1px;
        }

        .landing-mockup-feedback-item.warning {
            background: #fef3c7;
            color: #92400e;
        }

        .landing-mockup-feedback-item.warning svg {
            color: #f59e0b;
        }

        .landing-mockup-feedback-item.success {
            background: #dcfce7;
            color: #15803d;
        }

        .landing-mockup-feedback-item.success svg {
            color: #22c55e;
        }

        /* ─── Timeline inside mockup ─── */
        .landing-mockup-timeline {
            margin-top: 4px;
            padding-top: 10px;
            border-top: 1px solid #f1f5f9;
        }

        .landing-mockup-timeline-label {
            font-size: 0.65em;
            font-weight: 680;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 10px;
        }

        .landing-mockup-timeline-track {
            display: flex;
            align-items: flex-start;
            gap: 0;
            overflow-x: auto;
            padding-bottom: 4px;
        }

        .landing-tl-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 0;
            flex-shrink: 0;
        }

        .landing-tl-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid #cbd5e1;
            background: #ffffff;
            margin-bottom: 5px;
            position: relative;
            z-index: 1;
            transition: border-color 0.3s, background 0.3s;
        }

        .landing-tl-node.done .landing-tl-dot {
            border-color: #22c55e;
            background: #22c55e;
        }

        .landing-tl-node.current .landing-tl-dot {
            border-color: #3b82f6;
            background: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
        }

        .landing-tl-node.upcoming .landing-tl-dot {
            border-color: #e2e8f0;
            background: #ffffff;
        }

        .landing-tl-name {
            font-size: 0.6em;
            font-weight: 620;
            color: #334155;
            text-align: center;
            line-height: 1.2;
            white-space: nowrap;
        }

        .landing-tl-node.upcoming .landing-tl-name {
            color: #94a3b8;
        }

        .landing-tl-date {
            font-size: 0.52em;
            color: #94a3b8;
            margin-top: 1px;
            white-space: nowrap;
        }

        .landing-tl-node.current .landing-tl-date {
            color: #3b82f6;
            font-weight: 650;
        }

        .landing-tl-marker {
            font-size: 0.5em;
            color: #3b82f6;
            font-weight: 650;
            margin-top: 2px;
            white-space: nowrap;
            text-align: center;
        }

        .landing-tl-node.upcoming .landing-tl-marker {
            color: #64748b;
        }

        .landing-tl-line {
            height: 2px;
            flex: 1;
            min-width: 10px;
            margin-top: 4px;
            background: #e2e8f0;
            flex-shrink: 1;
        }

        .landing-tl-line.done {
            background: #22c55e;
        }

        /* ═══════ HOW IT WORKS ═══════ */
        .landing-how {
            padding: 80px 0 64px;
        }

        .landing-how .landing-section-desc {
            margin-bottom: 0;
            max-width: 600px;
        }

        .landing-steps {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 32px;
            margin-top: 48px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        .landing-step {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding-left: 20px;
            border-left: 3px solid #e2e8f0;
        }

        .landing-step-num {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            min-width: 32px;
            border-radius: 50%;
            background: #0f172a;
            color: #ffffff;
            font-size: 0.8em;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 1px;
            white-space: nowrap;
        }

        .landing-step-body h3 {
            margin: 0 0 6px;
            font-size: 1.05em;
            font-weight: 720;
            color: #0f172a;
            line-height: 1.3;
        }

        .landing-step-body p {
            margin: 0;
            font-size: 0.88em;
            line-height: 1.6;
            color: #64748b;
        }

        .landing-step-body p + p {
            margin-top: 8px;
        }

        .landing-step-list {
            margin: 8px 0;
            padding-left: 20px;
            list-style: none;
        }

        .landing-step-list li {
            position: relative;
            padding-left: 16px;
            margin-bottom: 4px;
            font-size: 0.88em;
            line-height: 1.6;
            color: #64748b;
        }

        .landing-step-list li::before {
            content: "\2022";
            position: absolute;
            left: 0;
            color: #94a3b8;
            font-weight: 700;
        }

        .landing-step-highlight {
            margin: 10px 0 0;
            padding: 8px 12px;
            background: #f8fafc;
            border-left: 2px solid #cbd5e1;
            font-size: 0.88em;
            line-height: 1.5;
            color: #334155;
            font-style: italic;
        }

        .landing-step-tags {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        .landing-step-tags span {
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 0.7em;
            font-weight: 620;
            line-height: 1.4;
            background: #f1f5f9;
            color: #475569;
        }

        /* Step color accents */
        .accent-blue { border-left-color: #3b82f6; }
        .accent-blue .landing-step-num { background: #2563eb; }
        .accent-blue .landing-step-tags span { background: #eff6ff; color: #1d4ed8; }

        .accent-violet { border-left-color: #8b5cf6; }
        .accent-violet .landing-step-num { background: #7c3aed; }
        .accent-violet .landing-step-tags span { background: #f5f3ff; color: #6d28d9; }

        .accent-emerald { border-left-color: #10b981; }
        .accent-emerald .landing-step-num { background: #059669; }
        .accent-emerald .landing-step-tags span { background: #ecfdf5; color: #047857; }

        .accent-rose { border-left-color: #f43f5e; }
        .accent-rose .landing-step-num { background: #e11d48; }
        .accent-rose .landing-step-tags span { background: #fff1f2; color: #be123c; }

        .accent-amber { border-left-color: #f59e0b; }
        .accent-amber .landing-step-num { background: #d97706; }
        .accent-amber .landing-step-tags span { background: #fffbeb; color: #b45309; }

        .accent-indigo { border-left-color: #6366f1; }
        .accent-indigo .landing-step-num { background: #4f46e5; }
        .accent-indigo .landing-step-tags span { background: #eef2ff; color: #4338ca; }

        /* ═══════ SERVERLESS & SYNC ═══════ */
        .landing-sync {
            padding: 80px 0;
            background: linear-gradient(to bottom, #fafbfd 0%, #ffffff 100%);
            border-top: 1px solid #e2e8f0;
            border-bottom: 1px solid #e2e8f0;
        }

        .landing-sync-flow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            margin-top: 48px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            flex-wrap: wrap;
        }

        .landing-sync-item {
            flex: 1;
            min-width: 200px;
            max-width: 240px;
            text-align: center;
            padding: 32px 24px;
        }

        .landing-sync-item:hover {
            transform: translateY(-2px);
        }

        .landing-sync-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: #f1f5f9;
            color: #475569;
            transition: all 0.2s;
        }

        .landing-sync-icon.github {
            background: #0f172a;
            color: #ffffff;
        }

        .landing-sync-icon.overleaf {
            background: #047857;
            color: #ffffff;
        }

        .landing-sync-item h3 {
            margin: 0 0 8px;
            font-size: 1.1em;
            font-weight: 700;
            color: #0f172a;
        }

        .landing-sync-item p {
            margin: 0;
            font-size: 0.88em;
            line-height: 1.5;
            color: #64748b;
        }

        .landing-sync-arrow {
            font-size: 2em;
            color: #cbd5e1;
            font-weight: 300;
            flex-shrink: 0;
            margin: 0 -8px;
        }

        @media (max-width: 768px) {
            .landing-sync-flow {
                flex-direction: column;
                gap: 20px;
            }

            .landing-sync-arrow {
                transform: rotate(90deg);
                margin: -8px 0;
            }

            .landing-sync-item {
                max-width: 100%;
                width: 100%;
            }
        }

        /* ═══════ CAPABILITIES ═══════ */
        .landing-caps {
            padding: 0 0 88px;
        }

        .landing-caps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            margin-top: 40px;
        }

        .landing-cap {
            padding: 24px 24px 28px;
            position: relative;
        }

        .landing-cap-bar {
            width: 32px;
            height: 3px;
            border-radius: 2px;
            background: #e2e8f0;
            margin-bottom: 16px;
        }

        .landing-cap-icon {
            display: block;
            margin-bottom: 12px;
            color: #64748b;
        }

        .landing-cap h3 {
            margin: 0 0 6px;
            font-size: 1em;
            font-weight: 720;
            color: #0f172a;
            line-height: 1.3;
        }

        .landing-cap p {
            margin: 0;
            font-size: 0.86em;
            line-height: 1.6;
            color: #64748b;
        }

        /* Capability color accents */
        .accent-sky .landing-cap-bar { background: #38bdf8; }
        .accent-sky .landing-cap-icon { color: #0284c7; }

        .accent-amber .landing-cap-bar { background: #f59e0b; }
        .accent-amber .landing-cap-icon { color: #d97706; }

        .accent-emerald .landing-cap-bar { background: #10b981; }
        .accent-emerald .landing-cap-icon { color: #059669; }

        .accent-rose .landing-cap-bar { background: #f43f5e; }
        .accent-rose .landing-cap-icon { color: #e11d48; }

        .accent-violet .landing-cap-bar { background: #8b5cf6; }
        .accent-violet .landing-cap-icon { color: #7c3aed; }

        .accent-indigo .landing-cap-bar { background: #6366f1; }
        .accent-indigo .landing-cap-icon { color: #4f46e5; }

        /* ═══════ COMPARISON TABLE ═══════ */
        .landing-compare {
            padding: 80px 0 88px;
        }

        .landing-compare-table {
            max-width: 580px;
            margin: 36px auto 0;
        }

        .landing-compare-header {
            display: grid;
            grid-template-columns: 1fr 90px 90px;
            gap: 0;
            padding: 0 0 10px;
            border-bottom: 2px solid #e2e8f0;
        }

        .landing-compare-header span {
            font-size: 0.78em;
            font-weight: 680;
            color: #64748b;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .landing-compare-header span:first-child {
            text-align: left;
        }

        .landing-compare-highlight {
            color: #0f172a !important;
            font-weight: 750 !important;
        }

        .landing-compare-row {
            display: grid;
            grid-template-columns: 1fr 90px 90px;
            gap: 0;
            padding: 12px 0;
            border-bottom: 1px solid #f1f5f9;
            align-items: center;
        }

        .landing-compare-row span:first-child {
            font-size: 0.9em;
            font-weight: 550;
            color: #334155;
        }

        .landing-compare-no,
        .landing-compare-yes {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .landing-compare-no {
            font-size: 0.9em;
            color: #cbd5e1;
            font-weight: 600;
        }

        .landing-compare-steps {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 28px;
            margin-top: 40px;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        /* First 3 items span 2 columns each */
        .landing-compare-step:nth-child(1),
        .landing-compare-step:nth-child(2),
        .landing-compare-step:nth-child(3) {
            grid-column: span 2;
        }

        /* Last 2 items span 2 columns each, centered in second row */
        .landing-compare-step:nth-child(4) {
            grid-column: 2 / 4;
        }

        .landing-compare-step:nth-child(5) {
            grid-column: 4 / 6;
        }

        .landing-compare-step {
            display: flex;
            align-items: flex-start;
            padding-left: 20px;
            border-left: 3px solid #e2e8f0;
        }

        .landing-compare-step-body {
            flex: 1;
        }

        .landing-compare-step-body h3 {
            margin: 0 0 8px;
            font-size: 1.05em;
            font-weight: 720;
            color: #0f172a;
            line-height: 1.3;
        }

        .landing-compare-step-body p {
            margin: 0;
            font-size: 0.88em;
            line-height: 1.65;
            color: #64748b;
        }

        .landing-compare-footer {
            max-width: 680px;
            margin: 64px auto 0;
            text-align: center;
        }

        .landing-compare-insight {
            font-size: 0.95em;
            font-weight: 550;
            color: #475569;
            line-height: 1.7;
            margin: 0 0 32px;
            padding: 0;
            background: transparent;
            border: none;
            font-style: normal;
        }

        .landing-compare-reposition {
            font-size: 1.2em;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.4;
            margin: 0;
            letter-spacing: -0.01em;
        }

        .landing-compare-reposition strong {
            font-weight: 750;
        }

        /* Compare step color accents */
        .landing-compare-step.accent-rose { border-left-color: #f43f5e; }
        .landing-compare-step.accent-violet { border-left-color: #8b5cf6; }
        .landing-compare-step.accent-emerald { border-left-color: #10b981; }
        .landing-compare-step.accent-amber { border-left-color: #f59e0b; }
        .landing-compare-step.accent-blue { border-left-color: #3b82f6; }

        /* ═══════ PLANS ═══════ */
        .landing-plans {
            padding: 80px 0 88px;
        }

        .landing-plans-scroll {
            position: relative;
            margin-top: 40px;
        }

        .landing-plans-grid {
            display: flex;
            flex-wrap: nowrap;
            gap: 24px;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 8px 0 24px;
            scroll-padding-inline: 24px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
        }

        .landing-plans-grid::-webkit-scrollbar {
            display: none;
        }

        .landing-plan-card {
            flex: 0 0 auto;
            min-width: 280px;
            scroll-snap-align: start;
            scroll-snap-stop: normal;
            max-width: 320px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 20px 22px;
            display: flex;
            flex-direction: column;
            transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
            position: relative;
        }

        .landing-plan-card:hover {
            border-color: #cbd5e1;
            box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
        }

        .landing-plan-card.featured {
            border-color: #3b82f6;
            background: linear-gradient(to bottom, #f8faff 0%, #ffffff 15%);
            box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15), 0 12px 32px rgba(59, 130, 246, 0.12);
            transform: scale(1.03);
            z-index: 1;
        }

        .landing-plan-card.featured:hover {
            transform: scale(1.04);
            box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2), 0 16px 40px rgba(59, 130, 246, 0.15);
        }

        .landing-plan-card.coming-soon {
            opacity: 0.75;
            border: 2px dashed #cbd5e1;
            background: #fafbfc;
        }

        .landing-plan-card.coming-soon:hover {
            opacity: 0.85;
            border-color: #94a3b8;
        }

        .landing-plan-card-head {
            min-height: 165px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
        }

        .landing-plan-card-head-spacer {
            flex: 1 1 0;
            min-height: 10px;
            border-bottom: 1px solid #e2e8f0;
            margin-bottom: -1px;
        }

        .landing-plan-title-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 4px;
        }

        .landing-plan-title-row h3 {
            margin: 0;
        }

        .landing-plan-price-inline {
            font-size: 1.1em;
            font-weight: 700;
            color: #475569;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .landing-plan-card.featured .landing-plan-price-inline {
            font-size: 1.2em;
            color: #0f172a;
        }

        .landing-plan-price-inline .landing-plan-price-period {
            font-size: 0.75em;
            font-weight: 600;
            color: #64748b;
        }

        .landing-plan-badge {
            display: inline-block;
            width: fit-content;
            white-space: nowrap;
            border-radius: 999px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1d4ed8;
            font-size: 0.72em;
            font-weight: 680;
            padding: 4px 10px;
            letter-spacing: 0.02em;
        }

        .landing-plan-offer-badge {
            display: inline-block;
            width: fit-content;
            white-space: nowrap;
            border-radius: 999px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border: 1px solid #10b981;
            color: #ffffff;
            font-size: 0.7em;
            font-weight: 700;
            padding: 4px 10px;
            letter-spacing: 0.03em;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
            animation: pulse-offer 2s ease-in-out infinite;
        }

        @keyframes pulse-offer {
            0%, 100% { box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25); }
            50% { box-shadow: 0 2px 12px rgba(16, 185, 129, 0.4); }
        }

        .landing-plan-offer-price {
            color: #10b981;
            font-weight: 800;
            position: relative;
            font-size: 0.95em;
        }

        .landing-plan-offer-period {
            color: #10b981;
            font-weight: 700;
            font-size: 0.9em;
        }

        .landing-plan-then {
            font-size: 0.4em;
            color: #64748b;
            font-weight: 500;
            vertical-align: baseline;
        }

        .landing-plan-coming-soon-badge {
            position: absolute;
            top: 16px;
            right: 16px;
            border-radius: 999px;
            background: #f1f5f9;
            border: 1px solid #cbd5e1;
            color: #64748b;
            font-size: 0.7em;
            font-weight: 650;
            padding: 3px 10px;
            letter-spacing: 0.02em;
        }

        .landing-plan-card h3 {
            margin: 0;
            font-size: 1.2em;
            color: #0f172a;
            font-weight: 750;
            line-height: 1.25;
            letter-spacing: -0.01em;
        }

        .landing-plan-subtitle {
            margin: 0;
            font-size: 0.85em;
            color: #475569;
            font-weight: 600;
        }

        .landing-plan-price {
            margin: 0 0 4px;
            font-size: 1.65em;
            color: #0f172a;
            font-weight: 750;
            line-height: 1.2;
            letter-spacing: -0.02em;
            white-space: nowrap;
        }

        .landing-plan-card:not(.featured) .landing-plan-price {
            font-size: 1.35em;
            color: #475569;
        }

        .landing-plan-price-period {
            font-size: 0.45em;
            font-weight: 600;
            color: #64748b;
            vertical-align: baseline;
        }

        .landing-plan-description {
            margin: 0 0 12px;
            font-size: 0.82em;
            color: #64748b;
            font-weight: 500;
            line-height: 1.4;
        }

        .landing-plan-scarcity {
            margin: 0 0 12px;
            padding: 6px 10px;
            background: #fef3c7;
            border: 1px solid #fde68a;
            border-radius: 8px;
        }

        .landing-plan-scarcity-text {
            font-size: 0.75em;
            color: #92400e;
            font-weight: 600;
            letter-spacing: 0.01em;
        }

        .landing-plan-card ul {
            margin: 15px 0 14px;
            padding: 0;
            list-style: none;
            color: #475569;
            font-size: 0.84em;
            line-height: 1.45;
            flex: 1;
        }

        .landing-plan-card ul li {
            position: relative;
            padding-left: 20px;
            margin-bottom: 4px;
        }

        .landing-plan-card ul li::before {
            content: '\2713';
            position: absolute;
            left: 0;
            top: 0.1em;
            width: 14px;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65em;
            font-weight: 700;
            color: #10b981;
            background: #ecfdf5;
            border-radius: 50%;
        }

        .landing-plan-card.featured ul li::before {
            background: #dbeafe;
            color: #2563eb;
        }

        .landing-plan-card.coming-soon ul li::before {
            background: #f1f5f9;
            color: #94a3b8;
        }

        .landing-plan-card ul li.landing-plan-excluded {
            color: #94a3b8;
            opacity: 0.7;
        }

        .landing-plan-card ul li.landing-plan-excluded::before {
            content: '\2717';
            background: #f1f5f9;
            color: #94a3b8;
        }

        .landing-plan-card ul li strong {
            color: #0f172a;
            font-weight: 700;
        }

        .landing-plan-compute {
            margin: 0 0 4px;
            font-size: 0.8em;
            color: #475569;
            font-weight: 600;
        }

        .landing-plan-overflow {
            margin: 0 0 10px;
            font-size: 0.78em;
            color: #64748b;
        }

        .landing-plan-compute-note {
            margin: 0 0 10px;
            font-size: 0.78em;
            color: #64748b;
            font-style: italic;
        }

        .landing-plan-offer-line {
            margin: 0 0 6px;
            font-size: 0.85em;
            color: #059669;
        }

        .landing-plan-offer-line .landing-plan-offer-price {
            font-weight: 700;
        }

        .landing-plans-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 16px;
        }

        .landing-plans-nav-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid #e2e8f0;
            background: #fff;
            color: #475569;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.15s, background 0.15s, color 0.15s;
        }

        .landing-plans-nav-btn:hover:not(:disabled) {
            border-color: #3b82f6;
            background: #eff6ff;
            color: #2563eb;
        }

        .landing-plans-nav-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .landing-plans-dots {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .landing-plans-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: none;
            padding: 0;
            background: #cbd5e1;
            cursor: pointer;
            transition: background 0.2s, transform 0.2s;
        }

        .landing-plans-dot:hover {
            background: #94a3b8;
        }

        .landing-plans-dot.active {
            background: #3b82f6;
            transform: scale(1.2);
        }

        .landing-plans-compute-explanation {
            margin: 24px auto 0;
            max-width: 560px;
            font-size: 0.85em;
            color: #64748b;
            line-height: 1.5;
            text-align: center;
        }

        .landing-plan-btn {
            width: 100%;
            border: 1px solid #e2e8f0;
            background: #ffffff;
            color: #0f172a;
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 0.88em;
            font-weight: 650;
            cursor: pointer;
            text-align: center;
            transition: border-color 0.15s, background 0.15s, transform 0.1s;
            margin-top: auto;
        }

        .landing-plan-btn:hover {
            border-color: #cbd5e1;
            background: #f8fafc;
            transform: translateY(-1px);
        }

        .landing-plan-btn:active {
            transform: translateY(0);
        }

        .landing-plan-btn.primary {
            background: #0f172a;
            border-color: #0f172a;
            color: #ffffff;
        }

        .landing-plan-btn.primary:hover {
            background: #1e293b;
            border-color: #1e293b;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
        }

        /* ═══════ FINAL CTA ═══════ */
        .landing-final-cta {
            text-align: center;
            padding: 72px 0 88px;
            border-top: 1px solid #e2e8f0;
        }

        .landing-final-cta h2 {
            margin: 0 0 10px;
            font-size: clamp(1.5rem, 2.6vw, 2rem);
            font-weight: 780;
            letter-spacing: -0.025em;
            color: #0f172a;
            line-height: 1.15;
        }

        .landing-final-cta p {
            margin: 0 0 24px;
            font-size: 1em;
            color: #64748b;
            line-height: 1.6;
        }

        /* ─── Footer ─── */
        .landing-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 20px 28px;
            border-top: 1px solid #e2e8f0;
            background: #fafbfd;
        }

        .landing-footer-brand {
            font-size: 0.88em;
            font-weight: 700;
            color: #0f172a;
        }

        .landing-footer-copy {
            font-size: 0.82em;
            color: #94a3b8;
        }

        /* ═══════ RESPONSIVE ═══════ */
        @media (max-width: 1200px) {
            .landing-steps {
                grid-template-columns: repeat(2, 1fr);
            }

            .landing-compare-steps {
                grid-template-columns: repeat(3, 1fr);
            }
            
            /* Reset grid-column positioning for responsive layout */
            .landing-compare-step:nth-child(4),
            .landing-compare-step:nth-child(5) {
                grid-column: auto;
            }
        }

        @media (max-width: 1200px) {
            .landing-plan-card {
                min-width: 260px;
            }

            .landing-plan-card.featured {
                transform: scale(1.02);
            }
        }

        @media (max-width: 900px) {
            .landing-hero {
                padding: 36px 0 60px;
                min-height: auto;
            }

            .landing-hero-headline {
                text-align: center;
                margin-bottom: 32px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .landing-hero-title {
                max-width: 100%;
            }

            .landing-hero-body {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .landing-hero-content {
                max-width: 100%;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .landing-hero-subtitle {
                max-width: 100%;
            }

            .landing-hero-actions {
                justify-content: center;
            }

            .landing-hero-venues {
                justify-content: center;
            }

            .landing-mockup-window {
                max-width: 500px;
            }

            .landing-steps {
                grid-template-columns: 1fr;
                gap: 24px;
                max-width: 420px;
                margin-left: auto;
                margin-right: auto;
            }

            .landing-compare-steps {
                grid-template-columns: 1fr;
                gap: 24px;
                max-width: 420px;
                margin-left: auto;
                margin-right: auto;
            }
            
            /* Reset grid-column positioning for mobile */
            .landing-compare-step:nth-child(4),
            .landing-compare-step:nth-child(5) {
                grid-column: auto;
            }

            .landing-caps-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .landing-plans-scroll {
                margin-left: -18px;
                margin-right: -18px;
            }

            .landing-plans-grid {
                gap: 16px;
                padding-left: 18px;
                padding-right: 18px;
                scroll-padding-inline: 18px;
            }

            .landing-plan-card {
                min-width: 260px;
            }

            .landing-plan-card.featured {
                transform: scale(1);
            }

            .landing-plan-card.featured:hover {
                transform: scale(1);
            }

            .landing-compare-table {
                max-width: 100%;
            }

            .landing-main {
                padding: 0 18px 0;
            }
        }

        @media (max-width: 520px) {
            .landing-topbar {
                padding: 0 16px;
            }

            .landing-topbar-link {
                display: none;
            }

            .landing-mockup-body {
                grid-template-columns: 1fr;
            }

            .landing-mockup-sidebar {
                display: none;
            }

            .landing-hero-title {
                font-size: 1.9rem;
            }

            .landing-caps-grid {
                grid-template-columns: 1fr;
            }

            .landing-compare-header,
            .landing-compare-row {
                grid-template-columns: 1fr 70px 70px;
            }

            .landing-compare-steps {
                grid-template-columns: 1fr;
                gap: 24px;
                max-width: 420px;
                margin-left: auto;
                margin-right: auto;
            }

            .landing-compare-step:nth-child(1),
            .landing-compare-step:nth-child(2),
            .landing-compare-step:nth-child(3),
            .landing-compare-step:nth-child(4),
            .landing-compare-step:nth-child(5) {
                grid-column: auto;
            }

            .landing-compare-footer {
                max-width: 100%;
                padding: 0 16px;
                margin-top: 48px;
            }

            .landing-compare-insight {
                font-size: 0.92em;
                margin-bottom: 24px;
            }

            .landing-compare-reposition {
                font-size: 1.1em;
            }

            .landing-hero-venues {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        .menu-bar-center {
            display: flex;
            align-items: center;
            flex: 1;
            justify-content: center;
            margin: 0 20px;
        }

        .menu-bar-center.selectors-hidden-on-empty {
            display: none;
        }

        .menu-bar.opening-screen-mode .menu-bar-center {
            display: none;
        }

        .menu-bar.opening-screen-mode .menu-bar-left {
            gap: 0;
        }

        .menu-bar.opening-screen-mode {
            justify-content: space-between;
        }

        /* Conference context: compact chip-style control in top bar */
        .conference-context-inline {
            position: relative;
            display: flex;
            align-items: center;
            margin-right: 12px;
        }
        .conference-context-inline.conference-context-hidden {
            display: none;
        }
        .conference-context-summary {
            appearance: none;
            border: 1px solid #d7dde6;
            background: #ffffff;
            padding: 3px 8px;
            height: 28px;
            max-width: 320px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
            overflow: hidden;
        }
        .conference-context-summary:hover {
            border-color: #c1cad7;
            background: #f8fafc;
        }
        .conference-context-summary:focus-visible {
            outline: none;
            border-color: #1d4ed8;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
        }
        .conference-context-summary.is-empty {
            border-style: dashed;
            border-color: #cfd8e3;
            background: #f8fafc;
        }
        .conference-context-summary .context-chip {
            display: inline-flex;
            align-items: center;
            min-width: 0;
            max-width: 160px;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 600;
            line-height: 1.15;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #0f172a;
            background: #eef2f7;
        }
        .conference-context-summary .context-chip.conference {
            max-width: 170px;
            background: #e7eefc;
            color: #1e3a8a;
        }
        .conference-context-summary .context-chip.track {
            max-width: 110px;
            background: #eef7f0;
            color: #14532d;
        }
        .conference-context-summary .context-chip.cycle {
            max-width: 120px;
            background: #f6f1ff;
            color: #5b21b6;
        }
        .conference-context-summary .context-chip.empty {
            max-width: 220px;
            background: transparent;
            color: #475569;
            font-weight: 550;
            padding-left: 2px;
            padding-right: 2px;
        }
        .conference-context-popover {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            margin-top: 8px;
            min-width: 360px;
            padding: 10px;
            background: #fff;
            border: 1px solid #ccd6e3;
            border-radius: 12px;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
            z-index: 1002;
        }
        .conference-context-popover.open {
            display: block;
        }
        /* All 3 on one line, no wrap */
        .conference-context-popover-inner {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            gap: 8px;
            padding: 6px;
            border: 1px solid #d7e0eb;
            border-radius: 10px;
            background: #f8fafd;
        }
        .conference-context-popover-inner .conference-selector-inline {
            position: relative;
            flex: 1 1 auto;
            min-width: 0;
            max-width: 200px;
        }
        .conference-context-popover-inner .conference-select-dropdown-inline {
            width: 100%;
            min-width: 0;
            height: 30px;
            padding: 5px 10px;
            border: 1px solid #d3dbe6;
            border-radius: 8px;
            font-size: 0.8125em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: #fff;
            color: #111827;
        }
        .conference-context-popover-inner .track-select-inline,
        .conference-context-popover-inner .cycle-select-inline {
            flex: 0 1 auto;
            min-width: 0;
            max-width: 180px;
            height: 30px;
            padding: 5px 28px 5px 10px;
            border: 1px solid #d3dbe6;
            border-radius: 8px;
            font-size: 0.8125em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: #fff;
            color: #111827;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%234b5563' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 9px center;
            background-size: 10px;
        }
        .conference-context-popover-inner .track-select-inline {
            max-width: 140px;
        }
        .conference-context-popover-inner .cycle-select-inline {
            max-width: 200px;
        }
        .conference-context-popover-inner .conference-select-dropdown-inline:hover,
        .conference-context-popover-inner .track-select-inline:hover,
        .conference-context-popover-inner .cycle-select-inline:hover {
            border-color: #b9c5d6;
        }
        .conference-context-popover-inner .conference-select-dropdown-inline:focus,
        .conference-context-popover-inner .track-select-inline:focus,
        .conference-context-popover-inner .cycle-select-inline:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
        }
        .conference-context-popover-inner .track-select-inline:disabled,
        .conference-context-popover-inner .cycle-select-inline:disabled,
        .conference-context-popover-inner .conference-select-dropdown-inline:disabled {
            color: #8b96a7;
            background-color: #f1f5f9;
            border-color: #d7dee8;
            cursor: not-allowed;
        }
        .conference-context-popover-inner .track-select-inline option:disabled,
        .conference-context-popover-inner .cycle-select-inline option:disabled {
            color: #8b96a7;
        }

        .menu-bar-right {
            display: flex;
            align-items: center;
            margin-left: auto;
        }

        /* Conference context: conference input inside the block */
        .conference-context-controls .conference-selector-inline {
            position: relative;
            min-width: 110px;
            max-width: 160px;
        }

        .conference-search-wrapper-inline {
            position: relative;
        }

        .conference-select-dropdown-inline {
            width: 100%;
            padding: 5px 10px;
            border: none;
            border-radius: 6px;
            font-size: 0.8125em;
            background: rgba(255, 255, 255, 0.7);
            cursor: text;
            transition: background 0.15s ease, box-shadow 0.15s ease;
            box-sizing: border-box;
            height: 26px;
            color: #1a1d21;
            font-weight: 500;
        }

        .conference-select-dropdown-inline:hover {
            background: #fff;
        }

        .conference-select-dropdown-inline:focus {
            outline: none;
            background: #fff;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
        }

        .conference-select-dropdown-inline::placeholder {
            color: #8b9199;
            font-weight: 400;
        }

        .conference-selector-inline .conference-search-results {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #e2e5ea;
            border-radius: 8px;
            max-height: 240px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
            margin-top: 2px;
        }

        /* Divider between conference and track (inside .conference-context-controls) */
        .conference-context-controls .conference-selector-inline {
            padding-right: 8px;
            border-right: 1px solid #e2e5ea;
            margin-right: 6px;
        }

        /* Track and Cycle selects inside conference block */
        .conference-context-controls .track-select-inline,
        .conference-context-controls .cycle-select-inline {
            padding: 5px 28px 5px 10px;
            border: none;
            border-radius: 6px;
            font-size: 0.8125em;
            background: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            transition: background 0.15s ease, box-shadow 0.15s ease;
            box-sizing: border-box;
            height: 26px;
            min-width: 100px;
            max-width: 160px;
            color: #1a1d21;
            font-weight: 500;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
            background-size: 10px;
        }

        .conference-context-controls .track-select-inline:hover,
        .conference-context-controls .cycle-select-inline:hover {
            background-color: #fff;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        }

        .conference-context-controls .track-select-inline:focus,
        .conference-context-controls .cycle-select-inline:focus {
            outline: none;
            background-color: #fff;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        }

        .track-select-inline option,
        .cycle-select-inline option {
            padding: 8px;
            background: white;
        }

        .track-select-inline::after,
        .cycle-select-inline::after {
            display: none !important;
        }
        .cycle-select-inline::-webkit-validation-bubble-icon,
        .cycle-select-inline::-webkit-validation-bubble-icon-block {
            display: none !important;
        }

        /* Legacy: track/cycle when not inside conference block (e.g. modals) */
        .track-select-inline,
        .cycle-select-inline {
            padding: 6px 32px 6px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 0.875em;
            background: #fff;
            cursor: pointer;
            box-sizing: border-box;
            height: 28px;
            min-width: 120px;
            color: #333;
            font-weight: 500;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 12px;
        }
        .conference-context-controls .track-select-inline,
        .conference-context-controls .cycle-select-inline {
            min-width: 100px;
            max-width: 160px;
        }

        .user-info-section {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.15s;
            position: relative;
        }

        .user-info-section:hover {
            background: #f0f0f0;
        }

        .user-info-section.logged-out {
            cursor: pointer;
        }

        .user-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid #e0e0e0;
        }

        .user-name {
            font-size: 0.85em;
            color: #333;
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .login-button {
            font-size: 0.85em;
            color: #333;
            padding: 4px 8px;
            border-radius: 3px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .login-button:hover {
            background: #f0f0f0;
        }

        .user-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            min-width: 200px;
            padding: 4px 0;
            display: none;
            z-index: 1000;
            margin-top: 2px;
        }

        .user-info-section.active .user-dropdown {
            display: block;
        }

        .user-dropdown-item {
            padding: 8px 16px;
            font-size: 0.9em;
            color: #333;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .user-dropdown-item:hover {
            background: #f0f4ff;
        }

        .user-dropdown-header {
            padding: 8px 16px;
            border-bottom: 1px solid #e0e0e0;
            font-weight: 600;
            font-size: 0.9em;
            color: #333;
        }

        .user-dropdown-plan {
            padding: 8px 16px 10px;
            border-bottom: 1px solid #e0e0e0;
            font-size: 0.85em;
            color: #555;
        }
        .user-dropdown-plan-name {
            display: block;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }
        .user-dropdown-progress-line {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.82em;
            color: #64748b;
        }
        .user-dropdown-progress-gauge {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center/contain no-repeat;
        }
        .user-dropdown-progress-text {
            flex: 1;
        }

        .user-dropdown-separator {
            height: 1px;
            background: #e0e0e0;
            margin: 4px 0;
        }

        /* Billing & Account wizard */
        .billing-wizard-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.45);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10001;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        .billing-wizard-overlay.active {
            display: flex;
            opacity: 1;
        }
        .billing-wizard {
            background: #fff;
            border-radius: 16px;
            box-shadow:
                0 0 0 1px rgba(15, 23, 42, 0.06),
                0 24px 48px rgba(15, 23, 42, 0.12);
            max-width: 480px;
            width: calc(100% - 32px);
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transform: scale(0.96);
            transition: transform 0.2s ease;
        }
        .billing-wizard-overlay.active .billing-wizard {
            transform: scale(1);
        }
        .billing-wizard-header {
            padding: 20px 24px;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .billing-wizard-title {
            margin: 0;
            font-size: 1.25em;
            font-weight: 700;
            color: #0f172a;
            letter-spacing: -0.02em;
        }
        .billing-wizard-close {
            background: none;
            border: none;
            font-size: 1.5em;
            line-height: 1;
            color: #64748b;
            cursor: pointer;
            padding: 4px;
            margin: -4px -4px -4px 8px;
            border-radius: 6px;
        }
        .billing-wizard-close:hover {
            color: #0f172a;
            background: #f1f5f9;
        }
        .billing-wizard-body {
            padding: 24px 24px 28px;
            overflow-y: auto;
        }
        .billing-wizard-loading {
            text-align: center;
            color: #64748b;
            font-size: 0.9em;
            padding: 12px 0 8px;
        }
        .billing-wizard-section {
            margin-bottom: 28px;
        }
        .billing-wizard-section:last-child {
            margin-bottom: 0;
        }
        .billing-wizard-section-title {
            margin: 0 0 10px;
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #64748b;
        }
        .billing-wizard-usage-card,
        .billing-wizard-plan-card,
        .billing-wizard-preferences-card {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px 20px 18px;
        }
        .billing-wizard-usage-head {
            margin-bottom: 6px;
        }
        .billing-wizard-plan-name {
            display: block;
            font-weight: 600;
            color: #0f172a;
            font-size: 1.05rem;
            letter-spacing: -0.02em;
        }
        .billing-wizard-progress-text {
            margin: 0 0 12px;
            font-size: 0.875rem;
            line-height: 1.45;
            color: #475569;
        }
        .billing-wizard-progress-track {
            height: 8px;
            border-radius: 999px;
            background: #e2e8f0;
            overflow: hidden;
            margin-bottom: 16px;
        }
        .billing-wizard-progress-fill {
            height: 100%;
            width: 0%;
            border-radius: 999px;
            background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
            transition: width 0.35s ease, background 0.2s ease;
        }
        .billing-wizard-progress-track--high .billing-wizard-progress-fill {
            background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
        }
        .billing-wizard-progress-track--over .billing-wizard-progress-fill {
            background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
        }
        .billing-wizard-usage-figures {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px 20px;
        }
        @media (max-width: 400px) {
            .billing-wizard-usage-figures {
                grid-template-columns: 1fr;
            }
        }
        .billing-wizard-usage-figure {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .billing-wizard-usage-figure-label {
            font-size: 0.75rem;
            font-weight: 500;
            color: #64748b;
            letter-spacing: 0.02em;
        }
        .billing-wizard-usage-figure-value {
            font-size: 0.9375rem;
            font-weight: 600;
            color: #0f172a;
            font-variant-numeric: tabular-nums;
        }
        .billing-wizard-usage-note {
            margin: 14px 0 0;
            font-size: 0.8125rem;
            line-height: 1.45;
            color: #64748b;
        }
        .billing-wizard-load-message {
            margin: 0 0 14px;
            font-size: 0.9em;
            color: #475569;
            line-height: 1.45;
        }
        .billing-wizard-plan-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px 14px;
            margin-bottom: 16px;
        }
        .billing-wizard-plan-heading {
            font-size: 1rem;
            font-weight: 600;
            color: #0f172a;
            letter-spacing: -0.02em;
        }
        .billing-wizard-status-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            background: #ecfdf5;
            color: #047857;
            border: 1px solid #a7f3d0;
        }
        .billing-wizard-status-badge--warn {
            background: #fffbeb;
            color: #b45309;
            border-color: #fde68a;
        }
        .billing-wizard-status-badge--bad {
            background: #fef2f2;
            color: #b91c1c;
            border-color: #fecaca;
        }
        .billing-wizard-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-end;
        }
        .billing-wizard-btn {
            padding: 10px 18px;
            border-radius: 10px;
            font-size: 0.9em;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid #e2e8f0;
            background: #fff;
            color: #0f172a;
            transition: border-color 0.15s, background 0.15s;
        }
        .billing-wizard-btn:hover {
            border-color: #cbd5e1;
            background: #f8fafc;
        }
        .billing-wizard-btn.primary {
            background: #3b82f6;
            border-color: #3b82f6;
            color: #fff;
        }
        .billing-wizard-btn.primary:hover {
            background: #2563eb;
            border-color: #2563eb;
        }
        .billing-wizard-error {
            margin: 10px 0 0;
            font-size: 0.85em;
            color: #dc2626;
        }
        .billing-wizard-toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .billing-wizard-toggle-label {
            font-weight: 600;
            color: #0f172a;
            font-size: 0.9em;
            cursor: pointer;
        }
        .billing-wizard-toggle {
            flex-shrink: 0;
            width: 44px;
            height: 24px;
            border-radius: 12px;
            background: #cbd5e1;
            border: none;
            cursor: pointer;
            padding: 0;
            position: relative;
            transition: background 0.2s ease;
        }
        .billing-wizard-toggle[aria-checked="true"] {
            background: #3b82f6;
        }
        .billing-wizard-toggle-slider {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            transition: transform 0.2s ease;
        }
        .billing-wizard-toggle[aria-checked="true"] .billing-wizard-toggle-slider {
            transform: translateX(20px);
        }
        .billing-wizard-toggle-helper {
            margin: 10px 0 0;
            font-size: 0.85em;
            color: #64748b;
            line-height: 1.4;
        }
        .billing-wizard-overage-block {
            margin-top: 18px;
            padding-top: 18px;
            border-top: 1px solid #e2e8f0;
        }
        .billing-wizard-overage-label {
            display: block;
            font-size: 0.8125rem;
            font-weight: 600;
            color: #0f172a;
            margin-bottom: 6px;
        }
        .billing-wizard-overage-explainer {
            margin: 0 0 12px;
            font-size: 0.8125rem;
            line-height: 1.45;
            color: #64748b;
        }
        .billing-wizard-overage-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        .billing-wizard-overage-input {
            flex: 1 1 140px;
            min-width: 0;
            padding: 10px 12px;
            border: 1px solid #cbd5e1;
            border-radius: 10px;
            font-size: 0.9rem;
            font-variant-numeric: tabular-nums;
            color: #0f172a;
            background: #fff;
        }
        .billing-wizard-overage-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }
        .billing-wizard-overage-input:disabled {
            background: #f1f5f9;
            color: #94a3b8;
            cursor: not-allowed;
        }
        .billing-wizard-overage-save {
            flex-shrink: 0;
        }
        .billing-wizard-overage-clear {
            display: block;
            margin: 0 0 10px;
            padding: 0;
            border: none;
            background: none;
            font-size: 0.8125rem;
            font-weight: 600;
            color: #3b82f6;
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .billing-wizard-overage-clear:hover {
            color: #2563eb;
        }
        .billing-wizard-overage-clear:disabled {
            color: #94a3b8;
            cursor: not-allowed;
            text-decoration: none;
        }
        .billing-wizard-overage-hint {
            margin: 0;
            font-size: 0.8125rem;
            line-height: 1.45;
            color: #475569;
        }
        .billing-wizard-overage-error {
            margin: 8px 0 0;
            font-size: 0.8125rem;
            line-height: 1.4;
            color: #dc2626;
        }

        /* Login Wizard Modal */
        .login-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
        }

        .login-modal-overlay.active {
            display: flex;
        }

        .login-modal {
            background: white;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            animation: modalSlideIn 0.2s ease-out;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .login-modal-header {
            padding: 24px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .login-modal-header h3 {
            margin: 0;
            font-size: 1.2em;
            color: #333;
        }

        .login-modal-tabs {
            display: flex;
            gap: 0;
            background: #f5f5f5;
            border-radius: 8px;
            padding: 4px;
        }

        .login-modal-tab {
            padding: 8px 20px;
            border: none;
            background: transparent;
            color: #666;
            font-size: 0.95em;
            font-weight: 600;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.2s;
        }

        .login-modal-tab:hover {
            color: #333;
            background: rgba(0, 0, 0, 0.05);
        }

        .login-modal-tab.active {
            background: #ffffff;
            color: #0f172a;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .login-modal-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #999;
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: background 0.15s;
        }

        .login-modal-close:hover {
            background: #f0f0f0;
        }

        .login-modal-body {
            padding: 24px;
        }

        .login-step {
            display: none;
        }

        .login-step.active {
            display: block;
        }

        .login-step-title {
            font-size: 1.1em;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }

        .login-step-description {
            color: #666;
            font-size: 0.9em;
            margin-bottom: 24px;
            line-height: 1.5;
        }

        .github-login-button {
            width: 100%;
            padding: 12px 24px;
            background: #24292e;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: background 0.2s;
            margin-bottom: 16px;
        }

        .github-login-button:hover {
            background: #1a1e22;
        }

        .github-login-button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        /* Login Tabs */
        .login-tabs {
            display: flex;
            border-bottom: 2px solid #e0e0e0;
            margin-bottom: 20px;
        }

        .login-tab {
            flex: 1;
            padding: 12px 20px;
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            cursor: pointer;
            font-size: 0.95em;
            font-weight: 500;
            color: #666;
            transition: all 0.2s;
        }

        .login-tab:hover {
            color: #333;
            background: #f5f5f5;
        }

        .login-tab.active {
            color: #0066cc;
            border-bottom-color: #0066cc;
            font-weight: 600;
        }

        .login-tab-content {
            display: none;
        }

        .login-tab-content.active {
            display: block;
        }

        /* Login Form */
        .login-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .form-group label {
            font-size: 0.9em;
            font-weight: 500;
            color: #333;
        }

        .form-group input {
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.95em;
            transition: border-color 0.2s;
        }

        .form-group input:focus {
            outline: none;
            border-color: #0066cc;
            box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
        }

        .login-submit-button {
            padding: 12px 24px;
            background: #0066cc;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1em;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
            margin-top: 8px;
        }

        .login-submit-button:hover {
            background: #0052a3;
        }

        .login-submit-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .login-form-footer {
            text-align: center;
            margin-top: 12px;
            font-size: 0.9em;
            color: #666;
        }

        .login-form-footer a {
            color: #0066cc;
            text-decoration: none;
            font-weight: 500;
        }

        .login-form-footer a:hover {
            text-decoration: underline;
        }

        .login-loading {
            text-align: center;
            padding: 24px;
        }

        .login-loading-spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #24292e;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 16px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .login-error {
            background: #fee;
            border: 1px solid #fcc;
            border-radius: 4px;
            padding: 12px;
            color: #c33;
            font-size: 0.9em;
            margin-bottom: 16px;
            line-height: 1.6;
        }

        .login-error strong {
            display: block;
            margin-bottom: 4px;
        }

        .login-error ol {
            margin: 8px 0;
            padding-left: 20px;
        }

        .login-error li {
            margin: 4px 0;
        }

        .error-message {
            padding: 10px 12px;
            background: #fee;
            border: 1px solid #fcc;
            border-radius: 6px;
            color: #c33;
            font-size: 0.9em;
            margin-top: 8px;
        }

        .success-message {
            padding: 10px 12px;
            background: #efe;
            border: 1px solid #cfc;
            border-radius: 6px;
            color: #3c3;
            font-size: 0.9em;
            margin-top: 8px;
        }

        /* Login Divider */
        .login-divider {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 24px 0;
        }

        .login-divider::before,
        .login-divider::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid #e0e0e0;
        }

        .login-divider span {
            padding: 0 16px;
            color: #999;
            font-size: 0.9em;
        }

        .login-error small {
            display: block;
            margin-top: 8px;
            opacity: 0.8;
        }

        .login-success {
            background: #efe;
            border: 1px solid #cfc;
            border-radius: 4px;
            padding: 12px;
            color: #3c3;
            font-size: 0.9em;
            margin-bottom: 16px;
        }

        /* Three-Pane Layout with Timeline Panel — flex to fill space below menu, no gap at bottom */
        .workspace-container {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            max-width: 100%;
            overflow: hidden;
        }

        .workspace-top-row {
            display: flex;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            width: 100%;
            max-width: 100%;
        }

        /* Left Panel - Project Management */
        .left-panel {
            width: 280px;
            min-width: 200px;
            max-width: 600px;
            background: #f6f8fb;
            border-right: 1px solid #dbe2ea;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
        }
        
        .panel-resize-handle {
            width: 4px;
            background: #e0e0e0;
            cursor: col-resize;
            flex-shrink: 0;
            position: relative;
            transition: background 0.2s;
        }
        
        .panel-resize-handle:hover {
            background: #667eea;
        }
        
        .panel-resize-handle:active {
            background: #667eea;
        }
        
        .panel-resize-handle::before {
            content: '';
            position: absolute;
            left: -2px;
            right: -2px;
            top: 0;
            bottom: 0;
            cursor: col-resize;
        }

        .left-panel-header {
            padding: 20px;
            border-bottom: 1px solid #e0e0e0;
            background: #fafafa;
        }

        .left-panel-header h1 {
            font-size: 1.5em;
            font-weight: 700;
            color: #333;
            margin-bottom: 5px;
        }

        .left-panel-header .subtitle {
            font-size: 0.85em;
            color: #666;
        }

        .left-panel-content {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        /* Projects Section */
        .projects-section {
            margin-bottom: 0;
            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            padding: 0;
        }

        .section-title {
            font-size: 0.8em;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
            padding: 0 5px;
        }

        .project-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 7px 10px;
            background: #ffffff;
            border: 1px solid #d9e2ee;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 0;
        }

        .project-header:hover {
            background: #eff4ff;
            border-color: #9db4e7;
            box-shadow: 0 0 0 2px rgba(49, 89, 191, 0.08);
        }

        .project-header-content {
            flex: 1;
            min-width: 0;
        }

        .project-header-title {
            font-weight: 600;
            color: #0f172a;
            font-size: 0.92em;
            margin-bottom: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .project-header-meta {
            display: none;
        }

        .project-sync-controls {
            margin-top: 4px;
            padding-top: 4px;
            border-top: 1px dashed #e0e0e0;
            font-size: 0.72rem;
            color: #4b5563;
        }

        .project-sync-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 6px;
            margin-bottom: 2px;
        }

        .project-sync-repo {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .project-sync-buttons {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
        }

        .project-sync-btn {
            border: 1px solid #d1d5db;
            background: #f9fafb;
            border-radius: 4px;
            padding: 4px 8px;           /* slightly larger click target */
            font-size: 0.8rem;          /* make icon text a bit bigger */
            min-width: 26px;
            min-height: 24px;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .project-sync-btn:hover {
            background: #e5e7eb;
        }

        .project-sync-settings {
            background: #eef2ff;
            border-color: #c4b5fd;
        }

        .project-sync-settings:hover {
            background: #e0e7ff;
        }

        .project-sync-mode {
            font-size: 0.7rem;
            color: #6b7280;
        }

        .project-header-placeholder {
            font-size: 0.85em;
            color: #999;
            font-style: italic;
        }

        .project-toggle-icon {
            font-size: 0.95em;
            color: #4b5563;
            transition: transform 0.2s;
            flex-shrink: 0;
            margin-left: 8px;
        }

        .project-toggle-icon.expanded {
            transform: rotate(180deg);
        }

        .projects-expandable {
            display: none;
            animation: slideDown 0.2s ease-out;
            gap: 6px;
            margin-top: 6px;
        }

        .projects-expandable.show {
            display: flex;
            flex-direction: column;
        }

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

        .project-search-box {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d5dfeb;
            border-radius: 9px;
            font-size: 0.83em;
            margin-bottom: 0;
            background: #f8fafc;
            transition: all 0.2s;
            color: #1e293b;
        }

        .project-search-box:focus {
            outline: none;
            border-color: #6b8ed7;
            background: white;
            box-shadow: 0 0 0 3px rgba(75, 115, 205, 0.14);
        }

        .project-search-box::placeholder {
            color: #94a3b8;
        }

        .projects-list {
            max-height: 260px;
            overflow-y: auto;
            border: 1px solid #dbe3ef;
            border-radius: 8px;
            background: #ffffff;
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
        }

        .projects-list::-webkit-scrollbar {
            width: 4px;
        }

        .projects-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .projects-list::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.38);
            border-radius: 999px;
        }

        .projects-list::-webkit-scrollbar-thumb:hover {
            background: rgba(100, 116, 139, 0.58);
        }

        .project-item {
            padding: 8px 10px;
            cursor: pointer;
            transition: all 0.15s;
            border-bottom: 1px solid #edf2f7;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
        }

        .project-item:last-child {
            border-bottom: none;
        }

        .project-item:hover {
            background: #f8fbff;
        }

        .project-item.active {
            background: linear-gradient(90deg, #eaf1ff 0%, #f5f8ff 100%);
            border-left: 3px solid #3159bf;
        }

        .project-item-left {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .project-name {
            font-weight: 600;
            color: #0f172a;
            font-size: 0.82em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .project-meta {
            font-size: 0.72em;
            color: #64748b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .project-item-right {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }

        .project-delete-btn {
            background: transparent;
            border: none;
            color: #94a3b8;
            font-size: 1.2em;
            line-height: 1;
            padding: 2px 6px;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.15s;
            opacity: 0;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .project-item:hover .project-delete-btn {
            opacity: 1;
        }

        .project-delete-btn:hover {
            background: #fee2e2;
            color: #b91c1c;
            opacity: 1;
        }

        .project-status {
            display: inline-block;
            padding: 2px 7px;
            border-radius: 999px;
            font-size: 0.67em;
            font-weight: 600;
            border: 1px solid transparent;
            text-transform: capitalize;
        }

        .status-draft {
            background: #fff7e5;
            color: #8a5a00;
            border-color: #ffe2a8;
        }

        .status-active {
            background: #e7f8ed;
            color: #166534;
            border-color: #bde7ca;
        }

        .status-submitted {
            background: #e7f1ff;
            color: #1e3a8a;
            border-color: #c7dcff;
        }

        .new-project-btn {
            width: 100%;
            padding: 8px 10px;
            background: #1e3a8a;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 0;
            transition: transform 0.16s, box-shadow 0.16s, filter 0.16s, background 0.16s;
            box-shadow: none;
            font-size: 0.83em;
        }

        .new-project-btn:hover {
            transform: translateY(-1px);
            background: #1d4ed8;
            box-shadow: 0 3px 8px rgba(30, 58, 138, 0.2);
        }

        /* File Explorer */
        .file-explorer {
            margin-top: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow: hidden;
            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        .file-explorer::before {
            display: none;
            content: none;
        }

        .file-tree {
            font-size: 0.83em;
            flex: 1;
            overflow-y: auto;
            background: transparent;
            padding: 2px 0;
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.42) transparent;
        }

        .file-tree::-webkit-scrollbar {
            width: 4px;
        }

        .file-tree::-webkit-scrollbar-track {
            background: transparent;
        }

        .file-tree::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.35);
            border-radius: 999px;
        }

        .file-tree::-webkit-scrollbar-thumb:hover {
            background: rgba(100, 116, 139, 0.56);
        }

        .file-tree-empty {
            padding: 18px 12px;
            text-align: center;
            color: #94a3b8;
            font-size: 0.76em;
        }

        .file-tree-empty-icon {
            display: none;
        }

        .file-item {
            padding: 4px 8px;
            cursor: pointer;
            border-radius: 7px;
            display: flex;
            align-items: center;
            gap: 6px;
            color: #334155;
            transition: all 0.15s;
            margin: 1px 4px;
            font-size: 0.82em;
            position: relative;
        }

        .file-item:hover {
            background: #f3f7ff;
        }
        
        /* Out of flex flow so hidden action buttons do not reserve width (was truncating names early). */
        .file-item-actions {
            position: absolute;
            right: 2px;
            top: 0;
            bottom: 0;
            display: flex;
            gap: 2px;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            padding-left: 14px;
            border-radius: 4px;
        }
        
        .file-item:hover .file-item-actions {
            opacity: 1;
            pointer-events: auto;
            background: linear-gradient(90deg, rgba(243, 247, 255, 0), #f3f7ff 12px);
        }

        .file-item.active:hover .file-item-actions {
            background: linear-gradient(90deg, rgba(234, 241, 255, 0), #eaf1ff 12px);
        }
        
        .file-item-action-btn {
            background: none;
            border: none;
            padding: 3px;
            cursor: pointer;
            color: #999;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            transition: all 0.15s;
        }
        
        .file-item-action-btn:hover {
            background: #e8eef9;
            color: #334155;
        }
        
        .file-item-action-btn svg {
            display: block;
        }
        
        .file-tree-new-btn {
            color: #667eea !important;
        }
        
        .file-tree-new-btn:hover {
            background: #eaf1ff !important;
            color: #3159bf !important;
        }

        .file-item.active {
            background: #eaf1ff;
            color: #3159bf;
            font-weight: 500;
        }
        
        .file-item.folder-item {
            font-weight: 500;
        }
        
        .folder-chevron {
            width: 12px;
            text-align: center;
            flex-shrink: 0;
            font-size: 0.65em;
            color: #64748b;
            display: inline-block;
            user-select: none;
        }
        
        .folder-children {
            display: block;
        }

        .file-icon {
            width: 16px;
            text-align: center;
            flex-shrink: 0;
            color: #475569;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .file-icon svg {
            width: 14px;
            height: 14px;
            display: block;
        }

        .file-name {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .file-tree-project-root {
            margin-bottom: 0;
        }
        
        .file-tree-project-header {
            position: relative;
            padding: 6px 8px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 600;
            color: #0f172a;
            font-size: 0.82em;
            border-bottom: none;
            margin-bottom: 2px;
        }
        
        .file-tree-project-header .file-icon {
            width: 16px;
            text-align: center;
            flex-shrink: 0;
        }
        
        .file-tree-project-header .project-root-name {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .file-tree-actions {
            position: absolute;
            right: 4px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            gap: 4px;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            padding-left: 16px;
            border-radius: 4px;
        }
        
        .file-tree-project-header:hover .file-tree-actions {
            opacity: 1;
            pointer-events: auto;
            background: linear-gradient(90deg, rgba(246, 248, 251, 0), #f6f8fb 14px);
        }
        
        .file-tree-action-btn {
            background: none;
            border: none;
            padding: 4px;
            cursor: pointer;
            color: #999;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            transition: all 0.15s;
        }
        
        .file-tree-action-btn:hover {
            background: #f0f0f0;
            color: #666;
        }
        
        .file-tree-action-btn svg {
            display: block;
        }

        /* Git Sync Status - Simple and clear */
        .git-sync-section {
            margin-top: auto;
            padding: 0;
            border-top: 1px solid #e0e0e0;
            flex-shrink: 0;
            background: #f9f9f9;
        }
        
        .git-sync-status {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            font-size: 0.85em;
            min-height: 32px;
        }
        
        .git-push-now-btn {
            padding: 4px 12px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 0.85em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        
        .git-push-now-btn:hover:not(:disabled) {
            background: #5568d3;
        }
        
        .git-push-now-btn:active:not(:disabled) {
            background: #4a5bc4;
        }
        
        .git-push-now-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            opacity: 0.7;
        }
        
        .file-change-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-left: 6px;
            flex-shrink: 0;
            vertical-align: middle;
        }
        
        .file-change-modified {
            background: #ffc107;
        }
        
        .file-change-added {
            background: #28a745;
        }
        
        .file-change-deleted {
            background: #dc3545;
        }
        
        .file-change-renamed {
            background: #17a2b8;
        }

        /* Integrations */
        .integrations-section {
            margin-top: 0;
            padding: 8px 2px 0 2px;
            flex-shrink: 0;
            border: none;
            border-top: 1px solid #e3e8ef;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        .integration-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 2px;
            font-size: 0.78em;
            gap: 6px;
            color: #334155;
        }

        .integration-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1em;
        }

        .integration-icon svg {
            width: 100%;
            height: 100%;
            fill: currentColor;
        }

        .integration-status {
            padding: 2px 7px;
            border-radius: 999px;
            font-size: 0.68em;
            font-weight: 600;
            border: 1px solid transparent;
        }

        .status-connected {
            background: #e7f8ed;
            color: #166534;
            border-color: #bde7ca;
        }

        .status-disconnected {
            background: #fef2f2;
            color: #991b1b;
            border-color: #fecaca;
        }

        /* Middle Panel - Active Workspace */
        .middle-panel {
            flex: 1 1 auto;
            min-height: 0;
            min-width: 0;
            max-width: 100%;
            background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .workspace-tabs {
            display: flex;
            flex-shrink: 0;
            background: #fafafa;
            border-bottom: 1px solid #e0e0e0;
            overflow-x: auto;
            padding: 0 10px;
        }

        .workspace-tab {
            padding: 12px 20px 12px 20px;
            border: none;
            background: transparent;
            border-bottom: 2px solid transparent;
            cursor: pointer;
            font-size: 0.75em;
            color: #666;
            white-space: nowrap;
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .workspace-tab:hover {
            background: #f0f0f0;
        }

        .workspace-tab.active {
            color: #6b7fd7;
            border-bottom-color: #8b9bd4;
            border-bottom-width: 2px;
            font-weight: 600;
            background: rgba(248, 249, 255, 0.6);
        }

        .workspace-tab .unsaved-indicator {
            width: 6px;
            height: 6px;
            background: #ff6b6b;
            border-radius: 50%;
            display: inline-block;
            flex-shrink: 0;
        }

        .workspace-tab-close {
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            cursor: pointer;
            opacity: 0.6;
            transition: all 0.2s;
            flex-shrink: 0;
            font-size: 0.85em;
            color: #666;
            margin-left: 4px;
        }

        .workspace-tab-close:hover {
            opacity: 1;
            background: rgba(0, 0, 0, 0.1);
            color: #333;
        }

        .workspace-tab.active .workspace-tab-close {
            color: #667eea;
        }

        .workspace-tab.active .workspace-tab-close:hover {
            background: rgba(102, 126, 234, 0.1);
        }

        .workspace-tab-context-menu {
            position: fixed;
            z-index: 10050;
            min-width: 188px;
            padding: 6px 0;
            margin: 0;
            background: #fff;
            border: 1px solid #d0d5dd;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
            display: none;
        }

        .workspace-tab-context-item {
            display: block;
            width: 100%;
            padding: 8px 16px;
            border: none;
            background: none;
            text-align: left;
            font-size: 0.8125rem;
            color: #1e293b;
            cursor: pointer;
            font-family: inherit;
        }

        .workspace-tab-context-item:hover:not(:disabled) {
            background: #f1f5f9;
        }

        .workspace-tab-context-item:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .workspace-tab-context-item.danger:hover:not(:disabled) {
            background: #fef2f2;
            color: #b91c1c;
        }

        .workspace-content {
            flex: 1 1 auto;
            min-height: 0;
            min-height: calc(100vh - 140px);
            height: 100%;
            overflow: hidden;
            padding: 0;
            min-width: 0;
            max-width: 100%;
            display: flex;
            flex-direction: column;
        }
        .workspace-content > .content-view.active {
            flex: 1 1 auto;
            min-height: 0;
            height: 100%;
            min-height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .workspace-content .step1-substep-content {
            flex: 1 1 auto;
            min-height: 0;
            min-height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .workspace-content #substep-1-1-premium-container {
            flex: 1 1 auto;
            min-height: 0;
            height: 100%;
            min-height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .workspace-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100%;
            height: 100%;
            padding: 24px 56px;
            overflow-y: auto;
            background: linear-gradient(180deg, #f8fafc 0%, #f3f4f6 100%);
            box-sizing: border-box;
        }

        .workspace-auth-empty {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 28px;
            box-sizing: border-box;
        }

        .workspace-auth-empty-card {
            width: 100%;
            max-width: 860px;
            background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
            border: 1px solid #d8e1ef;
            border-radius: 16px;
            padding: 28px;
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
            text-align: center;
        }

        .workspace-auth-empty-eyebrow {
            font-size: 0.76em;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #64748b;
            margin: 0 0 8px 0;
        }

        .workspace-auth-empty-title {
            font-size: 1.8em;
            font-weight: 700;
            color: #0f172a;
            margin: 0 0 10px 0;
        }

        .workspace-auth-empty-subtitle {
            font-size: 1em;
            line-height: 1.55;
            color: #475569;
            margin: 0 0 20px 0;
        }

        .workspace-auth-empty-actions {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 16px;
        }

        .workspace-auth-empty-btn {
            padding: 14px 14px;
            border-radius: 10px;
            border: 1px solid #d1d9e6;
            background: #ffffff;
            color: #1f2937;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
            text-align: left;
            min-height: 88px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
        }

        .workspace-auth-empty-btn:hover {
            background: #f8fafc;
            border-color: #bcc8dc;
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
        }

        .workspace-auth-empty-btn-title {
            font-size: 1em;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.3;
        }

        .workspace-auth-empty-btn-desc {
            font-size: 0.82em;
            font-weight: 500;
            color: #64748b;
            line-height: 1.4;
        }

        .workspace-auth-empty-btn.primary {
            border-color: #111827;
            background: #111827;
            color: #ffffff;
        }

        .workspace-auth-empty-btn.primary .workspace-auth-empty-btn-title {
            color: #ffffff;
        }

        .workspace-auth-empty-btn.primary .workspace-auth-empty-btn-desc {
            color: rgba(255, 255, 255, 0.82);
        }

        .workspace-auth-empty-btn.primary:hover {
            background: #0f172a;
            border-color: #0f172a;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.24);
        }

        .workspace-auth-recent {
            border-top: 1px solid #e6ebf3;
            padding-top: 14px;
            text-align: left;
        }

        .workspace-auth-recent-title {
            font-size: 0.8em;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #64748b;
            margin: 0 0 8px 0;
        }

        .workspace-auth-recent-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 6px;
        }

        .workspace-auth-recent-item {
            width: 100%;
            text-align: left;
            border: 1px solid #d9e3f2;
            background: #ffffff;
            border-radius: 8px;
            padding: 8px 10px;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
        }

        .workspace-auth-recent-item:hover {
            background: #f8fbff;
            border-color: #bdcfe9;
        }

        .workspace-auth-recent-item-name {
            display: block;
            font-size: 0.9em;
            font-weight: 600;
            color: #0f172a;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .workspace-auth-recent-item-meta {
            display: block;
            font-size: 0.78em;
            color: #64748b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .workspace-auth-recent-empty {
            font-size: 0.86em;
            color: #64748b;
            padding: 4px 2px;
        }

        @media (max-width: 980px) {
            .workspace-auth-empty-actions {
                grid-template-columns: 1fr;
            }
        }

        .workspace-empty-console {
            width: 100%;
            max-width: 1100px;
        }

        .workspace-empty-header {
            margin-bottom: 24px;
            text-align: center;
            max-width: 820px;
            margin-left: auto;
            margin-right: auto;
        }

        .workspace-empty-brand {
            font-size: clamp(2.4rem, 6vw, 4.1rem);
            font-weight: 800;
            letter-spacing: 0.03em;
            line-height: 1;
            margin: 0 0 10px 0;
            color: #0f172a;
            text-transform: none;
            background: linear-gradient(145deg, #111827 0%, #1f2937 55%, #334155 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
        }

        .workspace-empty-title {
            font-size: 2.2em;
            font-weight: 700;
            color: #0f172a;
            margin: 0 0 8px 0;
            line-height: 1.15;
            letter-spacing: -0.01em;
        }

        .workspace-empty-subtitle {
            font-size: 1em;
            color: #475569;
            margin: 0 auto;
            line-height: 1.55;
            max-width: 680px;
        }

        .workspace-empty-proof {
            margin-top: 10px;
            display: flex;
            gap: 8px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .workspace-empty-login-row {
            margin-top: 14px;
            display: flex;
            justify-content: center;
        }

        .workspace-empty-login-btn {
            border: 1px solid #111827;
            background: #111827;
            color: #ffffff;
            border-radius: 9px;
            padding: 9px 16px;
            font-size: 0.86em;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
        }

        .workspace-empty-login-btn:hover {
            background: #0f172a;
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(17, 24, 39, 0.2);
        }

        .workspace-empty-proof-item {
            font-size: 0.78em;
            font-weight: 600;
            color: #334155;
            background: #e2e8f0;
            border: 1px solid #cbd5e1;
            border-radius: 999px;
            padding: 5px 10px;
            white-space: nowrap;
        }

.workspace-empty-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px;
            align-items: start;
            max-width: 820px;
            margin: 0 auto;
        }

        .workspace-empty-left {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .workspace-empty-secondary-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .workspace-empty-action-panel {
            padding: 17px 18px;
            background: #ffffff;
            border: 1px solid #dbe3ee;
            border-radius: 12px;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
        }

        .workspace-empty-action-panel:hover {
            border-color: #bcd2ff;
            background: #f8fbff;
            transform: translateY(-1px);
            box-shadow: 0 10px 24px rgba(30, 64, 175, 0.09);
        }

        .workspace-empty-action-panel:active {
            transform: translateY(0);
        }

        .workspace-empty-action-panel.primary {
            background: linear-gradient(135deg, #1f2937, #111827);
            border-color: #111827;
            box-shadow: 0 12px 28px rgba(17, 24, 39, 0.24);
        }

        .workspace-empty-action-panel.primary:hover {
            border-color: #111827;
            background: linear-gradient(135deg, #111827, #0f172a);
            box-shadow: 0 16px 34px rgba(17, 24, 39, 0.28);
        }

        .workspace-empty-primary-form {
            margin-top: 12px;
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr;
            gap: 8px;
        }

        .workspace-empty-form-field {
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.32);
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border-radius: 8px;
            padding: 8px 28px 8px 10px;
            text-align: left;
            font-size: 0.85em;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(255,255,255,0.9)' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 10px;
        }

        .workspace-empty-form-field:hover {
            background: rgba(255, 255, 255, 0.16);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .workspace-empty-form-field option {
            color: #111827;
            background: #ffffff;
        }

        .workspace-empty-action-kicker {
            font-size: 0.72em;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #9ca3af;
            margin: 0 0 8px 0;
        }

        .workspace-empty-action-panel.primary .workspace-empty-action-kicker {
            color: rgba(255, 255, 255, 0.82);
        }

        .workspace-empty-action-title {
            font-size: 1.03em;
            font-weight: 700;
            color: #111827;
            margin: 0 0 4px 0;
            line-height: 1.4;
        }

        .workspace-empty-action-desc {
            font-size: 0.85em;
            color: #6b7280;
            margin: 0;
            line-height: 1.5;
        }

        .workspace-empty-action-panel.primary .workspace-empty-action-title {
            color: #ffffff;
        }

        .workspace-empty-action-panel.primary .workspace-empty-action-desc {
            color: rgba(255, 255, 255, 0.86);
        }

        .workspace-empty-right {
            display: none;
        }

        .workspace-empty-intelligence {
            display: none;
        }

        .workspace-empty-intelligence-placeholder {
            color: #64748b;
        }

        .workspace-empty-intelligence-label {
            font-size: 0.75em;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #6b7280;
            margin: 0 0 12px 0;
        }

        .workspace-empty-intelligence-text {
            font-size: 0.9em;
            line-height: 1.6;
            margin: 0;
        }

        .workspace-empty-intelligence-section {
            margin-bottom: 24px;
        }

        .workspace-empty-intelligence-section:last-child {
            margin-bottom: 0;
        }

        .workspace-empty-intelligence-section-title {
            font-size: 0.75em;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #6b7280;
            margin: 0 0 12px 0;
        }

        .workspace-empty-intelligence-item {
            font-size: 0.9em;
            color: #374151;
            line-height: 1.6;
            margin: 0 0 8px 0;
            padding-left: 12px;
            position: relative;
        }

        .workspace-empty-intelligence-item:last-child {
            margin-bottom: 0;
        }

        .workspace-empty-intelligence-item::before {
            content: '\2022';
            position: absolute;
            left: 0;
            color: #9ca3af;
        }

        .workspace-empty-intelligence-context {
            font-size: 0.9em;
            color: #374151;
            line-height: 1.6;
            margin: 0 0 8px 0;
        }

        .workspace-empty-intelligence-context:last-child {
            margin-bottom: 0;
        }

        .workspace-empty-intelligence-context strong {
            color: #1a1a1a;
            font-weight: 600;
        }

        /* Responsive: Stack on smaller screens */
        @media (max-width: 900px) {
            .workspace-empty-grid {
                grid-template-columns: 1fr;
            }

            .workspace-empty-secondary-actions {
                grid-template-columns: 1fr;
            }

            .workspace-empty {
                align-items: flex-start;
                padding: 22px;
            }

            .workspace-empty-title {
                font-size: 1.7em;
            }

            .workspace-empty-primary-form {
                grid-template-columns: 1fr;
            }
        }

        /* Right Panel - Conference Intelligence + Paper constraints (Hidden) */
        .right-panel {
            display: none;
            flex-direction: column;
            width: 0;
            min-width: 0;
            max-width: 0;
        }

        .right-panel-header {
            padding: 20px;
            border-bottom: 1px solid #e0e0e0;
            background: #fafafa;
        }

        .right-panel-header h2 {
            font-size: 1.2em;
            font-weight: 700;
            color: #333;
            margin-bottom: 15px;
        }

        .conference-selector {
            margin-bottom: 15px;
            position: relative;
        }

        .conference-search-wrapper {
            position: relative;
        }

        .conference-select-dropdown {
            width: 100%;
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 0.9em;
            background: white;
            cursor: text;
            transition: border-color 0.2s;
            box-sizing: border-box;
        }

        .conference-select-dropdown:hover {
            border-color: #667eea;
        }

        .conference-select-dropdown:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
        }

        .conference-search-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #e0e0e0;
            border-top: none;
            border-radius: 0 0 6px 6px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-top: 2px;
        }

        .conference-search-results.show {
            display: block;
        }

        .conference-search-result-item {
            padding: 10px;
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
            transition: background-color 0.2s;
        }

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

        .conference-search-result-item:hover {
            background-color: #f8f9ff;
        }

        .conference-search-result-item.selected {
            background-color: #667eea;
            color: white;
        }

        .conference-result-name {
            font-weight: 600;
            font-size: 0.9em;
            margin-bottom: 2px;
        }

        .conference-result-meta {
            font-size: 0.75em;
            color: #666;
            opacity: 0.8;
        }

        .conference-search-result-item.selected .conference-result-meta {
            color: rgba(255, 255, 255, 0.9);
        }

        .conference-display {
            padding: 12px;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
        }

        .conference-name {
            font-weight: 600;
            color: #333;
            margin-bottom: 6px;
        }

        .conference-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85em;
            margin-bottom: 4px;
        }

        .status-badge {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .status-complete {
            background: #28a745;
        }

        .status-partial {
            background: #ffc107;
        }

        .status-updating {
            background: #dc3545;
        }

        .conference-meta {
            font-size: 0.8em;
            color: #666;
            margin-top: 8px;
        }

        .right-panel-content {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }

        /* Paper constraints panel: right vertical sidebar, red accent, collapsible */
        .paper-constraints-panel {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            width: 200px;
            min-width: 200px;
            max-width: 200px;
            border-left: 3px solid #94a3b8;
            background: #f8fafc;
            overflow: hidden;
            transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease;
        }
        .paper-constraints-panel.collapsed {
            width: 20px;
            min-width: 20px;
            max-width: 20px;
            border-left-width: 1px;
            border-left-color: rgba(148, 163, 184, 0.28);
            background: #16181e;
        }
        .paper-constraints-panel.collapsed .paper-constraints-panel-header,
        .paper-constraints-panel.collapsed .paper-constraints-panel-body {
            display: none;
        }
        .paper-constraints-panel.collapsed .paper-constraints-panel-tab {
            display: flex;
        }
        .paper-constraints-panel-header {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            font-size: 0.8em;
            font-weight: 600;
            color: #475569;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid #e2e8f0;
            cursor: pointer;
            background: #f8fafc;
        }
        .paper-constraints-panel-header:hover {
            background: #f1f5f9;
        }
        .paper-constraints-panel-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .paper-constraints-panel-close {
            flex-shrink: 0;
            width: 22px;
            height: 22px;
            padding: 0;
            border: none;
            background: transparent;
            color: #64748b;
            font-size: 1.2em;
            line-height: 1;
            cursor: pointer;
            border-radius: 4px;
        }
        .paper-constraints-panel-close:hover {
            background: #e2e8f0;
            color: #475569;
        }
        .paper-constraints-panel-tab {
            display: none;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
            padding: 10px 2px;
            font-size: 0.62em;
            font-weight: 600;
            letter-spacing: 0.05em;
            color: rgba(203, 213, 225, 0.82);
            cursor: pointer;
            align-items: center;
            justify-content: center;
            flex: 1;
            min-height: 80px;
            border-left: none;
            background: #16181e;
        }
        .paper-constraints-panel-tab:hover {
            background: #1e222b;
            color: #e2e8f0;
        }
        .paper-constraints-panel-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 10px 12px;
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.45) rgba(15, 17, 22, 0.85);
        }
        .paper-constraints-panel-body::-webkit-scrollbar {
            width: 5px;
        }
        .paper-constraints-panel-body::-webkit-scrollbar-track {
            background: rgba(15, 17, 22, 0.85);
            border-radius: 3px;
        }
        .paper-constraints-panel-body::-webkit-scrollbar-thumb {
            background: rgba(100, 116, 139, 0.55);
            border-radius: 3px;
        }
        .paper-constraints-panel-body::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.45);
        }
        .paper-constraints-empty {
            font-size: 0.8em;
            color: #888;
            text-align: center;
            padding: 12px 6px;
        }
        .paper-constraints-pages-scroll {
            max-height: 140px;
            overflow-y: auto;
            overflow-x: hidden;
            margin-bottom: 10px;
            padding-right: 4px;
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.45) rgba(15, 17, 22, 0.85);
        }
        .paper-constraints-pages-scroll::-webkit-scrollbar {
            width: 5px;
        }
        .paper-constraints-pages-scroll::-webkit-scrollbar-track {
            background: rgba(15, 17, 22, 0.85);
            border-radius: 3px;
        }
        .paper-constraints-pages-scroll::-webkit-scrollbar-thumb {
            background: rgba(100, 116, 139, 0.55);
            border-radius: 3px;
        }
        .paper-constraints-pages-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.45);
        }
        .paper-constraints-pages-row {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-bottom: 8px;
        }
        .paper-constraints-page {
            width: 28px;
            height: 36px;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 2px;
            box-shadow: 0 1px 1px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6em;
            color: #999;
            flex-shrink: 0;
        }
        .paper-constraints-section-label {
            font-size: 0.72em;
            font-weight: 600;
            color: #555;
            margin-bottom: 4px;
        }
        .paper-constraints-references-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: flex-start;
        }
        .paper-constraints-ref-page {
            width: 28px;
            height: 36px;
            background: #f0f4f8;
            border: 1px dashed #b0c4de;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.55em;
            color: #6b8cae;
            text-align: center;
            padding: 2px;
            flex-shrink: 0;
        }
        .paper-constraints-ref-note {
            font-size: 0.7em;
            color: #666;
            margin-top: 2px;
            line-height: 1.3;
        }

        /* Knowledge Coverage Summary */
        .coverage-summary {
            background: #f8f9fa;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .coverage-summary h3 {
            font-size: 0.85em;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }

        .coverage-stat {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 0.9em;
        }

        .coverage-stat-label {
            color: #666;
        }

        .coverage-stat-value {
            font-weight: 600;
            color: #333;
        }

        /* Details & Settings Menu */
        .details-menu {
            margin-bottom: 20px;
        }

        .details-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .details-menu-header:hover {
            background: #f0f0f0;
            border-color: #667eea;
        }

        .details-menu-title {
            font-size: 0.9em;
            font-weight: 600;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .details-menu-icon {
            font-size: 0.8em;
            transition: transform 0.2s;
        }

        .details-menu.expanded .details-menu-icon {
            transform: rotate(180deg);
        }

        .details-menu-content {
            display: none;
            padding: 15px;
            background: white;
            border: 1px solid #e0e0e0;
            border-top: none;
            border-radius: 0 0 6px 6px;
        }

        .details-menu.expanded .details-menu-content {
            display: block;
        }

        .coverage-summary {
            background: transparent;
            border-radius: 0;
            padding: 0;
            margin-bottom: 20px;
        }

        .coverage-summary h3 {
            font-size: 0.85em;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }

        /* Knowledge Tree */
        .knowledge-tree {
            margin-top: 20px;
        }

        .tree-node {
            margin-bottom: 4px;
        }

        .tree-node-header {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 8px;
            cursor: pointer;
            border-radius: 4px;
            font-size: 0.9em;
            color: #666;
        }

        .tree-node-header:hover {
            background: #f5f5f5;
        }

        .tree-node-icon {
            font-size: 0.7em;
            transition: transform 0.2s;
        }

        .tree-node.expanded .tree-node-icon,
        .tree-node.summary-expanded .tree-node-icon {
            transform: rotate(90deg);
        }

        .tree-node-status {
            margin-left: auto;
            font-size: 0.85em;
        }

        .tree-node-children {
            margin-left: 20px;
            display: none;
        }

        .tree-node.expanded .tree-node-children {
            display: block;
        }

        /* Ensure nodes start collapsed - no default expansion */
        /* Tree nodes are collapsed by default via display: none on .tree-node-children */

        /* Make sure summary is always visible, but children are hidden by default */
        .node-summary {
            display: block;
        }

        /* Node Summary Styles */
        .node-summary {
            margin-top: 10px;
            background: #f8f9fa;
            border-radius: 6px;
            border-left: 3px solid #667eea;
            font-size: 0.85em;
            overflow: hidden;
            display: none;
        }

        .tree-node.summary-expanded .node-summary {
            display: block !important;
        }

        .node-summary-content {
            padding: 12px;
        }

        .node-summary-text {
            color: #444;
            line-height: 1.6;
            margin-bottom: 10px;
            padding-top: 8px;
        }

        .node-summary-points {
            margin: 10px 0;
            padding-left: 20px;
            color: #555;
        }

        .node-summary-points li {
            margin-bottom: 6px;
            line-height: 1.5;
        }

        .node-summary-actions {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #e0e0e0;
        }

        .view-details-btn {
            background: white;
            border: 1px solid #667eea;
            color: #667eea;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 0.85em;
            cursor: pointer;
            transition: all 0.2s;
        }

        .view-details-btn:hover {
            background: #667eea;
            color: white;
        }

        /* Timeline Panel — expanded height fits main phase nodes (114px) without vertical clip */
        .timeline-panel {
            flex-shrink: 0;
            height: 190px;
            background: white;
            border-top: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: height 0.3s ease, opacity 0.3s ease;
        }

        .timeline-panel.no-project {
            opacity: 0.92;
        }

        /* (collapsed style below) minimal height, no clip — header ~34px + container 14px + step row 36px ≈ 84px */
        /* Collapsed: single slim bar (header only), clickable to expand */
        .timeline-panel.collapsed {
            height: auto;
            min-height: 34px;
            max-height: none;
        }

        .timeline-panel.collapsed .timeline-container {
            display: none;
        }

        .timeline-panel.collapsed .timeline-panel-header {
            flex: 1;
            min-height: 0;
            padding: 4px 10px;
            border-bottom: none;
        }

        .timeline-panel.collapsed .timeline-panel-title {
            font-size: 0.7em;
        }

        .timeline-panel.collapsed .timeline-panel-context {
            display: none;
        }

        .timeline-panel.collapsed .timeline-panel-toggle {
            font-size: 0.7em;
        }

        .timeline-panel-header {
            padding: 2px 8px;
            border-bottom: 1px solid #e0e0e0;
            background: #fafafa;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            cursor: pointer;
            user-select: none;
            min-height: 20px;
        }

        .timeline-panel-header-main {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1;
        }

        .timeline-panel-header:hover {
            background: #f5f5f5;
        }

        .timeline-panel-header-right {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .timeline-panel-usage-wrap {
            max-width: min(760px, 62vw);
            min-width: 0;
        }

        .timeline-panel-usage-card {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            column-gap: 12px;
            row-gap: 6px;
            padding: 3px 8px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            background: #fff;
            box-sizing: border-box;
            width: 100%;
        }

        .timeline-panel-usage-plan-row {
            display: flex;
            align-items: baseline;
            gap: 4px;
            min-width: 0;
            max-width: 11em;
            font-size: 0.65em;
            flex-shrink: 1;
        }

        .timeline-panel-usage-plan-name {
            font-weight: 600;
            color: #334155;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

        .timeline-panel-usage-meter {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            flex: 0 1 auto;
            width: auto;
            min-width: 8rem;
            max-width: none;
        }

        .timeline-panel-usage-ring-block {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
        }

        .timeline-panel-usage-ring-svg-wrap {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }

        .timeline-panel-usage-ring {
            display: block;
            width: 20px;
            height: 20px;
        }

        .timeline-panel-usage-ring-bg {
            stroke: #e2e8f0;
            stroke-width: 5;
        }

        .timeline-panel-usage-ring-arc {
            stroke: #3b82f6;
            stroke-width: 5;
            transition: stroke-dashoffset 0.25s ease, stroke 0.2s ease;
        }

        .timeline-panel-usage-ring-arc.timeline-panel-usage-ring-arc--high {
            stroke: #f59e0b;
        }

        .timeline-panel-usage-ring-arc.timeline-panel-usage-ring-arc--over {
            stroke: #ef4444;
        }

        .timeline-panel-usage-ring-pct-outside {
            font-size: 0.62em;
            font-weight: 700;
            color: #334155;
            line-height: 1;
            white-space: nowrap;
            flex-shrink: 0;
            min-width: 2.25em;
        }

        .timeline-panel-usage-ring-pct-outside.timeline-panel-usage-ring-pct--compact {
            font-size: 0.52em;
        }

        .timeline-panel-usage-meter .timeline-panel-usage-amounts {
            line-height: 1.25;
            align-self: center;
        }

        .timeline-panel-usage-overflow {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .timeline-panel-usage-overflow .billing-wizard-toggle {
            width: 36px;
            height: 20px;
            border-radius: 10px;
        }

        .timeline-panel-usage-overflow .billing-wizard-toggle-slider {
            width: 16px;
            height: 16px;
            top: 2px;
            left: 2px;
        }

        .timeline-panel-usage-overflow .billing-wizard-toggle[aria-checked="true"] .billing-wizard-toggle-slider {
            transform: translateX(16px);
        }

        .timeline-panel-usage-actions {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            margin-left: 2px;
        }

        .timeline-panel-usage-action {
            margin: 0;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.62em;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid transparent;
            line-height: 1.3;
        }

        .timeline-panel-usage-action.primary {
            background: #2563eb;
            color: #fff;
            border-color: #1d4ed8;
        }

        .timeline-panel-usage-action.primary:hover {
            background: #1d4ed8;
        }

        .timeline-panel-usage-action.secondary {
            background: #f1f5f9;
            color: #334155;
            border-color: #cbd5e1;
        }

        .timeline-panel-usage-action.secondary:hover {
            background: #e2e8f0;
        }

        .timeline-panel-usage-action.ghost {
            background: transparent;
            color: #475569;
            border-color: #e2e8f0;
        }

        .timeline-panel-usage-action.ghost:hover {
            background: #f8fafc;
        }

        .timeline-panel-usage-action:focus-visible {
            outline: 2px solid #3b82f6;
            outline-offset: 1px;
        }

        .timeline-panel-usage-badge {
            font-size: 0.6em;
            font-weight: 600;
            color: #15803d;
            background: #dcfce7;
            border-radius: 4px;
            padding: 2px 6px;
            line-height: 1.3;
        }

        .timeline-panel-usage-amounts {
            font-size: 0.62em;
            color: #64748b;
            white-space: nowrap;
        }

        /* Compact timeline: keep usage chip fully visible in one horizontal row */
        .timeline-panel.collapsed .timeline-panel-usage-wrap {
            max-width: min(720px, 58vw);
        }

        .timeline-panel.collapsed .timeline-panel-usage-card {
            padding: 1px 5px;
            column-gap: 8px;
            row-gap: 4px;
            flex-wrap: nowrap;
        }

        .timeline-panel.collapsed .timeline-panel-usage-plan-row {
            display: flex;
            max-width: 9em;
            font-size: 0.58em;
        }

        .timeline-panel.collapsed .timeline-panel-usage-meter {
            width: auto;
            min-width: 7rem;
            max-width: none;
            gap: 6px;
        }

        .timeline-panel.collapsed .timeline-panel-usage-ring-svg-wrap {
            width: 16px;
            height: 16px;
        }

        .timeline-panel.collapsed .timeline-panel-usage-ring {
            width: 16px;
            height: 16px;
        }

        .timeline-panel.collapsed .timeline-panel-usage-ring-bg,
        .timeline-panel.collapsed .timeline-panel-usage-ring-arc {
            stroke-width: 6;
        }

        .timeline-panel.collapsed .timeline-panel-usage-ring-pct-outside {
            font-size: 0.55em;
        }

        .timeline-panel.collapsed .timeline-panel-usage-ring-pct-outside.timeline-panel-usage-ring-pct--compact {
            font-size: 0.46em;
        }

        .timeline-panel.collapsed .timeline-panel-usage-overflow .billing-wizard-toggle {
            width: 32px;
            height: 18px;
            border-radius: 9px;
        }

        .timeline-panel.collapsed .timeline-panel-usage-overflow .billing-wizard-toggle-slider {
            width: 14px;
            height: 14px;
        }

        .timeline-panel.collapsed .timeline-panel-usage-overflow .billing-wizard-toggle[aria-checked="true"] .billing-wizard-toggle-slider {
            transform: translateX(14px);
        }

        .timeline-panel.collapsed .timeline-panel-usage-actions {
            flex-wrap: nowrap;
            gap: 3px;
        }

        .timeline-panel.collapsed .timeline-panel-usage-amounts {
            font-size: 0.55em;
        }

        .timeline-panel.collapsed .timeline-panel-usage-action {
            padding: 1px 5px;
            font-size: 0.55em;
        }

        .timeline-panel.collapsed .timeline-panel-usage-badge {
            font-size: 0.52em;
            padding: 1px 4px;
        }

        .timeline-panel-title {
            font-weight: 600;
            color: #333;
            font-size: 0.76em;
        }

        .timeline-panel-context {
            font-size: 0.72em;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 360px;
        }

        .timeline-compact-progress {
            display: none;
            min-width: 0;
            flex: 1;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
        }

        .timeline-compact-progress::-webkit-scrollbar {
            display: none;
        }

        .timeline-compact-track {
            display: none;
            font-size: 0.65em;
            color: #475569;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 130px;
        }

        .timeline-panel.collapsed .timeline-compact-progress {
            display: block;
        }

        .timeline-panel.collapsed .timeline-compact-track {
            display: none;
        }

        .timeline-compact-dots {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 4px;
            padding: 1px 2px;
            min-width: max-content;
        }

        .timeline-compact-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 2px;
            flex-shrink: 0;
        }

        .timeline-compact-step-dot {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 1px solid transparent;
        }

        .timeline-compact-substeps {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
            min-height: 5px;
        }

        .timeline-compact-substep-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .timeline-compact-connector {
            width: 10px;
            height: 2px;
            border-radius: 999px;
            margin-top: 6px;
            flex-shrink: 0;
        }

        .timeline-compact-step-dot.done,
        .timeline-compact-substep-dot.done,
        .timeline-compact-connector.done {
            background: #16a34a;
            border-color: #16a34a;
        }

        .timeline-compact-step-dot.current,
        .timeline-compact-substep-dot.current,
        .timeline-compact-connector.current {
            background: #f59e0b;
            border-color: #f59e0b;
        }

        /* Use neutral styling - red "missed" read as an error in the workspace chrome */
        .timeline-compact-step-dot.missed,
        .timeline-compact-substep-dot.missed,
        .timeline-compact-connector.missed {
            background: #cbd5e1;
            border-color: #94a3b8;
        }

        .timeline-compact-step-dot.remaining,
        .timeline-compact-substep-dot.remaining,
        .timeline-compact-connector.remaining {
            background: #cbd5e1;
            border-color: #cbd5e1;
        }

        .timeline-panel-toggle {
            font-size: 0.8em;
            color: #666;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 4px;
            transition: all 0.2s;
            margin-left: 6px;
        }

        .timeline-panel-toggle:hover {
            background: rgba(0, 0, 0, 0.05);
            color: #333;
        }

        .timeline-panel.collapsed .timeline-phase-node {
            min-width: 52px;
            max-width: 52px;
            min-height: 36px;
            max-height: 36px;
            padding: 2px 4px;
            height: 36px;
            justify-content: center;
        }

        .timeline-panel.collapsed .timeline-phase-date {
            display: none;
        }

        .timeline-panel.collapsed .timeline-phase-icon {
            display: none;
        }

        .timeline-panel.collapsed .timeline-phase-status,
        .timeline-panel.collapsed .timeline-phase-expand-icon,
        .timeline-panel.collapsed .timeline-phase-tooltip,
        .timeline-panel.collapsed .timeline-phase-constraints {
            display: none;
        }

        .timeline-panel.collapsed .timeline-phase-name {
            font-size: 0.6em;
            margin-bottom: 0;
            white-space: normal;
            line-height: 1.15;
            min-height: 2em;
            max-width: 100%;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .timeline-panel.collapsed .timeline-track {
            padding: 2px 24px 2px;
            align-items: center;
        }

        .timeline-panel.collapsed .timeline-today-marker {
            top: 8px;
        }

        .timeline-panel.collapsed .timeline-today-marker::before {
            top: -12px;
            padding: 1px 6px;
            font-size: 0.65em;
        }

        .timeline-container {
            flex: 1;
            min-width: 0;
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 12px 20px 14px;
            position: relative;
            min-height: 0;
            scrollbar-gutter: stable both-edges;
            -webkit-overflow-scrolling: touch;
        }

        .timeline-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #999;
            font-size: 0.9em;
        }

        .timeline-track {
            display: flex;
            align-items: stretch;
            gap: 14px;
            min-width: max-content;
            width: max-content;
            height: 100%;
            position: relative;
            padding: 6px 40px 0;
            flex-shrink: 0;
        }

        .timeline-phase-wrapper {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: flex-start;
            gap: 8px;
            flex-shrink: 0;
            padding-bottom: 2px;
        }

        .timeline-today-marker {
            position: absolute;
            top: 22px;
            bottom: auto;
            height: 120px;
            width: 2px;
            background: #ff6b6b;
            z-index: 12;
            display: none;
            flex-direction: column;
            align-items: center;
            pointer-events: none;
            transform: translateX(-50%);
            visibility: hidden;
        }

        .timeline-today-marker.is-positioned {
            visibility: visible;
        }

        .timeline-today-marker::before {
            content: 'Here';
            position: absolute;
            top: -20px;
            background: #ff6b6b;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75em;
            font-weight: 600;
            white-space: nowrap;
        }

        .timeline-phase-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 124px;
            max-width: 124px;
            min-height: 114px;
            padding: 9px 8px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            color: #6c757d;
        }
        .timeline-phase-state-indicator {
            position: absolute;
            top: 5px;
            right: 6px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            font-size: 10px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            pointer-events: none;
            border: 1px solid transparent;
            background: #e5e7eb;
            color: #6b7280;
        }
        .timeline-phase-state-indicator.completed {
            background: #dcfce7;
            color: #166534;
            border-color: #86efac;
        }
        .timeline-phase-state-indicator.current {
            background: #ffedd5;
            color: #c2410c;
            border-color: #fdba74;
        }

        .timeline-phase-node:hover {
            transform: translateY(-2px);
        }

        .timeline-phase-node.substeps-expanded {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 10;
        }

        .timeline-phase-node.completed {
            background: #f5f5f5;
            color: #999;
            border: 2px solid #e0e0e0;
        }

        .timeline-phase-node.current {
            background: #fff7db;
            color: #7a5a00;
            border: 2px solid #f4bf24;
            box-shadow: 0 4px 12px rgba(244, 191, 36, 0.24);
        }

        .timeline-phase-node.upcoming {
            background: #f5f8fb;
            color: #6c8ba8;
            border: 2px solid #c8d9e8;
        }

        .timeline-phase-node.missed {
            background: #f8d7da;
            color: #721c24;
            border: 2px solid #dc3545;
        }

        .timeline-phase-node.unknown {
            background: #f8f9fa;
            color: #adb5bd;
            border: 2px dashed #dee2e6;
            opacity: 0.95;
        }

        .timeline-phase-name {
            font-weight: 600;
            font-size: 0.8em;
            margin-bottom: 4px;
            text-align: center;
            line-height: 1.25;
            min-height: 2.5em;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .timeline-phase-date {
            font-size: 0.74em;
            text-align: center;
            margin-bottom: 3px;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }

        .timeline-phase-date.timeline-phase-date-empty {
            display: none;
        }

        .timeline-phase-status {
            font-size: 0.66em;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            opacity: 0.8;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            text-align: center;
        }

        .timeline-phase-status.timeline-phase-status-empty {
            display: none;
        }

        .timeline-phase-constraints {
            margin-top: 6px;
            padding-top: 4px;
            border-top: 1px solid rgba(0,0,0,0.08);
            font-size: 0.65em;
            line-height: 1.35;
            text-align: left;
            max-height: 4.5em;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .timeline-phase-constraints-label {
            font-weight: 600;
            opacity: 0.85;
        }
        .timeline-phase-constraints-list {
            margin: 2px 0 0 0;
            padding-left: 14px;
            list-style: disc;
        }
        .timeline-phase-constraints-list li {
            margin-bottom: 1px;
        }

        .step-constraints-panel {
            border-top: 1px solid var(--border-color, #e0e0e0);
            margin-top: 0;
        }
        .step-constraints-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            background: #fef3c7;
            border: 1px solid #f59e0b;
            color: #92400e;
            cursor: pointer;
            user-select: none;
        }
        .step-constraints-bar:hover {
            background: #fde68a;
        }
        .step-constraints-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 24px;
            height: 24px;
            padding: 0 6px;
            background: #f59e0b;
            color: #fff;
            font-weight: 700;
            font-size: 0.9em;
            border-radius: 4px;
        }
        .step-constraints-label {
            font-weight: 600;
            font-size: 0.95em;
        }
        .step-constraints-toggle {
            margin-left: auto;
            font-size: 0.8em;
        }
        .step-constraints-body {
            padding: 16px 20px;
            background: var(--surface-alt, #f8f9fa);
        }
        .step-constraints-hint {
            font-size: 0.8em;
            color: var(--text-muted, #666);
            margin-bottom: 12px;
        }
        .stage-constraints-panel {
            border-top: 1px solid var(--border-color, #e0e0e0);
            background: var(--surface-alt, #f8f9fa);
            padding: 16px 20px;
            margin-top: 0;
        }
        .stage-constraints-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        .stage-constraints-title {
            font-weight: 600;
            font-size: 0.95em;
        }
        .stage-constraints-hint {
            font-size: 0.8em;
            color: var(--text-muted, #666);
        }
        .stage-constraints-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 200px;
            overflow-y: auto;
        }
        .stage-constraints-list label {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            cursor: pointer;
            font-size: 0.9em;
            line-height: 1.4;
        }
        .stage-constraints-list input[type="checkbox"] {
            margin-top: 3px;
            flex-shrink: 0;
        }
        .stage-constraints-gate {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(0,0,0,0.08);
            font-size: 0.85em;
            color: var(--text-muted, #666);
        }
        .stage-constraints-gate.satisfied {
            color: var(--success-color, #0a0);
        }

        /* Inline constraints warning in middle screen (step/substep content) */
        .step-constraints-warning-inline {
            display: block;
            margin-bottom: 20px;
            padding: 16px 20px;
            background: #fef3c7;
            border: 1px solid #f59e0b;
            border-left-width: 4px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(245, 158, 11, 0.15);
        }
        .step-constraints-warning-inline-header {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1em;
            color: #92400e;
            margin-bottom: 8px;
        }
        .step-constraints-warning-inline-icon {
            font-size: 1.25em;
            flex-shrink: 0;
        }
        .step-constraints-warning-inline-hint {
            font-size: 0.9em;
            color: #b45309;
            margin: 0 0 12px 0;
            font-weight: 500;
        }
        .step-constraints-warning-inline-list {
            max-height: 220px;
            overflow-y: auto;
            margin-bottom: 12px;
        }
        .step-constraints-warning-inline-list label {
            color: #78350f;
        }
        .step-constraints-warning-inline-gate {
            margin-top: 0;
            padding-top: 12px;
            border-top: 1px solid rgba(245, 158, 11, 0.4);
            font-weight: 600;
            color: #b45309;
        }
        .step-constraints-warning-inline-gate.satisfied {
            color: #047857;
        }

        .timeline-phase-icon {
            font-size: 1em;
            margin-bottom: 3px;
        }

        .timeline-phase-tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 0.78em;
            white-space: normal;
            width: max-content;
            max-width: 240px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            margin-bottom: 8px;
            z-index: 100;
            display: none;
            line-height: 1.35;
            text-align: center;
        }

        .timeline-phase-node.expanded .timeline-phase-tooltip {
            opacity: 0;
        }

        .timeline-phase-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: #333;
        }

        .timeline-phase-node:hover .timeline-phase-tooltip {
            opacity: 1;
        }

        /* Phase Capability Panel */
        .timeline-phase-expand-icon {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9em;
            color: #666;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s;
            z-index: 10;
        }

        .timeline-phase-expand-icon:hover {
            background: rgba(0, 0, 0, 0.1);
            color: #333;
        }

        .timeline-phase-node.expanded .timeline-phase-expand-icon {
            color: #0066cc;
        }

        .timeline-phase-node.expanded .timeline-phase-expand-icon::before {
            content: '\25BC';
        }

        .timeline-phase-expand-icon::before {
            content: '\22EE';
            font-size: 1.2em;
            line-height: 1;
        }

        .timeline-capability-panel {
            position: absolute;
            bottom: calc(100% + 12px);
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            width: 320px;
            max-width: 90vw;
            background: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            padding: 16px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s, transform 0.2s;
            z-index: 200;
            font-size: 0.85em;
        }

        .timeline-phase-node.expanded .timeline-capability-panel {
            opacity: 1;
            pointer-events: all;
            transform: translateX(-50%) translateY(-4px);
        }

        .timeline-capability-panel::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 8px solid transparent;
            border-top-color: #ffffff;
        }

        .capability-panel-header {
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f0f0;
        }

        .capability-panel-phase-name {
            font-weight: 600;
            font-size: 0.95em;
            color: #333;
            margin-bottom: 4px;
        }

        .capability-panel-goal {
            font-size: 0.8em;
            color: #666;
            font-style: italic;
            line-height: 1.4;
        }

        .capability-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .capability-item {
            display: flex;
            align-items: flex-start;
            padding: 8px 0;
            border-bottom: 1px solid #f8f8f8;
        }

        .capability-item:last-child {
            border-bottom: none;
        }

        .capability-checkbox {
            margin-right: 10px;
            margin-top: 2px;
            flex-shrink: 0;
            cursor: pointer;
        }

        .capability-content {
            flex: 1;
        }

        .capability-label {
            font-weight: 500;
            color: #333;
            font-size: 0.9em;
            margin-bottom: 2px;
            cursor: pointer;
        }

        .capability-description {
            font-size: 0.8em;
            color: #666;
            line-height: 1.4;
        }

        .capability-preview-link {
            font-size: 0.75em;
            color: #0066cc;
            text-decoration: none;
            margin-left: 8px;
            cursor: pointer;
        }

        .capability-preview-link:hover {
            text-decoration: underline;
        }

        /* Highlight current phase/substep when user is viewing that step (e.g. Step 1.1 open) */
        .timeline-phase-node.current-view-phase {
            background: #e8f4fd;
            border: 2px solid #1976d2;
            box-shadow: 0 2px 8px rgba(25, 118, 210, 0.25);
        }
        /* Current Step 1 tab: highlight this substep box */
        .timeline-phase-substeps-inline .step1-substep-inline.current-view-substep {
            background: #eef4ff;
            border-color: #93c5fd;
            box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
        }

        /* Phase Substeps (Inline in Timeline) */
        .timeline-phase-node.substeps-expanded {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 10;
            pointer-events: auto;
        }

        /* Inline substeps beside phase cards: vertical to-do list */
        .timeline-phase-substeps-inline {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: flex-start;
            gap: 4px;
            overflow-x: visible;
            overflow-y: visible;
            padding: 0;
            width: max-content;
            max-width: none;
            min-width: 0;
            align-self: flex-start;
            border: none;
            border-radius: 0;
            background: transparent;
        }

        .timeline-phase-substeps-inline .timeline-substep-inline.timeline-substep-todo {
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            width: max-content;
            max-width: none;
            min-width: 0;
            align-self: flex-start;
            text-align: left;
            padding: 3px 8px 3px 6px;
            font-size: 0.68em;
            line-height: 1.15;
            gap: 6px;
            min-height: 0;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
            background: #fafbfc;
            box-shadow: none;
        }

        .timeline-phase-substeps-inline .timeline-substep-inline.timeline-substep-todo:hover {
            transform: none;
            background: #f1f5f9;
            border-color: #cbd5e1;
        }

        /* Circle “checkbox” */
        .timeline-substep-todo-check {
            flex-shrink: 0;
            width: 14px;
            height: 14px;
            margin-top: 0;
            border-radius: 50%;
            border: 2px solid #cbd5e1;
            background: #fff;
            box-sizing: border-box;
            position: relative;
        }

        .timeline-substep-todo-check--placeholder {
            border-color: #d1d5db;
            background: #f9fafb;
        }

        /* Finished: filled + checkmark */
        .timeline-substep-todo-check--done {
            border-color: #16a34a;
            background: #16a34a;
        }

        .timeline-substep-todo-check--done::after {
            content: '';
            position: absolute;
            left: 3px;
            top: 0;
            width: 4px;
            height: 7px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        /* In progress: ring + inner dot */
        .timeline-substep-todo-check--in-progress {
            border-color: #f59e0b;
            background: #fffbeb;
        }

        .timeline-substep-todo-check--in-progress::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #f59e0b;
        }

        .timeline-substep-todo-check--upcoming {
            border-color: #cbd5e1;
            background: #fff;
        }

        .timeline-substep-todo-check--locked {
            border-style: dashed;
            border-color: #cbd5e1;
            background: #f8fafc;
            opacity: 0.75;
        }

        .timeline-phase-substeps-inline .timeline-substep-inline-name {
            text-align: left;
            width: auto;
            margin-bottom: 0;
            font-size: 1em;
            font-weight: 500;
            white-space: nowrap;
            overflow: visible;
            text-overflow: clip;
        }

        .step1-substep-inline.step1-timeline-done .timeline-substep-inline-name {
            color: #15803d;
            text-decoration: line-through;
            text-decoration-color: rgba(21, 128, 61, 0.45);
        }

        .step1-substep-inline.step1-timeline-in-progress .timeline-substep-inline-name {
            color: #9a3412;
            font-weight: 600;
        }

        .step1-substep-inline.step1-timeline-upcoming .timeline-substep-inline-name {
            color: #334155;
        }

        .step1-substep-inline.step1-timeline-locked .timeline-substep-inline-name {
            color: #94a3b8;
        }

        /* Descriptions hidden in timeline strip */
        .timeline-phase-substeps-inline .timeline-substep-inline-description {
            display: none;
        }

        .step1-substep-inline.step1-timeline-locked {
            cursor: not-allowed;
        }

        .timeline-panel.collapsed .timeline-phase-substeps-inline {
            align-items: stretch;
            width: fit-content;
            padding: 0;
            gap: 6px;
        }

        /* Legacy: hidden if present */
        .timeline-phase-substeps-inline .step1-substep-state-circle,
        .timeline-phase-substeps-inline .timeline-substep-inline-icon {
            display: none;
        }

        .timeline-phase-substeps-inline::-webkit-scrollbar {
            height: 6px;
        }

        .timeline-phase-substeps-inline::-webkit-scrollbar-track {
            background: transparent;
        }

        .timeline-phase-substeps-inline::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }

        .timeline-substep-inline {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 80px;
            max-width: 80px;
            min-height: auto;
            padding: 4px 6px;
            border-radius: 6px;
            background: #f5f5f8;
            border: 1px solid #e0e0e0;
            font-size: 0.75em;
            line-height: 1.2;
            flex-shrink: 0;
            transition: all 0.2s;
            cursor: default;
        }

        .timeline-panel.collapsed .timeline-substep-inline {
            min-width: 64px;
            max-width: 64px;
            min-height: auto;
            padding: 3px 4px;
        }

        .timeline-substep-inline:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .timeline-substep-inline-icon {
            font-size: 0.9em;
            margin-bottom: 3px;
            color: #667eea;
        }

        .timeline-substep-inline-name {
            font-weight: 600;
            font-size: 0.72em;
            margin-bottom: 0;
            text-align: center;
            color: #333;
            line-height: 1.2;
            min-height: 0;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .timeline-substep-inline-description {
            font-size: 0.65em;
            text-align: center;
            color: #666;
            line-height: 1.15;
            margin-top: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .timeline-panel.collapsed .timeline-substep-inline-description {
            display: none;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }

        .timeline-substeps-header {
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid #f0f0f0;
        }

        .timeline-substeps-title {
            font-size: 0.85em;
            font-weight: 600;
            color: #333;
        }

        .timeline-substeps-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .timeline-substep-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
            border-left: 3px solid #667eea;
            transition: all 0.2s;
            cursor: default;
        }

        .timeline-substep-item:hover {
            background: #f0f2f5;
            transform: translateX(2px);
        }

        .timeline-substep-icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #667eea;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75em;
            font-weight: 600;
        }

        .timeline-substep-content {
            flex: 1;
        }

        .timeline-substep-title {
            font-size: 0.9em;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }

        .timeline-substep-description {
            font-size: 0.8em;
            color: #666;
            line-height: 1.4;
        }

        /* Submission Context */
        .submission-context {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }

        .context-selector {
            margin-bottom: 12px;
        }

        .context-selector label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85em;
            font-weight: 600;
            color: #666;
            margin-bottom: 6px;
        }

        .help-icon {
            font-size: 0.9em;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.2s;
            user-select: none;
            line-height: 1;
        }

        .help-icon:hover {
            opacity: 1;
        }

        /* LaTeX editor modal (project-level feature) */
        .latex-editor-modal {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }

        .latex-editor-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
        }

        .latex-editor-dialog {
            position: relative;
            background: #ffffff;
            border-radius: 10px;
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35);
            width: min(960px, 90vw);
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            z-index: 1;
        }

        .latex-editor-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            border-bottom: 1px solid #e5e7eb;
            background: linear-gradient(90deg, #f3f4ff, #f9fafb);
        }

        .latex-editor-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: #111827;
        }

        .latex-editor-close {
            border: none;
            background: transparent;
            font-size: 1.2rem;
            cursor: pointer;
            color: #6b7280;
        }

        .latex-editor-close:hover {
            color: #111827;
        }

        .latex-editor-body {
            display: flex;
            gap: 14px;
            padding: 12px 14px 14px 14px;
            min-height: 360px;
        }

        .latex-editor-main {
            flex: 2;
            display: flex;
            flex-direction: column;
        }

        .latex-editor-editor-wrapper {
            position: relative;
            flex: 1;
            font-family: "JetBrains Mono", "Fira Code", monospace;
            font-size: 13px;
            line-height: 1.4;
        }

        .latex-editor-highlight {
            position: absolute;
            inset: 0;
            margin: 0;
            padding: 10px;
            white-space: pre;
            overflow: auto;
            color: transparent; /* text colour comes from spans */
        }

        .latex-editor-input {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 320px;
            resize: none;
            background: transparent;
            color: transparent;
            caret-color: #111827;
            border-radius: 6px;
            border: 1px solid #d4d4d8;
            padding: 10px;
            outline: none;
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
            box-sizing: border-box;
        }

        .latex-editor-input::selection {
            background: rgba(129, 140, 248, 0.35);
        }

        .latex-editor-sidebar {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-width: 260px;
        }

        .latex-editor-section {
            display: flex;
            flex-direction: column;
        }

        .latex-editor-section-header {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #6b7280;
            margin-bottom: 4px;
        }

        .latex-editor-panel {
            flex: 1;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            padding: 8px;
            font-size: 11px;
            background: #f9fafb;
            overflow-y: auto;
            max-height: 150px;
        }

        .latex-editor-empty {
            color: #9ca3af;
            font-style: italic;
        }

        .latex-editor-error-item {
            margin-bottom: 4px;
            color: #b00020;
        }

        .latex-editor-error-item strong {
            font-weight: 600;
        }

        .latex-editor-autocomplete-item {
            padding: 3px 4px;
            border-radius: 4px;
            cursor: pointer;
        }

        .latex-editor-autocomplete-item:hover {
            background: #e4e7ff;
        }

        .context-selector select {
            width: 100%;
            padding: 8px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            font-size: 0.9em;
        }

        /* Guidance Entry Point */
        .guidance-entry {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 6px;
            border: 1px dashed #e0e0e0;
        }

        .guidance-entry h4 {
            font-size: 0.9em;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }

        .guidance-btn {
            width: 100%;
            padding: 8px;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.85em;
            color: #667eea;
            margin-bottom: 6px;
            transition: all 0.2s;
        }

        .guidance-btn:hover {
            background: #f8f9ff;
            border-color: #667eea;
        }

        /* Content Views */
        .content-view {
            display: none;
        }

        .content-view.active {
            display: block;
        }

        .latex-content {
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 0.9em;
            line-height: 1.6;
            white-space: pre-wrap;
            background: #ffffff;
            padding: 20px;
            overflow: auto;
            color: #333;
            tab-size: 4;
            min-height: 100%;
            box-sizing: border-box;
            outline: none;
            border: none;
            resize: none;
            width: 100%;
        }

        .latex-content br {
            display: block;
            content: "";
            margin: 0;
        }

        .latex-content:focus {
            outline: none;
        }

        .latex-content .latex-command {
            color: #0066cc;
            font-weight: 500;
        }

        .latex-content .latex-brace {
            color: #cc0000;
            font-weight: 600;
        }

        .latex-content .latex-comment {
            color: #008000;
            font-style: italic;
        }

        .latex-content .latex-bracket {
            color: #cc6600;
        }

        .latex-content .latex-math {
            color: #990099;
        }

        .latex-content .latex-number {
            color: #0066cc;
        }

        .latex-content .latex-string {
            color: #008000;
        }

        .latex-content .latex-environment {
            color: #0066cc;
            font-weight: 600;
        }

        .rendered-content {
            line-height: 1.8;
        }

        .rendered-content h1,
        .rendered-content h2,
        .rendered-content h3 {
            margin-top: 24px;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .rendered-content p {
            margin-bottom: 16px;
        }

        /* Modal Overlay */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10000;
            overflow-y: auto;
            padding: 40px 20px;
        }

        .modal-overlay.active {
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        .modal-content {
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 900px;
            width: 100%;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            margin: auto;
            position: relative;
        }

        .modal-header {
            padding: 25px 30px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fafafa;
            border-radius: 12px 12px 0 0;
            flex-shrink: 0;
        }

        .modal-header h3 {
            font-size: 1.5em;
            font-weight: 700;
            color: #333;
            margin: 0;
        }

        .modal-close-btn {
            background: none;
            border: none;
            font-size: 2em;
            color: #666;
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.2s;
            line-height: 1;
        }

        .modal-close-btn:hover {
            background: #f0f0f0;
            color: #333;
        }

        .papira-top-wizard-overlay {
            position: fixed;
            inset: 0;
            background: rgba(11, 18, 32, 0.42);
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding-top: 92px;
            z-index: 12000;
        }

        .papira-top-wizard-overlay.active {
            display: flex;
        }

        .papira-top-wizard-card {
            width: min(560px, calc(100vw - 32px));
            background: #ffffff;
            border: 1px solid #d8e0ef;
            border-radius: 12px;
            box-shadow: 0 18px 48px rgba(11, 18, 32, 0.24);
            padding: 18px 18px 16px;
        }

        .papira-top-wizard-title {
            font-size: 15px;
            font-weight: 700;
            color: #11203a;
            margin-bottom: 8px;
        }

        .papira-top-wizard-message {
            font-size: 13px;
            line-height: 1.5;
            color: #40506d;
            margin-bottom: 14px;
        }

        .papira-top-wizard-input {
            width: 100%;
            border: 1px solid #c7d4ea;
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 13px;
            margin-bottom: 14px;
            outline: none;
        }

        .papira-top-wizard-input:focus {
            border-color: #2f5fb7;
            box-shadow: 0 0 0 3px rgba(47, 95, 183, 0.12);
        }

        .papira-top-wizard-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

        .papira-top-wizard-btn {
            border: none;
            border-radius: 8px;
            padding: 8px 14px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }

        .papira-top-wizard-btn-primary {
            background: #1f4ea8;
            color: #ffffff;
        }

        .papira-top-wizard-btn-primary:hover {
            background: #193f88;
        }

        .papira-top-wizard-btn-secondary {
            background: #eef3fb;
            color: #274777;
        }

        .papira-top-wizard-btn-secondary:hover {
            background: #dfe8f7;
        }

        .papira-top-wizard-btn-danger {
            background: #c53a4a;
            color: #ffffff;
        }

        .papira-top-wizard-btn-danger:hover {
            background: #a92f3d;
        }

        /* Landscape analysis one-time payment wizard (Stripe amount from API) */
        .papira-landscape-pay-modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(11, 18, 32, 0.48);
            z-index: 12550;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px 16px;
        }

        .papira-landscape-pay-modal {
            width: min(440px, 100%);
            background: #ffffff;
            border: 1px solid #d8e0ef;
            border-radius: 12px;
            box-shadow: 0 20px 56px rgba(11, 18, 32, 0.28);
            padding: 22px 22px 18px;
            font-family: var(--step-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
        }

        .papira-landscape-pay-modal-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: #11203a;
            margin: 0 0 10px;
            line-height: 1.35;
        }

        .papira-landscape-pay-modal-lead {
            font-size: 0.875rem;
            line-height: 1.5;
            color: #40506d;
            margin: 0 0 14px;
        }

        .papira-landscape-pay-modal-price {
            margin: 0 0 12px;
            padding: 12px 14px;
            background: #f4f7fc;
            border-radius: 8px;
            border: 1px solid #e2e8f4;
        }

        .papira-landscape-pay-modal-amount {
            font-size: 1.35rem;
            font-weight: 700;
            color: #1f4ea8;
            letter-spacing: -0.02em;
        }

        .papira-landscape-pay-modal-onetime {
            font-size: 0.8rem;
            font-weight: 600;
            color: #64748b;
            margin-left: 6px;
        }

        .papira-landscape-pay-modal-price--compare {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 8px 14px;
        }

        .papira-landscape-pay-modal-reference {
            font-size: 1.05rem;
            font-weight: 600;
            color: #b91c1c;
            text-decoration: line-through;
            text-decoration-color: #dc2626;
        }

        .papira-landscape-pay-modal-note {
            font-size: 0.8rem;
            line-height: 1.45;
            color: #64748b;
            margin: 0 0 18px;
        }

        .papira-landscape-pay-modal-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-end;
        }

        .papira-landscape-pay-cancel {
            border: 1px solid #c7d4ea;
            background: #ffffff;
            color: #40506d;
            border-radius: 8px;
            padding: 9px 16px;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
        }

        .papira-landscape-pay-cancel:hover {
            background: #f8fafc;
            border-color: #b4c4e0;
        }

        .papira-landscape-pay-continue {
            border: none;
            background: #1f4ea8;
            color: #ffffff;
            border-radius: 8px;
            padding: 9px 16px;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
        }

        .papira-landscape-pay-continue:hover {
            background: #193f88;
        }

        .modal-body {
            padding: 30px;
            overflow-y: auto;
            flex: 1;
        }

        .modal-loading {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }

        .modal-content-view {
            line-height: 1.8;
        }

        .modal-content-view h1,
        .modal-content-view h2,
        .modal-content-view h3,
        .modal-content-view h4 {
            margin-top: 24px;
            margin-bottom: 12px;
            font-weight: 600;
            color: #333;
        }

        .modal-content-view h1 {
            font-size: 1.8em;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }

        .modal-content-view h2 {
            font-size: 1.4em;
            color: #667eea;
        }

        .modal-content-view h3 {
            font-size: 1.2em;
        }

        .modal-content-view p {
            margin-bottom: 16px;
            color: #444;
        }

        .modal-content-view ul,
        .modal-content-view ol {
            margin: 16px 0;
            padding-left: 30px;
        }

        .modal-content-view li {
            margin-bottom: 8px;
            color: #444;
        }

        .modal-content-view table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .modal-content-view th {
            background: #667eea;
            color: white;
            padding: 12px;
            text-align: left;
            font-weight: 600;
        }

        .modal-content-view td {
            padding: 10px 12px;
            border-bottom: 1px solid #e0e0e0;
        }

        .modal-content-view tr:hover {
            background: #f8f9ff;
        }

        .modal-source-urls {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e0e0e0;
        }

        .modal-source-urls h4 {
            font-size: 0.9em;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }

        .modal-source-urls a {
            display: block;
            padding: 8px 12px;
            background: #f8f9fa;
            border-radius: 4px;
            margin-bottom: 8px;
            color: #667eea;
            text-decoration: none;
            font-size: 0.9em;
            transition: background 0.2s;
        }

        .modal-source-urls a:hover {
            background: #f0f4ff;
        }
    
        /* ── LLM Inline Picker (menu-bar-right) ── */

        .llm-picker {
            position: relative;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 6px;
            cursor: pointer;
            user-select: none;
            font-size: 0.82em;
            color: #555;
            border: 1px solid #e0e0e0;
            background: #fafafa;
            margin-right: 12px;
            transition: background 0.15s, border-color 0.15s;
            height: 28px;
            box-sizing: border-box;
        }

        /* Step 1.1: show two LLM pickers side-by-side. */
        .llm-picker-split {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-right: 12px;
        }

        .llm-picker-split .llm-picker {
            margin-right: 0;
        }

        .llm-picker-split .llm-picker-label {
            max-width: 110px;
        }

        .llm-picker:hover {
            background: #f0f2ff;
            border-color: #b4bfee;
        }

        .llm-picker-icon {
            flex-shrink: 0;
            color: #667eea;
        }

        .llm-picker-label {
            font-weight: 500;
            white-space: nowrap;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #333;
        }

        .llm-picker-caret {
            flex-shrink: 0;
            color: #999;
            transition: transform 0.15s;
        }

        .llm-picker-dropdown.open ~ .llm-picker-caret,
        .llm-picker:has(.llm-picker-dropdown.open) .llm-picker-caret {
            transform: rotate(180deg);
        }

        .llm-picker-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            min-width: 240px;
            max-height: 380px;
            overflow-y: auto;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
            z-index: 5000;
            padding: 4px 0;
        }

        .llm-picker-dropdown.open {
            display: block;
        }

        .llm-picker-loading {
            padding: 14px 12px;
            text-align: center;
            color: #999;
            font-size: 0.85em;
        }

        .llm-dd-empty {
            padding: 14px 12px;
            text-align: center;
            color: #b0b0b0;
            font-size: 0.85em;
        }

        .llm-dd-provider {
            padding: 6px 12px 2px;
            font-size: 0.68em;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #aaa;
        }

        .llm-dd-provider:not(:first-child) {
            margin-top: 2px;
            border-top: 1px solid #f0f0f0;
            padding-top: 8px;
        }

        .llm-dd-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            cursor: pointer;
            transition: background 0.1s;
            line-height: 1;
        }

        .llm-dd-item:hover {
            background: #f5f7ff;
        }

        .llm-dd-item.active {
            background: #f0f2ff;
        }

        .llm-dd-item.llm-dd-item-disabled {
            cursor: not-allowed;
            opacity: 0.48;
            pointer-events: none;
        }

        .llm-dd-item-unavail {
            font-weight: 400;
            font-size: 0.88em;
            color: #94a3b8;
        }

        .llm-dd-check {
            width: 16px;
            flex-shrink: 0;
            text-align: center;
            color: #667eea;
            font-size: 0.82em;
            font-weight: 700;
        }

        .llm-dd-item-name {
            font-size: 0.85em;
            font-weight: 500;
            color: #333;
            flex: 1;
            white-space: nowrap;
        }

        .llm-dd-item-cost {
            font-size: 0.78em;
            letter-spacing: -0.5px;
            flex-shrink: 0;
            display: flex;
            gap: 0;
        }

        .llm-dd-auto-hint {
            font-size: 0.72em;
            color: #aaa;
            font-weight: 400;
            letter-spacing: 0;
        }

        .llm-dd-sep {
            height: 1px;
            background: #f0f0f0;
            margin: 3px 0;
        }

        .llm-cost-on {
            color: #667eea;
            font-weight: 700;
        }

        .llm-cost-off {
            color: #ddd;
            font-weight: 700;
        }

        /* Step 1 (IDEA) UI Styles */
        .step1-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }

        .step1-modal-content {
            background: white;
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            max-width: 900px;
            width: 90%;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .step1-modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .step1-modal-header h3 {
            margin: 0;
            font-size: 1.2em;
            color: #333;
        }

        .step1-modal-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: background 0.2s;
        }

        .step1-modal-close:hover {
            background: #f0f0f0;
        }

        .step1-modal-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
        }

        .step1-header {
            margin-bottom: 24px;
        }

        .step1-header h3 {
            margin: 0 0 12px 0;
            font-size: 1.1em;
            color: #333;
        }

        .step1-progress {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .step1-progress-bar {
            flex: 1;
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
        }

        .step1-progress-fill {
            height: 100%;
            background: #667eea;
            transition: width 0.3s;
        }

        .step1-progress-text {
            font-size: 0.85em;
            color: #666;
            white-space: nowrap;
        }

        .step1-substeps {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .step1-substep {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 16px;
            background: white;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .step1-substep:hover {
            border-color: #667eea;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
        }

        .step1-substep.completed {
            border-color: #4caf50;
            background: #f1f8f4;
        }

        .step1-substep.approved {
            border-color: #2196F3;
            background: #e3f2fd;
        }

        .step1-substep.disabled {
            opacity: 0.6;
            background: #f5f5f5;
        }

        .step1-substep-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }

        .step1-substep-number {
            font-weight: 600;
            color: #667eea;
            font-size: 0.9em;
        }

        .step1-substep-status {
            font-size: 1.2em;
            color: #4caf50;
        }

        .step1-substep.disabled .step1-substep-status {
            color: #999;
        }

        .step1-substep-title {
            margin: 0;
            font-size: 1em;
            font-weight: 600;
            color: #333;
            flex: 1;
        }

        .step1-substep-description {
            margin: 0 0 12px 0;
            font-size: 0.9em;
            color: #666;
            line-height: 1.4;
        }

        .step1-substep-actions {
            display: flex;
            gap: 8px;
        }

        .step1-btn {
            padding: 8px 16px;
            border: 1px solid #667eea;
            border-radius: 4px;
            background: white;
            color: #667eea;
            font-size: 0.9em;
            cursor: pointer;
            transition: all 0.2s;
        }

        .step1-btn:hover:not(:disabled) {
            background: #667eea;
            color: white;
        }

        .step1-btn-generate {
            background: #667eea;
            color: white;
        }

        .step1-btn-generate:hover {
            background: #5568d3;
        }

        .step1-btn-approve {
            background: #2196F3;
            color: white;
            border-color: #2196F3;
        }

        .step1-btn-approve:hover {
            background: #1976D2;
        }

        .step1-btn-unapprove {
            background: #ff9800;
            color: white;
            border-color: #ff9800;
        }

        .step1-btn-unapprove:hover {
            background: #f57c00;
        }

        .step1-approved-badge {
            background: #2196F3;
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75em;
            font-weight: 600;
            margin-left: auto;
        }

        .step1-btn-disabled {
            opacity: 0.5;
            cursor: not-allowed;
            border-color: #ccc;
            color: #999;
        }

        .step1-substep-output {
            margin-top: 16px;
            padding: 16px;
            background: #f8f9fa;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
        }

        .step1-output-content {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .step1-output-section {
            background: white;
            padding: 16px;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
        }

        .step1-output-section h5 {
            margin: 0 0 12px 0;
            font-size: 0.95em;
            color: #333;
            font-weight: 600;
        }

        .step1-markdown {
            font-size: 0.9em;
            line-height: 1.6;
            color: #333;
        }

        .step1-json {
            background: #f5f5f5;
            padding: 12px;
            border-radius: 4px;
            font-size: 0.85em;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            color: #333;
        }

        .step1-contribution-item,
        .step1-theme-item {
            margin-bottom: 12px;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 4px;
            border-left: 3px solid #667eea;
        }

        .step1-contribution-item strong,
        .step1-theme-item strong {
            display: block;
            margin-bottom: 8px;
            color: #333;
        }

        .step1-contribution-item div,
        .step1-theme-item div {
            font-size: 0.9em;
            color: #666;
            margin-top: 4px;
        }

        .step1-task-list {
            margin: 0;
            padding-left: 20px;
        }

        .step1-task-list li {
            margin-bottom: 8px;
            color: #333;
            line-height: 1.5;
        }

        .step1-loading {
            padding: 20px;
            text-align: center;
            color: #666;
        }

        .step1-error {
            padding: 16px;
            background: #ffebee;
            border: 1px solid #f44336;
            border-radius: 4px;
            color: #c62828;
        }

        /* Step 1 Substep Page Styles (for tabs) */
        .step1-substep-content {
            padding: 0;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
        }
        /* Full-height chain for Step 1.1 (workspace-content sets flex above) */
        .workspace-content .step1-substep-content {
            max-width: none;
        }

        .step1-substep-page {
            background: white;
            border-radius: 0;
            padding: 0;
            font-size: 0.9em;
        }

        .step1-substep-header-page {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 2px solid #e0e0e0;
        }

        .step1-substep-state-circle-page {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .step1-substep-state-circle-page.step1-state-not-started {
            background: #e0e0e0;
            border: 2px solid #bdbdbd;
        }

        .step1-substep-state-circle-page.step1-state-partial {
            background: #fff3e0;
            border: 2px solid #ff9800;
        }

        .step1-substep-state-circle-page.step1-state-completed {
            background: #e3f2fd;
            border: 2px solid #2196F3;
        }

        .step1-substep-title-page {
            margin: 0;
            font-size: 1.1em;
            color: #333;
            font-weight: 600;
        }

        .step1-substep-status-badge {
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 0.9em;
            font-weight: 600;
        }

        .step1-substep-status-badge.approved {
            background: #e3f2fd;
            color: #2196F3;
        }

        .step1-substep-status-badge.generated {
            background: #f1f8f4;
            color: #4caf50;
        }

        .step1-substep-status-badge.pending {
            background: #fff3e0;
            color: #ff9800;
        }

        .step1-substep-actions-page {
            display: flex;
            gap: 12px;
            margin-bottom: 24px;
        }

        .step1-btn-page {
            padding: 10px 20px;
            border: 1px solid #667eea;
            border-radius: 6px;
            background: white;
            color: #667eea;
            font-size: 0.95em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .step1-btn-page:hover:not(:disabled) {
            background: #667eea;
            color: white;
        }

        .step1-btn-page:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .step1-btn-generate {
            background: #667eea;
            color: white;
        }

        .step1-btn-generate:hover {
            background: #5568d3;
        }

        .step1-btn-approve {
            background: #2196F3;
            color: white;
            border-color: #2196F3;
        }

        .step1-btn-approve:hover {
            background: #1976D2;
        }

        .step1-btn-unapprove {
            background: #ff9800;
            color: white;
            border-color: #ff9800;
        }

        .step1-btn-unapprove:hover {
            background: #f57c00;
        }

        .step1-substep-output-page {
            margin-top: 24px;
        }

        .step1-output-section-page {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 6px;
            margin-bottom: 20px;
            border: 1px solid #e0e0e0;
        }

        .step1-output-section-page h3 {
            margin: 0 0 12px 0;
            font-size: 1em;
            color: #333;
            font-weight: 600;
        }

        .step1-markdown-page {
            font-size: 0.9em;
            line-height: 1.6;
            color: #333;
        }

        /* Step 1.3 - manuscript + right control panel */
        .workspace-content .step1-substep-content > .step13-wrap {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .workspace-content .step13-wrap > .step13-main-layout {
            flex: 1 1 auto;
            min-height: 0;
            align-items: stretch;
        }
        .step13-main-layout {
            display: flex;
            flex-direction: row;
            gap: 20px;
            align-items: flex-start;
            margin-top: 4px;
        }
        .workspace-content .step13-paper-pane {
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow: hidden;
        }
        .workspace-content .step13-paper-pane-inner {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .workspace-content .step13-paper-pane > .step13-pdf-placeholder-wrap {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            margin-top: 0;
        }
        .workspace-content .step13-pdf-placeholder-wrap > .step13-pdf-desk {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }
        .workspace-content .step13-pdf-placeholder-wrap .step13-pdf-sheet {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }
        .workspace-content .step13-pdf-placeholder-wrap .step13-pdf-inner {
            flex: 1 1 auto;
            min-height: 0;
        }
        .step13-paper-pane {
            flex: 1;
            min-width: 0;
        }
        .step13-controls-panel {
            flex: 0 0 300px;
            max-width: 100%;
            box-sizing: border-box;
            padding: 14px 16px 16px;
            background: #fafbff;
            border: 1px solid #e3e8f7;
            border-radius: 10px;
            position: sticky;
            top: 8px;
            align-self: flex-start;
        }
        .step13-controls-panel .step13-hint {
            color: #555;
            font-size: 0.88em;
            margin: 0 0 12px 0;
            line-height: 1.45;
        }
        .step13-controls-panel .step13-dir-chip {
            margin-bottom: 12px;
        }
        .step13-controls-panel .step13-dir-missing {
            margin-bottom: 12px;
        }
        .step13-controls-panel .step13-toolbar {
            margin-bottom: 12px;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
        .step13-panel-actions {
            flex-direction: column !important;
            align-items: stretch !important;
            margin-bottom: 0 !important;
            gap: 8px !important;
        }
        .step13-panel-actions .step1-btn-page {
            width: 100%;
            box-sizing: border-box;
            text-align: center;
        }
        .step13-controls-panel .step13-details {
            margin-top: 14px;
            margin-left: 0;
            margin-right: 0;
            max-width: none;
        }
        @media (max-width: 900px) {
            .step13-main-layout {
                flex-direction: column;
            }
            .step13-controls-panel {
                position: static;
                width: 100%;
                flex: none;
            }
        }

        /* Step 1.3 - LLM prompt review modal (before generate-problem) */
        .step13-llm-preview-overlay {
            position: fixed;
            inset: 0;
            z-index: 10060;
            background: rgba(15, 23, 42, 0.45);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            box-sizing: border-box;
        }
        .step13-llm-preview-dialog {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
            max-width: min(920px, 100%);
            max-height: min(92vh, 900px);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .step13-llm-preview-head {
            padding: 16px 18px 8px;
            border-bottom: 1px solid #e8ecf4;
        }
        .step13-llm-preview-title {
            margin: 0 0 8px 0;
            font-size: 1.1rem;
            font-weight: 600;
            color: #0f172a;
        }
        .step13-llm-preview-lead {
            margin: 0;
            font-size: 0.85rem;
            color: #64748b;
            line-height: 1.45;
        }
        .step13-llm-preview-meta {
            padding: 10px 18px;
            font-size: 0.82rem;
            color: #334155;
            background: #f8fafc;
            border-bottom: 1px solid #e8ecf4;
        }
        .step13-llm-preview-meta p {
            margin: 0 0 6px 0;
        }
        .step13-llm-preview-meta p:last-child {
            margin-bottom: 0;
        }
        .step13-llm-preview-scroll {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 12px 18px;
        }
        .step13-llm-preview-dir {
            margin-bottom: 18px;
        }
        .step13-llm-preview-h3 {
            margin: 0 0 10px 0;
            font-size: 0.95rem;
            color: #4338ca;
        }
        .step13-llm-preview-call {
            margin-bottom: 16px;
            padding-bottom: 14px;
            border-bottom: 1px dashed #e2e8f0;
        }
        .step13-llm-preview-call:last-child {
            border-bottom: none;
        }
        .step13-llm-preview-call h4 {
            margin: 0 0 6px 0;
            font-size: 0.82rem;
            font-weight: 600;
            color: #0f172a;
        }
        .step13-llm-preview-sizes {
            margin: 0 0 8px 0;
            font-size: 0.75rem;
            color: #64748b;
        }
        .step13-llm-preview-note {
            margin: 0 0 8px 0;
            font-size: 0.78rem;
            color: #475569;
            font-style: italic;
        }
        .step13-llm-preview-label {
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #64748b;
            margin: 8px 0 4px 0;
        }
        .step13-llm-preview-pre {
            margin: 0;
            padding: 10px 12px;
            background: #0f172a;
            color: #e2e8f0;
            border-radius: 8px;
            font-size: 0.68rem;
            line-height: 1.45;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 220px;
            overflow: auto;
        }
        .step13-llm-preview-foot {
            margin: 0;
            padding: 8px 18px;
            font-size: 0.78rem;
            color: #92400e;
            background: #fffbeb;
            border-top: 1px solid #fde68a;
        }
        .step13-llm-preview-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 12px 18px 16px;
            border-top: 1px solid #e8ecf4;
            background: #fafbff;
        }

        .step13-paper-pane-inner {
            width: 100%;
        }
        .step13-view-tabs {
            display: flex;
            gap: 0;
            margin-bottom: 12px;
            border-bottom: 1px solid #dfe3ea;
        }
        .step13-view-tab {
            padding: 10px 18px;
            font-size: 0.88rem;
            font-weight: 600;
            color: #64748b;
            background: transparent;
            border: none;
            border-bottom: 3px solid transparent;
            cursor: pointer;
            margin-bottom: -1px;
            font-family: system-ui, -apple-system, sans-serif;
        }
        .step13-view-tab:hover {
            color: #4338ca;
        }
        .step13-view-tab--active {
            color: #4338ca;
            border-bottom-color: #667eea;
        }
        .step13-tab-panel[hidden] {
            display: none !important;
        }

        .step13-dir-chip {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 14px;
            padding: 10px 14px;
            background: linear-gradient(135deg, #f8f6ff 0%, #f0f7ff 100%);
            border: 1px solid #e3e8f7;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }
        .step13-dir-chip-label {
            font-size: 0.72em;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #667eea;
            font-weight: 600;
        }
        .step13-dir-chip-title {
            font-size: 0.95em;
            color: #333;
            line-height: 1.35;
        }
        .step13-dir-missing {
            margin-bottom: 14px;
            padding: 12px 14px;
            background: #fff8f0;
            border: 1px solid #ffe0c2;
            border-radius: 8px;
            font-size: 0.9em;
            color: #5d4a35;
        }
        .step13-details {
            margin-top: 14px;
            font-size: 0.82em;
            color: #666;
        }
        .step13-details summary {
            cursor: pointer;
            color: #5c6bc0;
            font-weight: 600;
        }
        .step13-details-body {
            margin-top: 8px;
            word-break: break-all;
        }

        .step13-subtitle {
            margin: 0 0 10px 0;
            font-size: 0.95em;
            color: #444;
        }
        .step13-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 12px;
            font-size: 0.88em;
            color: #444;
        }
        .step13-tool {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            user-select: none;
        }
        .step13-popover {
            display: none;
            position: fixed;
            z-index: 10050;
            min-width: 240px;
            max-width: min(320px, calc(100vw - 16px));
            padding: 0;
            border-radius: 10px;
            background: #fff;
            border: 1px solid #e0e4f0;
            box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
            font-size: 0.82rem;
            line-height: 1.45;
        }
        .step13-popover--open {
            display: block;
        }
        .step13-popover-inner {
            padding: 10px 12px 12px;
        }
        .step13-pop-line {
            margin-bottom: 6px;
            color: #333;
        }
        .step13-pop-line strong {
            display: block;
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #667eea;
            margin-bottom: 2px;
        }
        .step13-pop-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px solid #eef0f7;
        }
        .step13-pop-actions-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
        }
        .step13-pop-ico {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 5px;
            border: none;
            border-radius: 6px;
            background: transparent;
            cursor: pointer;
            line-height: 0;
            color: rgba(127, 29, 29, 0.5);
        }
        .step13-pop-ico:hover {
            color: rgba(127, 29, 29, 1);
            background: rgba(127, 29, 29, 0.08);
        }
        .step13-pop-ico-svg {
            display: block;
        }
        .step13-pop-actions .step13-pop-btn {
            font-size: 0.72rem !important;
            padding: 4px 8px !important;
        }
        .step13-dir-chip[role="button"] {
            cursor: pointer;
        }
        .step13-dir-chip[role="button"]:hover {
            border-color: #c5cae9;
        }

        .step1-json-page {
            background: #f5f5f5;
            padding: 12px;
            border-radius: 4px;
            font-size: 0.85em;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            color: #333;
            border: 1px solid #e0e0e0;
        }

        .step1-contribution-item-page,
        .step1-theme-item-page {
            background: white;
            padding: 16px;
            border-radius: 6px;
            margin-bottom: 12px;
            border-left: 4px solid #667eea;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .step1-contribution-item-page strong,
        .step1-theme-item-page strong {
            display: block;
            margin-bottom: 8px;
            font-size: 0.95em;
            color: #333;
        }

        .step1-contribution-item-page div,
        .step1-theme-item-page div {
            margin-top: 6px;
            font-size: 0.85em;
            color: #666;
            line-height: 1.5;
        }

        .step1-task-list-page {
            margin: 0;
            padding-left: 20px;
        }

        .step1-task-list-page li {
            margin-bottom: 8px;
            color: #333;
            line-height: 1.6;
            font-size: 0.9em;
        }

        .step1-empty-state {
            padding: 40px;
            text-align: center;
            color: #999;
            font-size: 0.95em;
            background: #f8f9fa;
            border-radius: 6px;
            border: 2px dashed #e0e0e0;
        }

        .step1-input-section {
            width: 100%;
            margin-bottom: 16px;
        }

        .step1-input-section label {
            display: block;
            margin-bottom: 8px;
            font-size: 0.9em;
            font-weight: 500;
            color: #333;
        }

        .step1-idea-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.9em;
            font-family: inherit;
            resize: vertical;
            min-height: 100px;
            margin-bottom: 12px;
        }

        .step1-idea-input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        /* State circles for inline substeps */
        .step1-substep-state-circle {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-bottom: 4px;
        }

        .step1-substep-state-circle.step1-state-not-started {
            background: #e0e0e0;
            border: 2px solid #bdbdbd;
        }

        .step1-substep-state-circle.step1-state-partial {
            background: #fff3e0;
            border: 2px solid #ff9800;
        }

        .step1-substep-state-circle.step1-state-completed {
            background: #e3f2fd;
            border: 2px solid #2196F3;
        }

        .step1-substep-inline {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        /* Structured Content Visualization */
        .step1-structured-content {
            margin-top: 24px;
        }

        .step1-section-card {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            overflow: hidden;
        }

        .step1-section-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 20px;
            background: #f8f9fa;
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;
        }

        .step1-section-header:hover {
            background: #f0f0f0;
        }

        .step1-section-icon {
            font-size: 1.2em;
        }

        .step1-section-header h3 {
            margin: 0;
            flex: 1;
            font-size: 1em;
            font-weight: 600;
            color: #333;
        }

        .step1-section-toggle {
            font-size: 0.8em;
            color: #666;
            transition: transform 0.2s;
        }

        .step1-section-body {
            padding: 20px;
            max-height: none;
            overflow: visible;
            transition: max-height 0.3s ease-out;
        }

        .step1-section-body.step1-section-collapsed {
            max-height: 0;
            padding: 0 20px;
            overflow: hidden;
        }

        /* Research Context Grid */
        .step1-context-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 16px;
        }

        .step1-context-item {
            padding: 12px;
            background: #f8f9fa;
            border-radius: 6px;
            border-left: 3px solid #667eea;
            font-size: 0.9em;
            line-height: 1.6;
        }

        .step1-context-item strong {
            display: block;
            margin-bottom: 4px;
            color: #667eea;
            font-size: 0.85em;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Core Problem Items */
        .step1-problem-item {
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid #e0e0e0;
        }

        .step1-problem-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .step1-problem-item strong {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-size: 0.9em;
            font-weight: 600;
        }

        .step1-problem-item p {
            margin: 0;
            font-size: 0.9em;
            line-height: 1.7;
            color: #555;
        }

        .step1-objective {
            font-weight: 600;
            color: #667eea !important;
            font-size: 0.95em !important;
        }

        /* Gap Analysis Cards */
        .step1-gap-card {
            background: #fff3e0;
            border-left: 4px solid #ff9800;
            padding: 16px;
            border-radius: 6px;
            margin-bottom: 12px;
        }

        .step1-gap-card:last-child {
            margin-bottom: 0;
        }

        .step1-gap-type {
            display: inline-block;
            background: #ff9800;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.75em;
            font-weight: 600;
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .step1-gap-card p {
            margin: 8px 0;
            font-size: 0.9em;
            line-height: 1.6;
            color: #333;
        }

        .step1-gap-card strong {
            color: #e65100;
        }

        /* Scope Boundaries */
        .step1-boundary-group {
            margin-bottom: 20px;
            padding: 16px;
            background: #f8f9fa;
            border-radius: 6px;
        }

        .step1-boundary-group:last-child {
            margin-bottom: 0;
        }

        .step1-boundary-group strong {
            display: block;
            margin-bottom: 12px;
            color: #333;
            font-size: 0.9em;
            font-weight: 600;
        }

        .step1-boundary-group ul {
            margin: 0;
            padding-left: 20px;
        }

        .step1-boundary-group li {
            margin-bottom: 8px;
            font-size: 0.9em;
            line-height: 1.6;
            color: #555;
        }

        /* Research Questions */
        .step1-rq-item {
            padding: 16px;
            background: #e3f2fd;
            border-left: 4px solid #2196F3;
            border-radius: 6px;
            margin-bottom: 12px;
        }

        .step1-rq-item:last-child {
            margin-bottom: 0;
        }

        .step1-rq-item strong {
            font-size: 0.9em;
            line-height: 1.7;
            color: #1976D2;
        }

        /* Risk Cards */
        .step1-risk-card {
            background: #ffebee;
            border-left: 4px solid #f44336;
            padding: 16px;
            border-radius: 6px;
            margin-bottom: 12px;
        }

        .step1-risk-card:last-child {
            margin-bottom: 0;
        }

        .step1-risk-card p {
            margin: 8px 0;
            font-size: 0.9em;
            line-height: 1.6;
            color: #333;
        }

        .step1-risk-card strong {
            color: #c62828;
        }

        /* Feedback Form */
        .step1-feedback-card {
            border: 2px solid #667eea;
            background: #f3f4ff;
        }

        .step1-feedback-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .step1-feedback-form label {
            font-size: 0.9em;
            font-weight: 500;
            color: #333;
        }

        .step1-feedback-select {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.9em;
            background: white;
            cursor: pointer;
        }

        .step1-feedback-select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .step1-feedback-textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.9em;
            font-family: inherit;
            resize: vertical;
            min-height: 100px;
        }

        .step1-feedback-textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .step1-btn-refine {
            background: #667eea;
            color: white;
            border-color: #667eea;
            align-self: flex-start;
        }

        .step1-btn-refine:hover {
            background: #5568d3;
        }

        /* ============================================
           STEP-BY-STEP WIZARD DESIGN
           ============================================ */
        
        .step1-wizard-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 24px;
        }
        
        .step1-context-banner {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 8px;
            padding: 16px 20px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
        }
        
        .step1-context-icon {
            font-size: 1.5em;
            flex-shrink: 0;
        }
        
        .step1-context-content {
            flex: 1;
        }
        
        .step1-context-label {
            font-size: 0.75em;
            opacity: 0.9;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        
        .step1-context-value {
            font-size: 1em;
            font-weight: 600;
        }
        
        .step1-wizard-step {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 20px;
            margin-bottom: 16px;
            display: flex;
            gap: 16px;
        }
        
        .step1-wizard-step-number {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #667eea;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.9em;
            flex-shrink: 0;
        }
        
        .step1-wizard-step-complete .step1-wizard-step-number {
            background: #4caf50;
        }
        
        .step1-wizard-step-content {
            flex: 1;
        }
        
        .step1-wizard-question {
            font-size: 1em;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        
        .step1-wizard-hint {
            font-size: 0.85em;
            color: #666;
            margin-bottom: 16px;
        }
        
        .step1-wizard-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 0.9em;
            font-family: inherit;
            resize: vertical;
            margin-bottom: 12px;
        }
        
        .step1-wizard-input:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .step1-wizard-btn {
            padding: 8px 16px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 0.9em;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .step1-wizard-btn:hover {
            background: #5568d3;
        }
        
        .step1-wizard-btn-secondary {
            padding: 8px 16px;
            background: white;
            color: #667eea;
            border: 1px solid #667eea;
            border-radius: 4px;
            font-size: 0.9em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .step1-wizard-btn-secondary:hover {
            background: #f0f4ff;
        }
        
        .step1-wizard-extracted {
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 16px;
            margin-bottom: 16px;
        }
        
        .step1-wizard-extracted-title {
            font-size: 0.85em;
            font-weight: 600;
            color: #666;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .step1-wizard-extracted-items {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .step1-wizard-extracted-item {
            font-size: 0.9em;
            color: #333;
            line-height: 1.5;
        }
        
        .step1-wizard-extracted-item span {
            font-weight: 600;
            color: #666;
            margin-right: 8px;
        }
        
        .step1-wizard-progress {
            text-align: center;
            font-size: 0.85em;
            color: #666;
            margin: 16px 0;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 4px;
        }
        
        .step1-wizard-actions {
            display: flex;
            gap: 12px;
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid #e0e0e0;
        }
        
        /* Multiple Choice Options */
        .step1-multiple-choice {
            margin: 16px 0;
        }
        
        .step1-multiple-choice-label {
            font-size: 0.85em;
            font-weight: 600;
            color: #666;
            margin-bottom: 12px;
        }
        
        .step1-options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .step1-option-btn {
            background: white;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 12px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: left;
        }
        
        .step1-option-btn:hover {
            border-color: #667eea;
            background: #f0f4ff;
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
        }
        
        .step1-option-value {
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }
        
        .step1-option-desc {
            font-size: 0.85em;
            color: #666;
        }
        
        /* Proactive Suggestion */
        .step1-proactive-suggestion {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 8px;
            padding: 16px;
            margin: 16px 0;
            color: white;
        }
        
        .step1-proactive-label {
            font-size: 0.85em;
            opacity: 0.9;
            margin-bottom: 8px;
        }
        
        .step1-proactive-content {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .step1-proactive-text {
            font-weight: 600;
            font-size: 1em;
        }
        
        .step1-proactive-explanation {
            font-size: 0.85em;
            opacity: 0.9;
        }
        
        .step1-proactive-btn {
            margin-top: 8px;
            padding: 8px 16px;
            background: white;
            color: #667eea;
            border: none;
            border-radius: 4px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .step1-proactive-btn:hover {
            background: #f0f4ff;
            transform: scale(1.05);
        }
        
        /* Custom Answer Toggle */
        .step1-custom-answer {
            margin-top: 16px;
        }
        
        .step1-custom-answer-toggle {
            color: #667eea;
            cursor: pointer;
            font-size: 0.9em;
            text-decoration: underline;
            margin-bottom: 8px;
        }
        
        .step1-custom-answer-toggle:hover {
            color: #5568d3;
        }
        
        .step1-custom-answer-input {
            margin-top: 12px;
        }
        
        /* Knowledge Graph Visualization */
        .step1-knowledge-graph {
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 24px;
        }
        
        .step1-knowledge-graph-title {
            font-size: 1.1em;
            font-weight: 600;
            color: #333;
            margin-bottom: 20px;
        }
        
        .step1-knowledge-graph-container {
            display: flex;
            flex-direction: column;
            gap: 16px;
            overflow-x: auto;
        }
        
        .step1-graph-svg {
            width: 100%;
            min-height: 400px;
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .step1-graph-title-text {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            dominant-baseline: middle;
        }
        
        .step1-graph-value-text {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            dominant-baseline: middle;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .step1-graph-svg {
                min-height: 300px;
            }
        }
        
        /* Idea Blueprint 4-Panel Layout */
        .step1-blueprint-container {
            display: grid;
            grid-template-columns: 300px 1fr 300px;
            grid-template-rows: auto 1fr;
            gap: 20px;
            max-width: 1600px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .step1-panel {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .step1-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid #e0e0e0;
            background: #f8f9fa;
        }
        
        .step1-panel-header h3 {
            margin: 0;
            font-size: 1.1em;
            font-weight: 600;
            color: #333;
        }
        
        .step1-panel-locked {
            font-size: 0.85em;
            color: #666;
        }
        
        .step1-panel-content {
            padding: 20px;
        }
        
        /* Conference Context Panel */
        .step1-conference-panel {
            grid-column: 1;
            grid-row: 1 / 3;
        }
        
        .step1-conference-info {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .step1-conference-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .step1-conference-label {
            font-size: 0.85em;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .step1-conference-value {
            font-size: 1em;
            color: #333;
            font-weight: 500;
        }
        
        .step1-review-criteria {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 4px;
        }
        
        .step1-criterion-tag {
            background: #667eea;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75em;
            font-weight: 500;
        }
        
        /* Idea Panel */
        .step1-idea-panel {
            grid-column: 2;
            grid-row: 1 / 3;
        }
        
        .step1-blueprint-status {
            font-size: 0.85em;
            color: #667eea;
            font-weight: 500;
            background: #f0f4ff;
            padding: 4px 8px;
            border-radius: 4px;
        }
        
        /* Quality Signals Panel */
        .step1-quality-panel {
            grid-column: 3;
            grid-row: 1 / 3;
        }
        
        .step1-quality-signals {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .step1-quality-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .step1-quality-label {
            font-size: 0.9em;
            color: #666;
            font-weight: 500;
        }
        
        .step1-quality-status {
            font-size: 0.9em;
            font-weight: 600;
        }
        
        .step1-quality-score {
            font-size: 0.85em;
            color: #999;
            margin-left: 8px;
        }
        
        .step1-track-warnings {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #e0e0e0;
        }
        
        .step1-warning-title {
            font-size: 0.9em;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        
        .step1-warning-item {
            font-size: 0.85em;
            color: #666;
            padding: 6px 0;
            line-height: 1.4;
        }
        
        /* Responsive */
        @media (max-width: 1200px) {
            .step1-blueprint-container {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
            }
            
            .step1-conference-panel,
            .step1-idea-panel,
            .step1-quality-panel {
                grid-column: 1;
                grid-row: auto;
            }
        }
        
        /* Simple 3-Panel Layout - Guided Thinking */
        .step1-simple-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 24px;
        }
        
        .step1-progress-strip {
            display: flex;
            gap: 16px;
            margin-bottom: 32px;
            padding-bottom: 16px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .step1-progress-item {
            font-size: 0.9em;
            color: #999;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .step1-progress-item.active {
            color: #667eea;
            font-weight: 600;
        }
        
        .step1-progress-item.faded {
            opacity: 0.4;
        }
        
        .step1-three-panel {
            display: grid;
            grid-template-columns: 400px 1fr 300px;
            gap: 24px;
        }
        
        /* Left: Guided Form */
        .step1-guided-panel {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .step1-guided-card {
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .step1-guided-card.active {
            border-color: #667eea;
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
        }
        
        .step1-guided-card.complete {
            opacity: 0.7;
            border-color: #e0e0e0;
        }
        
        .step1-card-number {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #667eea;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.9em;
            margin-bottom: 16px;
        }
        
        .step1-guided-card.complete .step1-card-number {
            background: #4caf50;
        }
        
        .step1-card-title {
            font-size: 1.1em;
            font-weight: 600;
            color: #333;
            margin: 0 0 8px 0;
        }
        
        .step1-card-hint {
            font-size: 0.85em;
            color: #666;
            margin-bottom: 16px;
            line-height: 1.4;
        }
        
        .step1-simple-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.95em;
            font-family: inherit;
            resize: vertical;
            margin-bottom: 8px;
            transition: border-color 0.2s;
        }
        
        .step1-simple-input:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .step1-word-count {
            font-size: 0.75em;
            color: #999;
            text-align: right;
            margin-bottom: 16px;
        }
        
        .step1-primary-btn {
            width: 100%;
            padding: 12px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 0.95em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .step1-primary-btn:hover {
            background: #5568d3;
            transform: translateY(-1px);
        }
        
        .step1-primary-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }
        
        .step1-card-preview {
            font-size: 0.9em;
            color: #666;
            margin: 8px 0;
            line-height: 1.5;
        }
        
        .step1-secondary-btn-small {
            padding: 6px 12px;
            background: white;
            color: #667eea;
            border: 1px solid #667eea;
            border-radius: 4px;
            font-size: 0.85em;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .step1-secondary-btn-small:hover {
            background: #f0f4ff;
        }
        
        /* Center: Live Idea Map */
        .step1-map-panel {
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 400px;
        }
        
        .step1-map-placeholder {
            text-align: center;
            color: #999;
        }
        
        .step1-map-hint {
            font-size: 0.9em;
        }
        
        .step1-simple-graph {
            width: 100%;
            height: 300px;
        }
        
        /* Right: Feedback Panel */
        .step1-feedback-panel {
            display: flex;
            flex-direction: column;
        }
        
        .step1-feedback-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        .step1-feedback-title {
            font-size: 1em;
            font-weight: 600;
            color: #333;
            margin: 0 0 12px 0;
        }
        
        .step1-track-name {
            font-size: 0.85em;
            color: #666;
            margin-bottom: 16px;
        }
        
        .step1-alignment-bar {
            position: relative;
            width: 100%;
            height: 24px;
            background: #f0f0f0;
            border-radius: 12px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .step1-alignment-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            transition: width 0.3s ease;
        }
        
        .step1-alignment-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.85em;
            font-weight: 600;
            color: #333;
        }
        
        .step1-feedback-items {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .step1-feedback-item {
            font-size: 0.85em;
            color: #666;
        }
        
        .step1-feedback-warning {
            background: #fff3cd;
            border-left: 3px solid #ffc107;
            padding: 12px;
            border-radius: 4px;
            margin-bottom: 16px;
        }
        
        .step1-warning-title-small {
            font-size: 0.85em;
            font-weight: 600;
            color: #333;
            margin-bottom: 6px;
        }
        
        .step1-warning-text {
            font-size: 0.8em;
            color: #666;
            line-height: 1.4;
        }
        
        .step1-refine-btn {
            width: 100%;
            padding: 10px;
            background: white;
            color: #667eea;
            border: 1px solid #667eea;
            border-radius: 6px;
            font-size: 0.9em;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .step1-refine-btn:hover {
            background: #f0f4ff;
        }
        
        /* One Sentence Summary */
        .step1-summary-card {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            margin-top: 16px;
        }
        
        .step1-summary-title {
            font-size: 0.9em;
            font-weight: 600;
            color: #333;
            margin: 0 0 12px 0;
        }
        
        .step1-summary-text {
            font-size: 0.95em;
            color: #333;
            line-height: 1.6;
            padding: 12px;
            background: white;
            border-radius: 6px;
            border: 1px solid #e0e0e0;
            min-height: 60px;
            cursor: text;
        }
        
        .step1-summary-text:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .step1-summary-hint {
            font-size: 0.75em;
            color: #999;
            margin-top: 8px;
        }
        
        /* Contribution Type Chips */
        .step1-options-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .step1-chip {
            padding: 8px 16px;
            background: white;
            border: 2px solid #e0e0e0;
            border-radius: 20px;
            font-size: 0.85em;
            cursor: pointer;
            transition: all 0.2s;
            color: #333;
        }
        
        .step1-chip:hover {
            border-color: #667eea;
            background: #f0f4ff;
        }
        
        .step1-chip.selected {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }
        
        .step1-proactive-suggestion-simple {
            background: #f0f4ff;
            border-left: 3px solid #667eea;
            padding: 12px;
            border-radius: 4px;
            margin-bottom: 16px;
        }
        
        .step1-proactive-text {
            font-size: 0.9em;
            color: #333;
            margin-bottom: 8px;
        }
        
        .step1-proactive-btn-simple {
            padding: 6px 12px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 0.85em;
            cursor: pointer;
        }
        
        .step1-custom-toggle {
            font-size: 0.85em;
            color: #667eea;
            cursor: pointer;
            text-decoration: underline;
            margin-bottom: 12px;
        }
        
        .step1-finalize-section {
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid #e0e0e0;
        }
        
        .step1-finalize-btn {
            font-size: 1em;
            padding: 14px;
        }
        
        /* Refinement Modal */
        .step1-refinement-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .step1-modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
        }
        
        .step1-modal-content {
            position: relative;
            background: white;
            border-radius: 12px;
            padding: 32px;
            max-width: 500px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
        }
        
        .step1-modal-content h3 {
            margin: 0 0 16px 0;
            font-size: 1.2em;
            color: #333;
        }
        
        .step1-modal-content p {
            margin: 0 0 12px 0;
            color: #666;
        }
        
        .step1-modal-content ul {
            margin: 0 0 24px 0;
            padding-left: 20px;
            color: #666;
        }
        
        .step1-modal-content li {
            margin-bottom: 8px;
            line-height: 1.5;
        }
        
        /* Responsive */
        @media (max-width: 1200px) {
            .step1-three-panel {
                grid-template-columns: 1fr;
            }
        }
        
        /* Step 1.1 - Integrated with App Design System */
        .step1-focused-container {
            width: 100%;
            background: white;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            max-width: 100vw;
        }
        
        /* Focus Mode - Hide sidebars and expand workspace */
        .step-focus-mode .left-panel,
        .step-focus-mode .right-panel {
            display: none !important;
        }
        
        .step-focus-mode .panel-resize-handle {
            display: none !important;
        }
        
        .step-focus-mode .middle-panel {
            width: 100% !important;
            max-width: 100% !important;
        }
        
        .step-focus-mode .timeline-panel,
        .step-focus-mode .paper-constraints-panel {
            display: none !important;
        }

        /* Step 1.1 landscape analysis full-width: tighten layout so canvas uses space (Paper constraints panel stays visible) */
        body.step1-landscape-canvas-full .middle-panel,
        .workspace-content:has(.step1-split-full-width) .middle-panel {
            padding: 0;
        }
        .workspace-content:has(.step1-split-full-width) {
            padding: 0;
        }
        .workspace-content:has(.step1-split-full-width) > .content-view.active {
            padding: 0;
        }
        .workspace-content:has(.step1-split-full-width) .step1-substep-content {
            padding: 0;
        }
        .workspace-content:has(.step1-split-full-width) #substep-1-1-premium-container {
            padding: 0;
        }
        body.step1-landscape-canvas-full .workspace-content {
            padding: 0;
        }
        body.step1-landscape-canvas-full .workspace-content > .content-view.active {
            padding: 0;
        }
        body.step1-landscape-canvas-full .workspace-content .step1-substep-content {
            padding: 0;
        }
        body.step1-landscape-canvas-full .workspace-content #substep-1-1-premium-container {
            padding: 0;
        }
        body.step1-landscape-canvas-full .workspace-tabs {
            padding: 4px 8px;
        }
        body.step1-landscape-canvas-full .workspace-tab {
            padding: 6px 12px;
            font-size: 0.72em;
        }
        
        .step-focus-mode .workspace-top-row {
            height: 100% !important;
        }
        
        /* Compact Header - Matches App Density */
        .step1-focused-header {
            background: white;
            border-bottom: 1px solid #e8e8e8;
            padding: 16px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            max-width: 1000px;
            margin: 0 auto;
            width: 100%;
            padding-left: 24px;
            padding-right: 24px;
            box-sizing: border-box;
        }
        
        .step1-header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .step1-header-title {
            font-size: 0.95em;
            font-weight: 600;
            color: #333;
            margin: 0;
        }
        
        .step1-header-context {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        
        .step1-context-pill {
            padding: 3px 8px;
            background: #f0f4ff;
            color: #667eea;
            border-radius: 3px;
            font-size: 0.8em;
            font-weight: 500;
        }
        
        .step1-header-progress {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .step1-progress-label {
            font-size: 0.85em;
            color: #666;
        }
        
        .step1-progress-value {
            font-size: 0.9em;
            font-weight: 600;
            color: #667eea;
        }
        
        /* Main Area - Clean Editor Layout */
        .step1-focused-main {
            display: grid;
            grid-template-columns: 65% 35%;
            gap: 24px;
            padding: 56px 24px 24px 24px;
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            max-width: 1000px;
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
        }
        
        /* When in focus mode, slightly more width but still constrained */
        .step-focus-mode .step1-focused-main {
            max-width: 1000px;
            padding-top: 72px;
        }
        
        .step-focus-mode .step1-thinking-panel {
            max-width: none;
        }
        
        /* Left Panel - Structured Working Panel - Editor Style */
        .step1-thinking-panel {
            display: flex;
            flex-direction: column;
            gap: 0;
            overflow-y: auto;
            overflow-x: hidden;
            min-width: 0;
            max-width: 100%;
        }
        
        .step1-thinking-card {
            background: transparent;
            border-radius: 0;
            padding: 0;
            border: none;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 32px;
            margin-bottom: 32px;
            box-shadow: none;
        }
        
        .step1-thinking-card:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .step1-focused-input {
            width: 100%;
            padding: 12px 0;
            border: none;
            border-bottom: 1px solid #e0e0e0;
            border-radius: 0;
            font-size: 0.95em;
            font-family: inherit;
            resize: vertical;
            margin-bottom: 12px;
            transition: border-color 0.15s;
            line-height: 1.6;
            background: transparent;
        }
        
        .step1-focused-input:focus {
            outline: none;
            border-bottom-color: #667eea;
            border-bottom-width: 2px;
        }
        
        .step1-focused-input::placeholder {
            color: #999;
        }
        
        .step1-focused-input:disabled {
            background: #f5f5f5;
            cursor: not-allowed;
            opacity: 0.7;
        }
        
        /* Button - Compact */
        .step1-primary-btn {
            position: relative;
            width: auto;
            min-width: 120px;
            padding: 10px 20px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 0.9em;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s;
            margin-top: 16px;
        }
        
        .step1-primary-btn:hover:not(:disabled) {
            background: #5568d3;
        }
        
        .step1-primary-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
        .btn-text {
            display: inline;
        }
        
        .btn-loading {
            display: none;
            align-items: center;
            gap: 6px;
        }
        
        .spinner {
            width: 12px;
            height: 12px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Right Panel - Compact Info */
        .step1-insight-panel {
            display: flex;
            flex-direction: column;
            gap: 0;
            overflow-y: auto;
            overflow-x: hidden;
            align-self: flex-start;
            padding-top: 0;
            min-width: 0;
            max-width: 100%;
        }
        
        .step1-summary-card-focused {
            background: transparent;
            border-radius: 0;
            padding: 0;
            border: none;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 24px;
            margin-bottom: 24px;
            box-shadow: none;
        }
        
        .step1-summary-title {
            font-size: 0.9em;
            font-weight: 600;
            color: #333;
            margin: 0 0 12px 0;
            padding-top: 0;
        }
        
        .step1-summary-text-focused {
            font-size: 0.9em;
            color: #333;
            line-height: 1.6;
            padding: 12px 0;
            background: transparent;
            border-radius: 0;
            border: none;
            border-bottom: 1px solid #e0e0e0;
            min-height: 60px;
            cursor: text;
        }
        
        .step1-summary-text-focused:focus {
            outline: none;
            border-bottom-color: #667eea;
            border-bottom-width: 2px;
        }
        
        .step1-summary-placeholder {
            font-size: 0.85em;
            color: #999;
            font-style: italic;
            padding: 8px;
            line-height: 1.5;
        }
        
        .step1-summary-hint {
            font-size: 0.75em;
            color: #999;
            margin-top: 6px;
        }
        
        .step1-alignment-card-focused {
            background: transparent;
            border-radius: 0;
            padding: 0;
            border: none;
            box-shadow: none;
        }
        
        .step1-alignment-title {
            font-size: 0.9em;
            font-weight: 600;
            color: #333;
            margin: 0 0 12px 0;
            padding-top: 0;
        }
        
        .step1-alignment-score {
            margin-bottom: 12px;
        }
        
        .step1-score-value {
            font-size: 1.2em;
            font-weight: 600;
            color: #667eea;
            margin-bottom: 4px;
        }
        
        .step1-score-label {
            font-size: 0.8em;
            color: #999;
        }
        
        .step1-alignment-bar-focused {
            width: 100%;
            height: 6px;
            background: #f0f0f0;
            border-radius: 3px;
            overflow: hidden;
            margin-top: 8px;
        }
        
        .step1-alignment-fill-focused {
            height: 100%;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            transition: width 0.3s ease;
            border-radius: 3px;
        }
        
        .step1-alignment-signals {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 12px;
        }
        
        .step1-signal-item {
            font-size: 0.85em;
            color: #666;
            padding: 6px;
            background: #f8f9fa;
            border-radius: 3px;
        }
        
        .step1-feedback-warning-focused {
            background: #fff3cd;
            border-left: 2px solid #ffc107;
            padding: 8px;
            border-radius: 3px;
            margin-bottom: 12px;
        }
        
        .step1-warning-text {
            font-size: 0.8em;
            color: #666;
            line-height: 1.4;
            margin-top: 4px;
        }
        
        .step1-refine-btn-focused {
            width: 100%;
            padding: 6px 10px;
            background: white;
            color: #667eea;
            border: 1px solid #667eea;
            border-radius: 3px;
            font-size: 0.85em;
            cursor: pointer;
            transition: background 0.15s;
        }
        
        .step1-refine-btn-focused:hover {
            background: #f0f4ff;
        }
        
        /* Guided Cards - Match App Density */
        .step1-thinking-panel .step1-guided-card {
            background: white;
            border-radius: 4px;
            padding: 12px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            margin-bottom: 0;
        }
        
        .step1-thinking-panel .step1-guided-card.active {
            border-color: #667eea;
            box-shadow: 0 1px 3px rgba(102, 126, 234, 0.2);
        }
        
        .step1-thinking-panel .step1-card-number {
            display: inline;
            width: auto;
            height: auto;
            font-size: 0.85em;
            font-weight: 500;
            color: #999;
            background: transparent;
            border-radius: 0;
            margin: 0;
            margin-right: 8px;
            padding: 0;
        }
        
        .step1-thinking-panel .step1-card-title {
            font-size: 1em;
            font-weight: 500;
            color: #333;
            margin: 0 0 12px 0;
            display: inline;
        }
        
        .step1-thinking-panel .step1-card-content {
            display: block;
        }
        
        .step1-thinking-panel .step1-card-content > div:first-child {
            margin-bottom: 12px;
        }
        
        .step1-thinking-panel .step1-card-hint {
            font-size: 0.85em;
            margin-bottom: 12px;
        }
        
        .step1-thinking-panel .step1-simple-input {
            font-size: 0.9em;
            padding: 8px;
            border: 1px solid #d0d0d0;
            border-radius: 3px;
        }
        
        .step1-thinking-panel .step1-simple-input:focus {
            border-color: #667eea;
            outline: none;
        }
        
        .step1-thinking-panel .step1-word-count {
            font-size: 0.75em;
            margin-bottom: 8px;
        }
        
        /* Responsive */
        @media (max-width: 1200px) {
            .step1-focused-main {
                grid-template-columns: 1fr;
            }
            
            .step1-focused-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
                padding: 8px 12px;
            }
        }
        
        /* Create Project Modal */
        .create-project-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
        }

        .create-project-modal-overlay.active {
            display: flex;
        }

        .create-project-modal {
            background: white;
            border-radius: 8px;
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        .create-project-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid #e0e0e0;
        }

        .create-project-modal-header h3 {
            margin: 0;
            font-size: 1.25em;
            font-weight: 600;
            color: #333;
        }

        .create-project-modal-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: background 0.15s;
        }

        .create-project-modal-close:hover {
            background: #f0f0f0;
        }

        .create-project-modal-body {
            padding: 24px;
        }

        .create-project-step {
            display: none;
        }

        .create-project-step.active {
            display: block;
        }

        .create-project-step-description {
            color: #666;
            font-size: 0.9em;
            margin-bottom: 20px;
        }

        .create-project-form-group {
            margin-bottom: 20px;
        }

        .create-project-form-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: #333;
            font-size: 0.9em;
        }

        .create-project-input,
        .create-project-textarea,
        .create-project-select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #d0d0d0;
            border-radius: 6px;
            font-size: 0.9em;
            font-family: inherit;
            transition: border-color 0.15s;
        }

        .create-project-input:focus,
        .create-project-textarea:focus,
        .create-project-select:focus {
            outline: none;
            border-color: #2563eb;
        }

        .create-project-textarea {
            resize: vertical;
            min-height: 80px;
        }

        .create-project-hint {
            display: block;
            margin-top: 4px;
            font-size: 0.8em;
            color: #666;
        }

        .create-project-checkbox-label {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-weight: normal;
        }

        .create-project-checkbox {
            margin-right: 8px;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .create-project-error {
            background: #fee;
            border: 1px solid #fcc;
            color: #c33;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 0.9em;
        }

        .create-project-error.create-project-connect-steps {
            background: #eff6ff;
            border: 1px solid #93c5fd;
            color: #1e40af;
        }

        .create-project-error.create-project-connect-steps strong {
            color: #1e3a8a;
        }

        .create-project-connect-gh-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            background: #24292e;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 0.9em;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s;
        }

        .create-project-connect-gh-btn:hover {
            background: #2f363d;
        }

        .create-project-form-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            margin-top: 24px;
        }

        .create-project-btn-primary,
        .create-project-btn-secondary {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 0.9em;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s;
        }

        .create-project-btn-primary {
            background: #2563eb;
            color: white;
        }

        .create-project-btn-primary:hover:not(:disabled) {
            background: #1d4ed8;
        }

        .create-project-btn-primary:disabled {
            background: #9ca3af;
            cursor: not-allowed;
        }

        .create-project-btn-secondary {
            background: #f3f4f6;
            color: #333;
        }

        .create-project-btn-secondary:hover {
            background: #e5e7eb;
        }

        .create-project-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            text-align: center;
        }

        .create-project-loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f4f6;
            border-top-color: #2563eb;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 16px;
        }

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

        #createProjectLoadingText {
            color: #666;
            font-size: 0.9em;
        }

        /* Step 1.2 synthesis: ranked decision list with conference expectations */
        .step1-synthesis-section-1-2 {
            margin-bottom: 1.5rem;
            overflow-x: hidden;
        }
        .step1-substep-section-title {
            font-size: 1em;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 12px;
        }
        .step1-synthesis-step11-result {
            font-size: 0.88em;
            color: #64748b;
            margin: 0 0 12px;
        }
        .step1-step-1-2 .step1-related-work-split,
        .step1-step-1-2 .step1-12-main-panel,
        .step1-step-1-2 .step1-12-right-panel {
            min-width: 0;
            overflow-x: hidden;
        }
        .step1-synthesis-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            gap: 16px;
            color: #64748b;
            font-size: 0.9em;
        }
        .step1-synthesis-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid #e2e8f0;
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: step1-synthesis-spin 0.8s linear infinite;
        }
        @keyframes step1-synthesis-spin {
            to { transform: rotate(360deg); }
        }
        .step1-synthesis-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 48px 20px;
            gap: 14px;
            color: #64748b;
            text-align: center;
        }
        .step1-synthesis-empty p {
            margin: 0;
            font-size: 0.92em;
        }
        .step1-synthesis-generate-btn {
            padding: 10px 24px;
            font-size: 0.88em;
            font-weight: 600;
            color: #fff;
            background: #2563eb;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .step1-synthesis-generate-btn:hover {
            background: #1d4ed8;
        }

        .step1-12-expectations-strip {
            background: linear-gradient(145deg, #f8fbff 0%, #eef5ff 100%);
            border: 1px solid #cfe1ff;
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 14px;
        }
        .step1-12-expectations-header {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 10px;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .step1-12-expectations-title {
            margin: 0;
            font-size: 0.88em;
            font-weight: 700;
            color: #1e3a8a;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .step1-12-expectations-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            min-width: 0;
        }
        .step1-12-context-chip {
            display: inline-flex;
            align-items: center;
            padding: 2px 10px;
            border-radius: 999px;
            border: 1px solid #bfdbfe;
            background: #fff;
            color: #1d4ed8;
            font-size: 0.76em;
            font-weight: 600;
            max-width: 100%;
            overflow-wrap: anywhere;
        }
        .step1-12-expectations-list {
            margin: 0;
            padding-left: 18px;
            color: #334155;
            font-size: 0.84em;
            line-height: 1.5;
            overflow-wrap: anywhere;
        }
        .step1-12-expectations-list li {
            margin-bottom: 4px;
        }
        .step1-12-expectations-empty {
            margin: 0;
            color: #64748b;
            font-size: 0.84em;
        }

        .step1-synthesis-directions {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 2px 0 16px;
            min-width: 0;
        }
        .step1-12-direction-card,
        .step1-12-refined-card {
            background: #fff;
            border: 1px solid #dbe5f2;
            border-radius: 12px;
            padding: 14px;
            min-width: 0;
            overflow-wrap: anywhere;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .step1-12-direction-card:hover {
            border-color: #93c5fd;
            box-shadow: 0 3px 10px rgba(37, 99, 235, 0.08);
        }
        .step1-12-direction-header {
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr) auto;
            align-items: start;
            gap: 10px;
            min-width: 0;
        }
        .step1-12-direction-rank {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            background: #2563eb;
            color: #fff;
            font-weight: 700;
            font-size: 0.86em;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .step1-12-direction-main {
            min-width: 0;
        }
        .step1-12-direction-meta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 4px;
        }
        .step1-12-quality-rank {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 0.7em;
            font-weight: 600;
            line-height: 1.2;
            color: #475569;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
        }
        .step1-12-diversity-warning {
            margin: 0 0 0.75rem;
            padding: 0.5rem 0.65rem;
            font-size: 0.8rem;
            line-height: 1.4;
            color: #92400e;
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 8px;
        }
        .step1-12-type-badge,
        .step1-12-fit-indicator,
        .step1-12-confidence {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 0.73em;
            font-weight: 700;
            line-height: 1.2;
            border: 1px solid transparent;
        }
        .step1-12-type-badge {
            color: #334155;
            background: #f1f5f9;
            border-color: #dbe4ee;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .step1-12-fit-indicator.is-strong {
            color: #166534;
            background: #ecfdf3;
            border-color: #bbf7d0;
        }
        .step1-12-fit-indicator.is-moderate {
            color: #92400e;
            background: #fffbeb;
            border-color: #fde68a;
        }
        .step1-12-fit-indicator.is-basic {
            color: #1e40af;
            background: #eff6ff;
            border-color: #bfdbfe;
        }
        .step1-12-confidence.is-high {
            color: #0f766e;
            background: #f0fdfa;
            border-color: #99f6e4;
        }
        .step1-12-confidence.is-medium {
            color: #475569;
            background: #f8fafc;
            border-color: #e2e8f0;
        }
        .step1-12-confidence.is-low {
            color: #b91c1c;
            background: #fef2f2;
            border-color: #fecaca;
        }
        .step1-synthesis-direction-title {
            margin: 0;
            font-size: 0.99em;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }
        .step1-12-direction-one-liner {
            margin: 4px 0 0;
            color: #334155;
            font-size: 0.85em;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }
        .step1-12-direction-motivation {
            margin: 8px 0 0;
            color: #475569;
            font-size: 0.82em;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }
        .step1-12-detail-subhead {
            margin: 10px 0 4px;
            font-size: 0.72em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #64748b;
        }
        .step1-12-detail-subhead:first-child {
            margin-top: 0;
        }
        .step1-12-risk-line {
            margin: 8px 0 0;
            font-size: 0.82em;
            color: #334155;
        }
        .workspace-content .step1-12-synth-status {
            margin: 0;
            font-size: 0.8125rem;
            color: #64748b;
        }
        .step1-12-synth-status:empty {
            min-height: 0;
            height: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
            clip-path: inset(50%);
        }
        .step1-12-synth-status:not(:empty) {
            min-height: 1.25em;
            margin: 0;
            padding: 8px 12px 4px;
        }
        .step1-12-canvas-panel-fill {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }
        .step1-12-vt-chrome-fill {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        .step1-12-vt-main-row {
            display: flex;
            flex-direction: row;
            flex: 1 1 auto;
            min-height: 0;
            align-items: stretch;
        }
        .step1-12-vt-main-row .step1-12-emphasis-panel {
            flex: 0 0 min(340px, 38vw);
            width: min(340px, 38vw);
            max-width: 380px;
            border-bottom: none;
            border-left: 1px solid rgba(148, 163, 184, 0.22);
            align-self: stretch;
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow: hidden;
        }
        .step1-12-emphasis-panel-body {
            flex: 1 1 auto;
            min-height: 0;
            box-sizing: border-box;
            padding: 12px 16px;
            overflow-x: hidden;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
        }
        .step1-12-emphasis-panel-body::-webkit-scrollbar {
            width: 6px;
        }
        .step1-12-emphasis-panel-body::-webkit-scrollbar-track {
            background: transparent;
        }
        .step1-12-emphasis-panel-body::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.28);
            border-radius: 3px;
        }
        .step1-12-emphasis-panel-body::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.45);
        }
        @media (max-width: 900px) {
            .step1-12-vt-main-row {
                flex-direction: column;
            }
            .step1-12-vt-main-row .step1-12-emphasis-panel {
                flex: 0 0 auto;
                width: 100%;
                max-width: none;
                border-left: none;
                border-top: 1px solid rgba(148, 163, 184, 0.22);
            }
        }
        .step1-12-vt-bottom-dock {
            flex-shrink: 0;
            padding: 0 10px 2px;
            z-index: 10;
            pointer-events: none;
        }
        .step1-12-vt-bottom-dock-inner {
            pointer-events: auto;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 10px;
            padding: 6px 10px 4px;
            min-height: 0;
            background: transparent;
            border: none;
            border-top: 1px solid transparent;
            border-radius: 0;
            transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .step1-12-vt-bottom-dock-inner:hover,
        .step1-12-vt-bottom-dock-inner:focus-within {
            background: rgba(15, 23, 42, 0.88);
            border-top-color: rgba(255, 255, 255, 0.14);
        }
        .step1-12-vt-bottom-dock-inner--solo-actions {
            justify-content: flex-end;
        }
        .step1-12-bottom-idea {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1 1 120px;
            min-width: 0;
        }
        .step1-12-bottom-idea-label {
            font-size: 8px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: rgba(255, 255, 255, 0.32);
            flex-shrink: 0;
            align-self: center;
        }
        .step1-12-bottom-idea-line {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.4em;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.35;
            color: rgba(255, 255, 255, 0.52);
        }
        .step1-12-bottom-idea-text {
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: normal;
        }
        .step1-12-bottom-idea:hover .step1-12-bottom-idea-line {
            color: rgba(255, 255, 255, 0.68);
        }
        .step1-12-bottom-idea:hover .step1-12-bottom-idea-label {
            color: rgba(255, 255, 255, 0.42);
        }
        .step1-12-btn-refine-link {
            display: inline-flex;
            flex-shrink: 0;
            align-items: center;
            margin: 0;
            padding: 0;
            border: none;
            background: none;
            box-shadow: none;
            font-size: inherit;
            font-weight: 600;
            font-family: inherit;
            line-height: inherit;
            color: #b91c1c;
            text-decoration: underline;
            text-underline-offset: 2px;
            cursor: pointer;
            white-space: nowrap;
            transition: color 0.15s ease, opacity 0.15s ease;
        }
        .step1-12-btn-refine-link:hover {
            color: #dc2626;
        }
        .step1-12-btn-refine-link:active {
            color: #991b1b;
        }
        .step1-12-bottom-dock-divider {
            width: 1px;
            align-self: stretch;
            min-height: 22px;
            max-height: 28px;
            margin: 2px 0;
            background: rgba(255, 255, 255, 0.12);
            flex-shrink: 0;
        }
        .step1-12-vt-bottom-dock-inner:hover .step1-12-bottom-dock-divider,
        .step1-12-vt-bottom-dock-inner:focus-within .step1-12-bottom-dock-divider {
            background: rgba(255, 255, 255, 0.18);
        }
        .step1-12-vt-bottom-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            margin-left: auto;
            flex-shrink: 0;
        }
        .step1-12-vt-bottom-actions .step1-12-vt-btn {
            padding: 4px 10px;
            font-size: 0.72rem;
            font-weight: 500;
            border-radius: 5px;
            box-shadow: none;
            opacity: 0.5;
            transition:
                opacity 0.18s ease,
                background 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease;
        }
        .step1-12-vt-bottom-dock-inner:hover .step1-12-vt-bottom-actions .step1-12-vt-btn,
        .step1-12-vt-bottom-dock-inner:focus-within .step1-12-vt-bottom-actions .step1-12-vt-btn {
            opacity: 1;
        }
        .step1-12-vt-bottom-actions .step1-12-vt-btn:hover,
        .step1-12-vt-bottom-actions .step1-12-vt-btn:focus-visible {
            opacity: 1;
        }
        .step1-12-vt-bottom-actions .step1-12-vt-btn-primary {
            background: rgba(79, 70, 229, 0.35);
            border-color: rgba(129, 140, 248, 0.55);
            color: #e0e7ff;
        }
        .step1-12-vt-bottom-actions .step1-12-vt-btn-primary:hover {
            background: rgba(79, 70, 229, 0.55);
            border-color: rgba(165, 180, 252, 0.75);
            color: #fff;
        }
        .step1-12-vt-bottom-actions .step1-12-vt-btn-secondary {
            background: rgba(37, 99, 235, 0.3);
            border-color: rgba(96, 165, 250, 0.5);
            color: #dbeafe;
        }
        .step1-12-vt-bottom-actions .step1-12-vt-btn-secondary:hover {
            background: rgba(37, 99, 235, 0.5);
            border-color: rgba(147, 197, 253, 0.7);
            color: #fff;
        }
        .step1-12-vt-bottom-actions .step1-12-vt-btn-accent {
            background: rgba(14, 165, 233, 0.28);
            border-color: rgba(56, 189, 248, 0.55);
            color: #e0f2fe;
        }
        .step1-12-vt-bottom-actions .step1-12-vt-btn-accent:hover {
            background: rgba(14, 165, 233, 0.48);
            border-color: rgba(125, 211, 252, 0.75);
            color: #f0f9ff;
        }
        .step1-12-vt-bottom-actions .step1-12-vt-btn-warn {
            background: rgba(194, 65, 12, 0.3);
            border-color: rgba(251, 146, 60, 0.5);
            color: #ffedd5;
        }
        .step1-12-vt-bottom-actions .step1-12-vt-btn-warn:hover {
            background: rgba(194, 65, 12, 0.48);
            border-color: rgba(253, 186, 116, 0.65);
            color: #fff;
        }
        .step1-12-vt-main-row .step1-12-json-hint {
            margin: 0 0 1rem;
            font-size: 0.88em;
            line-height: 1.5;
            color: #475569;
        }
        .step1-12-md-collapse {
            margin-bottom: 1.25rem;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 0.5rem 0.75rem;
            background: #f8fafc;
        }
        .step1-12-md-collapse summary {
            cursor: pointer;
            font-size: 0.85em;
            font-weight: 600;
            color: #64748b;
        }
        .step1-12-md-collapse .step1-markdown-page {
            margin-top: 0.75rem;
            font-size: 0.88em;
        }
        .step1-12-canvas-panel {
            margin-top: 2rem;
            padding-top: 1.25rem;
            border-top: 1px solid #e2e8f0;
        }
        /* Must beat the rule above (same element has both classes; order alone would re-apply 2rem gap). */
        .step1-12-canvas-panel.step1-12-canvas-panel-fill {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }
        /* Step 1.2 - LLM input preview (Generate directions) */
        .step1-12-llm-preview-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 12000;
            background: rgba(15, 23, 42, 0.55);
            align-items: center;
            justify-content: center;
            padding: 1rem;
            box-sizing: border-box;
        }
        .step1-12-llm-preview-overlay--open {
            display: flex;
        }
        .step1-12-llm-preview-dialog {
            max-width: min(920px, 100%);
            max-height: min(90vh, 900px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background: #f8fafc;
            border-radius: 12px;
            box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
            border: 1px solid #e2e8f0;
        }
        #step1-12-llm-preview-body {
            overflow: auto;
            max-height: min(90vh, 900px);
        }
        .step1-12-llm-preview-inner {
            padding: 1rem 1.25rem 1.25rem;
            font-size: 0.88rem;
            line-height: 1.45;
            color: #1e293b;
        }
        .step1-12-llm-preview-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }
        .step1-12-llm-preview-header h2 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 700;
            color: #0f172a;
        }
        .step1-12-llm-preview-close {
            flex-shrink: 0;
            border: none;
            background: #e2e8f0;
            color: #334155;
            width: 2rem;
            height: 2rem;
            border-radius: 8px;
            font-size: 1.25rem;
            line-height: 1;
            cursor: pointer;
        }
        .step1-12-llm-preview-close:hover {
            background: #cbd5e1;
        }
        .step1-12-llm-preview-lead {
            margin: 0 0 0.5rem;
            color: #475569;
        }
        .step1-12-llm-preview-meta {
            margin: 0 0 1rem;
            font-size: 0.82rem;
            color: #64748b;
        }
        .step1-12-llm-preview-section {
            margin-bottom: 1.1rem;
        }
        .step1-12-llm-preview-section h3 {
            margin: 0 0 0.4rem;
            font-size: 0.95rem;
            font-weight: 600;
            color: #0f172a;
        }
        .step1-12-llm-preview-pre {
            margin: 0.35rem 0 0;
            padding: 0.65rem 0.75rem;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.78rem;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 220px;
            overflow: auto;
        }
        .step1-12-llm-preview-pre--system {
            max-height: 280px;
        }
        .step1-12-llm-preview-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8rem;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            overflow: hidden;
        }
        .step1-12-llm-preview-table th,
        .step1-12-llm-preview-table td {
            padding: 0.45rem 0.55rem;
            border-bottom: 1px solid #f1f5f9;
            text-align: left;
            vertical-align: top;
        }
        .step1-12-llm-preview-table thead th {
            background: #f1f5f9;
            font-weight: 600;
            color: #475569;
        }
        .step1-12-llm-preview-keys {
            font-size: 0.72rem;
            color: #64748b;
            word-break: break-word;
        }
        .step1-12-llm-preview-mono {
            font-family: ui-monospace, monospace;
            font-size: 0.8rem;
        }
        .step1-12-llm-preview-muted {
            margin: 0.35rem 0 0;
            font-size: 0.78rem;
            color: #64748b;
        }
        .step1-12-llm-preview-note {
            color: #94a3b8;
            font-size: 0.78rem;
        }
        .step1-12-llm-preview-ul {
            margin: 0.35rem 0 0 1.1rem;
            padding: 0;
        }
        .step1-12-llm-preview-card {
            margin-top: 0.65rem;
            padding: 0.5rem 0.65rem;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
        }
        .step1-12-llm-preview-foot {
            margin: 0.75rem 0 0;
            font-size: 0.78rem;
            color: #64748b;
        }
        .step1-12-llm-preview-loading {
            margin: 1rem 0;
            color: #64748b;
        }
        .step1-12-llm-preview-err {
            margin: 1rem 0;
            color: #b91c1c;
        }
        .step1-12-vt-hint {
            margin: 0 0 0.75rem;
            font-size: 0.82em;
            color: #64748b;
            line-height: 1.45;
        }
        .step1-synthesis-empty-hint {
            margin: 8px 0 0;
            font-size: 0.85em;
            color: #64748b;
            line-height: 1.45;
        }
        .step1-12-vt-chrome {
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.28);
            background: #020617;
            box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
        }
        .step1-12-emphasis-panel {
            padding: 0;
            background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
        }
        .step1-12-emphasis-label {
            display: block;
            font-size: 0.85rem;
            font-weight: 600;
            color: #e2e8f0;
            margin-bottom: 0.35rem;
        }
        .step1-12-emphasis-hint {
            margin: 0 0 0.5rem;
            font-size: 0.78rem;
            color: #94a3b8;
            line-height: 1.4;
        }
        .step1-12-emphasis-hint kbd {
            padding: 0.1em 0.35em;
            border-radius: 4px;
            background: rgba(30, 41, 59, 0.9);
            border: 1px solid rgba(148, 163, 184, 0.35);
            color: #f1f5f9;
            font-size: 0.9em;
        }
        .step1-12-emphasis-editor-wrap {
            position: relative;
            z-index: 2;
        }
        .step1-12-mention-empty {
            padding: 10px 12px;
            font-size: 0.8rem;
            line-height: 1.4;
            color: #94a3b8;
        }
        .step1-12-direction-emphasis {
            width: 100%;
            box-sizing: border-box;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(15, 23, 42, 0.65);
            color: #f1f5f9;
            font-size: 0.875rem;
            line-height: 1.45;
            resize: vertical;
            min-height: 4.5em;
        }
        .step1-12-direction-emphasis::placeholder {
            color: #64748b;
        }
        .step1-12-direction-emphasis:focus {
            outline: none;
            border-color: rgba(96, 165, 250, 0.55);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }
        .step1-12-mention-popover {
            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            margin-top: 4px;
            max-height: 220px;
            overflow-y: auto;
            z-index: 10050;
            border-radius: 8px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: #1e293b;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
        }
        .step1-12-mention-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            width: 100%;
            padding: 8px 12px;
            border: none;
            border-bottom: 1px solid rgba(51, 65, 85, 0.6);
            background: transparent;
            color: #e2e8f0;
            text-align: left;
            cursor: pointer;
            font-size: 0.8rem;
        }
        .step1-12-mention-item:last-child {
            border-bottom: none;
        }
        .step1-12-mention-item:hover,
        .step1-12-mention-item:focus-visible {
            background: rgba(59, 130, 246, 0.15);
            outline: none;
        }
        .step1-12-mention-title {
            font-weight: 500;
            color: #f8fafc;
        }
        .step1-12-mention-id {
            font-size: 0.72rem;
            color: #94a3b8;
            font-family: ui-monospace, monospace;
        }
        .step1-12-mention-sub {
            display: block;
            font-size: 0.68rem;
            color: #a5b4fc;
            line-height: 1.3;
            margin: 2px 0;
        }
        .step1-12-vt-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 24px;
            align-items: flex-start;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.2);
            background: linear-gradient(180deg, #0f172a 0%, #0b1120 100%);
        }
        .step1-12-vt-toolbar.step1-12-vt-toolbar-corner {
            justify-content: flex-end;
            flex-wrap: nowrap;
        }
        .step1-12-vt-toolbar-corner-inner {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-end;
            align-items: center;
            margin-left: auto;
        }
        .step1-12-vt-toolbar-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 0;
        }
        .step1-12-vt-toolbar-group-directions {
            align-items: flex-end;
            text-align: right;
        }
        .step1-12-vt-toolbar-group-directions .step1-12-vt-toolbar-actions {
            justify-content: flex-end;
        }
        .step1-12-vt-toolbar-label {
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            color: #94a3b8;
        }
        .step1-12-vt-toolbar-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }
        .step1-12-vt-btn {
            margin: 0;
            padding: 8px 14px;
            font-size: 0.8rem;
            font-weight: 600;
            border-radius: 8px;
            cursor: pointer;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(30, 41, 59, 0.85);
            color: #e2e8f0;
            transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
        }
        .step1-12-vt-btn:hover {
            background: rgba(51, 65, 85, 0.95);
            border-color: rgba(148, 163, 184, 0.55);
        }
        .step1-12-vt-btn-primary {
            background: #4f46e5;
            border-color: #6366f1;
            color: #fff;
        }
        .step1-12-vt-btn-primary:hover {
            background: #4338ca;
            border-color: #818cf8;
        }
        .step1-12-vt-btn-secondary {
            background: #2563eb;
            border-color: #3b82f6;
            color: #fff;
        }
        .step1-12-vt-btn-secondary:hover {
            background: #1d4ed8;
            border-color: #60a5fa;
        }
        .step1-12-vt-btn-accent {
            background: #0ea5e9;
            border-color: #38bdf8;
            color: #0f172a;
        }
        .step1-12-vt-btn-accent:hover {
            background: #0284c7;
            border-color: #7dd3fc;
            color: #0f172a;
        }
        .step1-12-vt-btn-warn {
            background: #c2410c;
            border-color: #ea580c;
            color: #fff;
        }
        .step1-12-vt-btn-warn:hover {
            background: #9a3412;
        }
        .step1-12-vt-btn-ghost {
            background: transparent;
            color: #cbd5e1;
        }
        .step1-12-direction-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
            min-width: 0;
        }
        .step1-synthesis-select-btn,
        .step1-12-open-refine-btn {
            margin-top: 0;
            padding: 6px 12px;
            font-size: 0.78em;
            font-weight: 700;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
            white-space: nowrap;
        }
        .step1-synthesis-select-btn {
            color: #1d4ed8;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
        }
        .step1-synthesis-select-btn:hover {
            background: #dbeafe;
            color: #1e40af;
        }
        .step1-12-open-refine-btn {
            color: #334155;
            background: #f8fafc;
            border: 1px solid #cbd5e1;
        }
        .step1-12-open-refine-btn:hover {
            background: #e2e8f0;
            color: #1e293b;
        }
        .step1-synthesis-direction-fit,
        .step1-synthesis-direction-feasibility,
        .step1-synthesis-refined-fit {
            margin: 8px 0 0;
            color: #475569;
            font-size: 0.83em;
            line-height: 1.5;
            overflow-wrap: anywhere;
        }
        .step1-12-fit-signals {
            margin-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            min-width: 0;
        }
        .step1-12-fit-signal-chip {
            display: inline-flex;
            padding: 2px 8px;
            border-radius: 999px;
            border: 1px solid #d4d4d8;
            background: #fafafa;
            color: #3f3f46;
            font-size: 0.74em;
            max-width: 100%;
            overflow-wrap: anywhere;
        }

        .step1-12-detail-block {
            margin-top: 10px;
            border: 1px solid #e2e8f0;
            border-radius: 9px;
            background: #f8fafc;
            overflow: hidden;
        }
        .step1-12-detail-block summary {
            cursor: pointer;
            padding: 9px 12px;
            list-style: none;
            font-size: 0.8em;
            font-weight: 700;
            color: #1f2937;
            user-select: none;
            border-bottom: 1px solid transparent;
        }
        .step1-12-detail-block[open] summary {
            border-bottom-color: #e2e8f0;
            background: #f1f5f9;
        }
        .step1-12-detail-list {
            margin: 0;
            padding: 10px 12px 10px 28px;
            font-size: 0.82em;
            color: #334155;
            line-height: 1.5;
            overflow-wrap: anywhere;
        }
        .step1-12-detail-list li {
            margin-bottom: 4px;
        }
        .step1-12-detail-paragraph,
        .step1-12-detail-empty {
            margin: 0;
            padding: 10px 12px;
            font-size: 0.82em;
            line-height: 1.5;
            overflow-wrap: anywhere;
        }
        .step1-12-detail-empty {
            color: #64748b;
        }

        .step1-synthesis-direction-refine-block {
            margin: 0;
            padding: 10px;
            display: flex;
            gap: 8px;
            align-items: flex-start;
        }
        .step1-synthesis-direction-refine-input {
            flex: 1;
            min-width: 0;
            padding: 10px 12px;
            font-size: 0.84em;
            color: #334155;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            resize: vertical;
            font-family: inherit;
            box-sizing: border-box;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .step1-synthesis-direction-refine-input::placeholder {
            color: #94a3b8;
        }
        .step1-synthesis-direction-refine-input:focus,
        .step1-synthesis-feedback-input:focus {
            outline: none;
            border-color: #93c5fd;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
        }
        .step1-synthesis-direction-refine-btn {
            flex-shrink: 0;
            padding: 8px 12px;
            font-size: 0.8em;
            font-weight: 700;
            color: #334155;
            background: #f1f5f9;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            white-space: nowrap;
        }
        .step1-synthesis-direction-refine-btn:hover {
            background: #e2e8f0;
            color: #1e293b;
        }

        .step1-synthesis-feedback-area {
            margin-top: 12px;
            padding: 14px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
        }
        .step1-synthesis-feedback-area label {
            display: block;
            font-size: 0.82em;
            font-weight: 700;
            color: #475569;
            margin-bottom: 8px;
        }
        .step1-synthesis-feedback-input {
            display: block;
            width: 100%;
            padding: 10px 12px;
            font-size: 0.86em;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            resize: vertical;
            font-family: inherit;
            box-sizing: border-box;
            margin-bottom: 10px;
        }
        .step1-synthesis-refine-btn {
            padding: 8px 16px;
            font-size: 0.82em;
            font-weight: 700;
            color: #fff;
            background: #2563eb;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .step1-synthesis-refine-btn:hover {
            background: #1d4ed8;
        }

        .step1-synthesis-refined {
            background: #f0f9ff;
            border: 1px solid #93c5fd;
            border-radius: 12px;
            padding: 16px;
        }
        .step1-synthesis-refined-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
            min-width: 0;
        }
        .step1-synthesis-refined-title {
            margin: 0;
            font-size: 1em;
            font-weight: 700;
            color: #1e293b;
            overflow-wrap: anywhere;
        }
        .step1-synthesis-refined-badge {
            display: inline-block;
            padding: 2px 10px;
            font-size: 0.72em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #1d4ed8;
            background: #dbeafe;
            border-radius: 999px;
        }
        .step1-synthesis-refined-idea {
            font-size: 0.87em;
            color: #334155;
            margin: 8px 0 0;
            line-height: 1.5;
            padding: 10px 12px;
            background: #fff;
            border-radius: 8px;
            border-left: 3px solid #3b82f6;
            overflow-wrap: anywhere;
        }
        .step1-synthesis-reset-btn {
            margin-top: 12px;
            padding: 8px 14px;
            font-size: 0.82em;
            font-weight: 700;
            color: #334155;
            background: #fff;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }
        .step1-synthesis-reset-btn:hover {
            background: #f1f5f9;
            color: #0f172a;
        }

        .step1-synthesis-error {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 48px 20px;
            gap: 16px;
        }
        .step1-synthesis-error-msg {
            margin: 0;
            font-size: 0.9em;
            color: #dc2626;
            text-align: center;
            max-width: 420px;
            line-height: 1.5;
        }

        @media (max-width: 900px) {
            .step1-12-direction-header {
                grid-template-columns: 34px minmax(0, 1fr);
            }
            .step1-12-direction-actions {
                grid-column: 1 / -1;
                justify-content: flex-start;
                margin-left: 44px;
            }
            .step1-synthesis-direction-refine-block {
                flex-direction: column;
            }
            .step1-synthesis-direction-refine-btn,
            .step1-synthesis-select-btn,
            .step1-12-open-refine-btn,
            .step1-synthesis-refine-btn {
                width: fit-content;
            }
        }

        @media (max-width: 640px) {
            .step1-12-direction-card,
            .step1-12-refined-card,
            .step1-synthesis-refined,
            .step1-12-expectations-strip,
            .step1-synthesis-feedback-area {
                padding: 12px;
            }
            .step1-12-direction-actions {
                margin-left: 0;
            }
            .step1-12-direction-header {
                grid-template-columns: 1fr;
            }
            .step1-12-direction-rank {
                width: 30px;
                height: 30px;
            }
        }

/* -------------------------------------------------------------------------- */
/* deployment.yaml — optional UI hide (body classes set by workspace/ui.js) */
/* -------------------------------------------------------------------------- */
body.papira-deploy--no-conference .right-panel {
    display: none !important;
}
/* Header conference / track / cycle chip strip (menu-bar-right), not only the flyout Conference section */
body.papira-deploy--no-conference .menu-bar-right .conference-context-inline {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
/* Whole bottom bar: context + billing (inline styles elsewhere use display:block) */
body.papira-deploy--no-timeline #timelinePanel {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    pointer-events: none !important;
}
body.papira-deploy--no-timeline #timelineContainer {
    display: none !important;
}

body.papira-deploy--no-subscription-billing #userDropdownPlanProgress,
body.papira-deploy--no-subscription-billing #userDropdownBillingEntry {
    display: none !important;
}

/* deployment ui.menu — sections hidden via JS; class toggled for Conference only */
body.papira-deploy--no-conference .app-menu-section[data-menu="conference"] {
    display: none !important;
}

/* Whole top-left hamburger + flyout (overrides inline display if layout toggles run) */
body.papira-deploy--no-app-menu #appMenuBtn,
body.papira-deploy--no-app-menu #appMenuFlyout {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.papira-deploy--no-paper-constraints #paperConstraintsPanel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.papira-deploy--no-llm-picker #llmPicker,
body.papira-deploy--no-llm-picker #llmPickerStep11 {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.papira-deploy--no-overleaf-integration #integrationItemOverleaf {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}



/* ============================================================
   PAPIRA — LANDING PAGE ANIMATIONS
   Extends styles.css. Drop in /landing-animated.css.
   ============================================================ */

   :root {
    --papira-navy: #0d1b2a;
    --papira-navy-2: #152436;
    --papira-amber: #c4932a;
    --papira-amber-line: rgba(196, 147, 42, 0.35);
    --papira-amber-soft: rgba(196, 147, 42, 0.12);
    --papira-cream: #f5f1eb;
    --papira-text-soft: #b8c0cc;
    --papira-text-mute: #8a92a0;
}

/* ─── HERO HIGHLIGHT ─── */
.landing-hl-amber {
    color: var(--papira-amber);
    position: relative;
    white-space: nowrap;
}
.landing-hl-amber::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 8px;
    background: var(--papira-amber);
    opacity: 0.18;
    border-radius: 4px;
    z-index: -1;
    animation: hero-underline 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
@keyframes hero-underline {
    from { transform: scaleX(0); transform-origin: left; }
    to { transform: scaleX(1); transform-origin: left; }
}

.landing-hero-trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.85em;
    color: #64748b;
    font-weight: 550;
}
.landing-trust-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.landing-eyebrow {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--papira-amber);
    margin-bottom: 14px;
}

.landing-mockup-window--hero {
    max-width: 580px;
    background: var(--papira-navy);
    border-color: rgba(196, 147, 42, 0.2);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 32px rgba(13, 27, 42, 0.18),
        0 28px 64px rgba(13, 27, 42, 0.12);
}
.landing-mockup-window--hero .landing-mockup-titlebar {
    background: var(--papira-navy-2);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.landing-mockup-window--hero .landing-mockup-title {
    color: var(--papira-text-soft);
    font-size: 0.72em;
}

/* ═══════════════════════════════════════════════════════════
   COVERAGE MAP COMPONENT (used in hero + demo)
   ═══════════════════════════════════════════════════════════ */

.cm {
    --cm-bg: var(--papira-navy);
    --cm-cell-bg: rgba(255, 255, 255, 0.02);
    --cm-cell-border: rgba(255, 255, 255, 0.06);
    --cm-text: var(--papira-cream);
    --cm-text-mute: var(--papira-text-mute);

    display: flex;
    flex-direction: column;
    background: var(--cm-bg);
    padding: 14px;
    gap: 1px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--cm-text);
    overflow: hidden;
}

.cm-row {
    display: grid;
    grid-template-columns: 130px repeat(3, 1fr);
    gap: 1px;
}

.cm--compact .cm-row {
    grid-template-columns: 90px repeat(3, 1fr);
}

.cm-cell {
    background: var(--cm-cell-bg);
    padding: 10px;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.3s, border-color 0.3s;
}

.cm--compact .cm-cell {
    padding: 8px;
    min-height: 44px;
}

.cm-corner {
    background: transparent;
    min-height: 0;
}

/* ─── Header row (competencies) ─── */
.cm-h {
    background: rgba(255, 255, 255, 0.025);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cm--reveal-cols .cm-h {
    opacity: 1;
    transform: translateY(0);
}
.cm--reveal-cols .cm-h:nth-child(2) { transition-delay: 0ms; }
.cm--reveal-cols .cm-h:nth-child(3) { transition-delay: 120ms; }
.cm--reveal-cols .cm-h:nth-child(4) { transition-delay: 240ms; }

.cm-h-name {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--cm-text);
    line-height: 1.25;
    margin-bottom: 4px;
}

.cm-h-bench {
    display: inline-block;
    font-size: 0.62em;
    font-weight: 600;
    color: var(--papira-amber);
    background: var(--papira-amber-soft);
    border: 1px solid var(--papira-amber-line);
    padding: 2px 6px;
    border-radius: 3px;
    width: fit-content;
    letter-spacing: 0.02em;
}

.cm--compact .cm-h-name {
    font-size: 0.68em;
}
.cm--compact .cm-h-bench {
    font-size: 0.55em;
    padding: 1px 5px;
}

/* ─── Y-axis (problems) ─── */
.cm-y {
    background: rgba(255, 255, 255, 0.025);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cm--reveal-rows .cm-y {
    opacity: 1;
    transform: translateX(0);
}
.cm--reveal-rows .cm-row:nth-child(2) .cm-y { transition-delay: 0ms; }
.cm--reveal-rows .cm-row:nth-child(3) .cm-y { transition-delay: 100ms; }
.cm--reveal-rows .cm-row:nth-child(4) .cm-y { transition-delay: 200ms; }
.cm--reveal-rows .cm-row:nth-child(5) .cm-y { transition-delay: 300ms; }

.cm-y-name {
    font-size: 0.72em;
    font-weight: 500;
    color: var(--cm-text);
    line-height: 1.3;
}

.cm--compact .cm-y-name {
    font-size: 0.62em;
}

/* ─── Cells ─── */
.cm-c {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s,
                border-color 0.3s;
}
.cm--reveal-cells .cm-c {
    opacity: 1;
    transform: scale(1);
}

/* Stagger cells — chains down rows for a wave effect */
.cm--reveal-cells .cm-row:nth-child(2) .cm-c:nth-child(2) { transition-delay: 50ms; }
.cm--reveal-cells .cm-row:nth-child(2) .cm-c:nth-child(3) { transition-delay: 120ms; }
.cm--reveal-cells .cm-row:nth-child(2) .cm-c:nth-child(4) { transition-delay: 190ms; }
.cm--reveal-cells .cm-row:nth-child(3) .cm-c:nth-child(2) { transition-delay: 260ms; }
.cm--reveal-cells .cm-row:nth-child(3) .cm-c:nth-child(3) { transition-delay: 330ms; }
.cm--reveal-cells .cm-row:nth-child(3) .cm-c:nth-child(4) { transition-delay: 400ms; }
.cm--reveal-cells .cm-row:nth-child(4) .cm-c:nth-child(2) { transition-delay: 470ms; }
.cm--reveal-cells .cm-row:nth-child(4) .cm-c:nth-child(3) { transition-delay: 540ms; }
.cm--reveal-cells .cm-row:nth-child(4) .cm-c:nth-child(4) { transition-delay: 610ms; }
.cm--reveal-cells .cm-row:nth-child(5) .cm-c:nth-child(2) { transition-delay: 680ms; }
.cm--reveal-cells .cm-row:nth-child(5) .cm-c:nth-child(3) { transition-delay: 750ms; }
.cm--reveal-cells .cm-row:nth-child(5) .cm-c:nth-child(4) { transition-delay: 820ms; }

.cm-c--covered {
    background: rgba(34, 197, 94, 0.04);
    border: 1px solid rgba(34, 197, 94, 0.15);
}
.cm-c--gap {
    background: rgba(255, 255, 255, 0.015);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    align-items: center;
    justify-content: center;
    color: var(--cm-text-mute);
    position: relative;
}

/* Pulse the gaps in step 5 */
.cm--reveal-gaps .cm-c--gap {
    background: rgba(196, 147, 42, 0.06);
    border-color: rgba(196, 147, 42, 0.4);
    animation: gap-pulse 1.6s ease-in-out infinite;
}

@keyframes gap-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(196, 147, 42, 0);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(196, 147, 42, 0.18);
    }
}

.cm-gap-label {
    font-size: 0.68em;
    font-weight: 600;
    color: var(--cm-text-mute);
    letter-spacing: 0.04em;
    transition: color 0.3s;
}
.cm--reveal-gaps .cm-c--gap .cm-gap-label {
    color: var(--papira-amber);
}

/* ─── Approaches inside cells ─── */
.cm-c-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cm-app {
    display: grid;
    grid-template-columns: minmax(50px, auto) 14px 1fr 28px;
    align-items: center;
    gap: 5px;
    font-size: 0.65em;
}

.cm--compact .cm-app {
    font-size: 0.58em;
    grid-template-columns: minmax(38px, auto) 12px 1fr 24px;
    gap: 4px;
}

.cm-app-name {
    color: var(--cm-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-app-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}
.cm--compact .cm-app-role {
    width: 12px;
    height: 12px;
    font-size: 8px;
}
.cm-app-role--baseline {
    background: rgba(148, 163, 184, 0.4);
    color: #cbd5e1;
}
.cm-app-role--proposed {
    background: var(--papira-amber);
    color: var(--papira-navy);
}

.cm-app-bar {
    display: block;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.cm-app-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #f59e0b, #22c55e);
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cm--reveal-scores .cm-app-bar-fill {
    width: var(--score);
}

.cm-app-score {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--papira-amber);
    text-align: right;
    opacity: 0;
    transition: opacity 0.5s ease 0.3s;
    font-variant-numeric: tabular-nums;
}
.cm--reveal-scores .cm-app-score {
    opacity: 1;
}

/* Hero map: always reveal everything */
.cm--hero {
    --cm-cell-border: rgba(255, 255, 255, 0.04);
}

/* ═══════════════════════════════════════════════════════════
   ANIMATED DEMO SECTION
   ═══════════════════════════════════════════════════════════ */

.landing-demo {
    padding: 80px 32px 88px;
    background: linear-gradient(180deg, transparent 0%, #f6f8fc 100%);
    margin: 0 -32px;
}

.landing-demo-scroll-anchor {
    scroll-margin-top: 72px;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.landing-demo-intro {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 40px;
}

.landing-demo-intro .landing-section-title {
    margin-bottom: 14px;
}

/* ─── Step indicator ─── */
.demo-stage {
    max-width: 1100px;
    margin: 0 auto;
}

.demo-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 auto 36px;
    padding: 6px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    width: fit-content;
}

.demo-step-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    border-radius: 9px;
    font-size: 0.82em;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
}

.demo-step-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.demo-step-btn.active {
    background: var(--papira-navy);
    color: white;
    box-shadow: 0 4px 12px rgba(13, 27, 42, 0.18);
}

.demo-step-btn.done .demo-step-num {
    background: #22c55e;
    color: white;
}

.demo-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 0.75em;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.18s;
}

.demo-step-btn.active .demo-step-num {
    background: var(--papira-amber);
    color: var(--papira-navy);
}

.demo-step-label {
    line-height: 1;
}

@media (max-width: 720px) {
    .demo-step-label {
        display: none;
    }
    .demo-step-btn {
        padding: 8px 10px;
    }
}

/* ─── Demo grid ─── */
.demo-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 980px) {
    .demo-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Explanation cards (overlapping, fade between steps) ─── */
.demo-explanation {
    position: relative;
    min-height: 320px;
}

.demo-exp-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.demo-exp-card.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 980px) {
    .demo-explanation {
        min-height: auto;
    }
    .demo-exp-card {
        position: relative;
        display: none;
    }
    .demo-exp-card.active {
        display: block;
    }
}

.demo-exp-kicker {
    display: block;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--papira-amber);
    margin-bottom: 10px;
}

.demo-exp-title {
    margin: 0 0 12px;
    font-size: 1.2em;
    font-weight: 720;
    color: #0f172a;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.demo-exp-text {
    margin: 0 0 16px;
    font-size: 0.92em;
    line-height: 1.6;
    color: #475569;
}

.demo-exp-stats {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.demo-exp-stat {
    display: flex;
    flex-direction: column;
}

.demo-stat-num {
    font-size: 1.4em;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}

.demo-stat-label {
    font-size: 0.74em;
    color: #64748b;
    margin-top: 4px;
}

.demo-exp-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.demo-exp-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 8px;
    font-size: 0.88em;
    color: #475569;
    line-height: 1.5;
}

.demo-exp-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--papira-amber);
}

.demo-exp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.demo-chip {
    padding: 5px 10px;
    background: #f1f5f9;
    color: #334155;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 600;
}

.demo-exp-legend {
    display: flex;
    gap: 16px;
}

.demo-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    color: #475569;
}

.demo-legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}

.demo-legend-dot.baseline {
    background: rgba(148, 163, 184, 0.5);
}

.demo-legend-dot.proposed {
    background: var(--papira-amber);
}

.demo-exp-cta {
    margin-top: 16px;
}

.demo-cta-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--papira-amber);
    color: var(--papira-navy);
    border: none;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
}

.demo-cta-inline:hover {
    background: #d6a334;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(196, 147, 42, 0.3);
}

/* ─── Canvas (where the matrix builds itself) ─── */
.demo-canvas-wrap {
    position: relative;
}

.demo-canvas {
    background: var(--papira-navy);
    border-radius: 14px;
    border: 1px solid rgba(196, 147, 42, 0.18);
    overflow: hidden;
    min-height: 400px;
    position: relative;
    box-shadow:
        0 8px 24px rgba(13, 27, 42, 0.2),
        0 24px 56px rgba(13, 27, 42, 0.12);
}

.demo-scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.demo-scene.active {
    opacity: 1;
    pointer-events: auto;
}

.demo-scene--matrix {
    padding: 0;
}

.demo-scene--matrix .cm {
    height: 100%;
    padding: 16px;
}

/* ─── PDF stack scene (Step 1) ─── */
.demo-scene--pdfs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.demo-pdf-stack {
    position: relative;
    width: 280px;
    height: 320px;
}

.demo-pdf {
    position: absolute;
    width: 200px;
    height: 260px;
    background: white;
    border-radius: 6px;
    padding: 18px 16px 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.demo-pdf-1 {
    top: 0;
    left: 0;
    transform: rotate(-6deg) translateZ(0);
    animation: pdf-float-1 6s ease-in-out infinite;
}
.demo-pdf-2 {
    top: 20px;
    left: 40px;
    transform: rotate(2deg) translateZ(0);
    z-index: 2;
    animation: pdf-float-2 6s ease-in-out infinite;
}
.demo-pdf-3 {
    top: 40px;
    left: 80px;
    transform: rotate(8deg) translateZ(0);
    z-index: 3;
    animation: pdf-float-3 6s ease-in-out infinite;
}

@keyframes pdf-float-1 {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(-6deg) translateY(-6px); }
}
@keyframes pdf-float-2 {
    0%, 100% { transform: rotate(2deg) translateY(0); }
    50% { transform: rotate(2deg) translateY(-4px); }
}
@keyframes pdf-float-3 {
    0%, 100% { transform: rotate(8deg) translateY(0); }
    50% { transform: rotate(8deg) translateY(-8px); }
}

.demo-pdf-line {
    height: 6px;
    background: #e2e8f0;
    border-radius: 2px;
}

.demo-pdf-line.short { width: 60%; }
.demo-pdf-line.med { width: 80%; }

.demo-pdf-label {
    margin-top: auto;
    font-size: 0.7em;
    font-weight: 600;
    color: var(--papira-navy);
    line-height: 1.3;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}

.demo-pdf-scanner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--papira-amber), transparent);
    box-shadow: 0 0 16px var(--papira-amber);
    animation: scanner-sweep 2.4s ease-in-out infinite;
    z-index: 10;
}

@keyframes scanner-sweep {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ─── Demo controls ─── */
.demo-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.demo-control-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82em;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}

.demo-control-btn:hover {
    border-color: var(--papira-amber-line);
    color: var(--papira-navy);
    background: #fffbeb;
}

/* ═══════════════════════════════════════════════════════════
   PRICING REFINEMENTS
   ═══════════════════════════════════════════════════════════ */
.landing-pricing-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 720px;
    margin: 32px auto 24px;
}

@media (max-width: 640px) {
    .landing-pricing-row {
        grid-template-columns: 1fr;
    }
}

.landing-pricing-card {
    position: relative;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px 24px 24px;
    text-align: center;
    transition: all 0.18s;
}

.landing-pricing-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.landing-pricing-card--highlight {
    border: 2px solid var(--papira-amber);
    background: linear-gradient(180deg, #fffbeb 0%, white 30%);
    box-shadow: 0 8px 24px rgba(196, 147, 42, 0.12);
}

.landing-pricing-card--highlight:hover {
    box-shadow: 0 16px 36px rgba(196, 147, 42, 0.18);
}

.landing-pricing-tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 12px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.landing-pricing-tag--offer {
    background: var(--papira-amber);
    color: white;
    animation: tag-pulse 2.4s ease-in-out infinite;
}

@keyframes tag-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 147, 42, 0); }
    50% { box-shadow: 0 0 0 6px rgba(196, 147, 42, 0.18); }
}

.landing-pricing-name {
    margin: 0 0 14px;
    font-size: 1.1em;
    font-weight: 650;
    color: #0f172a;
}

.landing-pricing-amount {
    margin: 0;
    font-size: 2.6em;
    font-weight: 780;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.03em;
}

.landing-pricing-amount--offer {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
}

.landing-pricing-was {
    font-size: 0.55em;
    color: #94a3b8;
    text-decoration: line-through;
    text-decoration-color: rgba(148, 163, 184, 0.5);
    font-weight: 600;
}

.landing-pricing-now {
    color: var(--papira-amber);
}

.landing-pricing-fine {
    margin: 12px 0 0;
    font-size: 0.82em;
    color: #64748b;
    line-height: 1.45;
}

.landing-pricing-detail {
    text-align: center;
    font-size: 0.88em;
    color: #475569;
    margin: 0;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   AUDIENCE / FINAL CTA
   ═══════════════════════════════════════════════════════════ */
.landing-audience {
    padding: 80px 0;
    text-align: center;
}

.landing-audience-panel {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 32px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.landing-audience-lead {
    margin: 0 0 16px;
    font-size: 1.25em;
    line-height: 1.5;
    color: #0f172a;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.landing-audience-lead q {
    color: var(--papira-amber);
    font-style: italic;
}

.landing-audience-note {
    margin: 0;
    font-size: 1em;
    color: #475569;
    line-height: 1.6;
}

.landing-audience-note strong {
    color: var(--papira-navy);
    font-weight: 700;
}

.landing-final-trust {
    margin-top: 12px;
    font-size: 0.82em;
    color: #64748b;
    font-weight: 550;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.landing-footer {
    padding: 28px 28px 36px;
    background: var(--papira-navy);
    border-top: none;
    text-align: center;
    flex-direction: column;
    gap: 12px;
}

.landing-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.landing-footer-brand {
    color: var(--papira-cream);
    font-size: 1em;
    font-weight: 750;
}

.landing-footer-copy {
    color: var(--papira-text-mute);
    font-size: 0.82em;
}

.landing-footer-tagline {
    margin: 0;
    color: var(--papira-amber);
    font-size: 0.92em;
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
    letter-spacing: 0.005em;
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .demo-pdf-1, .demo-pdf-2, .demo-pdf-3 {
        animation: none;
    }
    .demo-pdf-scanner {
        animation: none;
        opacity: 0.6;
    }
    .cm--reveal-gaps .cm-c--gap {
        animation: none;
    }
    .landing-pricing-tag--offer {
        animation: none;
    }
    .landing-hl-amber::after {
        animation: none;
        transform: scaleX(1);
    }
    .cm-c, .cm-h, .cm-y, .cm-app-bar-fill, .cm-app-score {
        transition: none !important;
    }
}