:root{
  --bg:#131519;
  --panel:#1a1d22;
  --panel-2:#20242b;
  --line:#2a2f37;
  --line-strong:#363c45;
  --text:#e7e9ec;
  --muted:#9198a2;
  --accent:#3ddc97;
  --accent-dim:#1f3b30;
  --danger:#ff5b5b;
  --danger-dim:#3a1f22;
  --radius:10px;
  --gap:10px;
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Sans",system-ui,Segoe UI,Roboto,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0);
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.muted{color:var(--muted)}

#app{max-width:760px;margin:0 auto;padding:0 12px 120px}

/* Topbar */
.topbar{
  position:sticky;top:env(safe-area-inset-top,0);z-index:5;
  background:var(--bg);
  padding:12px 0 8px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.brand-name{font-weight:600;letter-spacing:.02em}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.dot.on{background:var(--accent)}
.agents{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.agents::-webkit-scrollbar{display:none}
.chip{
  flex:none;display:flex;align-items:center;gap:7px;
  padding:7px 12px;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--panel);color:var(--text);cursor:pointer;white-space:nowrap;
  font-size:13px;transition:border-color .12s,background .12s;
}
.chip .cdot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.chip[aria-selected="true"]{border-color:var(--accent);background:var(--accent-dim)}

/* Categories */
.cats{
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding:12px 0;position:sticky;top:calc(env(safe-area-inset-top,0) + 92px);z-index:4;background:var(--bg);
}
.cats::-webkit-scrollbar{display:none}
.cat{
  flex:none;padding:6px 12px;border:1px solid var(--line);border-radius:8px;
  background:transparent;color:var(--muted);cursor:pointer;font-size:13px;white-space:nowrap;
}
.cat[aria-selected="true"]{color:var(--text);border-color:var(--line-strong);background:var(--panel)}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  padding:14px 12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);color:var(--text);cursor:pointer;text-align:left;
  transition:border-color .12s,background .12s,transform .04s;
  min-height:78px;
}
.card:hover{border-color:var(--line-strong);background:var(--panel-2)}
.card:active{transform:scale(.985)}
.card .ic{width:22px;height:22px;color:var(--accent);flex:none}
.card .ic svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card .lbl{font-size:13px;line-height:1.25;font-weight:500}
.card.danger .ic{color:var(--danger)}
.card.danger{border-color:var(--danger-dim)}
.card .tag{margin-top:auto;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card.busy{opacity:.55;pointer-events:none}

/* Empty */
.empty{padding:48px 16px;text-align:center;color:var(--text)}
.empty p{margin:6px 0}

/* Buttons */
.btn-line{
  padding:9px 16px;border:1px solid var(--line-strong);border-radius:8px;
  background:transparent;color:var(--text);cursor:pointer;font-size:13px;font-family:inherit;
}
.btn-line:hover{background:var(--panel)}
.btn-fill{
  padding:9px 18px;border:1px solid var(--accent);border-radius:8px;
  background:var(--accent);color:#08110c;cursor:pointer;font-weight:600;font-size:13px;font-family:inherit;
}
.btn-fill.danger{background:var(--danger);border-color:var(--danger);color:#180a0a}

/* Console */
.console{
  position:fixed;left:0;right:0;bottom:0;z-index:8;
  background:var(--panel);border-top:1px solid var(--line-strong);
  max-height:46vh;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.console-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.console-body{padding:12px 14px;overflow:auto}
.log{margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.log .lh{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px;font-size:12px;color:var(--muted)}
.log .lh .ok{color:var(--accent)}
.log .lh .err{color:var(--danger)}
.log pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.5}
.log img{max-width:100%;border:1px solid var(--line);border-radius:6px;margin-top:6px;cursor:zoom-in}
.x{background:none;border:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.x:hover{color:var(--text)}

/* Sheet (modal for args) */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.sheet-card{width:100%;max-width:520px;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px 14px 0 0;padding:16px;margin:0 8px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0))}
@media(min-width:560px){.sheet{align-items:center}.sheet-card{border-radius:14px}}
.sheet-head{font-weight:600;margin-bottom:12px}
.sheet-body{display:flex;flex-direction:column;gap:12px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.field input{
  width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--bg);color:var(--text);font-family:inherit;font-size:14px;
}
.field input:focus{outline:none;border-color:var(--accent)}
.sheet-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:16px}
.lightbox img{max-width:100%;max-height:100%;border-radius:6px}
.lb-x{position:absolute;top:12px;right:16px;font-size:34px;color:#fff}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:40;
  background:var(--panel-2);border:1px solid var(--line-strong);color:var(--text);
  padding:10px 16px;border-radius:8px;font-size:13px;max-width:90%;text-align:center;
  opacity:0;transition:opacity .18s;pointer-events:none}
.toast.show{opacity:1}