:root{color-scheme:dark;--bg:#0d121b;--panel:#131d2b;--line:#29364a;--text:#ebf1fa;--muted:#a7b6ca;--teal:#58e2c4;--amber:#ffcf8a;--red:#ff9ca3;font:15px/1.5 system-ui,'Microsoft YaHei',sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;color:var(--text);background:radial-gradient(ellipse at 86% 0%,#182d3a 0%,transparent 38%),var(--bg);min-height:100vh}button,input,textarea,select{font:inherit}button{border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;background:#182536;color:var(--text);white-space:nowrap}button:hover{filter:brightness(1.14)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--teal);outline-offset:2px}button:disabled{opacity:.55;cursor:wait}.primary{background:var(--teal);color:#082521;border-color:transparent;font-weight:700}.quiet{background:transparent}.danger{color:var(--red)}
.top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:14px max(24px,calc((100vw - 1344px)/2));background:#0e1721}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.12em}.brand small{display:block;font-size:.67rem;color:var(--muted);letter-spacing:.11em}.brand-icon{display:grid;place-items:center;width:37px;height:37px;background:#183832;color:var(--teal);border:1px solid #2e665d;border-radius:9px;font-size:1.15rem;letter-spacing:0}
main{max-width:1392px;margin:auto;padding:38px 24px 64px}.heading{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:20px}.eyebrow{color:var(--teal);font-size:.8rem;font-weight:700;letter-spacing:.12em}h1,h2,h3,p{margin:0}h1{font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.04em;margin:3px 0 1px}h2{font-size:1.1rem}h3{font-size:.95rem}.heading p,.footnote{color:var(--muted)}.panel{border:1px solid var(--line);border-radius:12px;background:var(--panel)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.stat{padding:14px 16px}.stat span{color:var(--muted);font-size:.83rem}.stat strong{display:block;font-size:1.45rem;font-variant-numeric:tabular-nums;line-height:1.4}.stat:first-child strong{color:var(--teal)}.section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px}.section-title span{font-size:.8rem;color:var(--muted)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;min-width:1220px;font-variant-numeric:tabular-nums}th,td{padding:5px 7px;border-top:1px solid var(--line);white-space:nowrap}th{font-size:.78rem;color:var(--muted);background:#172334;letter-spacing:.025em}th:first-child,td:first-child{padding:3px 3px 3px 8px}.row:hover{background:#192639}.node-name{display:flex;align-items:center;gap:6px}.label{max-width:128px;overflow:hidden;text-overflow:ellipsis;font-weight:650}.state{font-size:.7rem;border-radius:20px;padding:2px 7px;background:#273143;color:var(--muted)}.state.online{background:#193c37;color:var(--teal)}.state.offline{background:#3b2937;color:var(--red)}.value{font-weight:650}.temperature{font-size:.89rem;color:var(--amber);font-weight:700}.muted,.missing{color:var(--muted);font-size:.81rem;font-weight:400}.actions,.chart-head{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.chart-head{justify-content:space-between}.chart-head label{color:var(--muted);font-size:.85rem}.chart{margin:14px 0}.chart svg{width:100%;display:block;height:120px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);margin:8px 0}.legend{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.legend-labels{display:flex;gap:12px;flex-wrap:wrap}.legend-labels span::before{content:'●';margin-right:4px}.legend-labels span:nth-child(1){color:var(--teal)}.legend-labels span:nth-child(2){color:var(--amber)}.legend-labels span:nth-child(3){color:#a6a6ff}#empty{padding:26px 16px;color:var(--muted);border-top:1px solid var(--line)}.footnote{font-size:.83rem;margin:11px 0 0}.login{max-width:420px;margin:6vh auto;padding:22px}.login h1{font-size:1.7rem;margin-bottom:16px}form{display:grid;gap:8px}form button{justify-self:start;margin-top:3px}input,textarea,select{border:1px solid var(--line);border-radius:7px;background:#0c1420;color:var(--text);padding:8px 10px}textarea{width:100%;margin:10px 0;resize:vertical;font:13px/1.5 ui-monospace,Consolas,monospace}.message{color:var(--amber);font-size:.87rem;margin-top:6px}.message:empty{display:none}dialog{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:12px;max-width:640px;width:calc(100% - 32px);padding:18px}dialog::backdrop{background:#080d17c9}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
@media(max-width:640px){main{padding:24px 14px}.top{padding:11px 14px}.stats{grid-template-columns:repeat(2,1fr);gap:8px}.stat{padding:10px 12px}.stat strong{font-size:1.2rem}.heading{align-items:start}.heading p{font-size:.84rem}}

/* Keep each device on one line while allowing the table to scroll on narrow screens. */
#device-table td { font-size: .83rem; }
#device-table td:nth-child(2) { min-width: 124px; }
#device-table .sort-cell { width: 31px; }
.list-status { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
#sort-status { color: var(--teal); }
.drag-handle { display: grid; place-items: center; width: 22px; height: 25px; padding: 0; color: var(--muted); background: transparent; border-color: transparent; font-size: 16px; cursor: grab; touch-action: none; }
.drag-handle:hover, .dragging .drag-handle { color: var(--teal); background: #193c37; }
.dragging .drag-handle { cursor: grabbing; }
.dragging { background: #1d323f; }
.drop-before > td { box-shadow: inset 0 2px var(--teal); }
.drop-after > td { box-shadow: inset 0 -2px var(--teal); }
.network-rate { color: var(--teal); font-weight: 700; }
#device-table td.network-rate { font-size: .9rem; }
.row-actions { display: flex; align-items: center; gap: 3px; }
.row-actions button { padding: 3px 5px; font-size: .76rem; border-radius: 5px; }
.rename-icon { display: inline-grid; place-items: center; width: 22px; height: 24px; padding: 0; flex: none; color: var(--muted); border-color: transparent; }
.rename-icon:hover { color: var(--teal); background: #193c37; }
.rename-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#command-actions { margin-bottom: 12px; }
#device-table span.missing[title]:not([title=""]) { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
#history-dialog { max-width: 780px; }
#history-dialog .chart { margin-bottom: 0; }