:root{
  --bg:#0b0b0f; --fg:#f4f4f6; --muted:#b9b9c2;
  --card:#141420; --border:#2b2b3a; --gold:#d6b35b;
  --good:#34d399; --bad:#fb7185;
}
*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,system-ui,-apple-system,Arial;background:var(--bg);color:var(--fg)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(11,11,15,.96);backdrop-filter:blur(8px);z-index:5}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#1f1f2b, #0f0f18);border:1px solid var(--border);color:var(--gold);font-weight:700}
.name{font-weight:700}
.sub{font-size:12px;color:var(--muted)}
.status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:999px;background:#555}
.dot.good{background:var(--good)}
.dot.bad{background:var(--bad)}
.wrap{max-width:1200px;margin:0 auto;padding:16px}
.panel{display:flex;flex-direction:column;gap:12px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border:1px solid var(--border);background:#10101a;color:var(--fg);padding:10px 12px;border-radius:12px;cursor:pointer}
.tab.active{border-color:rgba(214,179,91,.75);box-shadow:0 0 0 3px rgba(214,179,91,.12) inset}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:980px){.grid{grid-template-columns:1.1fr .9fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.cardHeader{padding:14px 14px 10px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cardTitle{font-weight:700}
.cardHint{font-size:12px;color:var(--muted);margin-top:4px}
.section{padding:14px;border-bottom:1px solid rgba(43,43,58,.65)}
.section:last-child{border-bottom:none}
.row{display:flex;align-items:center;gap:10px}
.row3{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:700px){.row3{grid-template-columns:1fr 1fr 1fr}}
.space{justify-content:space-between}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.field input[type="number"], .field select{
  width:100%;padding:10px 10px;border-radius:12px;border:1px solid var(--border);
  background:#0f0f18;color:var(--fg);outline:none
}
.field input[type="range"]{width:100%}
.mini{font-size:12px;margin-top:6px}
.muted{color:var(--muted)}
.labelStrong{font-weight:700}
.btn{border:1px solid var(--border);background:#10101a;color:var(--fg);padding:10px 12px;border-radius:12px;cursor:pointer}
.btn:hover{border-color:rgba(214,179,91,.45)}
.btn.primary{background:linear-gradient(135deg,rgba(214,179,91,.22),rgba(214,179,91,.08));border-color:rgba(214,179,91,.55)}
.btn.ghost{background:transparent}
.toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);user-select:none}
.toggle input{transform:translateY(1px)}
.hidden{display:none}
.payload{
  width:100%;
  min-height:220px;
  max-height:none;
  resize:vertical;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0f0f18;
  color:var(--fg);
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow:hidden; /* auto-expands by content; no scrolling */
}
.pre{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0f0f18;
  overflow:auto;
  max-height:520px;
}
.summary{line-height:1.45; white-space: pre-wrap; white-space: pre-line}

.moment{border:1px dashed rgba(214,179,91,.35);border-radius:14px;padding:12px;margin-top:10px;background:rgba(16,16,26,.35)}
.momentHeader{display:flex;align-items:center;justify-content:space-between;gap:10px}
.momentTitle{font-weight:700}
.gates{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.gateRow{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:700px){.gateRow{grid-template-columns:1.1fr 1fr 1fr 0.8fr}}
.smallBtn{padding:9px 10px;border-radius:12px;border:1px solid var(--border);background:#10101a;color:var(--fg);cursor:pointer}
.smallBtn.danger{border-color:rgba(251,113,133,.55)}
.footerNote{padding:6px 2px;font-size:12px}

/* --- Visualization --- */
.vizHost{display:flex;flex-direction:column;gap:12px}
.vizCanvas{border:1px solid var(--border);border-radius:14px;background:#0f0f18;padding:10px;overflow:auto}
.vizCanvas svg{display:block;max-width:100%}
.distHost{border:1px solid var(--border);border-radius:14px;background:#0f0f18;padding:10px}
.distRow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:6px 0}
.distKey{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px;color:var(--fg)}
.distBar{height:10px;border-radius:999px;border:1px solid rgba(214,179,91,.25);background:rgba(214,179,91,.12);position:relative;overflow:hidden}
.distFill{height:100%;background:rgba(214,179,91,.55);border-radius:999px}
.distVal{font-size:12px;color:var(--muted)}
.field.compact{display:flex;flex-direction:column;gap:6px}
.field.compact input{padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:#0f0f18;color:var(--fg);width:90px}


/* Project bar */
.projectBar{
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;
  background: rgba(0,0,0,0.20);
}
.projectBar .input{
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.12);
  color: inherit;
  padding:10px 12px;
  border-radius:10px;
  outline: none;
}
.projectBar .sep{
  width:1px;
  height:28px;
  background: rgba(255,255,255,0.14);
  display:inline-block;
  margin:0 6px;
}