*{box-sizing:border-box}body{margin:0;background:#0b1117;color:#e5edf5;font-family:Arial,Helvetica,sans-serif}.screen{width:800px;height:480px;margin:0 auto;background:#0b1117;overflow:hidden}.topbar{height:54px;background:#111a24;border-bottom:1px solid #385063;display:flex;align-items:center;justify-content:space-between;padding:8px 14px}.topbar h1{margin:0;font-size:18px}.subtitle{font-size:11px;color:#8fa1b3}.connection{display:flex;gap:8px;align-items:center}.navlink,.iconlink{color:#56ccf2;text-decoration:none;border:1px solid #385063;border-radius:8px;padding:7px 9px;background:#15202b}.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;border:1px solid #385063;padding:5px 10px;font-size:12px;min-width:34px}.pill.ok,.ok{background:#28c76f;color:#06110b}.pill.warn,.warn{background:#f2c94c;color:#171300}.pill.danger,.danger{background:#eb5757;color:white}.primary{background:#2f80ed;color:white}.muted{color:#8fa1b3}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px 12px 6px}.card{background:linear-gradient(#192635,#111922);border:1px solid #263746;border-radius:12px;box-shadow:0 3px 8px #0008}.metric{height:82px;padding:11px 13px}.metric .label,.panel h2,.sim-panel h2,.raw-state h2{display:block;color:#8fa1b3;font-size:12px;font-weight:normal;margin:0 0 6px}.metric strong{display:block;font-size:27px}.metric em{font-size:14px;color:#8fa1b3;font-style:normal}.metric small{color:#8fa1b3}.system-actions{display:flex;gap:6px;align-items:center;margin-top:7px}.panels{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:6px 12px}.panel{height:310px;padding:12px}.state-line{display:flex;justify-content:space-between;gap:8px;margin:8px 0;font-size:12px}.state-line span{color:#8fa1b3}.state-line strong{font-size:12px;text-align:right}.lamp-row{display:flex;gap:8px;align-items:center;font-size:12px;margin:9px 0;color:#cfd8e3}.lamp{width:13px;height:13px;border-radius:50%;display:inline-block;background:#2c3642;border:1px solid #385063}.lamp.on{background:#28c76f;border-color:#28c76f;box-shadow:0 0 8px #28c76f88}.lamp.alarm.on{background:#eb5757;border-color:#eb5757;box-shadow:0 0 8px #eb575788}.button-grid{display:grid;gap:6px;margin-top:10px}.button-grid.two{grid-template-columns:repeat(2,1fr)}.button-grid.four{grid-template-columns:repeat(4,1fr)}button{border:0;border-radius:8px;padding:9px 8px;font-weight:bold;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}label{display:block;font-size:12px;color:#8fa1b3;margin:8px 0}input,select{width:100%;background:#101820;border:1px solid #385063;border-radius:6px;color:#e5edf5;padding:7px}.hidden{display:none!important}.manual-progress{background:#0d151d;border:1px solid #263746;border-radius:8px;padding:7px;margin-top:8px;font-size:12px}.sim-layout{display:grid;grid-template-columns:190px 190px 190px 190px;gap:8px;padding:10px 12px}.sim-panel{height:250px;padding:12px;overflow:hidden}.switch-line{display:flex;align-items:center;gap:8px;color:#e5edf5;font-size:13px}.switch-line input{width:auto}.sim-panel output{display:block;color:#56ccf2;font-weight:bold;margin-top:3px}.raw-state{margin:0 12px;height:156px;padding:10px 12px}.raw-state pre{margin:0;height:112px;overflow:auto;background:#05070a;border:1px solid #263746;border-radius:8px;padding:8px;font-size:10px;color:#cfd8e3}.rules{font-size:11px;line-height:1.35}.rule{display:flex;justify-content:space-between;border-bottom:1px solid #263746;padding:3px 0}.rule .pass{color:#28c76f}.rule .fail{color:#eb5757}.config-screen{display:grid;grid-template-columns:260px 260px 260px;gap:10px;padding:10px 12px}.config-panel{height:360px;padding:12px;overflow:auto}.cfg-row{display:grid;grid-template-columns:1fr 54px 54px;gap:6px;align-items:center;margin:6px 0;font-size:12px}.cfg-row input{width:auto}.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.alarm-table{margin:10px 12px;height:360px;padding:12px;overflow:auto}.alarm-row{display:grid;grid-template-columns:80px 1fr 80px 90px;gap:8px;align-items:center;padding:7px;border-bottom:1px solid #263746;font-size:12px}.alarm-row.active{background:#eb575722}.footer-actions{padding:0 12px;display:flex;gap:10px}.wide{grid-column:span 2}
/* v0.5 configuration tabs */
.config-hmi-screen{height:480px;overflow:hidden}.tabbar{height:42px;display:flex;gap:4px;align-items:center;padding:6px 8px;background:#0e1620;border-bottom:1px solid #263746}.tabbar .tab{padding:8px 9px;background:#15202b;color:#cfd8e3;border:1px solid #263746;border-radius:8px;font-size:11px}.tabbar .tab.active{background:#2f80ed;color:white;border-color:#2f80ed}.tabcontent{height:324px;padding:10px 12px;overflow:auto}.tab-panel{display:none;grid-template-columns:repeat(3,1fr);gap:10px}.tab-panel.active{display:grid}.config-card{min-height:120px;padding:12px;overflow:visible}.config-card h2{display:block;color:#8fa1b3;font-size:12px;font-weight:normal;margin:0 0 8px}.wide-card{grid-column:1/-1}.element-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 14px}.form-grid{display:grid;gap:10px}.form-grid.three{grid-template-columns:repeat(3,1fr)}.form-grid.four{grid-template-columns:repeat(4,1fr)}.hint{font-size:12px;color:#8fa1b3;line-height:1.35}.unit{font-size:10px;color:#8fa1b3}.placeholder{display:flex;flex-direction:column;justify-content:center}.config-footer{height:60px;border-top:1px solid #263746;background:#111a24;display:flex;align-items:center;gap:14px;padding:10px 12px}.config-footer button{min-width:180px}.cfg-row{grid-template-columns:1fr 62px 62px}.cfg-row label{display:flex;align-items:center;gap:3px;margin:0}.cfg-row input{width:auto}

/* v0.5 simulator is not constrained to PLC HMI size */
.sim-screen{width:1120px;height:auto;min-height:760px;overflow:visible}.sim-screen .sim-layout{grid-template-columns:repeat(4,1fr);gap:12px;padding:12px}.sim-screen .sim-panel{height:auto;min-height:320px;overflow:visible}.sim-screen .raw-state{height:auto;margin:0 12px 20px}.sim-screen .raw-state pre{height:auto;min-height:260px;max-height:none;overflow:visible;white-space:pre-wrap;word-break:break-word}.sim-screen input[type=range]{height:26px}.sim-screen output{font-size:14px;margin-bottom:10px}

/* v0.6 configuration fixes */
.config-footer{justify-content:flex-end}.config-footer .hint{margin-right:auto}.config-footer button.hidden,.config-footer .hidden{display:none!important}.enable-cell.hidden{visibility:hidden;display:block!important}.cfg-row{grid-template-columns:1fr 70px 70px}.tabbar{overflow:hidden}.tabbar .tab{white-space:nowrap}.config-card.placeholder{min-height:150px}.config-card label.switch-line input:disabled + span{opacity:.5}.tab-panel[data-tab-panel="general"].active{grid-template-columns:repeat(3,1fr)}.tab-panel[data-tab-panel="chlorinator"].active,.tab-panel[data-tab-panel="redox"].active{grid-template-columns:repeat(3,1fr)}


/* v0.7 configuration refinements */
.config-screen{position:relative;padding-bottom:58px}
.tabs{display:flex;gap:5px;padding:8px 10px 0;background:#0b1117;overflow:hidden}
.tab{background:#15202b;color:#e5edf5;border:1px solid #263746;border-radius:8px 8px 0 0;padding:8px 9px;font-size:11px}
.tab.active{background:#2f80ed;color:#fff;border-color:#2f80ed}
.tab-page{display:none;padding:8px 12px 0;height:340px;overflow:auto}
.tab-page.active{display:block}
.config-card{padding:12px;margin-bottom:10px}
.config-card h2{margin:0 0 8px;color:#8fa1b3;font-size:13px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 12px}
.form-grid.three{grid-template-columns:repeat(3,1fr)}
.element-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 16px;font-size:13px}
.di-map{display:grid;gap:8px}
.di-row{display:grid;grid-template-columns:145px 1fr 1.25fr;gap:10px;align-items:center;background:#101820;border:1px solid #263746;border-radius:8px;padding:8px}
.status-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.status-list span{background:#101820;border:1px solid #263746;border-radius:14px;padding:5px 9px;font-size:11px;color:#8fa1b3}
.config-footer{position:absolute;bottom:0;left:0;right:0;height:54px;background:#111a24;border-top:1px solid #385063;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:8px 14px}
.config-footer .muted{margin-right:auto}
.hidden{display:none!important}
.validation-box{margin:8px 12px 0;padding:8px 12px;border:1px solid #eb5757;background:#eb575722;border-radius:8px;color:#fff;font-size:12px}
.validation-box ul{margin:4px 0 0 18px;padding:0}
.disabled-block{opacity:.5}
.disabled-block input,.disabled-block select{pointer-events:none}
.hint{font-size:12px;color:#8fa1b3;margin:6px 0 10px}


/* v0.8 configuration layout reset */
.config-screen-v08{position:relative;padding-bottom:52px}
.config-screen-v08 .validation-box{position:absolute;z-index:5;left:132px;right:10px;top:58px;max-height:72px;overflow:auto}
.config-shell{display:grid;grid-template-columns:118px 1fr;gap:8px;padding:8px 10px 0;height:374px}
.config-sidebar{display:flex;flex-direction:column;gap:5px;overflow:hidden}
.config-sidebar .tab{width:100%;text-align:left;background:#15202b;color:#e5edf5;border:1px solid #263746;border-radius:8px;padding:8px 7px;font-size:11px;line-height:1.05}
.config-sidebar .tab.active{background:#2f80ed;border-color:#2f80ed;color:#fff}
.config-content{min-width:0;height:374px;overflow:hidden}
.config-content .tab-page{display:none;height:374px;overflow:auto;padding:0 2px 8px 0}
.config-content .tab-page.active{display:block}
.config-screen-v08 .config-card{padding:12px;margin:0 0 8px 0}
.config-screen-v08 .config-card h2{margin:0 0 8px;color:#8fa1b3;font-size:13px}
.config-screen-v08 .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}
.config-screen-v08 label{font-size:12px;color:#8fa1b3;margin:0}
.config-screen-v08 input,.config-screen-v08 select{margin-top:4px}
.config-screen-v08 label small{float:right;color:#8fa1b3;margin-top:4px}
.config-screen-v08 .checkline{display:flex;align-items:center;gap:8px;color:#e5edf5;background:#101820;border:1px solid #263746;border-radius:8px;padding:9px}
.config-screen-v08 .checkline input{width:auto;margin:0}
.element-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.element-list label{display:flex;align-items:center;gap:8px;color:#e5edf5;background:#101820;border:1px solid #263746;border-radius:8px;padding:8px}
.element-list input{width:auto;margin:0}
.di-map-v08{display:grid;gap:7px}
.di-row-v08{display:grid;grid-template-columns:150px 135px 1fr;gap:8px;align-items:center;background:#101820;border:1px solid #263746;border-radius:8px;padding:8px}
.di-row-v08 strong{font-size:12px;color:#e5edf5}
.di-row-v08 label{display:flex;align-items:center;gap:7px;color:#e5edf5}
.di-row-v08 input[type="checkbox"]{width:auto;margin:0}
.config-screen-v08 .status-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.config-screen-v08 .status-list span{background:#101820;border:1px solid #263746;border-radius:14px;padding:5px 9px;font-size:11px;color:#8fa1b3}
.config-screen-v08 .config-footer{position:absolute;bottom:0;left:0;right:0;height:50px;background:#111a24;border-top:1px solid #385063;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 14px}
.config-screen-v08 .config-footer .muted{margin-right:auto}
.config-screen-v08 .button-cell{display:flex;align-items:end}
.hidden{display:none!important}
.disabled-block{opacity:.5}
.disabled-block input,.disabled-block select{pointer-events:none}
.validation-box{margin:0;padding:8px 12px;border:1px solid #eb5757;background:#3a1014;color:#fff;border-radius:8px;font-size:12px}
.validation-box ul{margin:4px 0 0 18px;padding:0}


/* v0.9 configuration layout */
.config-screen-v09{position:relative;padding-bottom:50px}
.config-screen-v09 .config-shell{display:grid;grid-template-columns:118px 1fr;gap:8px;padding:8px 10px 0;height:374px}
.config-screen-v09 .config-sidebar{display:flex;flex-direction:column;gap:5px;overflow:hidden}
.config-screen-v09 .config-sidebar .tab{width:100%;text-align:left;background:#15202b;color:#e5edf5;border:1px solid #263746;border-radius:8px;padding:7px 7px;font-size:11px;line-height:1.05}
.config-screen-v09 .config-sidebar .tab.active{background:#2f80ed;border-color:#2f80ed;color:#fff}
.config-screen-v09 .config-content{min-width:0;height:374px;overflow:hidden}
.config-screen-v09 .tab-page{display:none;height:374px;overflow:auto;padding:0 2px 8px 0}
.config-screen-v09 .tab-page.active{display:block}
.config-screen-v09 .config-card{padding:11px;margin:0 0 8px 0}
.config-screen-v09 .config-card h2{margin:0 0 8px;color:#8fa1b3;font-size:13px}
.config-screen-v09 .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}
.config-screen-v09 label{font-size:12px;color:#8fa1b3;margin:0 0 7px 0}
.config-screen-v09 input,.config-screen-v09 select{margin-top:4px;height:31px}
.config-screen-v09 input[type="checkbox"]{height:auto}
.config-screen-v09 label small{float:right;color:#8fa1b3;margin-top:4px}
.config-screen-v09 .checkline{display:flex;align-items:center;gap:8px;color:#e5edf5;background:#101820;border:1px solid #263746;border-radius:8px;padding:8px;margin-bottom:8px}
.config-screen-v09 .checkline input{width:auto;margin:0}
.config-screen-v09 .element-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.config-screen-v09 .element-list label{display:flex;align-items:center;gap:8px;color:#e5edf5;background:#101820;border:1px solid #263746;border-radius:8px;padding:8px;margin:0}
.config-screen-v09 .element-list input{width:auto;margin:0}
.config-screen-v09 .di-map-v09{display:grid;gap:7px}
.config-screen-v09 .di-row-v09{display:grid;grid-template-columns:155px 125px 1fr;gap:8px;align-items:center;background:#101820;border:1px solid #263746;border-radius:8px;padding:8px}
.config-screen-v09 .di-row-v09 strong{font-size:12px;color:#e5edf5}
.config-screen-v09 .di-row-v09 label{display:flex;align-items:center;gap:7px;color:#e5edf5;margin:0}
.config-screen-v09 .di-row-v09 input[type="checkbox"]{width:auto;margin:0}
.config-screen-v09 .readonly{opacity:.45}
.config-screen-v09 .schedule-table{display:grid;gap:5px}
.config-screen-v09 .schedule-head,.config-screen-v09 .schedule-row{display:grid;grid-template-columns:54px 42px 94px 105px 86px 86px;gap:6px;align-items:center}
.config-screen-v09 .schedule-head{font-size:11px;color:#8fa1b3;padding:0 6px}
.config-screen-v09 .schedule-row{background:#101820;border:1px solid #263746;border-radius:8px;padding:6px}
.config-screen-v09 .schedule-row strong{font-size:12px;color:#e5edf5}
.config-screen-v09 .schedule-row label{display:flex;justify-content:center;margin:0}
.config-screen-v09 .schedule-row input[type="checkbox"]{width:auto;margin:0}
.config-screen-v09 .triple-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start}
.config-screen-v09 .triple-columns .config-card{height:auto;min-height:256px}
.config-screen-v09 .config-footer{position:absolute;bottom:0;left:0;right:0;height:50px;background:#111a24;border-top:1px solid #385063;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 14px}
.config-screen-v09 .config-footer .muted{margin-right:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:620px}
.config-screen-v09 .footer-error{color:#ffb3b3;font-weight:bold}
.config-screen-v09 .button-cell{display:flex;align-items:end}
.config-screen-v09 .hint{font-size:12px;color:#8fa1b3;margin:4px 0 10px}
.hidden{display:none!important}
.disabled-block{opacity:.5}
.disabled-block input,.disabled-block select{pointer-events:none}


/* v0.10 configuration refinements */
.config-screen-v010{position:relative;padding-bottom:50px}
.config-screen-v010 .config-shell{display:grid;grid-template-columns:118px 1fr;gap:8px;padding:8px 10px 0;height:374px}
.config-screen-v010 .config-sidebar{display:flex;flex-direction:column;gap:4px;overflow:hidden}
.config-screen-v010 .config-sidebar .tab{width:100%;text-align:left;background:#15202b;color:#e5edf5;border:1px solid #263746;border-radius:8px;padding:6px 7px;font-size:10.5px;line-height:1.05}
.config-screen-v010 .config-sidebar .tab.active{background:#2f80ed;border-color:#2f80ed;color:#fff}
.config-screen-v010 .config-content{min-width:0;height:374px;overflow:hidden}
.config-screen-v010 .tab-page{display:none;height:374px;overflow:auto;padding:0 2px 8px 0}
.config-screen-v010 .tab-page.active{display:block}
.config-screen-v010 .config-card{padding:11px;margin:0 0 8px 0}
.config-screen-v010 .config-card h2{margin:0 0 8px;color:#8fa1b3;font-size:13px}
.config-screen-v010 .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}
.config-screen-v010 .form-grid.one-col{grid-template-columns:minmax(0,1fr);max-width:360px}
.config-screen-v010 .narrow-card{max-width:390px}
.config-screen-v010 label{font-size:12px;color:#8fa1b3;margin:0 0 7px 0}
.config-screen-v010 input,.config-screen-v010 select{margin-top:4px;height:31px}
.config-screen-v010 input[type="checkbox"]{height:auto}
.config-screen-v010 label small{float:right;color:#8fa1b3;margin-top:4px}
.config-screen-v010 .checkline{display:flex;align-items:center;gap:8px;color:#e5edf5;background:#101820;border:1px solid #263746;border-radius:8px;padding:8px;margin-bottom:8px}
.config-screen-v010 .checkline input{width:auto;margin:0}
.config-screen-v010 .element-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.config-screen-v010 .element-list label{display:flex;align-items:center;gap:8px;color:#e5edf5;background:#101820;border:1px solid #263746;border-radius:8px;padding:8px;margin:0}
.config-screen-v010 .element-list input{width:auto;margin:0}
.config-screen-v010 .profile-row{display:grid;grid-template-columns:1fr 150px;gap:10px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid #263746}
.config-screen-v010 .profile-row button{height:34px}
.config-screen-v010 .di-map-v010{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.config-screen-v010 .di-row-v010{display:grid;grid-template-columns:1fr 78px 64px;gap:6px;align-items:center;background:#101820;border:1px solid #263746;border-radius:8px;padding:7px}
.config-screen-v010 .di-row-v010 strong{font-size:11.5px;color:#e5edf5;min-width:0}
.config-screen-v010 .di-row-v010 label{display:flex;align-items:center;gap:4px;color:#e5edf5;margin:0;font-size:11.5px}
.config-screen-v010 .di-row-v010 input[type="checkbox"]{width:auto;margin:0}
.config-screen-v010 .readonly{opacity:.45}
.config-screen-v010 .schedule-table{display:grid;gap:5px}
.config-screen-v010 .schedule-head,.config-screen-v010 .schedule-row{display:grid;grid-template-columns:54px 42px 94px 105px 86px 86px;gap:6px;align-items:center}
.config-screen-v010 .schedule-head{font-size:11px;color:#8fa1b3;padding:0 6px}
.config-screen-v010 .schedule-row{background:#101820;border:1px solid #263746;border-radius:8px;padding:6px}
.config-screen-v010 .schedule-row strong{font-size:12px;color:#e5edf5}
.config-screen-v010 .schedule-row label{display:flex;justify-content:center;margin:0}
.config-screen-v010 .schedule-row input[type="checkbox"]{width:auto;margin:0}
.config-screen-v010 .triple-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start}
.config-screen-v010 .triple-columns .config-card{height:auto;min-height:256px}
.config-screen-v010 .config-footer{position:absolute;bottom:0;left:0;right:0;height:50px;background:#111a24;border-top:1px solid #385063;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 14px}
.config-screen-v010 .config-footer .muted{margin-right:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:620px}
.config-screen-v010 .footer-error{color:#ffb3b3;font-weight:bold}
.config-screen-v010 .hint{font-size:12px;color:#8fa1b3;margin:4px 0 10px}
.hidden{display:none!important}
.disabled-block{opacity:.5}
.disabled-block input,.disabled-block select{pointer-events:none}


/* v0.11 dashboard filtration state */
.filtration-panel{overflow:hidden}
.filtration-info{background:#101820;border:1px solid #263746;border-radius:8px;padding:6px 7px;margin:6px 0;font-size:11px}
.filtration-info span{display:block;color:#8fa1b3}
.filtration-info strong{display:block;color:#e5edf5;font-size:12px;margin-top:2px}
.filtration-info small{display:block;color:#8fa1b3;margin-top:2px}
.extension-info{border-color:#f2c94c;background:#2a240e}
.progress{height:6px;background:#05070a;border-radius:6px;overflow:hidden;margin-top:5px}
.progress i{display:block;height:100%;width:0;background:#56ccf2}
.extension-info .progress i{background:#f2c94c}


/* v0.13 filtration context placement */
.filtration-context{margin-top:7px}
.filtration-context .filtration-info{margin:0}
.filtration-context .filtration-info + .filtration-info{margin-top:6px}


/* v0.14 dashboard section header lamps */
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 6px;
}
.section-head h2{
  margin:0;
}
.head-lamps{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.section-head .lamp{
  margin:0;
}