*{box-sizing:border-box}body{margin:0;background:#f4f7f9;color:#17212b;font-family:Inter,Arial,sans-serif}header{background:#0b5c66;color:white;padding:14px 5%;display:flex;justify-content:space-between;align-items:center;gap:12px}header a{color:white;text-decoration:none}main{max-width:1200px;margin:auto;padding:22px 4%}.top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.card{background:white;border-radius:14px;padding:18px;box-shadow:0 2px 10px #00000012;margin-bottom:16px}.card a{color:inherit}.card h2{margin:8px 0}.status{display:inline-block;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:bold}.status.on{background:#d9f7e5;color:#087443}.status.off{background:#fee2e2;color:#a11}.btn,button{border:0;border-radius:8px;background:#087f8c;color:white;padding:10px 14px;text-decoration:none;cursor:pointer}.inline{display:inline}input,select{width:100%;padding:11px;margin:7px 0;border:1px solid #cbd5db;border-radius:8px;font-size:15px}label{display:block;margin:10px 0}.login{display:grid;place-items:center;min-height:100vh}.loginbox{background:white;padding:30px;border-radius:16px;width:min(420px,92%);box-shadow:0 5px 30px #0002}.error{background:#fee2e2;padding:10px;border-radius:8px}.readings div[id]{font-size:26px;font-weight:700;margin:7px 0}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:15px}.toolbar select{width:auto}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:650px}th,td{text-align:left;padding:9px;border-bottom:1px solid #e5e7eb;font-size:13px}.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}.admin-grid .card{overflow:auto}small{color:#65727c}@media(max-width:600px){main{padding:16px 3%}.top{align-items:flex-start}.top h1{font-size:24px}header{padding:12px 4%}}

/* ===== v2: dynamic fields ===== */
.muted{color:#65727c}.small{font-size:12px}code{background:#eef2f5;padding:2px 6px;border-radius:5px;font-size:12px;word-break:break-all}
.alarmbar{padding:10px 14px;border-radius:10px;font-weight:700;margin-bottom:16px}.alarmbar.ok{background:#d9f7e5;color:#087443}.alarmbar.bad{background:#fee2e2;color:#a11}
.readings{margin-bottom:6px}.readings.offline .metric-card{opacity:.6}
.metric-card h3{margin:0 0 8px;font-size:15px;color:#0b5c66}
.mrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid #eef1f3}.mrow:last-child{border-bottom:0}
.mrow.stale{opacity:.55}.mrow.alert .mval{color:#a11}
.mlabel{color:#51606b;font-size:14px}.mval{font-size:24px;font-weight:700;text-align:right}.mval .txt{font-size:18px}.unit{font-size:13px;font-weight:600;color:#65727c;margin-left:3px}
.pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:14px;font-weight:700}.pill.ok{background:#d9f7e5;color:#087443}.pill.bad{background:#fee2e2;color:#a11}
.status.alarm{background:#fee2e2;color:#a11;margin-left:6px}.bad-text{color:#a11}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.chip{display:inline-flex;align-items:center;gap:6px;background:#eef2f5;border-radius:999px;padding:5px 11px;font-size:12px;cursor:pointer}
.chip input{width:auto;margin:0}.chips:not(.summary) .chip{border-left:6px solid var(--c,#999)}
.chips.summary .chip{cursor:inherit}.chip.bad{background:#fee2e2;color:#a11}.chips.dim{opacity:.55}
.okbar{background:#d9f7e5;color:#087443;padding:10px 14px;border-radius:10px;margin-bottom:14px;font-weight:600}
.fieldgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}.field{margin:0}.field label{margin:6px 0;font-size:13px;color:#51606b}.field input,.field select{margin:4px 0 0}
.fhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}.forget{color:#a11!important}.forget input{width:auto;margin-right:6px}
.copybar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.copybar select{width:auto;min-width:220px;margin:0}
.stickybar{position:sticky;bottom:0;background:#f4f7f9ee;padding:12px 0;margin-top:14px}
input::placeholder{color:#9aa7b0}
@media(max-width:600px){.fieldgrid{grid-template-columns:1fr}.mval{font-size:21px}}

/* ===== v2.1: graphics ===== */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:18px}
.tile{background:white;border-radius:14px;padding:14px 16px;box-shadow:0 2px 10px #00000012;display:flex;flex-direction:column}
.tile b{font-size:30px}.tile span{color:#65727c;font-size:13px}.tile.ok b{color:#087443}.tile.off b{color:#65727c}.tile.bad{background:#fee2e2}.tile.bad b{color:#a11}
.dchips{display:grid;gap:6px;margin:10px 0}.dchips.dim{opacity:.55}
.dchip{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l v" "s s";gap:0 8px;background:#f4f7f9;border-radius:10px;padding:7px 10px;font-size:12px}
.dchip.bad{background:#fee2e2}.dchip.bad .dv{color:#a11}.dl{grid-area:l;color:#51606b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dv{grid-area:v;font-size:13px}.dchip .spark{grid-area:s;display:block;min-height:26px}.dchip .spark svg{width:100%;height:26px}
.spark-svg{display:block;width:100%;overflow:visible}.spark-line{fill:none;stroke:#087f8c;stroke-width:1.8;vector-effect:non-scaling-stroke}.spark-area{fill:#087f8c22;stroke:none}
.spark-dot{fill:#087f8c}.spark-svg.bad .spark-line{stroke:#c62828}.spark-svg.bad .spark-area{fill:#c6282822}.spark-svg.bad .spark-dot{fill:#c62828}
.spark-band{fill:#d9f7e5aa}.spark-empty{stroke:#cbd5db;stroke-dasharray:3 3}
.mrow{display:block}.mtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.mviz{margin:6px 0 2px}
.mfoot{display:flex;gap:14px;font-size:11px;color:#65727c}.mfoot b{color:#17212b}
.rbar{position:relative;height:8px;background:#e5e7eb;border-radius:999px;margin-top:8px}.rzone{position:absolute;top:0;bottom:0;background:#9be3b8;border-radius:999px}
.rmark{position:absolute;top:-3px;width:6px;height:14px;margin-left:-3px;border-radius:3px;background:#087f8c}.rmark.bad{background:#c62828}
.rlim{display:flex;justify-content:space-between;font-size:10px;color:#9aa7b0;padding:0 18%}
.tline{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#e5e7eb}.tseg.on{background:#7cc4cc}.tseg.off{background:#e1e7ea}.tseg.bad{background:#e57373}