:root {
  --bg: #f6f6f4; --card: #fff; --text: #1d1d1b; --muted: #6b6b66; --line: #e3e3de;
  --accent: #2b59c3; --danger: #c0392b; --ok-bg: #eef6ee;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161615; --card: #1f1f1d; --text: #ececea; --muted: #9a9a94; --line: #33332f;
          --accent: #7aa2ff; --danger: #ff7a6b; --ok-bg: #1f2b1f; }
}
* { box-sizing: border-box; }
html { min-height: 100%; overflow-y: auto; }
body {
  min-height: 100%; margin: 0; overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font: 15px/1.5 system-ui, sans-serif; background: var(--bg); color: var(--text);
}
header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
#who { display: flex; align-items: center; gap: 8px; }
#who[hidden] { display: none; }
#avatar { width: 28px; height: 28px; border-radius: 50%; }
main { width: 100%; max-width: 820px; min-width: 0; margin: 24px auto; padding: 0 16px 32px; display: grid; gap: 16px; }
#app { min-width: 0; display: grid; gap: 16px; }
#app[hidden] { display: none; }
.card { min-width: 0; overflow-wrap: anywhere; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
h1, h2 { margin: 0 0 8px; }
h1 { font-size: 22px; } h2 { font-size: 17px; }
.muted { color: var(--muted); margin-top: 0; }
.error { color: var(--danger); }
form { display: flex; gap: 8px; margin: 12px 0; }
#chat { flex-direction: column; }
input, textarea { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
button { padding: 8px 14px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font: inherit; cursor: pointer; }
#chat button { align-self: flex-start; }
button.link { background: none; color: var(--accent); padding: 0; }
button.danger { color: var(--danger); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
tr.revoked td { color: var(--muted); text-decoration: line-through; }
tr.revoked td:last-child { text-decoration: none; }
pre { max-width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow: auto; -webkit-overflow-scrolling: touch; font-size: 13px; white-space: pre; }
.answer { max-height: 55vh; overflow: auto; white-space: pre-wrap; min-height: 2em; }
.created { background: var(--ok-bg); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.created code { display: block; word-break: break-all; margin: 8px 0; font-size: 13px; }
@media (max-width: 600px) {
  main { margin: 12px auto; padding: 0 10px 28px; }
  .card { padding: 14px; }
  form { flex-wrap: wrap; }
  th:nth-child(4), td:nth-child(4) { display: none; }
}
/* Retro mission control */
:root{color-scheme:dark;--bg:#10131e;--card:#1b2030;--text:#eef0fa;--muted:#9ca7c0;--line:#343e55;--accent:#bbf776;--danger:#ff849c;--ok-bg:#243a2e}
body{background:radial-gradient(ellipse at top left,#302746,transparent 65%),var(--bg)}
[hidden]{display:none!important}header{height:64px;padding:12px 24px;background:#10131ee8}.brand{color:var(--accent);letter-spacing:3px;font-size:20px}.brand span{color:var(--muted);font:10px monospace;letter-spacing:2px;margin-left:18px}main{max-width:none;margin:0;padding:18px}#app{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:16px}.workspace{min-width:0;display:flex;flex-direction:column;gap:16px}.card{background:linear-gradient(135deg,#30364a55,transparent),var(--card);border-radius:14px;box-shadow:0 8px 28px #0003}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.panel-title h2{font:700 11px monospace;letter-spacing:2px;margin:0}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px #bbf77655;margin-right:8px}.dot.pink{background:#eca4e0}.dot.amber{background:#ffc27d}button{background:var(--accent);color:#18211b;font-weight:650}button.link{color:var(--accent);font-size:12px}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #c6a8ff;outline-offset:3px}.chat-panel{height:58vh;min-height:380px;display:flex;flex-direction:column;resize:vertical;overflow:auto;border-top:2px solid var(--accent)}.workspace-label{color:var(--accent);font:11px monospace;letter-spacing:2px}.workspace-label span{color:var(--muted)}.conversation{flex:1;overflow:auto;min-height:80px;padding:16px 0}.welcome{text-align:center;padding:24px 0}.hero-mark{font-size:54px;color:#c6a8ff}.welcome h1{font-size:28px;font-weight:550;letter-spacing:-1px}#chat{margin:8px 0 0;padding:10px;border:1px solid #48536b;border-radius:12px;background:#111520}#prompt{background:transparent;border:0;resize:vertical;min-height:55px}.composer-footer{display:flex;justify-content:space-between;align-items:center;padding:0 6px;font:11px monospace}.message{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px 14px;margin:8px 0;border-radius:10px;background:#262e43}.message.user{margin-left:12%;border-left:2px solid #c6a8ff}.message.assistant{margin-right:6%;border-left:2px solid var(--accent)}.terminal-panel{border-top:2px solid #ffc27d;min-height:230px}.terminal-tabs{display:flex;gap:6px;overflow:auto}.terminal-tabs button{background:#30384c;color:var(--muted);padding:5px 12px;font:11px monospace}.terminal-tabs button.active{background:#ffc27d;color:#232030}#terminal-output{height:150px;border:0;background:#111520;color:var(--accent);white-space:pre-wrap;font:12px/1.7 monospace}#terminal-form{align-items:center;margin:0;font:12px monospace;color:#ffc27d}#terminal-command{min-width:0}.telemetry{min-width:0;display:grid;height:calc(100vh - 100px);min-height:0;grid-template-rows:minmax(0,1fr) minmax(0,2fr) minmax(0,2fr);gap:16px}.telemetry .card{overflow:auto}.performance-panel{border-top:2px solid #c6a8ff}.bridge-panel{border-top:2px solid #eca4e0}.server-panel{border-top:2px solid #7dceff}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric strong{display:block;font:22px monospace;color:#c6a8ff}.metric span{color:var(--muted);font-size:11px}.badge{color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:3px 6px;font:9px monospace}.summary-stats{font:12px/1.8 monospace;color:#eca4e0}h3{color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font:10px monospace;margin:18px 0 8px}.feed{max-height:150px;overflow:auto}.feed-row{padding:8px 0;border-bottom:1px solid var(--line);font:11px/1.6 monospace;overflow-wrap:anywhere}.feed-row span{color:var(--muted)}.small{font-size:10px}.tools summary{cursor:pointer;color:var(--muted);padding:8px;font:12px monospace}.tools .card{margin-top:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:800px){#app{grid-template-columns:1fr}.telemetry{height:auto;min-height:0;grid-template-rows:auto}.telemetry .card{max-height:420px}.brand span{display:none}header{padding:12px}#email{max-width:140px;overflow:hidden;text-overflow:ellipsis}main{padding:10px}.chat-panel{height:65vh}.brand{font-size:15px}}

.telemetry .panel-title { flex-wrap:wrap; gap:6px; }
.telemetry .card { min-height:0; padding:14px; }