:root{
  --bg:#f6f8fb;            /* page bg */
  --card:#ffffff;          /* card bg */
  --text:#0f172a;          /* primary text */
  --muted:#6b7280;         /* muted text */
  --border:#e5e7eb;        /* light border */
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.06);
  --accent:#2563eb;        /* blue */
  --accent-600:#1d4ed8;
  --good:#15803d;          /* green */
  --warn:#b45309;          /* amber */
  --bad:#b91c1c;           /* red */
}

/* Layout */
html,body{height:100%}
body{font-family:system-ui,Segoe UI,Arial,Helvetica,sans-serif;margin:0;background:var(--bg);color:var(--text)}
.container{max-width:1220px;margin:24px auto;padding:0 16px}
h1{margin:0 0 12px}
h2{margin:18px 0 8px}

/* Toolbar */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}

/* Pills */
.pill{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef2ff;border:1px solid var(--border);font-size:12px}
.pill.ok{background:#e8f9ef;border-color:#bfe7cc;color:var(--good)}
.pill.warn{background:#fff7ed;border-color:#fde7c7;color:var(--warn)}
.pill.bad{background:#fee2e2;border-color:#fecaca;color:var(--bad)}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:14px;margin:12px 0}
.card h2{margin:0 0 10px}

/* Tables */
table{border-collapse:separate;border-spacing:0;width:100%;margin-top:12px;background:var(--card);border:1px solid var(--border);border-radius:6px;overflow:hidden}
th,td{border-bottom:1px solid var(--border);padding:8px 10px;font-size:14px}
th{background:#fafafa;text-align:left;position:sticky;top:0}
tbody tr:hover{background:#f3f4f6}
.muted{color:var(--muted)}
.status{font-weight:600}
.on{color:var(--good)}
.off{color:var(--bad)}
#presence tbody tr{cursor:pointer}
#presence tbody tr.selected{background:#e6f0ff}
.rssi.good{color:var(--good)}
.rssi.mid{color:#9a6b00}
.rssi.low{color:var(--bad)}

/* Forms */
input[type="text"],input[type="number"]{border:1px solid var(--border);border-radius:6px;padding:6px 8px;background:#fff;min-width:80px}
input[disabled]{background:#f3f4f6}
label{margin-right:6px}
button{border:1px solid var(--border);background:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;transition:.15s background ease}
button:hover{background:#f8fafc}
button:disabled{opacity:0.6;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-600);border-color:var(--accent-600)}
.btn-danger{border-color:#fecaca;background:#fee2e2;color:var(--bad)}
.btn-danger:hover{background:#fecaca}

/* Config grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;align-items:center}
.col-3{grid-column:span 3}
.col-2{grid-column:span 2}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-12{grid-column:span 12}
@media (max-width: 860px){
  .col-6{grid-column:span 12}
  .col-4{grid-column:span 12}
  .col-3{grid-column:span 6}
  .col-2{grid-column:span 6}
}

/* Log */
#log{white-space:pre;font-family:ui-monospace,monospace;border:1px solid var(--border);background:var(--card);padding:10px;height:220px;overflow:auto;border-radius:6px}