:root{--bg:#07100e;--panel:#0d1816;--panel2:#111f1c;--line:#21332f;--text:#e8f1ee;--muted:#8ea39d;--accent:#77d8b3;--accent2:#154b3c;--warn:#e6bd67;--danger:#ea7b7b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 0,#122820 0,transparent 28rem),var(--bg)}a{color:inherit;text-decoration:none}.topbar{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1440px)/2));background:rgba(7,16,14,.82);backdrop-filter:blur(16px);position:sticky;top:0;z-index:10}.brand,.topbar-actions{display:flex;align-items:center;gap:12px}.brand{font-weight:750;letter-spacing:-.02em}.brand-mark{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,var(--accent),#3a9c7c);color:#06110e;font-weight:900;font-size:13px;box-shadow:0 8px 24px #0c6e4c55}.brand-mark.large{width:52px;height:52px;border-radius:15px;font-size:18px}.shell{max-width:1440px;margin:auto;padding:38px 24px 72px}.center-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(440px,100%);padding:38px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#111f1c,#0b1513);box-shadow:0 30px 80px #0007}.login-card h1{font-size:32px;margin:18px 0 4px;letter-spacing:-.04em}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-size:11px;font-weight:800;margin:16px 0 5px}.muted{color:var(--muted);font-size:13px}.stack{display:grid;gap:15px;margin-top:26px}label{display:grid;gap:7px;color:#b9c8c4;font-size:12px;font-weight:650}input,textarea{width:100%;border:1px solid #2a3d38;background:#091310;color:var(--text);border-radius:10px;padding:11px 12px;font:inherit;outline:none}input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #77d8b31f}textarea{resize:vertical}.button{border:1px solid var(--line);border-radius:9px;padding:9px 14px;font-weight:750;color:var(--text);background:var(--panel2);cursor:pointer}.button.primary{background:var(--accent);border-color:var(--accent);color:#07110e}.button.ghost{padding:7px 11px;background:transparent}.alert{margin-top:18px;border:1px solid #773d3d;background:#341d1d;color:#ffc8c8;border-radius:9px;padding:10px 12px;font-size:13px}.page-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}.page-heading h1{font-size:38px;letter-spacing:-.045em;margin:0}.page-heading p{margin-bottom:6px}.status-dot{font-size:12px;color:#a8b9b4}.status-dot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px;box-shadow:0 0 12px var(--accent)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.7fr);gap:20px}.panel{border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,var(--panel),#0a1412);overflow:hidden}.panel.compact{padding-bottom:22px}.panel.compact form{padding:0 20px}.panel-heading{height:55px;padding:0 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}.panel-heading h2{font-size:14px;margin:0}.count,.pill{font-size:10px;border-radius:999px;background:#1d302b;color:#9eb2ac;padding:3px 7px}.pill.warn{background:#493b1f;color:#f3d99c}.project-row{min-height:70px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid #182824;transition:.15s}.project-row:hover{background:#12211d}.project-row:last-child{border-bottom:0}.project-row strong,.project-row small{display:block}.project-row strong{font-size:14px}.project-row small{color:var(--muted);font-size:11px;margin-top:5px}.git-state{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px}.empty{padding:36px 20px;color:var(--muted);font-size:13px;text-align:center}.empty.small{padding:18px 0;text-align:left}.back{display:inline-block;color:var(--muted);font-size:12px;margin-bottom:20px}.workspace-chip{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:11px}.workspace-chip code{color:var(--accent)}.chat-shell{max-width:none;height:calc(100vh - 64px);padding:0;display:grid;grid-template-columns:270px minmax(0,1fr)}.chat-side{padding:28px 20px;border-right:1px solid var(--line);overflow:auto;background:#091310}.chat-side h2{font-size:17px;margin:10px 0 3px}.job-list{margin-top:28px}.job-row{display:flex;gap:10px;align-items:center;border-radius:9px;padding:9px}.job-row:hover{background:var(--panel2)}.job-row strong,.job-row small{display:block;font-size:10px}.job-row small{color:var(--muted);margin-top:3px}.state{width:8px;height:8px;border-radius:50%;background:var(--muted)}.state.running,.state.claimed{background:var(--warn)}.state.completed{background:var(--accent)}.state.failed{background:var(--danger)}.chat-main{min-width:0;display:grid;grid-template-rows:minmax(0,1fr) auto}.messages{overflow:auto;padding:32px max(24px,calc((100% - 850px)/2))}.message{margin-bottom:22px}.message-meta{display:flex;gap:10px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}.message-body{white-space:pre-wrap;line-height:1.62;font-size:14px}.message.user{border-left:2px solid var(--accent);padding-left:16px}.message.assistant{border:1px solid var(--line);padding:18px;border-radius:12px;background:var(--panel)}.empty.hero{display:grid;gap:8px;margin-top:20vh}.empty.hero strong{font-size:24px;color:var(--text)}.composer{margin:0 max(24px,calc((100% - 850px)/2)) 24px;border:1px solid #2b403a;background:#0c1714;border-radius:14px;padding:10px;box-shadow:0 -20px 50px #07100e}.composer textarea{border:0;background:transparent;min-height:70px;box-shadow:none}.composer-bar{display:flex;align-items:center;justify-content:space-between;padding:7px 4px 0 8px}@media(max-width:800px){.dashboard-grid{grid-template-columns:1fr}.page-heading{align-items:start;flex-direction:column}.chat-shell{grid-template-columns:1fr}.chat-side{display:none}.messages{padding:24px 16px}.composer{margin:0 12px 12px}.topbar{padding:0 16px}.shell{padding:28px 16px}.page-heading h1{font-size:31px}}


/* Workspace Mode Selection Styles */
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(380px, 0.95fr) !important; gap: 24px !important; }
.panel.compact form { padding: 18px 24px 28px !important; }
.workspace-mode-section { display: grid; gap: 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid #1c332c; border-radius: 12px; padding: 14px; margin-top: 4px; }
.workspace-hint { font-size: 11px; color: var(--muted); line-height: 1.5; padding: 4px 2px 2px; }
.root-code { display: block; margin-top: 5px; padding: 6px 10px; background: #060e0c; border: 1px solid #162622; border-radius: 6px; color: #a3d9c9; font-size: 11px; word-break: break-all; }
.workspace-select { width: 100%; border: 1px solid #2a3d38; background: #091310; color: var(--text); border-radius: 10px; padding: 10px 12px; font: inherit; outline: none; font-size: 12px; cursor: pointer; }
.workspace-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #77d8b31f; }
.workspace-preview-box { background: #060e0c; border: 1px solid #1c332c; border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; }
.preview-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.preview-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.preview-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #172824; color: #a3d9c9; }
.preview-status.ready { background: rgba(119, 216, 179, 0.15); color: var(--accent); }
.preview-status.warn { background: rgba(230, 189, 103, 0.15); color: var(--warn); }
.preview-status.new { background: rgba(119, 216, 179, 0.12); color: #92e0c2; }
.preview-status.custom { background: rgba(142, 163, 157, 0.15); color: #cbd5d1; }
.preview-path { font-size: 11px; color: #77d8b3; word-break: break-all; font-family: monospace; }

/* Project Row Card & Action Buttons */
.project-card-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #182824; transition: 0.15s; position: relative; }
.project-card-row:hover { background: #12211d; }
.project-card-row:last-child { border-bottom: 0; }
.project-row-link { flex: 1; min-height: 70px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; text-decoration: none; color: inherit; }
.project-row-link strong, .project-row-link small { display: block; }
.project-row-link strong { font-size: 14px; }
.project-row-link small { color: var(--muted); font-size: 11px; margin-top: 5px; }
.project-actions { display: flex; align-items: center; gap: 6px; padding-right: 16px; opacity: 0.6; transition: opacity 0.2s; }
.project-card-row:hover .project-actions { opacity: 1; }
.action-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.04); color: var(--muted); cursor: pointer; transition: all 0.15s; }
.action-icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); border-color: var(--line); }
.action-icon-btn.btn-delete-project:hover { background: rgba(234, 123, 123, 0.18); color: var(--danger); border-color: rgba(234, 123, 123, 0.4); }

/* Generic Modal Styles */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 1000; padding: 16px; animation: fadeIn 0.15s ease-out; }
.modal-backdrop[hidden] { display: none !important; }
.modal-dialog { width: min(480px, 100%); background: linear-gradient(145deg, #111f1c, #0b1513); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); position: relative; }
.modal-dialog.modal-danger { border-color: rgba(234, 123, 123, 0.4); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.modal-header h3 { font-size: 18px; margin: 0; letter-spacing: -0.02em; }
.btn-modal-close { background: transparent; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; }
.btn-modal-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.button-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.button-danger:hover { opacity: 0.9; }
.delete-warning-box { background: rgba(234, 123, 123, 0.08); border: 1px solid rgba(234, 123, 123, 0.25); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }

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