* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; background: #0b1220; color: #e2e8f0; }
header { padding: 16px 20px; border-bottom: 1px solid #1e293b; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
header h1 { margin: 0; font-size: 22px; }
header .disclaimer { margin: 0; color: #94a3b8; max-width: 760px; }
button { background: #f5c518; color: #111; border: 0; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 600; }
button:hover { filter: brightness(1.1); }
input { background: #1e293b; border: 1px solid #334155; color: #e2e8f0; padding: 8px; border-radius: 6px; width: 100%; }
.card { max-width: 480px; margin: 40px auto; background: #111c30; border: 1px solid #1e293b; border-radius: 10px; padding: 20px; }
.card form { display: grid; gap: 12px; }
.muted { color: #94a3b8; font-size: 14px; }
.error { color: #f87171; }
main { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; padding: 16px; }
#sceneWrap { background: #111c30; border: 1px solid #1e293b; border-radius: 10px; padding: 12px; }
#scene { width: 100%; height: 420px; background: #0b1220; border-radius: 6px; overflow: hidden; }
#scene canvas { width: 100%; height: 100%; display: block; }
#panel { display: grid; gap: 16px; align-content: start; }
#panel section { background: #111c30; border: 1px solid #1e293b; border-radius: 10px; padding: 12px; }
#panel h2 { margin: 0 0 8px; font-size: 16px; }
#panel h3 { margin: 12px 0 6px; font-size: 14px; color: #94a3b8; }
#panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#panel li { background: #0b1220; border: 1px solid #1e293b; border-radius: 6px; padding: 8px; cursor: pointer; }
#panel form { display: grid; gap: 8px; margin-top: 10px; }
/* Agent status accents (real status only). */
.agent-item.status-running { border-left: 4px solid #22c55e; }
.agent-item.status-done { border-left: 4px solid #94a3b8; }
.agent-item.status-blocked { border-left: 4px solid #ef4444; }
.agent-item.status-pending { border-left: 4px solid #f59e0b; }
/* Team Flow (plain SVG, no dependency). */
#teamFlow svg { width: 100%; height: auto; display: block; background: #0b1220; border: 1px solid #1e293b; border-radius: 6px; }
.flow-node { cursor: pointer; }
/* Command Queue (queue only — the dashboard never executes commands). */
#commandForm label { display: grid; gap: 4px; font-size: 14px; color: #94a3b8; }
#commandForm select { background: #1e293b; border: 1px solid #334155; color: #e2e8f0; padding: 8px; border-radius: 6px; width: 100%; }
#commandList li { cursor: default; }
/* Kanban (real task statuses only). */
#kanbanBoard { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kanban-col { background: #0b1220; border: 1px solid #1e293b; border-radius: 6px; padding: 8px; display: grid; gap: 8px; align-content: start; }
.kanban-head { font-weight: 700; font-size: 13px; color: #94a3b8; }
.kanban-card { background: #111c30; border: 1px solid #334155; border-radius: 6px; padding: 8px; cursor: pointer; }
@media (max-width: 800px) { main { grid-template-columns: 1fr; } #kanbanBoard { grid-template-columns: 1fr; } }