/* PumpStudio V718.3 — conceito 4: painel industrial mobile. Web-only OTA.
   Dados e segurança continuam sob responsabilidade do motor original. */
:root {--ps-accent:#23cffa;--ps-green:#36deb0;--ps-amber:#ffbd66;--ps-border:#22516c}
body{background:radial-gradient(ellipse 92% 45% at 48% 0,#0e354b 0%,#061726 66%,#041320 100%)}
.app{max-width:1140px}
header{background:#06182aef;border-bottom-color:#21475e}
.brand-icon{background:linear-gradient(135deg,#17bce8,#076797);border-radius:12px;box-shadow:0 0 0 1px #36cfff55 inset}
.banner{margin-bottom:13px;border-color:#9a6d36;background:linear-gradient(125deg,#352619,#281e18);padding:12px 14px}
.banner strong{color:#ffd17d}
#screen-home .layout{display:block}
#screen-home .main{width:100%}
#screen-home .main>.section-title{display:none}
#screen-home .main>section.panel:first-of-type{background:none;box-shadow:none;border:0;padding:0;margin-bottom:14px}
#screen-home .main>section.panel:first-of-type>.asset-top{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ps-hero{position:relative;isolation:isolate;overflow:hidden;min-height:248px;border:1px solid #2d5f78;border-radius:16px;background:linear-gradient(125deg,#0a2438,#082235);padding:24px;margin-bottom:23px;box-shadow:0 18px 40px #0004}
.ps-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#082239 0%,#09263be8 31%,#08233726 78%,#06263d12 100%)}
.ps-hero-image{position:absolute;z-index:-2;right:0;top:0;width:68%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.16) contrast(1.03)}
.ps-hero-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.ps-hero h2{margin:0;color:#f4fbff;font-size:clamp(23px,3vw,30px);line-height:1.1;letter-spacing:-.55px}
.ps-hero-sub{font-size:12px;color:#b8d3e4;margin:9px 0 19px}
.ps-hero-badge{color:#78f6c2;font-weight:800;font-size:10px;letter-spacing:.25px;border:1px solid #25966c;border-radius:40px;background:#07392ee6;padding:5px 10px}
.ps-hero-info{max-width:54%;display:grid;gap:11px;font-size:12px;color:#cbdeeb}
.ps-hero-info>div{display:flex;align-items:center;gap:10px}
.ps-hero-info .ps-icon{font-size:16px;color:#80d7f7;width:19px;text-align:center}
.ps-hero-state{margin-top:9px;border:1px solid #248e67;background:#075334a6;color:#73f5b7;border-radius:10px;font-weight:800;padding:8px 10px;width:fit-content}
.ps-hero-state:before{content:'●';margin-right:8px}
.ps-hero-foot{font-size:11px;color:#b7d1e1;margin-top:9px}
.ps-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.ps-section-head h2{font-size:21px;line-height:1.2;margin:0;font-weight:800;letter-spacing:-.3px}
.ps-range{display:flex;align-items:center;gap:2px;border:1px solid #27516d;background:#071d30;padding:4px;border-radius:13px}
.ps-range button{background:none;color:#b1cbdc;border:0;padding:6px 9px;font-size:11px;border-radius:9px;min-width:33px}
.ps-range button.active{background:#0aadd5;color:#031c2c;font-weight:800;box-shadow:0 0 12px #20cefa44}
.ps-range button:focus-visible{outline:2px solid #7cf1ff}
#screen-home .metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 12px}
#screen-home .metric{--ps-metric:#28d4f8;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:165px;background:linear-gradient(152deg,#0c2538,#051929 85%);border:1px solid #214c65;border-radius:14px;padding:13px;color:#eefaff;box-shadow:0 12px 24px #0002;transition:border-color .15s,transform .15s}
#screen-home .metric:hover{transform:translateY(-2px);border-color:var(--ps-metric)}
#screen-home .metric.selected{background:linear-gradient(145deg,#0d3246,#061f33);border-color:var(--ps-metric)}
#screen-home .metric .micon{font-size:20px;color:var(--ps-metric);line-height:1.1}
#screen-home .metric .mlabel{color:#c6e2ed;font-size:12px;font-weight:700;margin:7px 0 1px}
#screen-home .metric .mnum{color:var(--ps-metric);font-size:clamp(19px,3.4vw,30px);font-weight:850}
#screen-home .metric .munit{font-size:12px;color:#d5e8f1}
#screen-home .metric .mtime{font-size:10px;color:#8aabbc}
#screen-home .metric[data-ps-key="temperature_c"]{--ps-metric:#ffae54}
#screen-home .metric[data-ps-key="pressure_bar"]{--ps-metric:#bb85ff}
#screen-home .metric[data-ps-key="flow_m3_h"]{--ps-metric:#2ae7ca}
#screen-home .metric[data-ps-key="current_a"]{--ps-metric:#ffd170}
#screen-home .metric[data-ps-key="speed_rpm"]{--ps-metric:#5bb6ff}
.ps-quality{position:absolute;right:10px;top:10px;font-size:9px;border:1px solid #45748d;color:#b9d8e5;border-radius:20px;padding:2px 6px;line-height:1.4}
.ps-spark{display:block;margin-top:auto;height:59px;width:100%;overflow:visible}
.ps-spark-grid{stroke:#38607944;stroke-width:.8;stroke-dasharray:3 4}
.ps-spark-curve{fill:none;stroke:var(--ps-metric);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #65d2e655)}
.ps-spark-fill{fill:var(--ps-metric);opacity:.10}
.ps-spark-note{color:#88aabb;font-size:9px;line-height:1.3;margin-top:3px}
.ps-extra{display:none!important}
.ps-show-all .ps-extra{display:flex!important}
.ps-expand-metrics{width:100%;padding:12px 15px;background:#08263d;border:1px solid #245572;color:#deeffb;border-radius:12px;text-align:left;font-size:13px;font-weight:750;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:7px 0 14px}
.ps-expand-metrics .ps-arrow{color:#6bdff3;font-size:18px}
.ps-expand-metrics:hover{background:#0c324d}
#screen-home #goTrends,#screen-home #go3d{min-width:120px}
#screen-home .main>section.panel:nth-of-type(2){border-color:#21506d}
.nav{background:#061a2bf5;box-shadow:0 -12px 34px #0005}
.nav button.active{background:linear-gradient(135deg,#0d5976,#083951);border:1px solid #1776a0;color:#54dbff;font-weight:750}
.nav button{transition:background .2s}
.ps-update-strip{display:flex;align-items:center;gap:11px;border:1px solid #236e97;border-radius:13px;background:linear-gradient(110deg,#08324d,#092137);padding:10px 13px;margin:-2px 0 15px;color:#c5ebfc}
.ps-update-strip strong{display:block;color:#f1fbff;font-size:12px}
.ps-update-strip small{display:block;color:#a7c9da;font-size:10px}
.ps-update-cloud{font-size:23px;color:#71d8fd}
.ps-update-indicator{margin-left:auto;font-size:10px;color:#74e9bd}
@media(max-width:620px){
 .app{padding:0 11px 110px}
 header{padding-top:calc(22px + env(safe-area-inset-top,0px));gap:7px}
 .brand{gap:8px;min-width:0}
 .brand h1{font-size:16px;white-space:nowrap}
 .eyebrow{font-size:8px;letter-spacing:.75px;max-width:235px}
 .brand-icon{width:39px;height:39px;flex-shrink:0}
 .status{font-size:9px}
 .banner{margin:12px 0;padding:11px}
 .banner strong{font-size:12px}
 .banner p{font-size:11px}
 .ps-hero{min-height:290px;padding:15px 13px;margin-bottom:19px}
 .ps-hero::after{background:linear-gradient(90deg,#092639 0%,#072235ef 25%,#07213486 56%,#07223525 100%)}
 .ps-hero-image{width:79%;object-position:43% 45%;opacity:.87}
 .ps-hero h2{font-size:20px}
 .ps-hero-head{gap:7px}
 .ps-hero-badge{font-size:8px;padding:4px 7px}
 .ps-hero-sub{font-size:10px;margin:8px 0 19px}
 .ps-hero-info{max-width:60%;font-size:11px;gap:10px;text-shadow:0 1px 4px #0018}
 .ps-hero-info .ps-icon{font-size:14px;width:15px}
 .ps-hero-foot{font-size:10px}
 .ps-hero-state{font-size:10px}
 .ps-section-head{flex-wrap:wrap;gap:9px}
 .ps-section-head h2{font-size:20px}
 .ps-range{margin-left:auto}
 #screen-home .metrics{gap:9px}
 #screen-home .metric{min-height:172px;padding:11px 9px;border-radius:12px}
 #screen-home .metric .mlabel{font-size:11px}
 #screen-home .metric .mnum{font-size:clamp(19px,6vw,25px)}
 #screen-home .metric .munit{font-size:10px}
 .ps-quality{right:7px;top:7px;font-size:8px}
 .ps-spark{height:52px}
 .nav button{font-size:10px}
}
@media(max-width:350px){
 .brand h1{font-size:14px}.eyebrow{display:none}.status{padding:6px}
 .ps-hero-image{width:76%}.ps-hero-info{max-width:66%}
 #screen-home .metric .mnum{font-size:18px}
 .ps-range button{font-size:10px;padding:6px}
}
@media(prefers-reduced-motion:reduce){#screen-home .metric{transition:none}}


/* V718.3.1 — corrected pump framing and adaptive navigation; WEB-ONLY. */
@media (min-width:821px) {
  .app>.nav { position:sticky;top:0;left:auto;right:auto;bottom:auto;
    z-index:35;width:100%;margin:0 0 18px;padding:7px 10px;
    border:1px solid #24516d;border-radius:12px;justify-content:flex-start;
    background:#071e31f5;box-shadow:0 8px 24px #0003; }
  .app>.nav button {display:flex;align-items:center;justify-content:center;
    gap:8px;min-width:124px;padding:8px 12px;font-size:11px;}
  .app>.nav button b {font-size:17px;}
  .ps-hero {min-height:265px;}
  .ps-hero-image {top:3%;right:2%;width:min(46%,490px);height:94%;
    object-fit:contain;object-position:center;filter:saturate(1.06) contrast(1.02);
    -webkit-mask-image:radial-gradient(ellipse 84% 86% at 53% 50%,#000 55%,transparent 100%);
    mask-image:radial-gradient(ellipse 84% 86% at 53% 50%,#000 55%,transparent 100%);}
  .ps-hero::after {background:linear-gradient(90deg,#082239 0%,#09263bf7 30%,#082337a6 49%,#061a2917 77%,#061a2908 100%);}
  .ps-hero-info {max-width:53%;}
}
@media (min-width:821px) and (max-width:1080px) {
  .ps-hero-image {right:1%;width:44%;}
  .ps-hero-info {max-width:55%;}
}
@media (max-width:820px) {
  .app>.nav {position:fixed;bottom:0;top:auto;left:0;right:0;
    z-index:35;width:100%;margin:0;border-radius:0;
    padding:7px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom));
    justify-content:space-between;}
  .app>.nav button {min-width:0;flex:1;padding:8px 2px;}
}
@media (max-width:620px) {
  .ps-hero {min-height:308px;}
  .ps-hero-image {top:auto;bottom:0;right:0;width:76%;height:75%;
    object-fit:contain;object-position:right bottom;opacity:.83;}
  .ps-hero::after {background:linear-gradient(90deg,#072136fc 0%,#072136ef 37%,#07213699 63%,#07213625 100%);}
  .ps-hero-info {max-width:62%;}
}
@media (max-width:360px) {
  .ps-hero {min-height:326px;}
  .ps-hero-image {width:74%;height:68%;opacity:.77;}
  .ps-hero-info {max-width:66%;}
}

/* V718.3.2 — mobile-first fidelity to approved layout 4. Lab/demo only. */
.ps-warning-toggle{display:none;}
@media(max-width:620px){
  .app{padding:0 10px calc(85px + env(safe-area-inset-bottom,0px))}
  .app>header{min-height:60px;padding-top:calc(8px + env(safe-area-inset-top,0px));padding-bottom:10px;margin-bottom:7px;gap:6px;align-items:center}
  .app header .brand-icon{width:36px;height:36px;border-radius:10px}
  .app header .brand{gap:7px}
  .app header .brand h1{font-size:15px;letter-spacing:-.35px;line-height:1.12}
  .app header .eyebrow{font-size:7px;letter-spacing:.55px;line-height:1.25;margin-top:4px}
  .app header .status{padding:6px 8px;white-space:nowrap;font-size:9px}
  .app>.banner{position:relative;min-height:0;display:flex;align-items:flex-start;gap:8px;margin:8px 0 9px;padding:9px 10px 8px;border-radius:12px}
  .app>.banner >span{flex:none;margin-top:1px}
  .app>.banner >div{min-width:0;flex:1}
  .app>.banner strong{display:block;font-size:10.5px;line-height:1.25;letter-spacing:.05px}
  .app>.banner p{font-size:10px;line-height:1.35;margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;color:#e1cda4;padding-right:66px}
  .app>.banner.ps-warning-expanded p{display:block;overflow:visible;padding-right:0}
  .ps-warning-toggle{display:block;position:absolute;right:9px;bottom:6px;border:1px solid #b58c5a80;background:#3e2c20;color:#ffd58d;border-radius:7px;font-size:9px;padding:3px 5px;cursor:pointer}
  .app>.banner.ps-warning-expanded{padding-bottom:32px}
  .app>.ps-update-strip{min-height:0;margin:0 0 10px;padding:7px 9px;gap:8px;border-radius:11px}
  .app>.ps-update-strip .ps-update-cloud{font-size:18px}
  .app>.ps-update-strip strong{font-size:11px;line-height:1.15;white-space:nowrap}
  .app>.ps-update-strip small{font-size:9px;line-height:1.2;white-space:nowrap;max-width:250px;overflow:hidden;text-overflow:ellipsis}
  .app>.ps-update-strip .ps-update-indicator{white-space:nowrap;font-size:9px;margin-left:auto}
  #screen-home .main>section.panel:first-of-type{margin-bottom:10px}
  .ps-hero{min-height:194px;margin-bottom:10px;padding:12px 11px 10px;border-radius:14px}
  .ps-hero h2{font-size:18px;letter-spacing:-.4px;line-height:1.1}
  .ps-hero-head{gap:5px}
  .ps-hero-badge{font-size:7px;letter-spacing:0;padding:3px 5px}
  .ps-hero-sub{font-size:9.5px;line-height:1.25;margin:6px 0 10px;color:#d1e5f1}
  .ps-hero-info{max-width:49%;gap:6px;font-size:9.5px;line-height:1.25}
  .ps-hero-info>div:first-child{display:none}
  .ps-hero-info>div{gap:5px}
  .ps-hero-info .ps-icon{width:12px;font-size:12px}
  .ps-hero-state{margin-top:6px;padding:6px 7px;max-width:176px;line-height:1.25;font-size:9px}
  .ps-hero-foot{font-size:9px;margin-top:7px;max-width:55%}
  .ps-hero-image{top:auto;bottom:4px;right:3px;width:59%;height:74%;object-fit:contain;object-position:right bottom;opacity:.98;filter:saturate(1.2) contrast(1.06);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 20%);mask-image:linear-gradient(90deg,transparent 0%,#000 20%)}
  .ps-hero::after{background:linear-gradient(90deg,#09283efc 0%,#09283ee8 34%,#09283e55 55%,transparent 83%)}
  .ps-section-head{flex-wrap:nowrap;gap:5px;align-items:center;margin:0 0 8px}
  .ps-section-head h2{font-size:17px;white-space:nowrap;letter-spacing:-.35px}
  .ps-range{padding:3px;gap:0;border-radius:10px;flex:0 0 auto;margin-left:auto}
  .ps-range button{min-width:0;padding:5px 7px;font-size:9px;line-height:1.3}
  #screen-home .metrics{gap:7px;margin-bottom:8px}
  #screen-home .metric{min-height:130px;padding:9px 8px 7px;border-radius:12px}
  #screen-home .metric .mlabel{font-size:11px;margin:4px 0 0}
  #screen-home .metric .micon{font-size:17px}
  #screen-home .metric .mnum{font-size:clamp(19px,5.8vw,23px)}
  #screen-home .metric .munit{font-size:10px}
  #screen-home .metric .mtime{display:none}
  .ps-quality{font-size:7px;right:7px;top:7px;padding:2px 5px}
  .ps-spark{height:37px;margin-top:auto}
  .ps-spark-note{font-size:8px}
  .ps-expand-metrics{padding:10px;font-size:12px;margin-bottom:10px}
  .app>.nav{padding-top:5px;padding-bottom:calc(7px + env(safe-area-inset-bottom,0px))}
  .app>.nav button{font-size:10px;padding:6px 2px}
}
@media(max-width:360px){
  .ps-hero{min-height:204px}
  .ps-hero h2{font-size:16px}
  .ps-hero-info{max-width:53%}
  .ps-hero-image{width:54%}
  .ps-section-head h2{font-size:15px}
  .ps-range button{font-size:8px;padding:4px 5px}
  .app header .eyebrow{display:block;max-width:188px}
}
@media(min-width:621px){
  .ps-hero-image{right:3%;width:min(43%,510px);height:91%;top:4.5%;object-fit:contain;object-position:center;opacity:1}
  .ps-hero::after{background:linear-gradient(90deg,#082239 0%,#09263be8 33%,#0823377a 53%,#061a2900 85%)}
}