:root{--ink:#16191b;--ground:#f4f5f3;--panel:#fff;--rule:#d8ddd6;--ok:#2e6e4e;--bad:#9e3225;--warn:#b07300;}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:14px/1.5 ui-sans-serif,system-ui,sans-serif}
.bar{display:flex;flex-direction:column;gap:2px;padding:14px 18px;background:var(--panel);border-bottom:2px solid var(--rule)}
.title{font-weight:700;font-size:16px}
.meta{color:#5a635c;font-size:12.5px}
.state-ready{color:var(--ok)}.state-offline,.state-media_out,.state-head_open{color:var(--bad)}
.panel{display:flex;flex-wrap:wrap;gap:18px;padding:12px 18px;border-bottom:1px solid var(--rule)}
.row{display:flex;align-items:center;gap:8px}
.lbl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#5a635c}
button,input{font:inherit;padding:4px 10px;border:1px solid var(--rule);background:var(--panel);border-radius:3px}
button.on{background:var(--ink);color:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--panel)}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#5a635c;border-bottom:1px solid var(--rule);padding:8px 14px}
td{border-bottom:1px solid var(--rule);padding:8px 14px}
td.num{font-variant-numeric:tabular-nums}
.ok{color:var(--ok)}.bad{color:var(--bad)}
.empty{color:#5a635c;padding:24px 14px}