:root{
  --bg:#0f172a; --panel:#1e293b; --panel-2:#243244; --border:#334155;
  --text:#e2e8f0; --muted:#94a3b8;
  --blue:#38bdf8; --orange:#fb923c;
  --ok:#22c55e; --warn:#eab308; --bad:#ef4444;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); padding:24px;
}
h1{font-size:20px; margin:0 0 4px;}
.sub{color:var(--muted); font-size:13px; margin-bottom:20px;}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px;}
@media(max-width:800px){.grid{grid-template-columns:1fr;}}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:18px 20px;
}
.card.line60{border-top:3px solid var(--blue);}
.card.line80{border-top:3px solid var(--orange);}
.card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.card-title{font-weight:600; font-size:15px;}
.badge{
  padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap;
}
.badge.ok{background:rgba(34,197,94,.15); color:var(--ok);}
.badge.warn{background:rgba(234,179,8,.15); color:var(--warn);}
.badge.bad{background:rgba(239,68,68,.15); color:var(--bad);}
.badge.none{background:rgba(148,163,184,.15); color:var(--muted);}
.badge.open{background:rgba(239,68,68,.15); color:var(--bad);}
.badge.closed{background:rgba(34,197,94,.15); color:var(--ok);}
.badge.voided{background:rgba(148,163,184,.15); color:var(--muted);}
.reading{font-size:38px; font-weight:700; margin:4px 0;}
.reading .unit{font-size:16px; color:var(--muted); font-weight:400;}
.meta{font-size:12px; color:var(--muted);}
.target{font-size:12px; color:var(--muted); margin-top:6px;}
.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:18px 20px; margin-bottom:20px;
}
.panel h2{font-size:14px; margin:0 0 12px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
form{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;}
.field{display:flex; flex-direction:column; gap:4px;}
.field label{font-size:12px; color:var(--muted);}
select, input, textarea{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:8px 10px; font-size:14px; font-family:inherit;
}
input[type=number]{width:110px;}
textarea{width:100%; resize:vertical; min-height:44px;}
button{
  background:var(--blue); color:#0f172a; border:none; border-radius:8px;
  padding:9px 18px; font-size:14px; font-weight:600; cursor:pointer;
}
button.secondary{background:transparent; border:1px solid var(--border); color:var(--text); font-weight:500;}
button.danger{background:transparent; border:1px solid var(--bad); color:var(--bad); font-weight:500;}
button.small{padding:4px 10px; font-size:12px;}
button:hover{opacity:.9;}
button:disabled{opacity:.4; cursor:not-allowed;}
table{width:100%; border-collapse:collapse; font-size:12.5px;}
th, td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap;}
th{color:var(--muted); font-weight:500; font-size:11.5px; text-transform:uppercase;}
.row-actions{display:flex; gap:6px;}
.empty{color:var(--muted); font-size:13px; padding:12px 0;}
.table-wrap{max-height:340px; overflow:auto;}
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:8px;}
.settings-row{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end;}
canvas{max-height:280px;}
.voided-row{opacity:.5; text-decoration:line-through;}
.cap-text{max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:normal;}
.hint{font-size:11px; color:var(--muted); margin-top:4px;}
.conn-status{font-size:11px; padding:4px 10px; border-radius:999px;}
.conn-status.online{background:rgba(34,197,94,.15); color:var(--ok);}
.conn-status.offline{background:rgba(239,68,68,.15); color:var(--bad);}