*{box-sizing:border-box}body{margin:0;font-family:Inter,"Noto Sans TC",Arial,sans-serif;background:#07111f;color:#e8f0f7;min-height:100vh}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 18% 10%,#123c4d66,transparent 36%),radial-gradient(circle at 90% 0,#26366255,transparent 35%);pointer-events:none}header,main{position:relative;max-width:1280px;margin:auto}header{padding:34px 28px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff12}h1{font-size:27px;margin:0 0 7px}p{margin:0;color:#8fa5b7}.pill{padding:10px 15px;border:1px solid #2d485a;border-radius:999px;color:#9fb0bf;background:#0d1b2a}.pill.ok{color:#72e6a2;border-color:#246d4b;background:#0c2a20}.pill.bad{color:#ff9a9a;border-color:#783a3a;background:#351718}main{padding:25px 28px 60px}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:30px}.summary div{background:#0d1b2add;border:1px solid #1d3344;border-radius:16px;padding:20px}.summary b{display:block;font-size:31px;color:#fff}.summary span{color:#8fa5b7}.section-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:15px}.section-title h2{margin:0;font-size:20px}.section-title span{color:#7890a3;font-size:13px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}.card,.empty{background:#0c1927e8;border:1px solid #1a3346;border-radius:17px;padding:20px;box-shadow:0 16px 40px #0004}.card.alert{border-color:#a44545;box-shadow:0 0 0 1px #702a2a,0 15px 40px #0005}.card.warning{border-color:#8b692d}.top{display:flex;justify-content:space-between;gap:10px}.device{font-weight:700}.state{font-size:12px;padding:5px 9px;border-radius:20px;background:#173247;color:#a8cae0}.state.in_bed{background:#123a2b;color:#7ce8ac}.state.out_of_bed{background:#4b1d22;color:#ff9da5}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.metric{padding:12px;background:#08131f;border-radius:12px}.metric span{display:block;color:#7890a3;font-size:12px;margin-bottom:6px}.metric b{font-size:20px}.bar{height:7px;background:#1b2a37;border-radius:8px;overflow:hidden;margin-top:15px}.bar i{display:block;height:100%;background:linear-gradient(90deg,#3fd18e,#f1c75b,#ef6969);border-radius:8px}.last{font-size:12px;color:#637e91;margin-top:12px}.offline-text{color:#ff9a9a;font-weight:700}.card.offline{border-color:#783a3a;background:#19151bea}.card.offline .bar{opacity:.4}.state.offline{background:#4b1d22;color:#ff9da5}.device-block{min-width:0}.device-name{font-size:17px;font-weight:800;overflow-wrap:anywhere}.device-id{margin-top:4px;color:#637e91;font-size:11px}.card-actions{display:flex;align-items:flex-end;flex-direction:column;gap:8px}.rename-btn{appearance:none;border:1px solid #31536a;border-radius:8px;background:#102536;color:#a9cde3;padding:5px 9px;font-size:12px;cursor:pointer}.rename-btn:hover{background:#17364e;color:#fff}.empty{text-align:center;grid-column:1/-1;padding:60px 20px}.empty h3{margin-top:0}@media(max-width:650px){header{align-items:flex-start;gap:15px}.summary{grid-template-columns:1fr}.grid{grid-template-columns:1fr}}