@import "tailwindcss";

:root{--font-sans:'Manrope';--font-display:'Cormorant Garamond'}
[hidden]{display:none!important}.screen{display:none}.screen.active-screen{display:block}
.water-health{padding:0 20px 18px}.temperature{display:grid;grid-template-columns:42px 1fr auto;grid-template-rows:auto auto;align-items:center;padding:15px 0 19px;border-bottom:1px solid var(--line)}.temperature>i{grid-row:1/3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(74,157,182,.12);color:#61afc2;font-style:normal}.temperature small{font-size:6px;letter-spacing:.13em;color:var(--muted)}.temperature b{grid-row:1/3;grid-column:3;font:600 27px var(--font-display)}.temperature em{font:400 10px var(--font-sans);font-style:normal;color:var(--muted)}.temperature span{font-size:7px;color:var(--green)}.health-list>div{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}.health-list>div:last-child{border:0}.health-list i{width:23px;height:23px}.health-list p{margin:0;display:flex;flex-direction:column;gap:3px}.health-list small{font-size:6px;color:var(--muted);letter-spacing:.1em}.health-list b{font-size:8px}.alarm-thresholds{display:grid;grid-template-columns:1fr 1fr;margin:0 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.alarm-thresholds>div{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:15px 8px}.alarm-thresholds>div+div{border-left:1px solid var(--line)}.alarm-thresholds i{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-style:normal}.low-water{color:#61afc2;background:rgba(74,157,182,.12)}.high-water{color:var(--warn);background:rgba(225,167,91,.11)}.alarm-thresholds p{margin:0;display:flex;flex-direction:column}.alarm-thresholds small{font-size:5px;color:var(--muted)}.alarm-thresholds b{font-size:7px;margin-top:3px}.alarm-thresholds span{font-size:6px;color:var(--green)}.live-tag.critical{color:#ff897d;background:rgba(255,90,80,.12)}@media(max-width:420px){.alarm-thresholds{grid-template-columns:1fr}.alarm-thresholds>div+div{border-left:0;border-top:1px solid var(--line)}.tank-metrics div{padding:14px 0}}
.brand-mark img{width:58px;height:58px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.28)}.mobile-logo{display:none}.mobile-logo img{width:34px;height:34px;border-radius:50%;object-fit:cover}.mobile-logo span{display:flex;flex-direction:column;color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em}.mobile-logo small{font-size:5px;color:var(--muted);letter-spacing:.18em;margin-top:2px}@media(max-width:760px){.topbar{padding-top:4px}.topbar>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}.mobile-logo{display:flex;grid-row:1/3;align-items:center;gap:8px}.topbar>div:first-child>p,.topbar>div:first-child>h1{grid-column:2}.topbar>div:first-child>p{margin-top:2px}.topbar h1{font-size:21px}}

