/* iot-demo-v212: /iot/ server closet demo panel (simulated data). */
.iot-demo{margin-top:28px;padding:24px;background:#061725;border:1px solid #24485f;border-top:3px solid #42f21b}
.iot-demo-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:18px}
.iot-demo-head strong{display:block;color:#f5f9fc;font-size:17px}
.iot-demo-live{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#b8c8d3}
.iot-demo-live i{width:8px;height:8px;border-radius:50%;background:#42f21b;animation:iotPulse 2s ease-in-out infinite}
.iot-demo-badge{padding:6px 12px;border:1px dashed #42f21b;color:#42f21b;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.iot-demo-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.iot-tile{padding:16px;background:#0a2135;border:1px solid #2a5269;border-left:4px solid #42f21b;min-width:0;transition:border-color .3s,background .3s}
.iot-tile h3{margin:0 0 6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#b8c8d3}
.iot-val{margin:0;color:#f5f9fc;line-height:1.1}
.iot-val b{font-size:34px;font-variant-numeric:tabular-nums}
.iot-val span{font-size:16px;margin-left:3px;color:#b8c8d3}
.iot-spark{display:block;width:100%;height:32px;margin:10px 0 8px}
.iot-spark polyline{fill:none;stroke:#0785ff;stroke-width:2;vector-effect:non-scaling-stroke}
.iot-meter{height:6px;margin:23px 0 21px;background:#18364e;overflow:hidden}
.iot-meter span{display:block;height:100%;width:100%;background:#42f21b;transition:background .3s}
.iot-state{margin:0;font-size:13px;color:#b8c8d3}
.iot-tile.is-alert{border-left-color:#ff4d4d;background:#2a1220}
.iot-tile.is-alert .iot-state{color:#ff8a8a;font-weight:700}
.iot-tile.is-alert .iot-spark polyline{stroke:#ff4d4d}
.iot-tile.is-alert .iot-meter span{background:#ff4d4d}
.iot-tile.is-alert .iot-val b{animation:iotBlink 1s steps(2,start) infinite}
.iot-demo-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.iot-demo-actions .btn{min-height:44px}
.iot-demo-actions .btn[aria-pressed="true"]{border-color:#ff4d4d;color:#fff}
.iot-demo-reset{background:none;border:0;color:#b8c8d3;text-decoration:underline;cursor:pointer;font:inherit;padding:10px 6px;min-height:44px}
.iot-alert{display:flex;gap:14px;margin-top:18px;padding:16px 18px;background:#0a2135;border:1px solid #ff4d4d;border-left:4px solid #ff4d4d;animation:iotIn .35s ease-out}
.iot-alert[hidden]{display:none}
.iot-alert-icon{flex:0 0 36px;height:36px;border-radius:50%;background:#ff4d4d;color:#020c18;font-weight:900;font-size:20px;display:grid;place-items:center}
.iot-alert p{margin:0}
.iot-alert-title{color:#fff;font-weight:700;font-size:17px}
.iot-alert-detail{color:#c8d9e3;margin-top:2px!important}
.iot-alert-sent{color:#42f21b;font-weight:700;margin-top:8px!important}
.iot-alert-note{font-size:12px;color:#b8c8d3;margin-top:4px!important}
.iot-demo-section .small-note{margin-top:14px}
.iot-demo .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes iotPulse{50%{opacity:.35}}
@keyframes iotBlink{to{opacity:.45}}
@keyframes iotIn{from{opacity:0;transform:translateY(8px)}}
@media(max-width:900px){.iot-demo-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.iot-demo{padding:16px}.iot-tile{padding:12px}.iot-val b{font-size:28px}.iot-demo-actions .btn{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.iot-demo *{animation:none!important;transition:none!important}}