:root{--navy:#0b2a3c;--red:#d22630;--teal:#1f6f84;--lt:#dde3e6}
*{box-sizing:border-box}body{margin:0;overflow:hidden;font:14px/1.4 system-ui,Arial,sans-serif;color:#1b2b36;background:var(--navy)}
#c{position:fixed;inset:0;width:100vw;height:100vh;display:block}
header{position:fixed;top:0;left:0;right:0;background:var(--navy);color:#fff;padding:6px 12px;font-size:16px;z-index:3;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
header span{color:var(--red)}header small{color:#8a9aa5;font-size:11px}#views{margin-left:auto;color:#fff}
button{background:var(--teal);color:#fff;border:0;border-radius:4px;padding:5px 10px;margin:2px;cursor:pointer;font-weight:600}button:hover{background:var(--red)}button:disabled{opacity:.4}
#panel{position:fixed;left:10px;top:48px;width:340px;max-height:calc(100vh - 60px);overflow:auto;background:rgba(255,255,255,.95);border-top:4px solid var(--red);border-radius:6px;padding:10px;z-index:2}
#stepT{font-weight:700;color:var(--navy);font-size:16px}#stepB{margin:4px 0}
#form label{display:flex;justify-content:space-between;align-items:center;margin:3px 0;font-size:13px}#form input{width:80px;padding:3px}
#fb{font-size:12px;margin-top:6px}.ok{color:#127a3a}.bad{color:var(--red)}.hint{color:var(--teal)}
#curveBox{position:fixed;right:10px;bottom:10px;background:#fff;border-radius:6px;border-top:4px solid var(--teal);z-index:2}
#curve{width:380px;height:271px;display:block}
#valveZoom{position:fixed;right:10px;top:48px;background:#fff;border-radius:6px;padding:8px;width:260px;z-index:2;border-top:4px solid var(--navy);font-size:12px}#vz{width:244px;height:244px}
.hide{display:none!important}
#modal{position:fixed;inset:0;background:rgba(11,42,60,.7);display:none;z-index:9;align-items:center;justify-content:center}#modal.on{display:flex}
.card{background:#fff;max-width:720px;max-height:90vh;overflow:auto;padding:18px;border-radius:8px;border-top:6px solid var(--red)}
table{border-collapse:collapse;width:100%;font-size:12px}td,th{border:1px solid #cfd9df;padding:3px 6px;text-align:left}th{background:var(--navy);color:#fff}
#meterZoom{position:fixed;right:10px;top:48px;background:#fff;border-radius:6px;padding:6px;z-index:2;border-top:4px solid var(--teal)}#mz{width:280px;height:243px;display:block}
#tabs{display:none}
@media (max-width:600px),(max-height:500px){
body{overflow:auto;height:auto;font-size:15px;background:#eef2f4;display:flex;flex-direction:column}header{order:-1}#c{flex:none}
header{position:sticky;top:0;padding:4px 8px;font-size:15px;flex-wrap:nowrap;overflow-x:auto;gap:6px;white-space:nowrap}
header small{display:none}#views{margin-left:0;display:flex}#views button{padding:7px 9px;font-size:13px}
#c{position:sticky;top:42px;width:100vw;height:40vh;z-index:1}
#tabs{display:flex;position:sticky;top:calc(42px + 40vh);z-index:3;background:#0b2a3c;padding:3px}#tabs button{flex:1;padding:9px 4px;font-size:14px}#tabs button.on{background:#d22630}
#panel,#curveBox,#valveZoom,#meterZoom{position:static;width:auto;max-height:none;margin:8px;border-radius:6px;padding:10px}
#curve{width:100%;height:auto}#mz{width:100%;max-width:340px;height:auto;margin:auto}#vz{width:70%;max-width:260px;height:auto;display:block;margin:auto}
#valveZoom .vb{display:flex}#valveZoom .vb button{flex:1;min-height:44px;font-size:16px}
body[data-tab] #panel,body[data-tab] #curveBox,body[data-tab] #valveZoom,body[data-tab] #meterZoom{display:none!important}
body[data-tab=steps] #panel,body[data-tab=curve] #curveBox,body[data-tab=valve] #valveZoom,body[data-tab=meter] #meterZoom{display:block!important}
#form label{font-size:15px;gap:8px}#form input{width:110px;min-height:44px;font-size:16px}#ctl button,#form button,#fb button{min-height:44px;font-size:15px}
.card{max-width:96vw;padding:12px}table{font-size:11px;display:block;overflow-x:auto}}
@media (max-height:500px) and (orientation:landscape){
#c{position:fixed;left:0;top:38px;width:50vw;height:calc(100vh - 38px)}
#tabs{top:38px;margin-left:50vw}#panel,#curveBox,#valveZoom,#meterZoom{margin-left:calc(50vw + 8px)}#mz{max-width:300px}#curve{max-width:100%}}