:root{
  --bg:#0b0f12; --card:#12171c; --ink:#e8f9ee; --muted:#9de6b3;
  --accent:#79ff96; --accent2:#7df0ff; --warn:#ffd86b; --fail:#ff6b6b;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink); background:radial-gradient(150% 120% at 50% -10%, #071016, var(--bg) 45%);
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.brand{padding:10px 14px; color:#9de; letter-spacing:.5px}
.brand span{color:#7df0ff; font-weight:700} .brand small{opacity:.6}

.card{
  background:var(--card); border-radius:12px; margin:12px;
  padding:12px; border:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.card-title{font-weight:700; color:var(--accent); margin:4px 2px 10px}

.output{position:relative}
.output.sticky{position:sticky; top:0; z-index:20}
#output{
  height:28vh; max-height:40vh; overflow:auto; padding:12px; margin:6px 0 8px;
  background:#0a0e12; border-radius:10px; border:1px solid rgba(255,255,255,.08);
  font-family:var(--mono); font-size:13px; white-space:pre-wrap;
}
.toolbar{display:flex; gap:8px; align-items:center}
.toolbar button{
  background:linear-gradient(135deg, #2b7, #2af); border:0; color:#002;
  padding:6px 10px; border-radius:8px; font-weight:700; cursor:pointer
}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-left:auto;background:#777}
.dot.ok{background:#57ff8e} .dot.warn{background:var(--warn)} .dot.fail{background:var(--fail)}


.topbar .spacer { flex: 1; }
.dot {
  width: .6rem; height: .6rem; border-radius: 50%;
  display: inline-block; vertical-align: middle; margin-right: .4rem;
  background: #c33; /* off */
}
.dot.on { background: #2a2; } /* on */
.quick-bar {
  display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem;
  overflow-x:auto; padding-bottom:.25rem;
}
.chip {
  padding:.35rem .6rem; border:1px solid #ddd; border-radius:999px;
  background:#fff; font-size:.9rem; white-space:nowrap;
}

.grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.field{display:flex; flex-direction:column; gap:6px}
.field>span{color:var(--muted); font-size:12px}
.field input{
  background:#17301a; border:1px solid #324; color:var(--ink);
  padding:10px 12px; border-radius:8px; outline:none;
}
.switch{flex-direction:row; align-items:center; gap:10px}
.quick-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.quick-grid button{
  background:#132b2a; color:#bff; border:1px solid rgba(255,255,255,.08);
  padding:10px; border-radius:8px; text-align:left; min-height:44px; cursor:pointer;
}
.quick-grid button small{display:block; opacity:.6}

.cmd-row{display:flex; gap:8px}
.cmd{flex:1; min-height:44px}
button#run{
  background:linear-gradient(135deg,#79ff96,#7df0ff);
  border:0; border-radius:10px; padding:0 16px; font-weight:800; color:#052;
}
.row{display:flex; gap:10px; flex-wrap:wrap}
.drawer{flex:1}
.chip-row{display:flex; flex-wrap:wrap; gap:8px; padding-top:8px}
.chip{
  background:#0f2322; border:1px solid rgba(255,255,255,.08); color:#def; padding:6px 10px;
  border-radius:999px; cursor:pointer; font-size:13px
}
.footer{opacity:.5; text-align:center; padding:18px 0}

@media (max-width:720px){
  #output{height:34vh}
  .grid{grid-template-columns:1fr 1fr}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){
  .grid{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr 1fr}
}