:root{--bg:#0a0d13;--panel:#12161f;--panel-raised:#171c27;--line:#232a38;--text:#e4e7eb;--text-muted:#6b7684;--text-faint:#444d5c;--agent-a:#5eead4;--agent-a-dim:#2c4d48;--agent-b:#e8a33d;--agent-b-dim:#4d3e22;--alert:#f45b69;--alert-dim:#3a1f24;--ok:#5eead4;--user-accent:#8b93a6;--user-accent-dim:#2a2e38;--claude-accent:#a78bfa;--claude-accent-dim:#332c4d;--font-display:"Space Grotesk", sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font-family:var(--font-mono);height:100%;margin:0;padding:0;overflow:hidden}#app{flex-direction:column;height:100vh;display:flex}.topbar{border-bottom:1px solid var(--line);background:linear-gradient(#0d1119 0%,#0a0d13 100%);flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 28px;display:flex}.brand{align-items:baseline;gap:10px;display:flex}.brand .mark{font-family:var(--font-display);letter-spacing:-.01em;font-size:19px;font-weight:700}.brand .sub{color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;font-size:12px}.topbar-stats{align-items:center;gap:28px;display:flex}.stat{flex-direction:column;align-items:flex-end;gap:2px;display:flex}.stat .value{font-variant-numeric:tabular-nums;font-size:15px;font-weight:500}.stat .label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:10px}.conn-dot{background:var(--text-faint);border-radius:50%;width:8px;height:8px;transition:all .3s;box-shadow:0 0 0 3px #0000}.conn-dot.live{background:var(--ok);animation:2.4s ease-in-out infinite breathe;box-shadow:0 0 0 3px #5eead426}@keyframes breathe{0%,to{box-shadow:0 0 0 3px #5eead426}50%{box-shadow:0 0 0 6px #5eead40d}}.main{box-sizing:border-box;flex-direction:column;flex:1;gap:16px;width:100%;max-width:2000px;min-height:0;margin:0 auto;padding:16px 24px 20px;display:flex;overflow-y:auto}.instances{flex-direction:column;gap:14px;display:flex}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.panel-head{border-bottom:1px solid var(--line);cursor:pointer;-webkit-user-select:none;user-select:none;padding:14px 18px 12px}.panel-collapsed .panel-head{border-bottom:none}.panel-head-row{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.panel-collapsed .panel-head-row{margin-bottom:0}.panel-title{font-family:var(--font-display);align-items:center;gap:8px;font-size:15px;font-weight:600;display:flex}.chevron{color:var(--text-faint);width:10px;font-size:11px;display:inline-block}.panel-head-right{align-items:center;gap:14px;display:flex}.usage-numbers-inline{color:var(--text-muted);white-space:nowrap;font-size:11px}.dot{border-radius:50%;flex-shrink:0;width:9px;height:9px}.panel-status{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:11px}.model-tag{font-family:var(--font-mono);color:var(--text-muted);background:var(--panel-raised);border:1px solid var(--line);letter-spacing:.02em;white-space:nowrap;text-transform:none;border-radius:10px;padding:1px 7px;font-size:10px;font-weight:500}.pulse-strip{width:100%;height:28px;display:block}.pulse-strip path{fill:none;stroke-width:1.5px;vector-effect:non-scaling-stroke}.panel-body-row{align-items:stretch;min-height:0;display:flex}.panel-body-row-collapsed{padding:12px 18px 16px}.panel-main{flex-direction:column;flex:1;min-width:0;display:flex}.panel-approvals{border-left:1px solid var(--line);background:linear-gradient(90deg,#f45b690a,#0000 20%);flex-shrink:0;width:320px;max-height:560px;padding:12px 14px;overflow-y:auto}.panel-approvals-head{color:var(--alert);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;font-size:11px;font-weight:600}.panel-approvals-head-empty{color:var(--text-faint)}.panel-approvals-empty{color:var(--text-faint);font-size:11px;line-height:1.5}.feed{flex:1;min-height:260px;max-height:480px;padding:6px 0;overflow-y:auto}.feed::-webkit-scrollbar{width:6px}.feed::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}.feed-empty{color:var(--text-faint);text-align:center;padding:24px 18px;font-size:12px}.event-row{border-bottom:1px solid #ffffff05;grid-template-columns:62px 90px 1fr;align-items:baseline;gap:10px;padding:8px 18px;font-size:12px;animation:.25s slide-in;display:grid}@keyframes slide-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.event-time{color:var(--text-faint)}.event-tool{text-transform:uppercase;letter-spacing:.04em;border-radius:4px;width:fit-content;padding:2px 6px;font-size:10px;font-weight:500}.event-detail{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.event-row-message{border-bottom:1px solid #ffffff05;border-left:3px solid #0000;padding:12px 18px 12px 15px;animation:.25s slide-in}.event-row-user{border-left-color:var(--user-accent);background:#8b93a60a}.event-row-assistant{border-left-color:var(--claude-accent);background:#a78bfa0d}.event-message-head{align-items:baseline;gap:10px;margin-bottom:6px;display:flex}.event-tool-user{background:var(--user-accent-dim);color:var(--user-accent)}.event-tool-assistant{background:var(--claude-accent-dim);color:var(--claude-accent);font-weight:700}.event-message{color:var(--text);white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.55}.event-row-user .event-message{color:var(--text-muted);font-style:italic}.markdown-body p{margin:0 0 8px}.markdown-body p:last-child{margin-bottom:0}.markdown-body strong{color:var(--text);font-weight:600}.markdown-body ul,.markdown-body ol{margin:4px 0 8px;padding-left:20px}.markdown-body li{margin:2px 0}.markdown-body code{font-family:var(--font-mono);background:var(--panel-raised);border:1px solid var(--line);color:var(--agent-a);border-radius:3px;padding:1px 5px;font-size:12px}.markdown-body pre{background:var(--bg);border:1px solid var(--line);border-radius:6px;margin:6px 0;padding:10px 12px;overflow-x:auto}.markdown-body pre code{color:var(--text);background:0 0;border:none;padding:0;font-size:12px;line-height:1.5}.markdown-body a{color:var(--agent-a);text-underline-offset:2px;text-decoration:underline}.markdown-body blockquote{border-left:2px solid var(--line);color:var(--text-muted);margin:6px 0;padding-left:10px}.markdown-body h1,.markdown-body h2,.markdown-body h3{font-family:var(--font-display);color:var(--text);margin:10px 0 4px;font-size:14px}.panel-usage{border-top:1px solid var(--line);align-items:center;gap:14px;padding:12px 18px 16px;display:flex}.usage-bar-track{background:var(--panel-raised);border-radius:3px;flex:1;height:5px;overflow:hidden}.usage-bar-fill{border-radius:3px;height:100%;transition:width .4s}.usage-numbers{color:var(--text-muted);white-space:nowrap;gap:12px;font-size:11px;display:flex}.usage-numbers b{color:var(--text);font-weight:500}.queue-section{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}.queue-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.queue-title{font-family:var(--font-display);align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.queue-badge{background:var(--alert);color:#1a0a0c;text-align:center;border-radius:10px;min-width:18px;padding:1px 7px;font-size:11px;font-weight:700}.queue-badge.zero{background:var(--panel-raised);color:var(--text-faint)}.new-project-form{flex-direction:column;gap:10px;padding:16px 18px;display:flex}.new-project-path,.new-project-message{background:var(--panel-raised);border:1px solid var(--line);color:var(--text);font-family:var(--font-mono);border-radius:6px;padding:9px 10px;font-size:12px}.new-project-path::placeholder,.new-project-message::placeholder{color:var(--text-faint)}.new-project-path:focus,.new-project-message:focus{border-color:var(--text-muted);outline:none}.new-project-form .btn{align-self:flex-start}.queue-empty{text-align:center;color:var(--text-faint);padding:28px 18px;font-size:12px}.queue-list{flex-direction:column;display:flex}.approval-card{border-bottom:1px solid var(--line);flex-direction:column;gap:10px;padding:12px 0;display:flex}.approval-card:last-child{border-bottom:none}.approval-meta{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;flex-wrap:wrap;align-items:center;gap:8px;font-size:10px;display:flex}.approval-detail{color:var(--text);word-break:break-all;background:var(--panel-raised);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:12px}.approval-actions{flex-direction:column;gap:8px;display:flex}.approval-note{box-sizing:border-box;background:var(--panel-raised);border:1px solid var(--line);width:100%;color:var(--text);font-family:var(--font-mono);resize:none;border-radius:6px;padding:8px 10px;font-size:12px}.approval-note::placeholder{color:var(--text-faint)}.approval-note:focus{border-color:var(--text-faint);outline:none}.approval-actions .btn{width:100%}.btn{font-family:var(--font-mono);border:1px solid var(--line);background:var(--panel-raised);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:6px;padding:9px 14px;font-size:12px;font-weight:600;transition:all .15s}.btn:hover{border-color:var(--text-muted)}.btn:focus-visible{outline:2px solid var(--ok);outline-offset:2px}.btn-allow{color:var(--agent-a);background:#5eead41f;border-color:#5eead459}.btn-allow:hover{background:#5eead433}.btn-deny{color:var(--alert);background:#f45b691f;border-color:#f45b6959}.btn-deny:hover{background:#f45b6933}.panel-compose{border-top:1px solid var(--line);align-items:flex-end;gap:10px;padding:12px 18px 16px;display:flex}.compose-input{background:var(--panel-raised);border:1px solid var(--line);color:var(--text);font-family:var(--font-mono);resize:vertical;border-radius:6px;flex:1;min-height:40px;padding:8px 10px;font-size:12px}.compose-input::placeholder{color:var(--text-faint)}.compose-input:focus{border-color:var(--text-muted);outline:none}.btn-send{color:var(--agent-a);background:#5eead41f;border-color:#5eead459;flex-shrink:0}.btn-send:hover:not(:disabled){background:#5eead433}.btn-send:disabled{opacity:.6;cursor:not-allowed}.agent-a-color{color:var(--agent-a)}.agent-a-bg{background:var(--agent-a)}.agent-b-color{color:var(--agent-b)}.agent-b-bg{background:var(--agent-b)}