:root{
  --bg:#0f172a; --fg:#e2e8f0; --muted:#94a3b8;
  --card:#111827; --accent:#22c55e; --danger:#ef4444; --warn:#f59e0b;
  --border:#1f2937;
}
*{ box-sizing: border-box; }
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  background:var(--bg); color:var(--fg);
}
a{ color: var(--accent); }
.hidden{ display:none; }
.container{ width: min(1200px, 100%); margin: 1rem auto; padding: 0 1rem; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding: .75rem 1rem; border-bottom:1px solid var(--border);
  position: sticky; top: 0; background: rgba(15, 23, 42, .85); backdrop-filter: blur(6px); z-index: 50;
}
.logo{ font-weight:700; letter-spacing:.3px; }
.nav .nav-btn{
  background:none; border:1px solid var(--border); color:var(--fg); padding:.5rem .75rem; margin-right:.25rem; border-radius:.5rem; cursor:pointer;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02));
  border:1px solid var(--border);
  padding:1rem; border-radius:.75rem; margin-bottom:1rem;
}
.grid-2{ display:grid; grid-template-columns:1fr; gap:1rem; }
.grid-4{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (min-width: 900px){
  .grid-2{ grid-template-columns: 1.2fr .8fr; }
  .grid-4{ grid-template-columns: repeat(4,1fr); }
}
input, select{
  width:100%; padding:.6rem .7rem; border-radius:.5rem; border:1px solid var(--border); background:#0b1220; color:var(--fg); margin:.35rem 0;
}
button{
  background: var(--accent); border: none; color:#052e16; font-weight:600; padding:.6rem .9rem; border-radius:.5rem; cursor:pointer; 
}
button.secondary{ background: transparent; color: var(--fg); border: 1px solid var(--border); }
.stat{ border:1px solid var(--border); padding:.8rem; border-radius:.5rem; background: #0b1220; }
.stat-title{ color: var(--muted); font-size:.9rem; }
.stat-value{ font-size:1.8rem; margin-top:.25rem; }
.flex{ display:flex; gap:.5rem; align-items:center; }
.chatbox{ height: 50vh; overflow:auto; border:1px solid var(--border); border-radius:.5rem; padding:.5rem; background:#0b1220; }
.msg{ padding:.4rem .6rem; border-radius:.5rem; margin:.25rem 0; max-width: 80%; }
.msg.in{ background:#111827; }
.msg.out{ background:#052e16; color:#eafff2; margin-left:auto; }
.builder{ min-height: 280px; border:1px dashed var(--border); border-radius:.5rem; padding:.75rem; background:#0b1220; }
.node{ border:1px solid var(--border); border-radius:.5rem; padding:.5rem; margin:.5rem 0; background:#0c1424; }
.node .title{ font-weight:600; margin-bottom:.25rem; }
.node .row{ display:flex; gap:.5rem; align-items:center; margin:.25rem 0; }
#queue .ticket{ border:1px solid var(--border); padding:.5rem; border-radius:.5rem; margin:.25rem 0; background:#0b1220; }
.warn{ color: var(--warn); }