:root {
  --bg: #10131a;
  --panel: #1b2230;
  --panel-2: #222b3d;
  --line: #39445d;
  --text: #edf2ff;
  --muted: #aeb8cf;
  --ok: #39d98a;
  --work: #4da3ff;
  --wait: #f5c542;
  --warn: #ff974a;
  --error: #ff5c70;
  --off: #8790a5;
  --think: #b982ff;
  --done: #77e38d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: #0e1118;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  background: rgba(18, 22, 31, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0; }
.brand-mark {
  width: 28px; height: 28px; display: inline-block;
  background:
    linear-gradient(90deg, transparent 0 20%, #f5c542 20% 80%, transparent 80%),
    linear-gradient(#4da3ff 0 35%, #1b2230 35% 62%, #39d98a 62%);
  image-rendering: pixelated;
  box-shadow: 0 0 0 3px #0b0d12, 0 0 0 5px #39445d;
}
.nav { display: flex; gap: 6px; flex: 1; overflow-x: auto; }
.nav a, .icon-button, .primary-button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 6px;
}
.nav a.active, .nav a:hover, .icon-button:hover { border-color: var(--work); background: #223250; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-actions form { margin: 0; }
.pill { border: 1px solid var(--line); padding: 7px 10px; border-radius: 6px; font-size: 12px; font-weight: 800; }
.mode-real { color: var(--ok); }
.mode-demo { color: var(--wait); }

.status-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.status-strip div { padding: 12px 14px; background: #141925; min-width: 0; }
.status-strip span { display: block; color: var(--muted); font-size: 12px; }
.status-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.warnings { margin: 14px auto 0; max-width: 1480px; padding: 0 18px; }
.warnings p { margin: 6px 0; padding: 10px 12px; border: 1px solid rgba(245,197,66,.5); background: rgba(245,197,66,.11); border-radius: 6px; color: #ffe7a1; }
.page { max-width: 1480px; margin: 0 auto; padding: 18px; }

.office-layout { display: grid; grid-template-columns: minmax(680px, 1fr) 360px; gap: 18px; align-items: start; }
.office-map {
  position: relative;
  min-height: 690px;
  border: 2px solid #4b5874;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(135deg, #20293a 0 25%, #1a2230 25% 50%, #20293a 50% 75%, #1a2230 75%);
  background-size: 32px 32px, 32px 32px, 64px 64px;
  box-shadow: inset 0 0 0 8px #121722;
}
.room-label {
  position: absolute; z-index: 2;
  padding: 6px 8px; border: 1px solid #58657e; border-radius: 4px;
  background: rgba(15,18,25,.8); color: var(--muted); font-size: 12px; font-weight: 800;
}
.board-label { top: 18px; left: 22px; }
.meeting-label { top: 150px; left: 43%; }
.dev-label { top: 36px; right: 84px; }
.qa-label { bottom: 128px; right: 120px; }
.server-label { top: 238px; left: 22px; }

.furniture { position: absolute; image-rendering: pixelated; }
.board { top: 48px; left: 30px; width: 210px; height: 95px; background: #24334b; border: 6px solid #765b37; box-shadow: inset 0 0 0 8px #1c8b62; }
.table { top: 220px; left: 42%; width: 180px; height: 112px; background: #6e5035; border: 8px solid #4b3526; border-radius: 6px; }
.desk { width: 150px; height: 82px; background: #73553a; border: 6px solid #3b2a1e; box-shadow: inset 0 18px #96704c; }
.desk-a { top: 82px; right: 76px; }
.desk-b { bottom: 98px; right: 105px; }
.desk-c { bottom: 84px; left: 150px; }
.racks { top: 280px; left: 34px; width: 116px; height: 250px; background: #151a24; border: 7px solid #56627a; display: flex; gap: 12px; padding: 14px; }
.racks span { flex: 1; background: repeating-linear-gradient(#2d394e 0 18px, #10141d 18px 24px); position: relative; }
.racks span::after { content: ""; position: absolute; width: 7px; height: 7px; right: 5px; top: 8px; background: var(--ok); box-shadow: 0 28px var(--work), 0 56px var(--wait), 0 84px var(--ok); animation: blink 1.8s infinite; }
.console { right: 52px; bottom: 34px; width: 230px; height: 56px; background: #0b0f16; border: 6px solid #49566f; }

.agent-sprite {
  position: absolute;
  z-index: 5;
  width: 150px;
  min-height: 138px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: center;
}
.zone-board { top: 150px; left: 230px; }
.zone-dev { top: 165px; right: 118px; }
.zone-docs { top: 395px; left: 190px; }
.zone-qa { bottom: 150px; right: 185px; }
.zone-writing { bottom: 94px; left: 330px; }
.zone-comms { top: 348px; right: 94px; }
.zone-server { top: 376px; left: 62px; }
.zone-tools { bottom: 38px; left: 42px; }
.speech {
  display: block; min-height: 34px; max-height: 52px; overflow: hidden;
  padding: 6px; margin-bottom: 8px;
  border: 1px solid #65728e; background: rgba(13,17,24,.9); border-radius: 5px;
  font-size: 11px; color: #d9e2f5;
}
.sprite-body {
  position: relative; display: inline-block; width: 42px; height: 58px;
  background: #4da3ff; border: 4px solid #10131a; box-shadow: 0 0 0 3px #6b7894;
  image-rendering: pixelated;
}
.sprite-body::before { content: ""; position: absolute; left: 7px; top: -22px; width: 20px; height: 20px; background: #f0c39b; border: 4px solid #10131a; }
.sprite-body::after { content: ""; position: absolute; left: -12px; top: 13px; width: 58px; height: 12px; background: #f0c39b; border: 3px solid #10131a; z-index: -1; }
.sprite-body i { position: absolute; left: 5px; bottom: -16px; width: 10px; height: 18px; background: #252c3d; box-shadow: 18px 0 #252c3d; }
.agent-name { display: block; margin-top: 20px; font-size: 12px; font-weight: 800; }
.badge { display: inline-block; margin-top: 5px; padding: 4px 6px; border-radius: 4px; background: #121722; border: 1px solid currentColor; font-size: 11px; }
.state-ok { --agent: var(--ok); }
.state-work, .state-code { --agent: var(--work); animation: bob 1.5s infinite; }
.state-wait { --agent: var(--wait); }
.state-warn { --agent: var(--warn); }
.state-error { --agent: var(--error); animation: shake .38s infinite; }
.state-off { --agent: var(--off); opacity: .66; }
.state-think { --agent: var(--think); animation: think 1.4s infinite; }
.state-log { --agent: #69d2ff; }
.state-doc { --agent: #ffd36d; }
.state-done { --agent: var(--done); }
.agent-sprite .sprite-body, .mini-sprite span { background: var(--agent, #4da3ff); }
.agent-sprite .badge, .agent-card { color: var(--agent, var(--text)); }

.detail-panel, .panel, .metric, .agent-card, .login-panel {
  background: rgba(27,34,48,.96);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.detail-panel { padding: 16px; position: sticky; top: 132px; }
.detail-panel h2, .panel h2, .agent-card h2 { margin: 0 0 8px; color: var(--text); }
.detail-panel p, .agent-card p, .about p, .note { color: var(--muted); line-height: 1.5; }
.detail-list, .settings-list, .agent-card dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; }
dt { color: var(--muted); }
dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.future-control { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.future-control h3, .future-control h2 { width: 100%; }
.future-control button, .copy-button {
  border: 1px solid #48546d; color: #94a0b8; background: #151b27; padding: 9px 10px; border-radius: 6px;
}

.split-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.panel { padding: 16px; min-width: 0; }
.panel header { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.panel header span { color: var(--muted); font-size: 12px; }
.task-list { display: grid; gap: 9px; }
.task-row { display: grid; grid-template-columns: 170px 160px 1fr auto; gap: 8px; align-items: center; padding: 10px; background: #151b27; border: 1px solid #2f3a50; border-radius: 6px; }
.task-row small { grid-column: 3 / -1; color: var(--muted); }
.task-row time { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.status-chip { border: 1px solid #596681; padding: 4px 7px; border-radius: 4px; color: #dbe6ff; font-style: normal; font-size: 12px; }
.log-console { min-height: 270px; max-height: 420px; overflow: auto; margin: 0; padding: 14px; background: #090d13; color: #b7ffd8; border: 1px solid #2a354a; border-radius: 6px; line-height: 1.45; white-space: pre-wrap; }

.grid-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.metric { padding: 16px; min-height: 94px; }
.metric span { display: block; color: var(--muted); font-size: 12px; }
.metric strong { display: block; margin-top: 10px; font-size: 22px; overflow-wrap: anywhere; }
.agent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.agent-card { padding: 16px; color: var(--text); }
.mini-sprite { height: 70px; }
.mini-sprite span { display: block; width: 36px; height: 48px; margin: 8px auto; border: 4px solid #111722; box-shadow: 0 0 0 3px #65718b; }
.table { display: grid; gap: 8px; }
.table > div { display: grid; grid-template-columns: 80px 150px 1fr; gap: 10px; padding: 9px; border: 1px solid #2f3a50; background: #151b27; border-radius: 6px; }
.table small { color: var(--muted); overflow-wrap: anywhere; }
.plain-list { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.settings-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.login-body { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-panel { width: min(430px, 100%); padding: 24px; }
.login-brand { margin-bottom: 22px; }
.login-panel label { display: grid; gap: 8px; margin: 14px 0; color: var(--muted); }
.login-panel input { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--line); background: #111722; color: var(--text); }
.primary-button { width: 100%; background: #24538a; border-color: #4da3ff; font-weight: 800; }
.form-error, .form-warning { padding: 10px; border-radius: 6px; }
.form-error { background: rgba(255,92,112,.14); color: #ffc5cd; border: 1px solid rgba(255,92,112,.5); }
.form-warning { background: rgba(245,197,66,.14); color: #ffe8a8; border: 1px solid rgba(245,197,66,.5); }

@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes think { 50% { filter: drop-shadow(0 0 10px var(--think)); } }
@keyframes blink { 50% { opacity: .35; } }