:root{--page:#0d0d0d;--surface-1:#1a1a19;--surface-2:#222321;--border:#ffffff1a;--grid:#2c2c2a;--baseline:#383835;--ink:#fff;--ink-2:#c3c2b7;--ink-muted:#898781;--good:#0ca30c;--warning:#fab219;--serious:#ec835a;--critical:#d03b3b;--s-freq:#3987e5;--s-current:#c98500;--s-power:#199e70;--s-pressure:#3987e5;--s-dclink:#9085e9;--s-temp:#e66767;--water:#1c5cab;--water-lite:#3987e5;--earth:#2b241c;--casing:#4a4a46}*{box-sizing:border-box}html,body{background:var(--page);color:var(--ink);margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.hmi{flex-direction:column;min-height:100vh;display:flex}.hmi-header{background:var(--surface-1);border-bottom:1px solid var(--border);align-items:center;gap:16px;padding:12px 20px;display:flex}.hmi-title{letter-spacing:.08em;font-size:17px;font-weight:700}.hmi-subtitle{color:var(--ink-muted);letter-spacing:.06em;font-size:12px}.hmi-header .spacer{flex:1}.conn{color:var(--ink-2);align-items:center;gap:8px;font-size:12px;display:flex}.conn .dot{background:var(--critical);border-radius:50%;width:10px;height:10px}.conn.ok .dot{background:var(--good);box-shadow:0 0 6px var(--good)}.clock{color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:13px}.badge{letter-spacing:.1em;border:1px solid var(--border);color:var(--ink-muted);text-transform:uppercase;border-radius:4px;padding:3px 8px;font-size:10px}.hmi-main{flex:1;grid-template-columns:minmax(340px,420px) 1fr;align-items:start;gap:14px;padding:14px 20px 20px;display:grid}.col{flex-direction:column;gap:14px;min-width:0;display:flex}.panel{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:14px}.panel h2{letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 10px;font-size:11px;font-weight:600}.state-banner{border:1px solid var(--border);background:var(--surface-1);border-radius:10px;align-items:center;gap:12px;padding:12px 16px;display:flex}.state-banner .lamp{border-radius:50%;flex:none;width:16px;height:16px}.state-banner .label{letter-spacing:.1em;font-size:16px;font-weight:700}.state-banner .detail{color:var(--ink-2);text-align:right;margin-left:auto;font-size:12px}.state-running .lamp{background:var(--good);box-shadow:0 0 10px var(--good);animation:2s ease-in-out infinite pulse}.state-running .label{color:var(--good)}.state-standby .lamp{background:var(--s-freq)}.state-standby .label{color:var(--s-freq)}.state-off .lamp{background:var(--ink-muted)}.state-off .label{color:var(--ink-2)}.state-fault .lamp{background:var(--critical);box-shadow:0 0 10px var(--critical);animation:.8s ease-in-out infinite pulse}.state-fault .label{color:var(--critical)}.state-warning .lamp{background:var(--warning);box-shadow:0 0 8px var(--warning)}.state-warning .label{color:var(--warning)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}.tiles{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;display:grid}.tile{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px}.tile .k{letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap;font-size:10px}.tile .v{font-variant-numeric:tabular-nums;margin-top:4px;font-size:24px;font-weight:700}.tile .u{color:var(--ink-2);margin-left:4px;font-size:12px;font-weight:400}.hoa{gap:10px;display:flex}.hoa button{letter-spacing:.12em;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-muted);cursor:pointer;border-radius:8px;flex:1;padding:16px 0;font-size:15px;font-weight:700;transition:all .15s}.hoa button:hover{border-color:var(--ink-muted)}.hoa button.active-auto{border-color:var(--good);color:var(--good);background:#0ca30c24;box-shadow:inset 0 0 12px #0ca30c26}.hoa button.active-off{border-color:var(--critical);color:var(--critical);background:#d03b3b24;box-shadow:inset 0 0 12px #d03b3b26}.hoa button.active-hand{border-color:var(--warning);color:var(--warning);background:#fab2191f;box-shadow:inset 0 0 12px #fab2191f}.hoa-note{color:var(--ink-muted);margin-top:8px;font-size:11px}.manual-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.manual-row label{color:var(--ink-2);align-items:center;gap:6px;font-size:12px;display:flex}.manual-row input{background:var(--surface-2);border:1px solid var(--border);width:64px;color:var(--ink);font-variant-numeric:tabular-nums;border-radius:6px;padding:8px;font-size:14px}.manual-row .cmd{letter-spacing:.1em;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);cursor:pointer;border-radius:6px;padding:10px 16px;font-size:12px;font-weight:700}.manual-row .cmd:hover{border-color:var(--ink-muted)}.manual-row .cmd:disabled{opacity:.5;cursor:default}.manual-row .cmd.run{border-color:var(--good);color:var(--good)}.manual-row .cmd.stop{border-color:var(--critical);color:var(--critical)}.pid-row{color:var(--ink-2);font-variant-numeric:tabular-nums;justify-content:space-between;margin-bottom:4px;font-size:12px;display:flex}.pid-bar{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;height:14px;margin-bottom:10px;position:relative;overflow:hidden}.pid-bar .fill{background:var(--s-pressure);border-radius:7px 0 0 7px;transition:width .8s;position:absolute;inset:0 auto 0 0}.pid-bar .ref-tick{background:var(--ink);width:2px;position:absolute;top:-3px;bottom:-3px}.bits{flex-direction:column;gap:6px;display:flex}.bit{color:var(--ink-2);align-items:center;gap:8px;font-size:12px;display:flex}.bit .b-dot{border-radius:50%;flex:none;width:8px;height:8px}.bit.ok .b-dot{background:var(--good)}.bit.warn .b-dot{background:var(--warning)}.bit.fault .b-dot{background:var(--critical)}.bit.info .b-dot{background:var(--s-freq)}.none-note{color:var(--ink-muted);font-size:12px}.raw-word{color:var(--ink-muted);font-variant-numeric:tabular-nums;margin-top:8px;font-size:11px}.trends{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;display:grid}.trend-panel{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;min-width:0;padding:10px 12px 6px}.trend-head{align-items:baseline;gap:8px;margin-bottom:4px;display:flex}.trend-head .swatch{border-radius:3px;flex:none;align-self:center;width:10px;height:10px}.trend-head .t{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);font-size:11px}.trend-head .cur{color:var(--ink-2);font-variant-numeric:tabular-nums;margin-left:auto;font-size:13px;font-weight:600}.range-btns{float:right;gap:6px;display:inline-flex}.range-btn{letter-spacing:.08em;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-muted);cursor:pointer;border-radius:5px;padding:3px 10px;font-size:10px}.range-btn.active{border-color:var(--s-freq);color:var(--s-freq)}.events{flex-direction:column;gap:4px;max-height:220px;display:flex;overflow-y:auto}.event{border-radius:4px;align-items:baseline;gap:10px;padding:4px 6px;font-size:12px;display:flex}.event .e-ts{color:var(--ink-muted);font-variant-numeric:tabular-nums;flex:none}.event .e-txt{color:var(--ink-2)}.event.bad{background:#d03b3b1a}.event.bad .e-txt{color:var(--serious)}.event.warn{background:#fab21914}.event.warn .e-txt{color:var(--warning)}.wx-main{align-items:baseline;gap:12px;margin-bottom:8px;display:flex}.wx-temp{font-variant-numeric:tabular-nums;font-size:32px;font-weight:700}.wx-cond{color:var(--ink-2);font-size:14px}.wx-row{color:var(--ink-muted);font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:8px 16px;font-size:12px;display:flex}.zones{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;display:grid}.zone{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;align-items:center;gap:10px;padding:10px 12px;display:flex}.zone .z-dot{background:var(--ink-muted);border-radius:50%;flex:none;width:10px;height:10px}.zone.on .z-dot{background:var(--s-power);box-shadow:0 0 6px var(--s-power)}.zone .z-name{color:var(--ink-2);font-size:13px}.zone .z-state{letter-spacing:.08em;color:var(--ink-muted);text-transform:uppercase;margin-left:auto;font-size:10px}.well-svg{width:100%;height:auto;display:block}.flow-dash{stroke-dasharray:6 10;animation:flow var(--dur,1s) linear infinite;animation-play-state:var(--anim,paused)}@keyframes flow{to{stroke-dashoffset:-16px}}.impeller{transform-origin:50%;transform-box:fill-box;animation:spin calc(var(--dur,1s) * .7) linear infinite;animation-play-state:var(--anim,paused)}@keyframes spin{to{transform:rotate(360deg)}}.bubble{animation:2.4s linear infinite rise;animation-play-state:var(--anim,paused);opacity:0}@keyframes rise{0%{opacity:0;transform:translateY(0)}15%{opacity:.8}85%{opacity:.8}to{opacity:0;transform:translateY(-46px)}}.ripple{animation:3s ease-in-out infinite rippleX;animation-play-state:var(--anim,paused)}@keyframes rippleX{0%,to{transform:translate(0)}50%{transform:translate(6px)}}.spray{animation:1.2s ease-in-out infinite sprayPulse;animation-play-state:var(--anim,paused);opacity:0}@keyframes sprayPulse{0%{opacity:0;transform:translateY(0)scale(.9)}30%{opacity:.9}to{opacity:0;transform:translateY(-8px)scale(1.15)}}.login-wrap{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:10px;width:100%;max-width:360px;padding:28px 24px;display:flex}.login-card label{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-top:14px;font-size:11px}.login-card input{background:var(--surface-2);border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:14px 12px;font-size:16px}.login-card input:focus{border-color:var(--s-freq);outline:none}.login-card button{letter-spacing:.12em;border:1px solid var(--good);color:var(--good);cursor:pointer;background:#0ca30c24;border-radius:8px;margin-top:6px;padding:14px;font-size:14px;font-weight:700}.login-card button:disabled{opacity:.5;cursor:default}.login-error{color:var(--critical);text-align:center;font-size:13px}@media (max-width:980px){.hmi-main{grid-template-columns:1fr}}@media (max-width:640px){.hmi-header{flex-wrap:wrap;gap:8px 12px;padding:10px 12px}.hmi-title{font-size:15px}.hmi-main{gap:10px;padding:10px 10px 16px}.panel{padding:12px 10px}.tile .v{font-size:20px}.state-banner .label{font-size:14px}.state-banner .detail{font-size:11px}.hoa button{padding:14px 0}.manual-row .cmd{padding:12px 14px}.manual-row input{font-size:16px}.clock{display:none}}