:root{
  --bg:#05070a;--panel:#11161d;--panel2:#0b1016;--text:#f4f7fb;
  --muted:#8f9aaa;--good:#35d07f;--warn:#ffb020;--bad:#ff4d5e;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:var(--bg);color:var(--text);
font-family:Arial,Helvetica,sans-serif;overflow:hidden}
body{padding:18px}
.dashboard{height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:14px}
header{display:flex;align-items:flex-end;justify-content:space-between;padding:4px 8px}
#clock{font-size:clamp(48px,8vw,92px);font-weight:700;letter-spacing:-3px;line-height:.9}
#date{font-size:clamp(16px,2vw,24px);color:var(--muted);margin-top:10px}
.brand{text-align:right}.brand .name{font-size:clamp(17px,2.3vw,29px);font-weight:700}
.status{font-size:clamp(13px,1.5vw,18px);margin-top:7px}.status.ok{color:var(--good)}
.status.waiting{color:var(--warn)}.status.error{color:var(--bad)}
main{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;min-height:0}
.card{background:linear-gradient(145deg,var(--panel),var(--panel2));border:1px solid #222b36;
border-radius:24px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.hero{grid-row:1/3}.label{text-transform:uppercase;letter-spacing:1.8px;color:var(--muted);
font-size:clamp(13px,1.5vw,18px)}
.value{font-size:clamp(42px,7vw,90px);font-weight:750;letter-spacing:-3px;line-height:1}
.unit{font-size:.38em;color:var(--muted);letter-spacing:0}.secondary{font-size:clamp(18px,2vw,28px);color:var(--muted)}
.co2-value{font-size:clamp(36px,5vw,66px);font-weight:750}
.badge{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:10px 15px;
width:max-content;font-size:clamp(15px,1.7vw,21px);font-weight:700;background:#252a31;color:var(--muted)}
.dot{width:12px;height:12px;border-radius:50%;background:currentColor}
.vent{grid-column:2/4;background:linear-gradient(145deg,#171b20,#0b1016)}
.vent-message{font-size:clamp(28px,4.3vw,58px);font-weight:800;letter-spacing:-1px}
footer{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mini{background:var(--panel2);border:1px solid #222b36;border-radius:18px;padding:14px 18px}
.mini .m-label{color:var(--muted);font-size:clamp(12px,1.4vw,17px)}
.mini .m-value{font-size:clamp(22px,2.8vw,38px);font-weight:700;margin-top:6px}
@media (max-width:800px){body{padding:10px}.dashboard,main,footer{gap:9px}.card{padding:16px;border-radius:18px}}