: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%}}
/* v4 polish */
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
header{gap:12px;padding:7px 12px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
button{border-radius:6px;padding:7px 12px;margin:0;font:600 13px/1.2 inherit;transition:background .15s}
button.ghost{background:#fff;color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--teal)}button.ghost:hover{background:#eef6f8;color:var(--navy)}
button:disabled{opacity:.45;cursor:default}button:disabled:hover{background:var(--teal)}
#views{display:flex;gap:4px;flex-wrap:wrap}
#panel{padding:14px;box-shadow:0 4px 14px rgba(0,0,0,.18);border-radius:8px}
#stepT{font-size:17px;margin-bottom:4px}#stepB{margin:0 0 10px;color:#33444f}
#ctl{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
#form{border-top:1px solid #e3e8eb;padding-top:8px}
#form label{gap:10px;margin:6px 0}#form input,#form select{width:96px;padding:5px 7px;border:1px solid #b9c6cd;border-radius:5px;font:inherit;text-align:right;background:#fff}
#form select{width:110px;text-align:left}#form input:focus,#form select:focus{outline:2px solid var(--teal);border-color:var(--teal)}
.btns{display:flex;gap:6px;margin-top:10px}
#fb{font-size:13px;margin-top:8px}#fb>div{margin:4px 0;padding:6px 8px;border-radius:5px}#fb .ok{background:#e8f5ec}#fb .bad{background:#fdecee}#fb .hint{background:#eaf4f6}#fb #nx{margin-top:6px}
#curveBox,#valveZoom,#meterZoom{box-shadow:0 4px 14px rgba(0,0,0,.18);border-radius:8px;padding:6px}
#curve{width:420px;height:300px}
@media (max-width:600px),(max-height:500px){#form input,#form select{width:120px;min-height:44px;font-size:16px}#curve{width:100%;height:auto}.btns button{flex:1}#ctl button{flex:1 1 auto}}
@media (max-width:600px),(max-height:500px){#views{flex-wrap:nowrap}}
@media (max-width:1100px){header small{display:none}}
.yr{display:flex;flex-wrap:wrap;gap:2px 10px;background:#fff4f4;border-left:4px solid var(--red);border-radius:5px;padding:5px 8px;margin:4px 0 8px;font-size:13px;line-height:1.35}.yr b{width:100%;color:var(--navy)}
.tapcurve #curve{touch-action:none;cursor:crosshair}
#curveRead{font-size:13px;padding:6px 8px;color:var(--navy);border-top:1px solid #e3e8eb}#curveRead button{float:right;padding:4px 8px;font-size:12px}
@media (min-width:601px) and (min-height:501px){#curveRead button{display:none}}
/* coil-flow */
#plates{font-size:12px;padding:6px 8px;display:grid;grid-template-columns:1fr 1fr;gap:6px}#plates div{border:1px solid #cfd9df;border-radius:5px;padding:5px 7px;background:#f7f9fa}#plates b{color:var(--navy)}
.lv{display:grid;gap:8px;margin:10px 0}.lv button{text-align:left;padding:10px 12px;font-size:14px}.lv small{display:block;font-weight:400;opacity:.9}
@media (max-width:600px){#plates{grid-template-columns:1fr}}
@media (min-width:601px) and (min-height:501px){#curveBox{width:440px;max-height:calc(100vh - 60px);overflow:auto}#plates{grid-template-columns:1fr}#curve{width:420px;height:300px}}
#cszBox{display:flex;gap:10px;align-items:center;padding:6px 8px;border-bottom:1px solid #e3e8eb;font-size:13px}#csz{width:150px;height:150px;flex:none}
@media (min-width:601px) and (min-height:501px){#curveBox{top:48px;bottom:auto}}
@media (max-width:600px){#csz{width:170px;height:170px}}
#cszBox{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}#cszBox figure{margin:0;text-align:center;font-size:11px}#cszBox canvas,#csz{width:100%;height:auto}
@media (max-width:600px){#cszBox{grid-template-columns:repeat(2,1fr)}#csz{width:100%;height:auto}}