:root{--bg:#0a0e13;--pn:#121a24;--pn2:#18222f;--ln:#263446;--tx:#eef4fb;--mu:#9fb2c6;--ac:#3ad1ff;--gr:#2ee66b;--am:#ffb020;--rd:#ff4d4d;--vi:#b48cff}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden;-webkit-text-size-adjust:100%}
button,select,input{font:inherit;color:inherit}
.top{position:sticky;top:0;z-index:5;background:rgba(10,14,19,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--ln);padding:10px 14px 8px;padding-top:max(10px,env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:10px}
.ttl{font-weight:800;font-size:18px;letter-spacing:.2px}
.sub{color:var(--mu);font-size:12px}
.topRow{display:flex;gap:10px;margin-top:8px;align-items:center}
.topRow select{flex:1;min-width:0;min-height:46px;background:var(--pn2);border:1px solid var(--ln);border-radius:12px;padding:0 12px;font-size:17px;font-weight:700}
.badge{min-width:96px;text-align:center;font-weight:900;font-size:18px;padding:10px 12px;border-radius:12px;letter-spacing:1px;transition:background .3s}
.badge.RUN{background:var(--gr);color:#04210f}.badge.IDLE{background:var(--am);color:#2a1a00}.badge.FAULT{background:var(--rd);color:#fff;animation:blinkbg 0.8s infinite}
.dummy{margin-top:6px;font-size:12px;color:var(--am);font-weight:700;letter-spacing:.3px}
.grid{display:grid;grid-template-columns:1fr;gap:12px;padding:12px;max-width:1500px;margin:0 auto}
.panel{background:var(--pn);border:1px solid var(--ln);border-radius:16px;padding:12px;min-width:0}
.phead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
h2{font-size:16px;margin:0;color:#cfe3f5}
.chip{font-size:13px;font-weight:800;padding:5px 10px;border-radius:999px;background:#0f3b26;color:var(--gr);white-space:nowrap}
.chip.bad{background:#3d1212;color:#ff8a8a}.chip.warn{background:#3a2a05;color:var(--am)}.chip.dim{background:var(--pn2);color:var(--mu);font-weight:600}
.cardWrap{position:relative;display:flex;gap:8px;align-items:stretch}
#cardCv{flex:1;min-width:0;width:100%;height:auto;aspect-ratio:4/3;background:#070b10;border-radius:12px;display:block}
#pumpSvg{width:44px;flex:0 0 44px}
.cyl{fill:#1d2a38;stroke:#4b6380;stroke-width:1.5}.pis{fill:var(--ac)}.rod{fill:#c9d6e3}.wh{fill:#3b4b5e}.wh2{fill:#2a3645}
.pled{fill:var(--gr)}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--mu);margin-top:6px}
.lg{display:inline-block;width:16px;height:4px;border-radius:2px;margin-right:5px;vertical-align:middle}
.lg.cur{background:var(--ac)}.lg.old{background:#3d6d85}.lg.hh{background:var(--rd)}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kpi{background:var(--pn2);border-radius:12px;padding:8px 10px;min-width:0}
.kpi label{display:block;font-size:12px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{font-size:24px;font-variant-numeric:tabular-nums;font-weight:800}
.kpi.big{grid-column:1/-1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.kpi.big label{width:100%;font-size:13px}
.kpi.big b{font-size:64px;line-height:1;color:var(--ac)}
.kpi.big small{font-size:28px;color:var(--mu)}
.note{font-size:12px;color:var(--mu);margin:8px 2px 0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button,.act{min-height:50px;border-radius:12px;border:1px solid var(--ln);background:var(--pn2);font-weight:700;font-size:15px;padding:6px 8px;cursor:pointer;touch-action:manipulation}
.seg button.on{background:var(--ac);color:#04202b;border-color:var(--ac)}
.act:active,.seg button:active,.stp button:active{transform:scale(.97)}
.act.warn{border-color:var(--rd);color:#ff9b9b}
.ctl{margin-top:14px}.ctl label{display:flex;justify-content:space-between;font-size:14px;color:var(--mu)}.ctl b{color:var(--tx);font-size:16px}
input[type=range]{width:100%;height:36px;accent-color:var(--ac)}
.btnRow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.btnRow .act:last-child{grid-column:1/-1}
.sps{display:grid;grid-template-columns:1fr;gap:10px}
.sp label{font-size:13px;color:var(--mu)}
.stp{display:grid;grid-template-columns:52px 1fr 52px;gap:6px;margin-top:4px}
.stp button{min-height:48px;border-radius:12px;border:1px solid var(--ln);background:var(--pn2);font-size:24px;font-weight:800}
.stp input{min-width:0;text-align:center;min-height:48px;border-radius:12px;border:1px solid var(--ln);background:#0b1118;font-size:18px;font-weight:700}
canvas.trend{width:100%;height:170px;display:block;background:#070b10;border-radius:12px}
.lcd{margin:0;background:#0b2a12;color:#8dff9a;border:6px solid #1a1f26;border-radius:10px;padding:10px 8px;font:700 clamp(13px,4.1vw,18px)/1.35 ui-monospace,"DejaVu Sans Mono",Menlo,monospace;letter-spacing:.5px;text-shadow:0 0 6px rgba(120,255,140,.55);white-space:pre;overflow:hidden}
.ledRow{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--mu)}
.led{display:inline-block;width:14px;height:14px;border-radius:50%;background:#2a333d;box-shadow:inset 0 0 3px #000}
.led.s{width:12px;height:12px;margin-right:6px;vertical-align:-1px}
.led.g{background:var(--gr);box-shadow:0 0 10px var(--gr)}.led.a{background:var(--am);box-shadow:0 0 10px var(--am)}.led.r{background:var(--rd);box-shadow:0 0 10px var(--rd)}.led.b{background:var(--ac);box-shadow:0 0 10px var(--ac)}
.blink{animation:blink 1.2s infinite}.fast{animation:blink .45s infinite}
@keyframes blink{0%,55%{opacity:1}60%,100%{opacity:.18}}
@keyframes blinkbg{0%,60%{filter:none}61%,100%{filter:brightness(.6)}}
table.mb{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.mb th,.mb td{padding:6px 4px;border-bottom:1px solid var(--ln);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb th:nth-child(1){width:52px}.mb th:nth-child(3){width:58px}.mb th:nth-child(4){width:86px}
.mb td:nth-child(3),.mb td:nth-child(4){font-variant-numeric:tabular-nums;text-align:right}
.mb th:nth-child(3),.mb th:nth-child(4){text-align:right}
.mb td.chg{color:var(--am);transition:none}.mb td{transition:color 1s}
.log{list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto;font-size:13px}
.log li{padding:6px 2px;border-bottom:1px solid var(--ln);display:flex;gap:8px}
.log time{color:var(--mu);font-variant-numeric:tabular-nums;flex:0 0 auto}
.log .w{color:var(--am)}.log .e{color:#ff8a8a}.log .o{color:var(--gr)}
footer{padding:16px 14px calc(24px + env(safe-area-inset-bottom));color:var(--mu);font-size:13px;text-align:center;border-top:1px solid var(--ln)}
footer b{color:var(--tx)} footer a{color:var(--ac)}
@media (min-width:700px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.sps{grid-template-columns:1fr 1fr}.seg{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.grid{grid-template-columns:1fr 1fr}.span2{grid-column:span 2}.top{display:grid;grid-template-columns:1fr auto;align-items:center}.topRow{margin:0}.topRow select{min-width:220px}.dummy{grid-column:1/-1}}
@media (min-width:1300px){.grid{grid-template-columns:1.25fr 1fr 1fr}#cardPanel{grid-row:span 2}.span2{grid-column:span 1}#cardCv{aspect-ratio:auto;height:620px}.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.seg{grid-template-columns:1fr 1fr}}