:root{--navy:#08131f;--navy2:#0d1b29;--panel:#102130;--panel2:#142838;--gold:#cbaa68;--cream:#f4f0e7;--muted:#8c9aa7;--line:rgba(255,255,255,.08);--green:#54c49b;--warn:#e1a75b}*{box-sizing:border-box}html{background:var(--navy);color-scheme:dark}body{margin:0;background:var(--navy);color:#edf2f4;font-family:var(--font-sans),Arial,sans-serif}button,input,select{font:inherit}button{color:inherit}.app-shell{min-height:100vh;background:radial-gradient(circle at 87% 2%,rgba(60,106,125,.12),transparent 28%),var(--navy);display:grid;grid-template-columns:104px 1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:104px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;background:#07111b;z-index:10}.brand-mark{height:112px;width:100%;display:grid;place-items:center;border-bottom:1px solid var(--line)}.brand-mark i{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;font:italic 700 28px var(--font-display);color:var(--gold);transform:rotate(-12deg)}.brand-mark div{display:none}.sidebar nav{display:flex;flex-direction:column;width:100%;padding-top:22px}.sidebar nav button{height:76px;border:0;background:none;color:#697a88;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;position:relative}.sidebar nav button>span:first-child{font-size:21px}.sidebar nav button>span:last-child{font-size:8px;letter-spacing:.09em}.sidebar nav button.active{color:var(--gold);background:linear-gradient(90deg,rgba(203,170,104,.11),transparent)}.sidebar nav button.active:before{content:"";position:absolute;left:0;top:17px;bottom:17px;width:2px;background:var(--gold)}.operator{margin-top:auto;margin-bottom:24px}.operator>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#20394b;color:var(--gold);font-size:10px}.operator div{display:none}.content{grid-column:2;padding:0 3.4vw 48px;max-width:1700px;width:100%;margin:auto}.topbar{height:112px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.topbar p,.panel-head span,.sub-page>span{margin:0 0 7px;color:var(--gold);font-size:8px;letter-spacing:.22em;font-weight:700}.topbar h1{font:600 clamp(25px,2.4vw,38px) var(--font-display);margin:0;letter-spacing:.02em}.top-actions{display:flex;gap:12px}.top-actions button{border:1px solid var(--line);background:#0c1a27;height:42px}.status{padding:0 16px;display:flex;align-items:center;gap:10px;font-size:9px}.status i,.pulse{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 0 4px rgba(84,196,155,.12)}.bell{width:42px;position:relative}.bell b{position:absolute;right:-5px;top:-6px;background:var(--gold);color:var(--navy);width:17px;height:17px;border-radius:50%;font-size:8px;display:grid;place-items:center}.connection-strip{min-height:82px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:25px}.connection-strip>div:first-child{display:flex;align-items:center;gap:13px}.connection-strip p{margin:0;display:flex;flex-direction:column}.connection-strip b{font-size:11px}.connection-strip small{color:var(--muted);font-size:8px;margin-top:4px}.connection-tabs{display:flex;padding:4px;background:#07111b;border:1px solid var(--line)}.connection-tabs button{border:0;background:none;padding:10px 14px;color:#748593;font-size:9px;cursor:pointer}.connection-tabs button.selected{background:#173043;color:#fff}.connection-tabs button>span{color:var(--gold);margin-right:6px}.add-device{justify-self:end;border:1px solid rgba(203,170,104,.32);background:rgba(203,170,104,.08);color:var(--gold);padding:11px 16px;font-size:9px;letter-spacing:.08em;cursor:pointer}.add-device span{margin-right:6px}.dashboard-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr;gap:15px;padding-top:20px}.panel{background:linear-gradient(145deg,rgba(20,40,56,.98),rgba(12,28,42,.98));border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.13)}.panel-head{min-height:72px;padding:20px 22px 14px;display:flex;align-items:flex-start;justify-content:space-between}.panel-head h2{font:600 20px var(--font-display);margin:0}.panel-head button{background:none;border:0;color:var(--muted);font-size:9px;cursor:pointer}.live-tag{font-size:7px;color:var(--green);background:rgba(84,196,155,.1);padding:6px 8px;letter-spacing:.12em}.tank-card{grid-row:span 2;min-height:590px}.tank-zone{height:400px;display:grid;grid-template-columns:1fr .78fr;align-items:center;padding:5px 30px}.tank-visual{width:min(250px,20vw);height:330px;justify-self:center;border:2px solid rgba(181,213,226,.32);border-top:0;border-radius:0 0 42px 42px;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.035),transparent 50%,rgba(255,255,255,.025));box-shadow:inset 0 -25px 45px rgba(0,0,0,.23)}.tank-visual:before{content:"";position:absolute;z-index:3;left:-5px;right:-5px;top:-10px;height:22px;border:2px solid rgba(181,213,226,.35);border-radius:50%;background:#142838}.water{position:absolute;bottom:0;width:100%;background:linear-gradient(180deg,#4a9db6,#176984);transition:height 1.2s cubic-bezier(.2,.8,.2,1);opacity:.9}.water:before{content:"";position:absolute;left:-10%;top:-10px;width:120%;height:22px;border-radius:50%;background:#61afc2;animation:wave 5s ease-in-out infinite}.water i{position:absolute;border-radius:50%;background:rgba(255,255,255,.25);width:5px;height:5px;left:25%;top:22%;animation:bubble 5s infinite}.water i+ i{left:69%;top:55%;animation-delay:1.7s}.level-number{position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:center}.level-number strong{font:600 80px/1 var(--font-display)}.level-number>span{font:500 21px var(--font-display);margin-top:-32px}.level-number small{position:absolute;top:63%;font-size:7px;letter-spacing:.2em;background:rgba(7,17,27,.62);padding:6px 9px;border-radius:20px;color:#d9ede8}.tank-metrics{display:flex;flex-direction:column}.tank-metrics div{padding:25px 0;border-bottom:1px solid var(--line)}.tank-metrics div:last-child{border:0}.tank-metrics small{display:block;color:var(--muted);font-size:7px;letter-spacing:.14em;margin-bottom:7px}.tank-metrics b{font:600 26px var(--font-display)}.tank-metrics em{font:400 10px var(--font-sans);font-style:normal;color:var(--muted)}.tank-foot{margin:0 28px;padding-top:18px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}.tank-foot span{font-size:7px;color:var(--muted)}.tank-foot b{color:#e8eef0}.tank-foot>div{height:3px;background:#263949}.tank-foot i{display:block;height:100%;background:linear-gradient(90deg,#d4a05b,var(--green))}.weather-card{min-height:290px}.compass{width:170px;height:170px;border:1px solid rgba(255,255,255,.13);border-radius:50%;margin:4px auto 10px;position:relative;display:grid;place-items:center;background:radial-gradient(circle,rgba(203,170,104,.05),transparent 60%)}.compass>span{position:absolute;font-size:7px;color:#84939f}.compass .n{top:7px;color:var(--gold)}.compass .e{right:9px}.compass .s{bottom:7px}.compass .w{left:9px}.dial{position:absolute;inset:27px;border:1px dashed rgba(255,255,255,.13);border-radius:50%}.dial i{position:absolute;width:3px;height:90px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(42deg);background:linear-gradient(var(--gold) 50%,#506476 50%);clip-path:polygon(50% 0,100% 47%,65% 50%,65% 100%,35% 100%,35% 50%,0 47%)}.compass strong{font:600 28px var(--font-display);z-index:2}.compass small{position:absolute;top:103px;font-size:6px;letter-spacing:.14em;color:var(--muted)}.signal-row{margin:0 20px;padding:15px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px}.signal-row div:first-child{margin-right:auto}.signal-row small{font-size:6px;color:var(--muted);display:block}.signal-row b{font-size:10px}.signal-row>span{font-size:7px;color:var(--green)}.bars{height:22px;display:flex;align-items:end;gap:2px}.bars i{width:3px;background:var(--green);height:25%}.bars i:nth-child(2){height:40%}.bars i:nth-child(3){height:60%}.bars i:nth-child(4){height:80%}.bars i:nth-child(5){height:100%;opacity:.25}.chart-card{min-height:285px;grid-column:2/4}.chart{height:190px;margin:0 22px;position:relative}.grid-lines{position:absolute;inset:10px 0 28px;background:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 38px)}.bars-chart{position:absolute;inset:10px 0 28px;display:flex;align-items:end;gap:3.5%}.bars-chart i{width:5%;min-width:7px;background:linear-gradient(180deg,#72adc1,#2a718b);border-radius:3px 3px 0 0;position:relative;opacity:.5}.bars-chart i.last{background:var(--gold);opacity:1;box-shadow:0 0 18px rgba(203,170,104,.25)}.bars-chart i span{position:absolute;top:-21px;left:50%;transform:translateX(-50%);font:normal 8px var(--font-sans);color:var(--gold)}.axis{position:absolute;bottom:7px;left:0;right:0;display:flex;justify-content:space-between;color:#657786;font-size:6px}.control-card,.alarm-card{min-height:220px}.pump{margin:0 20px;padding:18px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:13px}.pump-icon{width:43px;height:43px;border-radius:50%;border:1px solid rgba(84,196,155,.32);display:grid;place-items:center;color:var(--green)}.pump>div:nth-child(2){display:flex;flex-direction:column;margin-right:auto}.pump small{font-size:6px;color:var(--muted)}.pump b{font-size:10px;margin:3px 0}.pump span{font-size:6px;color:var(--muted)}.switch{width:38px;height:20px;border:0;border-radius:20px;background:#3a4854;padding:2px;cursor:pointer}.switch i{display:block;width:16px;height:16px;background:#fff;border-radius:50%;transition:.3s}.switch.on{background:var(--green)}.switch.on i{transform:translateX(18px)}.manual{margin:0 20px;width:calc(100% - 40px);height:42px;border:1px solid rgba(203,170,104,.25);background:rgba(203,170,104,.07);color:var(--gold);font-size:8px;letter-spacing:.12em;display:flex;justify-content:space-between;align-items:center;padding:0 14px;cursor:pointer}.event{height:62px;margin:0 20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px}.event>i,.log-row>i{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9px}.ok{background:rgba(84,196,155,.1);color:var(--green)}.warn{background:rgba(225,167,91,.11);color:var(--warn)}.event p{display:flex;flex-direction:column;margin:0 auto 0 0}.event b{font-size:8px}.event small{color:var(--muted);font-size:6px;margin-top:4px}.event time{font-size:7px;color:var(--muted)}.sub-page{padding-top:24px}.hero-panel{min-height:260px;padding:42px;background:linear-gradient(110deg,#142b3c,#102332 57%,rgba(203,170,104,.16));border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.hero-panel>div{max-width:650px}.hero-panel span{color:var(--gold);font-size:8px;letter-spacing:.2em}.hero-panel h2{font:600 clamp(34px,4vw,60px)/.95 var(--font-display);margin:16px 0}.hero-panel p{font-size:11px;line-height:1.8;color:var(--muted)}.hero-panel button,.form-panel>button{border:0;background:var(--gold);color:var(--navy);padding:17px 22px;font-weight:800;font-size:8px;letter-spacing:.12em;cursor:pointer}.device-list{margin-top:16px;padding:30px}.device-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}.device-art{width:64px;height:64px;border:1px solid rgba(203,170,104,.26);display:grid;place-items:center;color:var(--gold);font-size:30px}.device-row small{color:var(--green);font-size:7px;letter-spacing:.13em}.device-row h3{margin:6px 0;font:600 22px var(--font-display)}.device-row p{margin:0;color:var(--muted);font-size:9px}.online{color:var(--green);font-size:8px}.device-actions{display:flex;gap:8px;border-top:1px solid var(--line);margin-top:25px;padding-top:20px}.device-actions button{border:1px solid var(--line);background:#0a1723;padding:11px 16px;font-size:8px;cursor:pointer}.summary-row{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.summary-row>div{padding:24px;display:flex;flex-direction:column}.summary-row small{font-size:7px;color:var(--muted)}.summary-row b{font:600 36px var(--font-display);margin:8px 0}.summary-row span{font-size:7px;color:var(--green)}.log{margin-top:15px;padding:10px 22px 22px}.log-row{height:70px;border-top:1px solid var(--line);display:grid;grid-template-columns:35px 1fr auto;align-items:center}.log-row b{font-size:9px}.log-row span{font-size:8px;color:var(--muted)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-panel{padding:10px 24px 28px;display:grid;grid-template-columns:1fr 1fr;gap:17px}.form-panel .panel-head{grid-column:1/3;padding-left:0}.form-panel label{font-size:7px;letter-spacing:.08em;color:var(--muted);display:flex;flex-direction:column;gap:7px}.form-panel input,.form-panel select{height:43px;border:1px solid var(--line);background:#091722;color:#fff;padding:0 12px;font-size:9px}.form-panel>button{grid-column:1/3}.modal-backdrop{position:fixed;inset:0;z-index:50;background:rgba(1,7,12,.88);backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px}.qr-modal{width:min(460px,100%);background:#102333;border:1px solid rgba(203,170,104,.3);padding:38px;text-align:center;position:relative;box-shadow:0 30px 80px #000}.qr-modal .close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:24px;color:var(--muted);cursor:pointer}.qr-modal>span{font-size:7px;letter-spacing:.2em;color:var(--gold)}.qr-modal h2{font:600 32px var(--font-display);margin:13px 0}.qr-modal p{font-size:9px;line-height:1.7;color:var(--muted)}.scanner{height:230px;margin:25px auto;max-width:270px;background:#07131d;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;overflow:hidden}.scanner>span{font-size:64px;color:#cbd7dc}.scanner small{font-size:7px;color:var(--muted)}.corners{position:absolute;inset:17px;border:2px solid var(--gold);clip-path:polygon(0 0,25% 0,25% 2px,2px 2px,2px 25%,0 25%,0 0,100% 0,100% 25%,calc(100% - 2px) 25%,calc(100% - 2px) 2px,75% 2px,75% 0,100% 0,100% 100%,75% 100%,75% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 75%,100% 75%,100% 100%,0 100%,0 75%,2px 75%,2px calc(100% - 2px),25% calc(100% - 2px),25% 100%)}.scan-line{position:absolute;left:22px;right:22px;height:1px;background:var(--gold);box-shadow:0 0 15px var(--gold);animation:scan 2.4s ease-in-out infinite}.qr-modal .primary{width:100%;height:48px;border:0;background:var(--gold);color:var(--navy);font-size:8px;font-weight:800;letter-spacing:.13em;cursor:pointer}.verified{height:230px;margin:25px 0;background:#091722;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.verified i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(84,196,155,.13);color:var(--green);font-size:28px;font-style:normal}.verified b{font:600 25px var(--font-display)}.verified span{font-size:7px;color:var(--muted)}.toast{position:fixed;z-index:70;right:24px;bottom:24px;background:#183345;border:1px solid rgba(84,196,155,.25);padding:14px 20px;font-size:9px;box-shadow:0 12px 30px #000;animation:toastIn .3s}.toast i{font-style:normal;color:var(--green);margin-right:9px}.mobile-nav{display:none}@keyframes wave{50%{transform:translateX(7%) scaleY(.75)}}@keyframes bubble{to{transform:translateY(-100px);opacity:0}}@keyframes scan{0%,100%{top:25px}50%{top:205px}}@keyframes toastIn{from{transform:translateY(15px);opacity:0}}

@media(max-width:1100px){.dashboard-grid{grid-template-columns:1fr 1fr}.tank-card{grid-row:span 2}.chart-card{grid-column:1/3}.connection-strip{grid-template-columns:1fr auto}.add-device{display:none}.settings-grid{grid-template-columns:1fr}.tank-visual{width:220px}.content{padding-right:24px;padding-left:24px}}
@media(max-width:760px){.app-shell{display:block;padding-bottom:72px}.sidebar{display:none}.content{padding:0 14px 24px}.topbar{height:86px}.topbar p{font-size:6px}.top-actions .status{display:none}.connection-strip{grid-template-columns:1fr;gap:10px;padding:14px 0}.connection-tabs{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.connection-tabs button{padding:11px 5px}.dashboard-grid{grid-template-columns:1fr;gap:12px;padding-top:12px}.tank-card,.weather-card,.chart-card,.control-card,.alarm-card{grid-column:1;min-height:0}.tank-zone{height:355px;grid-template-columns:1fr .68fr;padding:0 14px}.tank-visual{height:300px;width:180px}.level-number strong{font-size:64px}.tank-metrics div{padding:20px 0}.tank-metrics b{font-size:21px}.chart-card{height:290px}.mobile-nav{position:fixed;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);height:66px;left:0;right:0;bottom:0;background:rgba(7,17,27,.96);backdrop-filter:blur(15px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.mobile-nav button{border:0;background:none;color:#647786;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.mobile-nav button.active{color:var(--gold)}.mobile-nav button>span{font-size:18px}.mobile-nav small{font-size:7px}.hero-panel{padding:28px 22px;display:block}.hero-panel button{margin-top:18px}.device-list{padding:20px 15px}.device-row{grid-template-columns:auto 1fr}.device-row .online{grid-column:2}.device-actions{display:grid;grid-template-columns:1fr}.summary-row{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.form-panel{grid-template-columns:1fr}.form-panel .panel-head,.form-panel>button{grid-column:1}.qr-modal{padding:32px 22px}.toast{left:15px;right:15px;bottom:82px}.topbar h1{font-size:25px}}
@media(max-width:410px){.tank-zone{grid-template-columns:1fr .6fr}.tank-visual{width:150px;height:280px}.tank-metrics b{font-size:18px}.tank-foot{margin:0 15px}.compass{width:155px;height:155px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}