:root { --bg:#0f0f10; --card:#17171a; --text:#eaeaea; --muted:#a0a0a0; --line:#2b2b30; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--text); }
.topbar { position:sticky; top:0; background:#111; border-bottom:1px solid var(--line); padding:14px 16px; display:flex; gap:12px; align-items:center; justify-content:space-between; }
.title { font-size:18px; font-weight:700; }
.subtitle { font-size:12px; color:var(--muted); margin-top:2px; }
.container { padding:14px; max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }
.cardTitle { font-weight:700; margin-bottom:10px; }
.row { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.grid3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.grid4 { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
@media (max-width:720px){ .grid3{grid-template-columns:1fr 1fr;} .grid4{grid-template-columns:1fr 1fr;} }
.label { font-size:12px; color:var(--muted); }
.value { font-size:18px; font-weight:700; margin-top:4px; }
.btn { background:#2a2a30; border:1px solid #3a3a44; color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer; }
.btn:hover { filter:brightness(1.1); }
.input { flex:1; min-width:220px; background:#111; border:1px solid #3a3a44; color:var(--text); padding:10px 12px; border-radius:12px; }
.pill { display:inline-flex; padding:6px 10px; border-radius:999px; font-weight:700; border:1px solid #3a3a44; background:#111; }
.pill.on { border-color:#2e7d32; }
.pill.off { border-color:#b71c1c; }
.hint { margin-top:8px; font-size:12px; color:var(--muted); }