:root { color-scheme: dark; --bg:#0f1216; --panel:#171b21; --line:#262c34;
  --ok:#2ec16b; --warn:#e0a13a; --off:#7a828c; --danger:#e0533d; --text:#e7ebf0; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text);
  font:14px/1.4 -apple-system,Segoe UI,Roboto,sans-serif; }
button { cursor:pointer; border:0; border-radius:8px; padding:10px 14px;
  background:#2a68d8; color:#fff; font-weight:600; }
button.ghost { background:#222831; color:var(--text); border:1px solid var(--line); }
button.danger { background:var(--danger); }
input,textarea { background:#0c0f13; color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:10px; font:inherit; width:100%; }

/* login */
.login { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login form { width:min(360px,100%); display:grid; gap:12px; background:var(--panel);
  padding:24px; border-radius:14px; border:1px solid var(--line); }
.login h1 { margin:0; font-size:20px; } .sub { margin:0; color:var(--off); }
.error { color:var(--danger); margin:0; }

/* bar */
.bar { display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:5; }
.grow { flex:1; }
.pill { padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.pill.on { background:rgba(46,193,107,.15); color:var(--ok); }
.pill.off { background:rgba(122,130,140,.15); color:var(--off); }
.kbd { color:var(--off); } .kbd b { color:var(--text); }

.banner { background:rgba(224,161,58,.15); color:var(--warn); padding:8px 14px;
  border-bottom:1px solid var(--line); font-weight:600; }

/* tabs (mobile) */
.tabs { display:none; gap:8px; padding:8px 14px; }
.tab { background:#222831; border:1px solid var(--line); }
.tab.active { background:#2a68d8; }

/* panels */
.panels { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 14px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column; min-height:34vh; }
.panel.selected { outline:2px solid #2a68d8; }
.panel-head { display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-bottom:1px solid var(--line); font-size:12px; }
.ptitle { font-weight:700; } .cap { color:var(--off); }
.dot { width:12px; height:12px; border-radius:50%; background:var(--off); flex:0 0 auto; }
.dot.ok { background:var(--ok); } .dot.warn { background:var(--warn); } .dot.err { background:var(--danger); }
.panel-head input[type=range]{ width:90px; }

.view { flex:1; overflow:hidden; background:#000; position:relative; touch-action:none; }
.overlay { position:absolute; inset:0; z-index:2; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:20px; background:rgba(15,18,22,.9);
  color:var(--warn); font-weight:700; white-space:pre-line; }
.view img { display:block; width:100%; height:auto; transform-origin:top left; touch-action:none; }

/* composer */
.composer { padding:10px 14px 22px; display:grid; gap:8px; }
.btns { display:flex; flex-wrap:wrap; gap:8px; }
.btns button { flex:1 1 auto; }
.hint { color:var(--off); margin:0; font-size:12px; }

@media (max-width:760px){
  .tabs { display:flex; }
  .panels { grid-template-columns:1fr; }
  .panel { display:none; } .panel.active { display:flex; min-height:52vh; }
}