:root{
  --black:#050505;--panel:#0d0d0d;--panel2:#151515;--border:#3b3b3b;--red:#f1262d;--green:#49c83e;--yellow:#ffc928;--white:#f5f5f5;--muted:#b4b4b4;--danger:#ff5b63;
  color-scheme:dark;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--black);color:var(--white)}
body{overscroll-behavior-y:none}
button,input{font:inherit}
button{cursor:pointer}
button:disabled,input:disabled{cursor:not-allowed;opacity:.48}
.controller-body{background:radial-gradient(circle at 50% -20%,#1b090a 0,#080808 28rem,#050505 55rem);min-height:100vh}
.app-shell{width:min(100%,520px);min-height:100vh;margin:0 auto;background:var(--black);position:relative;overflow-x:hidden;padding-bottom:max(20px,env(safe-area-inset-bottom));box-shadow:0 0 60px rgba(0,0,0,.65)}
.app-screen{display:none;min-height:100vh;padding-bottom:18px}.app-screen.active{display:block}
.tf-card{background:var(--panel);border:1px solid var(--border);border-radius:16px}
.brand-header{height:88px;position:relative;display:flex;align-items:center;justify-content:center;padding:5px 18px}
.brand-centre{display:flex;align-items:center;gap:8px}.brand-centre img{width:122px;height:78px;object-fit:contain}.globe-status{font-size:26px;color:var(--muted);line-height:1}.globe-status.online{color:var(--green);text-shadow:0 0 16px rgba(73,200,62,.3)}
.icon-button,.back-button{border:0;background:transparent;color:var(--white)}.settings-button{position:absolute;right:14px;font-size:28px;width:46px;height:46px;border-radius:50%}.settings-button:active{background:#171717}
.status-panel{margin:0 12px;padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:12px;align-items:center;min-height:78px}
.remote-status,.tank-status{display:flex;align-items:center;min-width:0}.round-icon{width:38px;height:38px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;color:var(--red);font-size:19px;margin-right:9px;flex:0 0 auto}.small-label{font-size:11px;color:var(--muted);letter-spacing:.03em}.connection-state{font-size:14px;font-weight:800;color:var(--muted);margin:2px 0}.connection-state.connected{color:var(--green)}.device-id{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-divider{width:1px;height:48px;background:var(--border)}.tank-icon{font-size:29px;color:var(--red);margin-right:8px}.tank-value{font-size:24px;font-weight:800}.psi-unit{font-size:12px;color:var(--muted)}
.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:7px 12px 0}.top-grid{margin-top:9px}.control-tile{height:255px;background:var(--panel);border:1px solid var(--border);border-radius:15px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;min-width:0}.control-tile.highlighted{border:2px solid var(--yellow)}.control-title{font-size:12px;font-weight:600;text-align:center;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.bag-pressure{font-size:11px;font-weight:800;color:var(--yellow);height:17px;margin-top:2px}.spacer-pressure{visibility:hidden}.red-rule{width:44px;height:1px;background:var(--red);margin:5px 0 11px}.split-control{width:100%;flex:1;background:var(--panel2);border:1px solid var(--border);border-radius:13px;overflow:hidden;display:grid;grid-template-rows:1fr 1px 1fr}.hold-half{border:0;background:transparent;color:var(--white);font-size:42px;line-height:1;touch-action:none;user-select:none}.hold-half.down{color:var(--red)}.hold-half.pressed{background:rgba(255,201,40,.12);color:var(--yellow)}.split-line{height:1px;background:var(--border);position:relative}.split-line span{position:absolute;width:21px;height:4px;border-radius:99px;background:var(--red);left:50%;top:50%;transform:translate(-50%,-50%)}
.preset-panel{margin:10px 12px 0;padding:12px}.section-title{font-size:14px;font-weight:800;letter-spacing:.02em}.section-subtitle,.muted{color:var(--muted);font-size:12px;line-height:1.45}.section-subtitle{font-size:11px;margin-top:3px}.preset-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}.outline-action,.airout-button,.output-button,.ghost-button{background:var(--panel2);border:1.5px solid var(--red);border-radius:14px;color:var(--white);font-weight:800}.outline-action{height:54px}.outline-action.active{border-color:var(--yellow);color:var(--yellow)}.airout-button{height:58px;width:100%;margin-top:7px;touch-action:none}.airout-button.pressed{border-color:var(--yellow);background:rgba(255,201,40,.12);color:var(--yellow)}
.quick-output-panel{margin:9px 12px 0;padding:10px;display:flex;gap:8px}.quick-output-panel:empty,.quick-output-panel.hidden{display:none}.output-button{height:58px;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;text-align:left}.output-button span:last-child{display:flex;flex-direction:column}.output-button b{font-size:13px}.output-button small{font-size:10px;color:var(--muted)}.output-button.on{border-color:var(--yellow);color:var(--yellow)}.output-button.on small{color:var(--yellow)}.output-icon{font-size:22px}.screen-bottom-space{height:20px}
.settings-title{height:64px;display:grid;grid-template-columns:52px 1fr 52px;align-items:center;border-bottom:1px solid #161616;position:sticky;top:0;background:rgba(5,5,5,.96);backdrop-filter:blur(12px);z-index:5}.settings-title h1{font-size:18px;text-align:center;margin:0;font-weight:800}.back-button{font-size:38px;height:52px;width:52px;line-height:1}.settings-list{padding:8px 0}.setting-row{width:100%;border:0;border-bottom:1px solid #202020;background:transparent;color:var(--white);display:grid;grid-template-columns:42px 1fr 24px;gap:10px;align-items:center;padding:14px;text-align:left}.setting-row:active{background:#101010}.setting-icon{font-size:23px;color:var(--red);text-align:center}.setting-row span:nth-child(2){display:flex;flex-direction:column}.setting-row b{font-size:15px}.setting-row small{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35}.setting-row i{font-style:normal;color:var(--muted);font-size:26px}
.settings-card{margin:6px 14px;padding:16px}.connected-card{border-color:var(--green)}.remote-big-status{font-size:13px;font-weight:800;color:var(--green);margin:4px 0}.firmware-lines{display:flex;flex-direction:column;gap:3px;color:var(--muted);font-size:12px;margin-top:7px}.firmware-lines b{color:var(--white)}.button-row{display:flex;gap:8px;margin-top:10px}.ghost-button{height:42px;padding:0 16px;border-color:var(--border)}.ghost-button.danger{border-color:var(--red)}.page-message{color:var(--muted);font-size:12px;padding:4px 18px}.toggle-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.toggle-row>div{display:flex;flex-direction:column}.toggle-row b{font-size:14px}.toggle-row small{color:var(--muted);font-size:12px;line-height:1.4;margin-top:3px}.setting-separator{height:1px;background:#262626;margin:13px 0}
.switch{width:48px;height:28px;position:relative;display:inline-block;flex:0 0 auto}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;background:#343434;border-radius:999px;transition:.18s;border:1px solid #4a4a4a}.switch span:before{content:"";position:absolute;width:22px;height:22px;left:2px;top:2px;border-radius:50%;background:#d9d9d9;transition:.18s}.switch input:checked+span{background:var(--red);border-color:var(--red)}.switch input:checked+span:before{transform:translateX(20px);background:var(--white)}.switch input:disabled+span{opacity:.45}
.yellow-note{color:var(--yellow);font-size:12px}.live-psi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.live-psi-row span{text-align:center;border:1px solid #252525;border-radius:10px;padding:8px 4px;background:var(--panel2)}.live-psi-row b{display:block;font-size:11px}.live-psi-row i{display:block;color:var(--yellow);font-style:normal;font-weight:800;font-size:13px;margin-top:3px}.target-card{margin:6px 14px;padding:16px}.target-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}.field-label{display:block;color:var(--muted);font-size:12px;margin:12px 0 5px}.tf-input{width:100%;height:52px;border-radius:12px;border:1px solid #4a4a4a;background:#0a0a0a;color:var(--white);padding:0 13px;outline:none}.tf-input:focus{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}.settings-input{margin-top:6px}.validation{color:var(--red);font-size:12px;margin:8px 0;min-height:2px}.tf-primary-button{display:grid;place-items:center;text-decoration:none;width:100%;min-height:48px;border:0;border-radius:12px;background:var(--red);color:var(--white);font-weight:800;padding:11px 14px}.tf-primary-button:active{filter:brightness(.88)}.live-tank-large{font-size:24px;color:var(--yellow);font-weight:800;margin:3px 0 10px}.radio-row{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;padding:9px 0}.radio-row input{accent-color:var(--red);width:20px;height:20px}.radio-row span{display:flex;flex-direction:column}.radio-row small{color:var(--muted);font-size:12px;margin-top:3px}
.calibration-menu{display:flex;flex-direction:column;width:calc(100% - 28px);margin:6px 14px;padding:17px;color:var(--white);text-align:left}.calibration-menu small{color:var(--muted);font-size:12px;margin-top:4px}.sensor-row{display:grid;grid-template-columns:1fr 118px;align-items:center;padding:5px 0}.sensor-row b{font-size:14px}.sensor-cycle{height:42px;border:1px solid var(--border);border-radius:10px;background:var(--panel2);color:var(--yellow);font-weight:800}
.about-card{margin:14px;padding:22px;text-align:center}.about-card img{width:210px;height:210px;object-fit:contain}.about-card h2{font-size:15px;margin:0 0 5px}.product-status{color:var(--red);font-size:12px;font-weight:800;margin-bottom:18px}.product-info{display:flex;flex-direction:column;gap:0}.product-info span{display:grid;grid-template-columns:1fr auto;gap:10px;padding:6px 0;font-size:12px;text-align:left;border-bottom:1px solid #1e1e1e;color:var(--muted)}.product-info b{color:var(--white)}.about-card p{font-size:13px;font-weight:600;margin:18px 0 3px}.about-card small{color:var(--muted)}.link-button{margin-top:14px}
.global-notice{position:fixed;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);z-index:30;width:min(calc(100% - 24px),490px);padding:11px 14px;border-radius:12px;background:#2b1112;border:1px solid var(--red);color:var(--white);font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.connection-overlay{position:fixed;inset:0;z-index:50;background:rgba(5,5,5,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:30px}.connection-overlay.hidden{display:none}.connection-overlay strong{font-size:15px}.connection-overlay span{color:var(--muted);font-size:12px}.connection-spinner{width:38px;height:38px;border:3px solid #333;border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.login-body{display:flex;align-items:flex-start;justify-content:center}.login-shell{width:min(100%,460px);padding:30px 14px 40px;margin:0 auto}.login-brand{position:relative;text-align:center}.login-brand img{width:170px;height:170px;object-fit:contain}.back-site{position:absolute;left:0;top:8px;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;color:var(--white);text-decoration:none;font-size:32px}.webserver-badge{display:inline-flex;gap:7px;align-items:center;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(73,200,62,.65)}.login-card{margin-top:18px;padding:20px}.login-card h1{font-size:23px;margin:4px 0 7px}.login-card p,.login-security p{color:var(--muted);font-size:12px;line-height:1.5}.eyebrow{color:var(--red);font-size:11px;font-weight:900;letter-spacing:.13em}.field-help{color:#787878;font-size:11px;margin-top:5px}.pin-input{letter-spacing:.45em;font-size:19px}.login-card .tf-primary-button{margin-top:18px}.login-message{min-height:18px;color:var(--muted);font-size:12px;margin-top:10px}.login-message.error{color:var(--red)}.login-message.success{color:var(--green)}.login-security{margin-top:10px;padding:15px}.login-security strong{font-size:12px}
@media(max-width:390px){.status-panel{grid-template-columns:minmax(0,1.12fr) 1px minmax(0,.88fr);gap:8px}.tank-icon{display:none}.control-grid{gap:5px}.control-tile{padding-left:5px;padding-right:5px}.control-title{font-size:10px}.bag-pressure{font-size:10px}.outline-action,.airout-button{font-size:12px}}
@media(min-width:650px){.app-shell{border-left:1px solid #181818;border-right:1px solid #181818}.controller-body:has(.app-shell){padding:18px 0}.app-shell{min-height:calc(100vh - 36px);border-radius:22px}}

/* Standalone controller/demo additions */
.login-or{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:16px 0 12px;color:#737373;font-size:10px;font-weight:900;letter-spacing:.14em}.login-or span{height:1px;background:#242424}.tf-demo-button{width:100%;min-height:48px;border-radius:12px;border:1px solid #f4c62b;background:rgba(244,198,43,.08);color:#f4c62b;font-weight:900;letter-spacing:.04em}.tf-demo-button:active{background:rgba(244,198,43,.16)}.demo-help{text-align:center;color:#707070;font-size:10px;line-height:1.4;margin-top:7px}.demo-mode-banner{position:sticky;top:0;z-index:20;background:#f4c62b;color:#080808;text-align:center;font-size:10px;font-weight:950;letter-spacing:.07em;padding:7px 10px;border-bottom:1px solid #ffe47a}.demo-mode-banner[hidden]{display:none!important}.app-shell.demo-mode{box-shadow:0 0 0 1px rgba(244,198,43,.25)}.demo-mode .globe-status.online{color:#f4c62b;text-shadow:0 0 12px rgba(244,198,43,.55)}.demo-mode .connected-card{border-color:#f4c62b}.demo-mode .remote-big-status{color:#f4c62b}


/* v1.0.1 iOS/Safari hold-control protection
   Prevent long-press text selection/callouts on control buttons while
   keeping settings inputs/selects normally editable. */
.controller-body button,
.controller-body button *,
.controller-body [data-manual],
.controller-body [data-manual] *,
.controller-body #airout-button,
.controller-body #airout-button * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent;
}

.controller-body [data-manual],
.controller-body #airout-button {
  touch-action: none !important;
  -webkit-user-drag: none;
}

.controller-body input,
.controller-body textarea,
.controller-body select {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}