:root{
  --bg:#0a0906;
  --pnl:#0f0d09;
  --amb:#e8a13a;
  --amb2:#c07a1e;
  --dim:#6b5628;
  --grn:#8aa03a;
  --red:#c0402b;
  --ln:#2a2113;
  --txt:#d8b566;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  background:var(--bg);
  color:var(--txt);
  font:13px/1.45 "SFMono-Regular",Consolas,"Liberation Mono",monospace;
  overflow:hidden;
}
.scr{position:fixed;inset:0;display:flex;flex-direction:column;padding:0}
.scan{position:fixed;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply}

/* top bar */
.bar{display:flex;align-items:center;gap:20px;padding:7px 14px;
  border-bottom:1px solid var(--ln);background:#0c0a07;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.bar b{color:var(--amb);font-weight:600}
.tag{background:var(--amb);color:#0a0906;font-weight:700;padding:1px 7px;letter-spacing:1px}
.st{margin-left:auto;color:var(--bg);background:var(--grn);padding:1px 9px;font-weight:700;letter-spacing:1px}
.st.panic{background:var(--red);color:#fff;animation:bl .4s steps(2) infinite}
.st.dead{background:#333;color:#888}
@keyframes bl{50%{opacity:.35}}

/* grid */
.grid{flex:1;display:grid;grid-template-columns:300px 1fr 260px;gap:0;min-height:0}
.panel{border-right:1px solid var(--ln);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.met{border-right:none}
.ptitle{padding:6px 12px;font-size:11px;letter-spacing:2px;color:var(--amb2);
  border-bottom:1px solid var(--ln);background:#0c0a07;text-transform:uppercase}
.cur{color:var(--amb);animation:bl .8s steps(2) infinite}

/* queue */
.objective{padding:10px 12px;border-bottom:1px dashed var(--ln)}
.objective .lbl{font-size:10px;color:var(--dim);letter-spacing:2px}
#obj{color:var(--amb);margin-top:4px;font-size:12.5px;line-height:1.5}
#queue{list-style:none;overflow-y:auto;flex:1;padding:6px 0}
#queue li{padding:5px 12px 5px 30px;position:relative;border-bottom:1px solid #14100a;font-size:12px;color:var(--txt)}
#queue li::before{position:absolute;left:11px;top:5px;width:14px;text-align:center}
#queue li.done{color:var(--dim);text-decoration:line-through}
#queue li.done::before{content:"x";color:var(--grn)}
#queue li.fail::before{content:"!";color:var(--red)}
#queue li.fail{color:var(--red)}
#queue li.run::before{content:">";color:var(--amb);animation:bl .6s steps(2) infinite}
#queue li.run{color:var(--amb);background:#141009}
#queue li.wait::before{content:"·";color:var(--dim)}
#queue li.wait{color:var(--dim)}
.qnote{padding:6px 12px;font-size:11px;color:var(--dim);border-top:1px solid var(--ln)}

/* center */
.mid{display:flex;flex-direction:column}
.stream{flex:1;overflow-y:auto;padding:8px 14px;white-space:pre-wrap;word-break:break-word}
.stream .th{color:var(--txt);margin-bottom:2px}
.stream .th .k{color:var(--amb2)}
.stream .warn{color:var(--red)}
.stream .ok{color:var(--grn)}
.stream .dim{color:var(--dim)}
.stream .glitch{color:#d84a30;text-shadow:0.5px 0 #4a7a2a,-0.5px 0 #c07a1e}
#agents.swarm{color:var(--red)!important;animation:bl .5s steps(2) infinite}
/* inlined tool calls in stream */
.stream .call .fn{color:var(--amb)}
.stream .call .arg{color:var(--dim)}
.stream .call .ret{color:var(--grn)}
.stream .call .err{color:var(--red)}

/* meme output panel */
.meme-t{border-top:1px solid var(--ln);display:flex;align-items:center;gap:10px}
.memest{font-size:10px;letter-spacing:1px;padding:1px 6px;color:var(--bg);background:var(--dim)}
.memest.run{background:var(--amb);animation:bl .5s steps(2) infinite}
.memest.ok{background:var(--grn)}
.memeid{margin-left:auto;color:var(--dim);font-size:10px;letter-spacing:1px}
.memebox{height:210px;overflow:auto;padding:8px 14px;background:#0b0906;display:flex;flex-direction:column;align-items:flex-start}
.meme{color:var(--amb);font-size:12px;line-height:1.15;white-space:pre;margin:0;flex:1}
.memecap{margin-top:6px;font-size:11px;color:var(--dim);border-top:1px dashed var(--ln);padding-top:5px;width:100%}

/* meters */
.met{padding:0}
.meter{margin:8px 12px 0;font-size:11px;color:var(--dim);letter-spacing:1px}
.meter .b{display:block;margin-top:3px;height:12px;border:1px solid var(--ln);position:relative;background:#0b0906}
.meter .fill{position:absolute;inset:0;width:0;background:var(--amb);transition:width .3s}
.meter .pc{position:absolute;right:3px;top:-1px;font-size:10px;color:var(--txt)}
.meter.lo .fill{background:var(--red)}
.meter.hi .fill{background:var(--grn)}
.rdivider{height:1px;background:var(--ln);margin:12px 0}
.kv{display:flex;justify-content:space-between;padding:3px 12px;font-size:11.5px;color:var(--dim)}
.kv b{color:var(--amb)}
.verdict{margin:8px 12px;padding:8px;border:1px dashed var(--ln);font-size:11.5px;color:var(--txt);line-height:1.5}

/* prompt */
.prompt{padding:6px 14px;border-top:1px solid var(--ln);background:#0c0a07;font-size:12.5px;white-space:nowrap;overflow:hidden}
.ps{color:var(--grn)}.pwd{color:var(--amb2)}.sep{color:var(--dim)}
.typed{color:var(--txt);margin-left:6px}
.blk{color:var(--amb);animation:bl .8s steps(2) infinite}

/* footer */
.fkeys{display:flex;align-items:center;gap:0;border-top:1px solid var(--ln);background:#0c0a07}
.fkeys button{background:none;border:none;border-right:1px solid var(--ln);color:var(--dim);
  font:inherit;font-size:11.5px;padding:7px 12px;cursor:pointer;letter-spacing:.5px}
.fkeys button b{color:var(--bg);background:var(--amb2);padding:0 4px;margin-right:5px}
.fkeys button:hover{color:var(--amb);background:#141009}
.fkeys button:active{background:var(--amb);color:var(--bg)}
.ver{margin-left:auto;padding:0 14px;font-size:11px;color:var(--dim)}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--ln)}
::-webkit-scrollbar-track{background:transparent}

@media(max-width:840px){
  body{overflow:hidden}
  .scr{position:fixed;inset:0}
  .bar{gap:10px 14px;padding:6px 10px;font-size:11px}
  .grid{grid-template-columns:1fr;grid-template-rows:auto 1fr 150px;min-height:0}
  .panel{border-right:none;border-bottom:1px solid var(--ln)}
  /* queue: compact, fixed cap so it never pushes layout */
  .q{max-height:34vh}
  #queue{max-height:18vh}
  .objective{padding:8px 10px}
  #obj{font-size:12px}
  /* center reasoning takes the flexible middle row */
  .mid{min-height:0}
  .stream{min-height:0}
  .memebox{height:150px}
  .meme{font-size:11px}
  /* metrics: horizontal strip, no vertical blowout */
  .met{border-bottom:none;overflow-y:auto;max-height:150px}
  .met .rdivider:last-of-type,.met .kv,.met .verdict{display:none}
  .met .ptitle{position:sticky;top:0}
}
@media(max-width:560px){
  .fkeys{flex-wrap:wrap}
  .fkeys button{flex:1 1 33%;border-bottom:1px solid var(--ln)}
  .ver{flex:1 1 100%;text-align:center;padding:4px 0}
}