:root{--ink:#092f33;--muted:#63787a;--paper:#eef4f1;--card:#fbfdfb;--line:#d8e3de;--mint:#22a67a;--aqua:#1c8290;--warn:#d9992b;--alarm:#d4574f;--shadow:0 18px 55px rgba(8,47,51,.08)}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at 85% 0,rgba(28,130,144,.13),transparent 32rem),var(--paper)}
.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,72px);border-bottom:1px solid rgba(9,47,51,.1);background:rgba(238,244,241,.84);backdrop-filter:blur(18px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--ink);color:white;font-family:Georgia,serif;font-size:25px;font-style:italic}.brand strong,.brand small{display:block}.brand strong{font-size:16px;letter-spacing:.02em}.brand small{font-size:11px;color:var(--muted);margin-top:2px}.connection{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.08em}.dot{width:9px;height:9px;border-radius:50%;background:#a6b3b1;box-shadow:0 0 0 5px rgba(166,179,177,.16)}.dot.online{background:var(--mint);box-shadow:0 0 0 5px rgba(34,166,122,.15)}.dot.offline{background:var(--alarm);box-shadow:0 0 0 5px rgba(212,87,79,.15)}
main{max-width:1400px;margin:auto;padding:0 clamp(20px,5vw,72px) 64px}.hero{padding:62px 0 40px;display:flex;justify-content:space-between;align-items:end;gap:28px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:var(--aqua);margin:0 0 14px}.hero h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:clamp(46px,7vw,88px);line-height:.9;letter-spacing:-.045em;margin:0}.hero h1 em{color:var(--aqua);font-weight:400}.intro{max-width:520px;color:var(--muted);font-size:16px;line-height:1.6;margin:24px 0 0}.mode-badge{border:1px solid var(--line);background:rgba(251,253,251,.7);border-radius:999px;padding:10px 14px;font-size:10px;font-weight:850;letter-spacing:.12em;white-space:nowrap}.mode-badge.demo{color:#8a600b;border-color:#e6c678;background:#fff6dd}
.dashboard-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.card{background:rgba(251,253,251,.94);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}.card-head{display:flex;justify-content:space-between;align-items:start;gap:16px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.card-head small{display:block;text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);margin-top:6px}.micro{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--muted);letter-spacing:.04em}.gauge-card{grid-column:span 7;min-height:330px}.state-card{grid-column:span 5;min-height:330px;display:flex;flex-direction:column}.gauge-wrap{height:220px;position:relative;display:grid;place-items:center}.gauge{width:min(100%,360px);overflow:visible}.gauge path{fill:none;stroke-width:17;stroke-linecap:round}.gauge-track{stroke:#e2ebe7}.gauge-value{stroke:var(--mint);stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset .8s ease,stroke .3s}.gauge-reading{position:absolute;bottom:28px;text-align:center}.gauge-reading strong{display:block;font-family:Georgia,serif;font-size:64px;font-weight:500;line-height:.9}.gauge-reading span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.threshold-row{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.threshold-row i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.normal{background:var(--mint)}.warning{background:var(--warn)}.alarm{background:var(--alarm)}
.state-icon{font-size:58px;color:#a6b3b1;margin:auto 0 4px;line-height:1}.state-card>strong{font-family:Georgia,serif;font-size:38px;font-weight:500}.state-card>p{color:var(--muted);line-height:1.5;max-width:420px;margin:9px 0 0}.state-card.normal,.state-card.warning,.state-card.alarm{background:rgba(251,253,251,.94)}.state-card.normal .state-icon{color:var(--mint)}.state-card.warning .state-icon{color:var(--warn)}.state-card.alarm .state-icon,.state-card.sensor-fault .state-icon{color:var(--alarm)}
.metric-card{grid-column:span 3;min-height:138px}.metric-card>span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:750}.metric-card>strong{display:block;font-family:Georgia,serif;font-size:32px;font-weight:500;margin:19px 0 2px}.metric-card>small{color:var(--muted)}.chart-card{grid-column:span 8;min-height:390px}.system-card{grid-column:span 4}.chart-wrap{height:310px;margin-top:18px;position:relative}.chart-wrap canvas{width:100%;height:100%}.chart-empty{display:none;position:absolute;inset:0;place-items:center;color:var(--muted)}.legend{display:flex;gap:12px;color:var(--muted);font-size:9px}.legend i{display:inline-block;width:18px;border-top:2px solid;margin-right:5px;vertical-align:middle}.legend .line{border-color:var(--aqua)}.legend .warn-line{border-color:var(--warn);border-top-style:dashed}.legend .alarm-line{border-color:var(--alarm);border-top-style:dashed}.system-card dl{margin:18px 0 0}.system-card dl div{display:flex;justify-content:space-between;gap:12px;padding:15px 0;border-top:1px solid var(--line)}.system-card dt{color:var(--muted);font-size:12px}.system-card dd{margin:0;text-align:right;font-size:12px;font-weight:750}
footer{max-width:1400px;margin:auto;border-top:1px solid rgba(9,47,51,.1);padding:24px clamp(20px,5vw,72px) 38px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:900px){.gauge-card,.state-card,.chart-card,.system-card{grid-column:1/-1}.metric-card{grid-column:span 6}.hero{align-items:start;flex-direction:column}.mode-badge{align-self:start}.state-card{min-height:260px}}
@media(max-width:560px){.topbar{height:72px}.brand small{display:none}.connection{font-size:10px}.hero{padding-top:40px}.dashboard-grid{gap:12px}.card{padding:18px;border-radius:15px}.metric-card{grid-column:1/-1;min-height:112px}.metric-card>strong{margin-top:12px}.gauge-card{min-height:300px}.gauge-wrap{height:200px}.gauge-reading strong{font-size:54px}.threshold-row{gap:8px}.legend{display:none}footer{display:block}footer span{display:block;margin-bottom:8px}}