/* IOTECH · Audio Nodes RT */
:root{
  --bg:#070b14;
  --card:#0c1220;
  --stroke:#152036;
  --text:#e8eefc;
  --muted:#95a3c2;
  --main:#ff7a00;
  --blue:#0031a7;
  --ok:#10b981;
  --bad:#ef4444;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --r: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: radial-gradient(1200px 800px at 10% 0%, rgba(0,49,167,.25), transparent 50%),
              radial-gradient(900px 700px at 90% 10%, rgba(255,122,0,.18), transparent 55%),
              var(--bg);
  color:var(--text);
}

.topbar{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background: rgba(7,11,20,.8);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:50;
}
.brand{display:flex; align-items:baseline; gap:10px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.dot.a{background:var(--main)}
.dot.b{background:var(--blue)}
.dot.c{background:#b6b6b6}
.title{font-weight:800; letter-spacing:.3px}
.sub{color:var(--muted); font-size:12px}

.main{padding:18px 16px; max-width:1400px; margin:0 auto}
.view{display:none}
.view.active{display:block}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
@media (max-width: 980px){ .grid2{grid-template-columns:1fr} }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding:14px;
}
.card.full{height: calc(100vh - 120px); display:flex; flex-direction:column}
h1{margin:0 0 10px 0}
h2{margin:0 0 10px 0}
h3{margin:0 0 10px 0}

.muted{color:var(--muted)}
.mini{font-size:12px}
.lbl{display:block; margin-top:10px; margin-bottom:6px; color:var(--muted); font-size:12px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row.space{justify-content:space-between}

.inp{
  width:100%;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  color:var(--text);
  outline:none;
}
.inp:focus{border-color: rgba(255,122,0,.55)}
.inp.tiny{width:90px; padding:8px 10px}

.btn{
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{border-color: rgba(255,122,0,.5)}
.btn.main{background: rgba(255,122,0,.18); border-color: rgba(255,122,0,.45)}
.btn.danger{background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35)}
.btn.ghost{background: transparent}

.split{display:grid; grid-template-columns: 420px 1fr; gap:14px}
@media (max-width: 980px){ .split{grid-template-columns:1fr} .card.full{height:auto} }

.txt{
  width:100%; min-height: 110px;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  color:var(--text);
  outline:none;
  resize: vertical;
}

.log{
  margin:0; padding:10px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  height: 160px;
  overflow:auto;
}

.canvas{
  width:100%;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  margin-top:10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.canvas.small{margin-top:0}
.overlay{position:absolute; left:0; top:0; opacity:.55; pointer-events:none}
.full{position:relative}

.list{display:flex; flex-direction:column; gap:8px}
.item{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.18);
  cursor:pointer;
}
.item:hover{border-color: rgba(0,49,167,.5)}
.item .name{font-weight:700}
.item .meta{font-size:12px; color:var(--muted)}

.pill{
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-size:12px;
}