:root {
            --bg-base:     #0d0d0f;
            --bg-surface:  #131316;
            --bg-elevated: #1e1e23;
            --bg-input:    #1a1a1f;
            --border:      rgba(255,255,255,0.07);
            --border-md:   rgba(255,255,255,0.12);
            --text-1:      #e8e8ed;
            --text-2:      #8e8e93;
            --text-3:      #48484f;
            --accent-a:    #4f8ef7;
            --accent-b:    #a259f7;
            --green:       #34c759;
            --amber:       #f59e0b;
            --red:         #ef4444;
            --radius-s:    6px;
            --radius-m:    12px;
            --radius-l:    18px;
            --radius-pill: 999px;
        }

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

        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
            background: var(--bg-base);
            color: var(--text-1);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
            font-size: 14px;
            overflow: hidden;
        }

        /* ── Header ──────────────────────────────────────────── */
        #header {
            flex-shrink: 0;
            height: 46px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 14px;
            background: var(--bg-surface);
            border-bottom: 1px solid var(--border);
        }

        #logo {
            font-size: 14px;
            font-weight: 700;
            letter-spacing: -0.01em;
            background: linear-gradient(130deg, var(--accent-a), var(--accent-b));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            white-space: nowrap;
            flex-shrink: 0;
        }

        #current-file {
            flex: 1;
            font-size: 12px;
            color: var(--text-3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

        .save-btn {
            background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
            border: none;
            border-radius: var(--radius-s);
            color: #fff;
            font-size: 12.5px;
            font-weight: 600;
            padding: 4px 11px;
            cursor: pointer;
            white-space: nowrap;
            transition: opacity 0.12s;
        }
        .save-btn:hover { opacity: 0.85; }
        .save-btn:disabled { opacity: 0.4; cursor: default; }

        /* ── Chats panel ──────────────────────────────────────── */
        #chats-panel {
            position: absolute;
            top: 0; left: 0; bottom: 0;
            width: 280px;
            background: var(--bg-surface);
            border-right: 1px solid var(--border-md);
            display: flex;
            flex-direction: column;
            z-index: 50;
            transform: translateX(-100%);
            transition: transform 0.2s ease;
        }
        #chats-panel.open { transform: translateX(0); }
        #chats-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        #chats-panel-header span { font-size: 13px; font-weight: 600; }
        #chats-list { flex: 1; overflow-y: auto; padding: 6px; }

        /* Files browser panel — mirrors the chats slide-out */
        #files-panel {
            position: absolute;
            top: 0; left: 0; bottom: 0;
            width: 280px;
            background: var(--bg-surface);
            border-right: 1px solid var(--border-md);
            display: flex;
            flex-direction: column;
            z-index: 51;
            transform: translateX(-100%);
            transition: transform 0.2s ease;
        }
        #files-panel.open { transform: translateX(0); }
        #files-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        #files-panel-header span { font-size: 13px; font-weight: 600; }
        #files-list { flex: 1; overflow-y: auto; padding: 6px; }
        .file-item {
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 12px;
            color: var(--text-2);
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        }
        .file-item:hover { background: var(--bg-elevated); color: var(--text-1); }
        .file-item.active { background: var(--bg-elevated); color: var(--text-1); }
        .chat-session-item {
            padding: 9px 10px;
            border-radius: var(--radius-s);
            cursor: pointer;
            transition: background 0.12s;
        }
        .chat-session-item:hover { background: var(--bg-elevated); }
        .chat-session-item.active { background: var(--bg-elevated); }
        .csi-title { font-size: 13px; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .csi-meta  { font-size: 11px; color: var(--text-3); margin-top: 2px; }

        #header-right {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }

        .ghost-btn {
            background: none;
            border: none;
            color: var(--text-2);
            cursor: pointer;
            padding: 5px 8px;
            border-radius: var(--radius-s);
            font-size: 13px;
            transition: background 0.12s, color 0.12s;
            white-space: nowrap;
        }
        .ghost-btn:hover { background: var(--bg-elevated); color: var(--text-1); }
        .ghost-btn:disabled { opacity: 0.35; cursor: default; }

        /* ── Main split ───────────────────────────────────────── */
        #main {
            display: flex;
            flex: 1;
            min-height: 0;
        }

        /* ── Left panel ───────────────────────────────────────── */
        #left-panel {
            display: flex;
            flex-direction: column;
            width: 42%;
            min-width: 0;
            border-right: 1px solid var(--border);
        }

        #editor-wrap {
            display: none;
            flex: 0 0 45%;
            min-height: 0;
            border-bottom: 1px solid var(--border);
        }
        #editor-wrap.visible { display: block; }

        /* ── Chat pane ────────────────────────────────────────── */
        #chat-pane {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            background: var(--bg-surface);
        }

        #chat-log {
            flex: 1;
            overflow-y: auto;
            padding: 10px 14px;
            display: flex;
            flex-direction: column;
            gap: 7px;
            scrollbar-width: thin;
            scrollbar-color: var(--bg-elevated) transparent;
        }
        #chat-log::-webkit-scrollbar { width: 4px; }
        #chat-log::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 4px; }

        .bubble-user {
            align-self: flex-end;
            background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
            color: #fff;
            padding: 8px 14px;
            border-radius: var(--radius-l) var(--radius-l) 3px var(--radius-l);
            max-width: 82%;
            font-size: 13px;
            line-height: 1.5;
            word-break: break-word;
        }

        .bubble-agent {
            align-self: flex-start;
            background: var(--bg-elevated);
            border: 1px solid var(--border-md);
            border-radius: 3px var(--radius-l) var(--radius-l) var(--radius-l);
            padding: 9px 12px;
            max-width: 96%;
            word-break: break-word;
        }

        .agent-reply {
            font-size: 13px;
            line-height: 1.55;
            color: var(--text-1);
            margin-bottom: 4px;
        }

        .tool-log {
            display: flex;
            flex-direction: column;
            gap: 1px;
            margin-top: 4px;
        }

        .log-line {
            font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
            font-size: 11px;
            line-height: 1.6;
            color: var(--text-2);
            white-space: pre-wrap;
            word-break: break-all;
        }
        .log-line.tool  { color: #5ec47a; }
        .log-line.error { color: var(--red); }
        .log-line.info  { color: var(--amber); }
        .log-line.cost  { color: var(--text-3); }

        /* ── Prompt bar ───────────────────────────────────────── */
        /* ── Chat bottom controls ─────────────────────────────── */
        #chat-bottom {
            display: flex;
            flex-direction: column;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }
        #attachments-bar {
            display: none;
            gap: 6px;
            padding: 8px 14px 0;
            flex-wrap: wrap;
        }
        .att-chip {
            display: flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-md);
            border-radius: var(--radius-s);
            padding: 4px 8px;
            font-size: 12px;
            color: var(--text-2);
        }
        .att-chip img { height: 28px; border-radius: 2px; }
        .att-remove {
            background: none; border: none; color: var(--text-3);
            cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1;
        }
        .att-remove:hover { color: var(--red); }
        #visual-edits-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 14px;
            border-top: 1px solid var(--border);
        }
        #visual-edits-btn {
            background: none;
            border: 1px solid var(--border-md);
            border-radius: var(--radius-pill);
            color: var(--text-2);
            font-size: 12px;
            padding: 4px 11px;
            cursor: pointer;
            transition: background 0.12s, color 0.12s, border-color 0.12s;
        }
        #visual-edits-btn:hover { background: var(--bg-elevated); color: var(--text-1); }
        #visual-edits-btn.active { border-color: var(--accent-a); color: var(--accent-a); background: rgba(79,142,247,0.08); }
        #ve-selection {
            font-size: 11.5px;
            color: var(--accent-a);
            background: rgba(79,142,247,0.1);
            border-radius: var(--radius-pill);
            padding: 2px 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 220px;
        }
        .chat-icon-btn {
            background: none; border: none; cursor: pointer;
            padding: 4px 6px; font-size: 16px; line-height: 1;
            opacity: 0.6; transition: opacity 0.12s;
            flex-shrink: 0;
        }
        .chat-icon-btn:hover { opacity: 1; }

        /* ── Preview controls ─────────────────────────────────── */
        #preview-size-btns {
            display: flex;
            gap: 2px;
        }
        .size-btn {
            background: none;
            border: none;
            color: var(--text-2);
            cursor: pointer;
            padding: 4px 7px;
            border-radius: var(--radius-s);
            font-size: 13px;
            line-height: 1;
            transition: background 0.12s, color 0.12s;
        }
        .size-btn:hover  { background: var(--bg-elevated); color: var(--text-1); }
        .size-btn.active { background: var(--bg-elevated); color: var(--text-1); }
        #preview-container {
            flex: 1;
            overflow: auto;
            display: flex;
            justify-content: center;
            background: #09090b;
            position: relative;
        }
        #preview-placeholder {
            display: none;
            position: absolute;
            inset: 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
            background: #09090b;
            color: var(--text-2);
            text-align: center;
            padding: 24px;
        }
        .pv-ph-msg { font-size: 13px; max-width: 320px; line-height: 1.5; }
        .pv-ph-msg b { color: var(--text-1); }
        .pv-ph-btn {
            font-size: 13px; padding: 8px 16px; border-radius: 8px;
            background: var(--bg-elevated); color: var(--text-1);
            border: 1px solid var(--border-md); text-decoration: none;
        }
        .pv-ph-btn:hover { background: var(--border-md); }
        #preview-frame {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            border: none;
            /* White backdrop so pages that don't set their own background render
               like a normal browser tab (default white) instead of letting the
               dark preview container show through a transparent document. */
            background: #fff;
            transition: width 0.2s;
        }
        #preview-frame.tablet { width: 768px; }
        #preview-frame.mobile { width: 375px; }

        .ghost-btn.active { background: var(--bg-elevated); color: var(--text-1); }

        #prompt-bar {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 9px 12px;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        #ai-prompt {
            flex: 1;
            background: var(--bg-elevated);
            border: 1px solid var(--border-md);
            border-radius: var(--radius-pill);
            padding: 8px 16px;
            color: var(--text-1);
            font-size: 13.5px;
            outline: none;
            transition: border-color 0.15s;
        }
        #ai-prompt:focus { border-color: var(--accent-a); }
        #ai-prompt::placeholder { color: var(--text-3); }

        #ask-ai-btn {
            background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
            color: #fff;
            border: none;
            padding: 8px 18px;
            border-radius: var(--radius-pill);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: opacity 0.15s;
        }
        #ask-ai-btn:hover  { opacity: 0.88; }
        #ask-ai-btn:disabled { opacity: 0.38; cursor: default; }

        #stop-btn {
            display: none;
            background: rgba(239,68,68,0.12);
            color: var(--red);
            border: 1px solid rgba(239,68,68,0.25);
            padding: 7px 14px;
            border-radius: var(--radius-pill);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s;
        }
        #stop-btn:hover { background: rgba(239,68,68,0.22); }

        /* ── Preview panel ────────────────────────────────────── */
        #right-panel {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 0;
            background: #fff;
        }

        #preview-toolbar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 12px;
            height: 34px;
            background: var(--bg-surface);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }

        #preview-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: var(--text-2);
        }

        #live-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--green);
            box-shadow: 0 0 6px var(--green);
            flex-shrink: 0;
        }

        /* ── Overflow menu ────────────────────────────────────── */
        #menu-anchor { position: relative; }

        #overflow-menu {
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            min-width: 198px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-md);
            border-radius: var(--radius-m);
            padding: 5px;
            z-index: 100;
            box-shadow: 0 10px 30px rgba(0,0,0,0.55);
        }
        #overflow-menu.open { display: block; }

        .menu-item {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 8px 10px;
            border-radius: var(--radius-s);
            cursor: pointer;
            color: var(--text-1);
            font-size: 13px;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            transition: background 0.1s;
        }
        .menu-item:hover { background: rgba(255,255,255,0.07); }
        .menu-item:disabled { opacity: 0.35; cursor: default; }
        .mi-icon { width: 15px; text-align: center; font-size: 13px; flex-shrink: 0; }
        .menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

        /* ── History overlay ──────────────────────────────────── */
        #history-overlay {
            display: none;
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 200;
            align-items: flex-start;
            justify-content: center;
            padding-top: 60px;
        }
        #history-overlay.open { display: flex; }

        #history-panel {
            background: var(--bg-elevated);
            border: 1px solid var(--border-md);
            border-radius: var(--radius-l);
            padding: 16px;
            width: min(580px, 92vw);
            max-height: 65vh;
            overflow-y: auto;
            box-shadow: 0 20px 50px rgba(0,0,0,0.65);
        }

        .h-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .h-title { font-size: 15px; font-weight: 600; }

        .h-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            padding: 9px 0;
            border-bottom: 1px solid var(--border);
            font-size: 12.5px;
            color: var(--text-2);
        }
        .h-row:last-child { border-bottom: none; }
        .h-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        .rollback-btn {
            background: rgba(239,68,68,0.1);
            color: var(--red);
            border: 1px solid rgba(239,68,68,0.2);
            padding: 4px 11px;
            border-radius: var(--radius-pill);
            font-size: 11.5px;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.12s;
        }
        .rollback-btn:hover { background: rgba(239,68,68,0.2); }

        /* ── Inline timeout prompt ────────────────────────────── */
        .timeout-prompt {
            align-self: flex-start;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            background: var(--bg-elevated);
            border: 1px solid rgba(245,158,11,0.25);
            border-radius: var(--radius-m);
            padding: 8px 12px;
            max-width: 96%;
        }
        .timeout-prompt span { font-size: 12.5px; color: var(--amber); flex: 1 1 auto; }
        .tp-btn {
            background: var(--bg-input);
            color: var(--text-1);
            border: 1px solid var(--border-md);
            padding: 4px 11px;
            border-radius: var(--radius-pill);
            font-size: 12px;
            cursor: pointer;
            white-space: nowrap;
        }
        .tp-btn:hover { border-color: var(--accent-a); }

        /* ── Project context bar ──────────────────────────────── */
        #project-context-bar {
            display: none;
            align-items: center;
            gap: 5px;
            padding: 3px 10px;
            background: rgba(245,158,11,0.1);
            border: 1px solid rgba(245,158,11,0.22);
            border-radius: var(--radius-pill);
            font-size: 12px;
            color: var(--amber);
            flex-shrink: 0;
            max-width: 180px;
        }
        #project-context-bar.active { display: flex; }
        #project-context-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 600;
        }
        #exit-project-btn {
            background: none;
            border: none;
            color: var(--amber);
            cursor: pointer;
            font-size: 11px;
            padding: 0;
            opacity: 0.65;
            flex-shrink: 0;
        }
        #exit-project-btn:hover { opacity: 1; }

        /* ── Projects overlay ─────────────────────────────────── */
        #projects-overlay {
            display: none;
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 200;
            align-items: flex-start;
            justify-content: center;
            padding-top: 60px;
        }
        #projects-overlay.open { display: flex; }

        #projects-panel {
            background: var(--bg-elevated);
            border: 1px solid var(--border-md);
            border-radius: var(--radius-l);
            padding: 16px;
            width: min(620px, 92vw);
            max-height: 65vh;
            overflow-y: auto;
            box-shadow: 0 20px 50px rgba(0,0,0,0.65);
        }

        .proj-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
        }
        .proj-row:last-child { border-bottom: none; }

        .proj-info { flex: 1; min-width: 0; }
        .proj-name { font-size: 13px; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .proj-meta { font-size: 11.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }

        .type-badge {
            display: inline-block;
            padding: 1px 7px;
            border-radius: var(--radius-pill);
            font-size: 10.5px;
            font-weight: 600;
            flex-shrink: 0;
        }
        .type-badge.static    { background: rgba(79,142,247,0.15); color: var(--accent-a); }
        .type-badge.game      { background: rgba(162,89,247,0.15); color: var(--accent-b); }
        .type-badge.fullstack { background: rgba(52,199,89,0.15); color: var(--green); }

        .status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
        .status-dot.ready    { background: var(--green); }
        .status-dot.error    { background: var(--red); }
        .status-dot.building { background: var(--amber); }
        .status-dot.unknown  { background: var(--text-3); }

        .proj-actions { display: flex; gap: 5px; flex-shrink: 0; }

        .open-proj-btn {
            background: rgba(79,142,247,0.1);
            color: var(--accent-a);
            border: 1px solid rgba(79,142,247,0.22);
            padding: 4px 11px;
            border-radius: var(--radius-pill);
            font-size: 11.5px;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.12s;
        }
        .open-proj-btn:hover { background: rgba(79,142,247,0.2); }

        .live-link {
            display: inline-flex;
            align-items: center;
            background: var(--bg-input);
            color: var(--text-2);
            border: 1px solid var(--border-md);
            padding: 4px 9px;
            border-radius: var(--radius-pill);
            font-size: 11.5px;
            text-decoration: none;
            white-space: nowrap;
            transition: border-color 0.12s, color 0.12s;
        }
        .live-link:hover { border-color: var(--accent-a); color: var(--text-1); }

        /* ── Improvements overlay ─────────────────────────────── */
        #improvements-overlay {
            display: none;
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 200;
            align-items: flex-start;
            justify-content: center;
            padding-top: 60px;
        }
        #improvements-overlay.open { display: flex; }

        #improvements-panel {
            background: var(--bg-elevated);
            border: 1px solid var(--border-md);
            border-radius: var(--radius-l);
            padding: 16px;
            width: min(680px, 92vw);
            max-height: 72vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 50px rgba(0,0,0,0.65);
        }

        #improvements-tabs {
            display: flex;
            gap: 4px;
            margin: 10px 0 12px;
        }
        .imp-tab {
            padding: 5px 14px;
            border-radius: var(--radius-pill);
            font-size: 12.5px;
            cursor: pointer;
            border: 1px solid var(--border-md);
            background: none;
            color: var(--text-2);
            transition: background 0.12s, color 0.12s;
        }
        .imp-tab.active { background: var(--bg-input); color: var(--text-1); border-color: var(--border-md); }

        #improvements-list {
            flex: 1;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--bg-elevated) transparent;
        }

        .imp-card {
            border: 1px solid var(--border);
            border-radius: var(--radius-m);
            padding: 12px 14px;
            margin-bottom: 8px;
        }
        .imp-card-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
        .imp-priority {
            flex-shrink: 0;
            width: 22px; height: 22px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; font-weight: 700;
        }
        .imp-priority.p5 { background: rgba(239,68,68,0.2); color: var(--red); }
        .imp-priority.p4 { background: rgba(245,158,11,0.2); color: var(--amber); }
        .imp-priority.p3 { background: rgba(79,142,247,0.15); color: var(--accent-a); }
        .imp-priority.p2, .imp-priority.p1 { background: rgba(255,255,255,0.06); color: var(--text-2); }
        .imp-title { font-size: 13px; font-weight: 600; color: var(--text-1); flex: 1; }
        .imp-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-bottom: 5px; }
        .imp-rationale { font-size: 11.5px; color: var(--text-3); font-style: italic; margin-bottom: 8px; }
        .imp-files { font-size: 11px; color: var(--text-3); font-family: monospace; margin-bottom: 8px; }
        .imp-actions { display: flex; gap: 6px; }

        .imp-accept-btn {
            background: rgba(52,199,89,0.12);
            color: var(--green);
            border: 1px solid rgba(52,199,89,0.25);
            padding: 5px 12px;
            border-radius: var(--radius-pill);
            font-size: 12px;
            cursor: pointer;
            transition: background 0.12s;
        }
        .imp-accept-btn:hover { background: rgba(52,199,89,0.22); }
        .imp-reject-btn {
            background: none;
            color: var(--text-2);
            border: 1px solid var(--border-md);
            padding: 5px 12px;
            border-radius: var(--radius-pill);
            font-size: 12px;
            cursor: pointer;
            transition: background 0.12s;
        }
        .imp-reject-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-1); }
        .imp-protected-hint {
            font-size: 11.5px;
            color: var(--amber);
            margin-bottom: 4px;
        }
        .imp-resolve-btn {
            background: none;
            color: var(--text-2);
            border: 1px solid var(--border-md);
            padding: 5px 12px;
            border-radius: var(--radius-pill);
            font-size: 12px;
            cursor: pointer;
            transition: background 0.12s;
        }
        .imp-resolve-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-1); }

        .imp-card.running { border-color: rgba(79,142,247,0.4); }
        .imp-card.done { border-color: rgba(52,199,89,0.3); opacity: 0.8; }
        .imp-terminal {
            background: var(--bg-base);
            border: 1px solid var(--border);
            border-radius: var(--radius-s);
            padding: 8px 10px;
            margin: 8px 0 4px;
            max-height: 180px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 11.5px;
            line-height: 1.55;
            scrollbar-width: thin;
            scrollbar-color: var(--bg-elevated) transparent;
        }
        .imp-log-line { color: var(--text-2); white-space: pre-wrap; word-break: break-all; }
        .imp-log-line.error { color: var(--red); }
        .imp-log-line.info { color: var(--text-3); }
        .imp-stop-btn {
            background: none;
            color: var(--red);
            border: 1px solid rgba(239,68,68,0.3);
            padding: 5px 12px;
            border-radius: var(--radius-pill);
            font-size: 12px;
            cursor: pointer;
            transition: background 0.12s;
        }
        .imp-stop-btn:hover { background: rgba(239,68,68,0.1); }
        .imp-done-btn {
            background: rgba(52,199,89,0.12);
            color: var(--green);
            border: 1px solid rgba(52,199,89,0.25);
            padding: 5px 12px;
            border-radius: var(--radius-pill);
            font-size: 12px;
            cursor: pointer;
            transition: background 0.12s;
        }
        .imp-done-btn:hover { background: rgba(52,199,89,0.22); }

        #improvements-footer {
            display: flex;
            gap: 8px;
            padding-top: 10px;
            border-top: 1px solid var(--border);
            margin-top: 8px;
            flex-shrink: 0;
        }

        /* ── Project manager ──────────────────────────────────── */
        #project-manager {
            position: fixed;
            inset: 0;
            background: var(--bg-base);
            display: none;
            z-index: 500;
            transition: opacity 0.2s;
        }
        #project-manager.visible { display: flex; }
        #project-manager.hidden  { opacity: 0; pointer-events: none; }

        #pm-sidebar {
            width: 220px;
            background: var(--bg-surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            padding: 24px 12px 16px;
            flex-shrink: 0;
        }
        #pm-logo {
            font-size: 16px;
            font-weight: 700;
            letter-spacing: -0.01em;
            background: linear-gradient(130deg, var(--accent-a), var(--accent-b));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            padding: 0 8px;
            margin-bottom: 24px;
        }
        #pm-new-btn {
            background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
            border: none;
            border-radius: var(--radius-s);
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            padding: 9px 14px;
            cursor: pointer;
            text-align: left;
            margin-bottom: 8px;
            transition: opacity 0.12s;
            width: 100%;
        }
        #pm-new-btn:hover { opacity: 0.88; }
        .pm-nav-item {
            background: none;
            border: none;
            color: var(--text-2);
            font-size: 13px;
            padding: 8px 10px;
            border-radius: var(--radius-s);
            cursor: pointer;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 9px;
            transition: background 0.12s, color 0.12s;
            width: 100%;
        }
        .pm-nav-item:hover  { background: var(--bg-elevated); color: var(--text-1); }
        .pm-nav-item.active { background: var(--bg-elevated); color: var(--text-1); }
        #pm-main {
            flex: 1;
            overflow-y: auto;
            padding: 36px 40px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        #pm-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
        #pm-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 16px;
        }
        .pm-tile {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-m);
            overflow: hidden;
            cursor: pointer;
            transition: border-color 0.15s, transform 0.15s;
        }
        .pm-tile:hover { border-color: var(--border-md); transform: translateY(-2px); }
        .pm-tile-preview {
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            user-select: none;
        }
        .pm-tile-preview.type-builder    { background: linear-gradient(135deg, #0f1a2e, #1a2a50); }
        .pm-tile-preview.type-static     { background: linear-gradient(135deg, #0f1e2e, #0f3a5a); }
        .pm-tile-preview.type-game       { background: linear-gradient(135deg, #0f1e14, #0f3d24); }
        .pm-tile-preview.type-full-stack { background: linear-gradient(135deg, #1a0f2e, #3a0f6a); }
        .pm-tile-info {
            padding: 14px 16px;
            border-top: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .pm-tile-name   { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pm-tile-domain { font-size: 12px; color: var(--accent-a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pm-tile-meta   { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
        .pm-tile-date   { font-size: 11.5px; color: var(--text-3); }
        .pm-tile-badge  {
            font-size: 11px;
            padding: 2px 7px;
            border-radius: var(--radius-pill);
            background: var(--bg-elevated);
            color: var(--text-2);
        }
        .pm-tile-badge.ready { color: var(--green); }
        .pm-tile-delete {
            font-size: 11px;
            padding: 2px 6px;
            border-radius: var(--radius-pill);
            border: 1px solid var(--border-md);
            background: none;
            color: var(--text-3);
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
        }
        .pm-tile:hover .pm-tile-delete { opacity: 1; }
        .pm-tile-delete.confirming {
            opacity: 1;
            background: rgba(239,68,68,0.15);
            color: var(--red);
            border-color: rgba(239,68,68,0.3);
        }
        #pm-loading { color: var(--text-2); font-size: 13px; }
        .pm-nav-section-label {
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-3);
            padding: 14px 10px 4px;
        }
        .pm-view { display: flex; flex-direction: column; gap: 16px; }
        .pm-view-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .pm-view-header h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
        .pm-view-desc { font-size: 13px; color: var(--text-2); margin-top: -8px; }
        .pm-action-btn {
            background: var(--bg-elevated);
            border: 1px solid var(--border-md);
            border-radius: var(--radius-s);
            color: var(--text-1);
            font-size: 13px;
            padding: 7px 14px;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.12s;
        }
        .pm-action-btn:hover { background: var(--bg-input); }
        .pm-action-btn:disabled { opacity: 0.45; cursor: default; }
        .pm-output {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-m);
            padding: 20px;
            font-size: 13px;
            line-height: 1.6;
            color: var(--text-2);
            white-space: pre-wrap;
            max-height: calc(100vh - 240px);
            overflow-y: auto;
        }
        .pm-sug-list { display: flex; flex-direction: column; gap: 10px; }
        .pm-sug-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-m);
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .pm-sug-header { display: flex; align-items: flex-start; gap: 10px; }
        .pm-sug-priority {
            flex-shrink: 0;
            font-size: 11px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: var(--radius-pill);
            background: var(--bg-elevated);
            color: var(--text-2);
        }
        .pm-sug-priority.p5 { background: rgba(239,68,68,0.15); color: #ef4444; }
        .pm-sug-priority.p4 { background: rgba(245,158,11,0.15); color: #f59e0b; }
        .pm-sug-priority.p3 { background: rgba(79,142,247,0.15); color: #4f8ef7; }
        .pm-sug-title { font-size: 14px; font-weight: 600; color: var(--text-1); flex: 1; }
        .pm-sug-desc  { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
        .pm-sug-files { font-size: 11.5px; color: var(--text-3); }
        .pm-sug-actions { display: flex; gap: 8px; margin-top: 4px; }
        .pm-sug-btn {
            font-size: 12px;
            padding: 5px 12px;
            border-radius: var(--radius-pill);
            border: 1px solid var(--border-md);
            cursor: pointer;
            background: none;
            color: var(--text-2);
            transition: background 0.12s, color 0.12s;
        }
        .pm-sug-btn:hover { background: var(--bg-elevated); color: var(--text-1); }
        .pm-sug-btn.implement { border-color: var(--green); color: var(--green); }
        .pm-sug-btn.implement:hover { background: rgba(52,199,89,0.12); }
        .pm-sug-btn.reject:hover { background: rgba(239,68,68,0.1); color: var(--red); }
        .pm-sug-protected-hint { font-size: 12px; color: var(--amber); margin-bottom: 2px; }
        .pm-sug-card.running { border-color: rgba(79,142,247,0.4); }
        .pm-sug-card.done { border-color: rgba(52,199,89,0.3); opacity: 0.8; }
        .pm-sug-terminal {
            background: var(--bg-base);
            border: 1px solid var(--border);
            border-radius: var(--radius-s);
            padding: 8px 10px;
            max-height: 220px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 11.5px;
            line-height: 1.55;
            scrollbar-width: thin;
            scrollbar-color: var(--bg-elevated) transparent;
        }
        .pm-sug-terminal .imp-log-line { color: var(--text-2); white-space: pre-wrap; word-break: break-all; }
        .pm-sug-terminal .imp-log-line.error { color: var(--red); }
        .pm-sug-terminal .imp-log-line.info { color: var(--text-3); }
        .pm-sug-stop-btn {
            font-size: 12px; padding: 5px 12px; border-radius: var(--radius-pill);
            border: 1px solid rgba(239,68,68,0.3); background: none; color: var(--red); cursor: pointer;
        }
        .pm-sug-done-btn {
            font-size: 12px; padding: 5px 12px; border-radius: var(--radius-pill);
            border: 1px solid rgba(52,199,89,0.25); background: rgba(52,199,89,0.12); color: var(--green); cursor: pointer;
        }

        /* ── Login screen ─────────────────────────────────────── */
        #login-screen {
            position: fixed;
            inset: 0;
            background: var(--bg-base);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.2s;
        }
        #login-screen.hidden { opacity: 0; pointer-events: none; }

        #login-card {
            width: 340px;
            background: var(--bg-surface);
            border: 1px solid var(--border-md);
            border-radius: var(--radius-l);
            padding: 36px 32px 28px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        #login-logo {
            font-size: 22px;
            font-weight: 700;
            letter-spacing: -0.01em;
            background: linear-gradient(130deg, var(--accent-a), var(--accent-b));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }
        #login-subtitle {
            color: var(--text-2);
            font-size: 13px;
            text-align: center;
            margin-top: -6px;
        }
        #login-password {
            background: var(--bg-input);
            border: 1px solid var(--border-md);
            border-radius: var(--radius-s);
            color: var(--text-1);
            font-size: 14px;
            padding: 10px 12px;
            outline: none;
            width: 100%;
            margin-top: 4px;
        }
        #login-password:focus { border-color: var(--accent-a); }
        #login-btn {
            background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
            border: none;
            border-radius: var(--radius-s);
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            padding: 10px;
            cursor: pointer;
            width: 100%;
            transition: opacity 0.12s;
        }
        #login-btn:hover { opacity: 0.88; }
        #login-btn:disabled { opacity: 0.5; cursor: default; }
        #login-error {
            color: var(--red);
            font-size: 12.5px;
            text-align: center;
            min-height: 18px;
        }

        /* ── Archived projects + permanent-delete modal ── */
        #pm-archived {
            margin-top: 24px;
            border-top: 1px solid var(--bg-elevated);
            padding-top: 16px;
        }
        .pm-archived-header {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text-3, var(--text-2));
            margin-bottom: 10px;
        }
        .pm-archived-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            border-radius: 8px;
            background: var(--bg-elevated);
            margin-bottom: 6px;
        }
        .pm-archived-name { font-size: 13px; color: var(--text-2); }
        .pm-archived-actions { display: flex; gap: 8px; }
        .pm-restore-btn, .pm-del-btn {
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 6px;
            border: 1px solid var(--bg-elevated);
            background: transparent;
            color: var(--text-2);
            cursor: pointer;
        }
        .pm-restore-btn:hover { background: var(--bg-elevated); color: var(--text-1); }
        .pm-restore-btn:disabled { opacity: 0.5; cursor: default; }
        .pm-del-btn { color: var(--red); border-color: var(--red); }
        .pm-del-btn:hover { background: var(--red); color: #fff; }

        .pm-modal-overlay {
            position: fixed; inset: 0;
            background: rgba(0, 0, 0, 0.6);
            display: flex; align-items: center; justify-content: center;
            z-index: 3000;
        }
        .pm-modal {
            background: var(--bg-elevated);
            border: 1px solid var(--red);
            border-radius: 12px;
            padding: 20px;
            width: min(430px, 90vw);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
        }
        .pm-modal-title { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; }
        .pm-modal-body { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-bottom: 14px; }
        .pm-modal-body b { color: var(--text-1); }
        .pm-modal-input {
            width: 100%; box-sizing: border-box;
            padding: 9px 11px;
            border-radius: 8px;
            border: 1px solid var(--bg-elevated);
            background: #09090b;
            color: var(--text-1);
            font-size: 13px;
            font-family: inherit;
        }
        .pm-modal-input:focus { outline: none; border-color: var(--red); }
        .pm-modal-err { color: var(--red); font-size: 12px; min-height: 16px; margin-top: 8px; }
        .pm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
        .pm-modal-cancel, .pm-modal-delete {
            font-size: 13px; padding: 8px 14px; border-radius: 8px; cursor: pointer;
            border: 1px solid transparent; font-family: inherit;
        }
        .pm-modal-cancel { background: transparent; border-color: var(--bg-elevated); color: var(--text-2); }
        .pm-modal-cancel:hover { color: var(--text-1); }
        .pm-modal-delete { background: var(--red); color: #fff; }
        .pm-modal-delete:disabled { opacity: 0.45; cursor: default; }
        .pm-modal-delete:not(:disabled):hover { filter: brightness(1.12); }