*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:#0b1220;color:#eaf1fb}
.wrap{max-width:1100px;margin:auto;padding:18px}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
h1{margin:0;font-size:30px}.sub{color:#93a4bb;margin-top:3px}
.top-actions{display:flex;align-items:center;gap:8px}
.badge{padding:7px 10px;border-radius:999px;font-size:13px;background:#173424;color:#b7f6cb}.badge.warn{background:#3b2d10;color:#ffe7a3}
.ghost-btn,.collapse-btn,.switch-btn,.primary-btn{font:inherit;cursor:pointer}
.ghost-btn{background:transparent;border:1px solid #2c3b52;color:#aebbd0;border-radius:9px;padding:7px 10px}
.scope-bar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;background:#101a29;border:1px solid #1f2d42;border-radius:14px;padding:10px;margin-bottom:12px}
.scope-item{min-width:180px}.scope-item label{display:block;font-size:11px;color:#7f91a9;margin:0 0 4px 3px;text-transform:uppercase;letter-spacing:.04em}
.scope-item select{width:100%;background:#162235;color:#eef4fb;border:1px solid #293a52;border-radius:10px;padding:9px 10px}
.user-box{margin-left:auto;text-align:right;display:flex;flex-direction:column}.user-box small{color:#75869d}.hidden{display:none!important}
.device-switch{display:flex;gap:7px;margin:8px 0 20px;padding:5px;background:#101a29;border:1px solid #1f2d42;border-radius:14px;width:max-content;max-width:100%}
.switch-btn,.collapse-btn{border:0}.switch-btn{padding:9px 13px;border-radius:10px;background:transparent;color:#91a3ba;font-size:13px;font-weight:600;white-space:nowrap}.switch-btn:hover{background:#18263a;color:#dfe9f5}.switch-btn.active{background:#243650;color:#fff;box-shadow:0 2px 8px #0004}
.device{margin:18px 0 28px}.device-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:12px}.device-head h2{font-size:19px;margin:0 0 2px}.device-id{font-size:12px;color:#75869d}
.collapse-btn{padding:7px 10px;border-radius:9px;background:#121d2e;color:#91a3ba;border:1px solid #1f2d42;font-size:12px}.collapse-btn:hover{color:#fff;background:#18263a}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.grid.collapsed{display:none}
.card{background:#121d2e;border:1px solid #1f2d42;border-radius:16px;padding:14px;min-height:104px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 5px 18px #0003}.label{font-size:13px;color:#91a3ba}.value{font-size:26px;font-weight:700;letter-spacing:-.5px}.unit{font-size:13px;color:#91a3ba;margin-left:4px}.muted{font-size:11px;color:#65758a}.card.stale{opacity:.58}
.login-page{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:min(390px,100%);background:#111d2f;border:1px solid #25364f;border-radius:20px;padding:26px;box-shadow:0 20px 55px #0006}.login-logo{font-size:34px}.login-card h1{margin-top:4px}.login-card p{color:#91a3ba}.login-card label{display:block;font-size:13px;color:#a9b8cb;margin:14px 0}.login-card input{display:block;width:100%;margin-top:5px;padding:11px 12px;border-radius:10px;border:1px solid #2a3b53;background:#0d1625;color:#fff}.primary-btn{width:100%;border:0;border-radius:10px;padding:11px;background:#e9f1fb;color:#0d1625;font-weight:700}.login-error{margin-top:12px;color:#ffaaa6;font-size:13px}
@media(max-width:520px){.wrap{padding:12px}.top{margin-bottom:10px}h1{font-size:26px}.scope-bar{align-items:stretch}.scope-item{min-width:0;flex:1 1 45%}.user-box{width:100%;margin-left:0;text-align:left}.device-switch{width:100%;overflow:auto}.switch-btn{flex:1}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card{min-height:94px;padding:12px}.value{font-size:22px}.collapse-btn{font-size:0}.collapse-btn::after{content:"▴";font-size:14px}.collapse-btn.collapsed::after{content:"▾"}}


.page-switch{display:flex;gap:7px;margin:0 0 12px;padding:5px;background:#101a29;border:1px solid #1f2d42;border-radius:14px;width:max-content;max-width:100%}
.page-btn{border:0;cursor:pointer;font:inherit;padding:9px 15px;border-radius:10px;background:transparent;color:#91a3ba;font-size:13px;font-weight:700}
.page-btn:hover{background:#18263a;color:#dfe9f5}.page-btn.active{background:#243650;color:#fff}

.control-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#101a29;border:1px solid #1f2d42;border-radius:14px;padding:12px 14px;margin:8px 0 18px}
.control-banner strong{display:block}.control-banner span{display:block;color:#8193aa;font-size:12px;margin-top:2px}
.command-status{font-size:12px;color:#a9bad0;background:#152238;border-radius:999px;padding:7px 10px;white-space:nowrap}
.command-status.ok{background:#173424;color:#b7f6cb}.command-status.error{background:#402022;color:#ffc0bd}.command-status.pending{background:#3b2d10;color:#ffe7a3}

.control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.control-card{background:#121d2e;border:1px solid #1f2d42;border-radius:16px;padding:14px;box-shadow:0 5px 18px #0003}
.control-card .control-title{font-size:13px;color:#91a3ba;margin-bottom:6px}
.control-card .current{font-size:12px;color:#73859d;margin-bottom:10px}
.control-row{display:flex;gap:8px;align-items:center}
.control-row select,.control-row input{min-width:0;flex:1;background:#0d1726;color:#eef4fb;border:1px solid #2b3b53;border-radius:10px;padding:10px}
.control-row button{border:0;border-radius:10px;padding:10px 12px;background:#e9f1fb;color:#0d1625;font-weight:700;cursor:pointer}
.control-row button:disabled{opacity:.45;cursor:not-allowed}
.control-help{font-size:11px;color:#65758a;margin-top:8px}

@media(max-width:520px){
  .page-switch{width:100%}.page-btn{flex:1}
  .control-grid{grid-template-columns:1fr}
  .control-banner{align-items:flex-start;flex-direction:column}
}


.segment-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px;margin-top:8px}
.segment-btn{border:1px solid #2b3b53;background:#0d1726;color:#aebed2;border-radius:10px;padding:10px 8px;font-weight:700;cursor:pointer;transition:.15s}
.segment-btn:hover{background:#18263a;color:#fff;transform:translateY(-1px)}
.segment-btn.active{background:#e9f1fb;color:#0d1625;border-color:#e9f1fb}
.segment-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.stepper{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:8px;margin-top:8px}
.step-btn{height:46px;border:1px solid #2b3b53;background:#0d1726;color:#fff;border-radius:12px;font-size:26px;cursor:pointer}
.step-value{height:46px;border:1px solid #2b3b53;background:#0d1726;border-radius:12px;display:flex;align-items:baseline;justify-content:center;gap:5px}
.step-value span{font-size:24px;font-weight:800}.step-value small{font-size:12px;color:#91a3ba}
.apply-btn{width:100%;margin-top:8px;border:0;border-radius:11px;padding:10px 12px;background:#e9f1fb;color:#0d1625;font-weight:800;cursor:pointer}
.apply-btn:disabled{opacity:.5;cursor:not-allowed}
.fan-control{margin-top:8px}.fan-readout{display:flex;align-items:baseline;gap:7px;margin-bottom:7px}
.fan-number{font-size:28px;font-weight:800}.fan-label{font-size:12px;color:#91a3ba}
.fan-control input[type=range]{width:100%;accent-color:#e9f1fb}
.fan-scale{display:flex;justify-content:space-between;color:#65758a;font-size:10px;margin-top:2px}

.grafana-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.grafana-card{display:grid;grid-template-columns:52px 1fr 28px;align-items:center;gap:12px;text-decoration:none;color:#eaf1fb;background:#121d2e;border:1px solid #1f2d42;border-radius:16px;padding:16px;box-shadow:0 5px 18px #0003;transition:.15s}
.grafana-card:hover{background:#18263a;border-color:#334963;transform:translateY(-1px)}
.grafana-card.disabled{opacity:.45;pointer-events:none}
.grafana-icon{width:48px;height:48px;border-radius:13px;background:#0d1726;display:flex;align-items:center;justify-content:center;font-size:24px}
.grafana-card strong{display:block;font-size:16px}.grafana-card span{display:block;color:#8193aa;font-size:12px;margin-top:3px}
.grafana-arrow{font-size:20px;color:#91a3ba;text-align:right}


/* v0.4.4 embed mode */
body.embed-mode{background:transparent}
body.embed-mode .embed-hide{display:none!important}
body.embed-mode .wrap{max-width:none;margin:0;padding:8px}
body.embed-mode .device{margin-top:8px}
body.embed-mode .control-banner{margin-top:4px}
body.embed-mode .card,
body.embed-mode .control-card,
body.embed-mode .grafana-card{box-shadow:none}