:root { color-scheme: dark; }
body { margin:0; font-family: system-ui, Segoe UI, Arial; background:#0f1115; color:#e6e6e6; }
.topbar { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #262a33; position:sticky; top:0; background:#0f1115; z-index:10; }
.brand { font-weight:700; letter-spacing:0.2px; }
.top-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.container { padding:14px; max-width:1200px; margin:0 auto; }
.card { background:#141823; border:1px solid #262a33; border-radius:12px; padding:12px; margin-bottom:14px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.cardhead { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.head-controls { display:flex; align-items:center; gap:10px; }
.grid3 { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; }
@media (max-width: 900px){ .grid3{ grid-template-columns: 1fr; } }
.row { display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }
select, input { background:#0f1115; color:#e6e6e6; border:1px solid #262a33; border-radius:10px; padding:8px 10px; }
button { background:#1f2a44; border:1px solid #2b3a60; color:#e6e6e6; padding:8px 10px; border-radius:10px; cursor:pointer; }
button.secondary { background:#1a1f2c; border-color:#262a33; }
button.toggle.on { background:#2a3f7a; border-color:#3b5fd0; }
.vol { display:flex; align-items:center; gap:8px; }
.vol input { width:160px; }
.hidden { display:none; }
.muted { opacity:0.75; font-size: 0.95em; }
.stems { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.stem { display:grid; grid-template-columns: 1fr 180px 60px; gap:10px; align-items:center; }
.stem .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sfxgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
.log { height:220px; overflow:auto; background:#0f1115; border:1px solid #262a33; border-radius:10px; padding:10px; }
.auth { display:flex; align-items:center; gap:10px; }