*{box-sizing:border-box}body{margin:0;background:#e8eff5;color:#233d55;font:16px/1.6 Tahoma,Segoe UI,sans-serif}main{max-width:1000px;margin:24px auto;background:#f5f7fa;border-radius:24px;overflow:hidden;box-shadow:0 12px 55px #33587715}header{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;background:#d9eafa;gap:16px}h1{margin:0;font:600 22px Segoe UI,sans-serif}.serial{background:#fff;padding:6px 24px;border-radius:30px}.sub,.label{font-size:14px;color:#70879b}.status{font-size:13px;color:#277557}.status.wait{color:#a26618}button{font:inherit;background:#fff;color:#366899;border:1px solid #c9dcec;border-radius:10px;padding:8px 14px;cursor:pointer}button:hover{background:#edf6ff}button:focus-visible{outline:3px solid #598fca}.layout{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;padding:24px}.flow{position:relative;height:420px;background:linear-gradient(#d9eafb,#e8f1f1);border-radius:20px;overflow:hidden}.flow-title{text-align:center;padding:18px;font-size:14px;color:#557892}.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.wire{fill:none;stroke:#9cb6c8;stroke-width:2}.pulse{fill:none;stroke:#5c9fe5;stroke-width:3;stroke-dasharray:5 18;animation:travel 2s linear infinite;opacity:0}.pulse.active{opacity:1}.pulse.reverse{animation-direction:reverse}@keyframes travel{to{stroke-dashoffset:-46}}.node{position:absolute;text-align:center;width:31%;font-size:14px}.node .icon{font-size:32px;line-height:1.4;display:block}.node strong{font:600 23px/1.5 Segoe UI,sans-serif;display:block;color:#21384b}.node small{font-size:13px;color:#7890a3}.solar{left:1%;top:60px}.grid{right:1%;top:60px}.battery-node{left:1%;bottom:27px}.load{left:34.5%;bottom:27px}.home{right:1%;bottom:27px}.device{position:absolute;left:38%;top:125px;width:24%;height:122px;background:#fff;border:2px solid #82b5e9;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 12px #548ac115}.screen{background:#254066;border-radius:5px;width:60%;height:38px;color:#75d5fa;font-size:13px;display:flex;align-items:center;justify-content:center}.device small{font:600 12px Segoe UI,sans-serif;color:#8094a4;margin-top:14px}.side{display:flex;flex-direction:column;gap:16px}.card{padding:20px;background:#fff;border:1px solid #e4ebf1;border-radius:18px}.card h2{font-size:16px;font-weight:500;margin:0 0 18px}.card h2:before{content:"";display:inline-block;width:7px;height:7px;background:#72aceb;border-radius:50%;margin-right:8px}.readings{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}.num{font:500 23px/1.4 Segoe UI,sans-serif;color:#426e9a;font-variant-numeric:tabular-nums}.unit{font-size:14px;color:#7a99b5}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.charge{display:flex;gap:20px;align-items:center}.battery-icon{width:42px;height:66px;border:2px solid #6595c3;border-radius:6px;padding:4px;display:flex;align-items:end;position:relative;flex-shrink:0}.battery-icon:before{content:"";position:absolute;top:-7px;width:18px;height:5px;left:10px;background:#6595c3;border-radius:2px}.battery-icon div{flex-shrink:0;background:#74aef0;width:100%;height:0;transition:height .5s}.details{grid-column:1/-1}.details .readings{grid-template-columns:repeat(4,1fr)}footer{padding:0 26px 24px;font-size:13px;color:#7a8fa0;display:flex;justify-content:space-between;gap:10px}.notice{padding:12px 24px;background:#fff0d6;color:#92611b;font-size:14px}[hidden]{display:none!important}.stale .pulse{animation-play-state:paused;opacity:0}.stale .card:not(.room-sensor) .num,.stale .node strong{opacity:.5}.nav{padding:15px;background:#fff;border-top:1px solid #e7edf2;text-align:center;color:#5394dd;font-size:14px}.flow-note{font-size:13px;color:#8395a4;padding:9px 4px}@media(max-width:760px){main{margin:0;border-radius:0}.layout{grid-template-columns:1fr;padding:16px;gap:14px}header{padding:18px 16px}.serial{padding:5px 12px}h1{font-size:18px}.flow{height:400px}.details .readings{grid-template-columns:repeat(2,1fr);row-gap:22px}footer{flex-direction:column;padding:0 20px 20px}.device{top:120px}.node strong{font-size:21px}}@media(prefers-reduced-motion:reduce){.pulse{animation:none}.battery-icon div{transition:none}}.details.battery-detail .readings{grid-template-columns:repeat(3,minmax(0,1fr))}.details.ac-detail .readings{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.temperature-card{display:flex;align-items:center;justify-content:center;gap:22px}.temp-label{background:#70a9ec;color:#fff;padding:5px 20px;border-radius:24px;font-size:14px}.details .num{font-size:23px}.battery-icon{display:block}.battery-icon #fill{position:absolute;left:4px;bottom:4px;width:calc(100% - 8px);max-height:calc(100% - 8px)}@media(max-width:430px){.details.battery-detail{padding:16px 10px}.details.battery-detail .num{font-size:21px}.details.battery-detail .label{font-size:13px}.temperature-card{gap:12px;padding:15px 12px}.temp-label{padding:5px 12px}}.room-sensor{border-top:3px solid #54b5c5}.details.room-sensor .readings{grid-template-columns:repeat(3,minmax(0,1fr))}.has-alerts{box-shadow:0 0 0 2px #f0a5a5,0 12px 55px #9e1c1918}.has-alerts header{background:#ffe6e6}.alert-banner{margin:20px 24px 0;padding:18px 22px;border:1px solid #e99b9b;border-left:5px solid #c22c35;border-radius:14px;background:#fff0f0;color:#87202a}.alert-banner h2{font-size:18px;margin:0 0 10px}.alert-banner ul{margin:0;padding-left:22px}.alert-banner li+li{margin-top:10px}.alert-banner li span{display:block;font-size:14px;color:#92434b}.node-warning{background:#ffe3e3;border:1px solid #e68b94;border-radius:14px;padding:5px 2px;box-shadow:0 2px 10px #bd243018}.node-warning strong,.node-warning small{color:#a01b2b!important}.card-warning{background:#fff0f0;border-color:#e68b94!important}.card-warning .num,.card-warning h2,.heat-warning{color:#a01b2b}.heat-warning{margin:0 0 22px;font-weight:700}.card-warning h2:before{background:#c22c35}@media(max-width:760px){.alert-banner{margin:16px 16px 0;padding:16px}.node-warning small{font-size:11px}}.safety-guide{border-top:3px solid #5a89b8}.safety-guide summary{font-weight:600;cursor:pointer;padding:13px 0;color:#284d71}.safety-guide details{border-top:1px solid #e3eaf1}.safety-guide details p{font-size:14px;margin:0 0 12px;color:#425b70;line-height:1.85}.safety-guide a{color:#235d97;text-decoration:underline}.guide-emergency{background:#fff1ef;border-left:4px solid #c3463d;border-radius:8px;padding:15px;margin:18px 0;color:#8a2c25;font-size:14px}.guide-link{display:inline-block;margin-top:14px;color:#87202a;font-weight:700}.safety-guide summary:focus-visible{outline:3px solid #598fca;outline-offset:2px}.severity-info{box-shadow:0 0 0 2px #a7c9e6}.severity-info header{background:#d9eafa}.severity-info .alert-banner{background:#edf6ff;border-color:#a7c9e6;color:#24577e}.severity-info .alert-banner li span,.severity-info .guide-link{color:#365f82}.severity-warning{box-shadow:0 0 0 2px #eccb80}.severity-warning header{background:#fff1ce}.severity-warning .alert-banner{background:#fff7e3;border-color:#e5b650;color:#805412}.severity-warning .alert-banner li span,.severity-warning .guide-link{color:#805412}.card-caution{background:#fff7e3;border-color:#e5b650!important}.card-warm{background:#edf6ff;border-color:#a7c9e6!important}.temp-bands{font-size:14px;line-height:1.9;padding-left:22px}.battery-high{--battery-color:#23864c;--battery-fill:#4caf70}.battery-mid{--battery-color:#916800;--battery-fill:#edbf38;background:#fffbed;border-color:#ead693}.battery-low{--battery-color:#b52d38;--battery-fill:#e25763;background:#fff0f0;border-color:#e8a1a8}.battery-unknown{--battery-color:#7b8794;--battery-fill:#a9b3be}.charge .battery-icon{border-color:var(--battery-color)}.charge .battery-icon:before{background:var(--battery-color)}.charge .battery-icon #fill{background:var(--battery-fill)}.charge .num,.battery-note{color:var(--battery-color)}.battery-note{font-size:12px;display:block;line-height:1.4;margin-top:5px}.simulation-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px 24px;background:#edf2f9;border-bottom:1px solid #ccdceb}.simulation-controls>div{display:flex;flex-direction:column;margin-right:auto}.simulation-controls strong{font-size:15px;color:#28517c}.simulation-controls span{font-size:12px;color:#697f94}.simulation-controls label{font-size:13px;color:#42607a}.simulation-controls select{font:inherit;min-width:235px;max-width:100%;padding:7px 10px;border:1px solid #bbcee0;border-radius:9px;background:#fff;color:#23405d}.simulation-controls select:focus-visible{outline:3px solid #598fca}.simulation-ribbon{background:#643e82;color:#fff;text-align:center;padding:10px 18px;font-weight:600;font-size:14px}.simulation-mode{outline:3px solid #9976b4;outline-offset:-3px}.simulation-mode .status{color:#6b3d89}.simulation-mode .flow:after{content:"ตัวอย่าง";position:absolute;top:8px;right:10px;background:#643e82;color:#fff;border-radius:7px;padding:2px 8px;font-size:12px}@media(max-width:760px){.simulation-controls{padding:12px 16px}.simulation-controls>div{flex-basis:100%}.simulation-controls select{flex:1;min-width:0}}.household-wire{stroke:#e58f91;stroke-dasharray:4 8;stroke-width:2.5}.household-pulse{stroke:#d23b45;stroke-width:4;stroke-dasharray:8 12;animation-duration:1.25s}@media(prefers-reduced-motion:reduce){.household-pulse{animation:none}}