:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;color:#f6fdff;background:#00101c;color-scheme:dark;font-synthesis:none;--aqua:#2de5ee;--mint:#45f0de;--green:#1fe17b;--muted:#c5dde6}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}body{background:radial-gradient(ellipse at 58% 0%,#0a6176 0%,transparent 34%),linear-gradient(180deg,#001a29 0%,#001420 52%,#001b28 100%)}
button,input{font:inherit}button{cursor:pointer}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.app{width:min(100%,560px);height:100vh;height:100dvh;display:flex;flex-direction:column;margin:auto;position:relative;isolation:isolate;overflow:hidden;padding:0 10px;box-shadow:0 0 80px #0005}
.mast{position:relative;flex:none;min-height:calc(118px + env(safe-area-inset-top,0px));padding:calc(6px + env(safe-area-inset-top,0px)) 11px 2px;margin:0 -10px;overflow:hidden;background:linear-gradient(90deg,#021926e8 0%,#07364aa8 42%,transparent 100%),linear-gradient(165deg,#042638,#0a4a5f)}
.mast:after{content:"";position:absolute;inset:auto 0 0;height:22px;background:linear-gradient(0deg,#001320,transparent);pointer-events:none;z-index:1}
.mast-art{position:absolute;inset:0;background:linear-gradient(90deg,#041824e8 0%,#03233780 30%,#0000 82%),url('yacht.jpg') right 35% / auto 100% no-repeat;filter:saturate(1.35) contrast(1.12) brightness(.9)}
.brandline{display:flex;align-items:center;gap:8px;position:relative;z-index:2;padding:1px 2px}.mark{width:50px;min-width:50px;color:#39edff;filter:drop-shadow(0 0 5px #16d6ff88)}.mark svg{width:100%;height:auto;stroke:none}
.brandtext{min-width:0;flex:1}.brandtext h1{font-size:clamp(20px,6.2vw,31px);font-weight:500;white-space:nowrap;line-height:1.02;letter-spacing:-1.1px;margin:0;text-shadow:0 2px 8px #001421}.tagline{margin-top:2px;font-size:clamp(10px,3.2vw,14px);font-weight:350;letter-spacing:.15px;color:#b1d0df;line-height:1.02;border-left:2px solid var(--aqua);padding-left:6px}
.gear{width:31px;height:31px;flex-shrink:0;display:grid;place-items:center;color:#ecfcff;border:1px solid #2e98b7;background:linear-gradient(145deg,#0d5b77aa,#033a52e0);box-shadow:inset 0 0 10px #54e7ff2a;border-radius:10px;padding:0}.gear svg{width:19px;height:19px}
.mast-info{position:relative;z-index:3;margin:10px 0 0 7px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.online-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #4e8f87;border-radius:40px;background:#0b3c42c0;padding:5px 10px;color:#eaf6f7;font-size:11px;line-height:1;font-weight:750;letter-spacing:.1px;white-space:nowrap;box-shadow:inset 0 0 8px #15829a33}.orb{background:#8ba9b1;border-radius:50%;height:8px;width:8px;flex-shrink:0}.online-pill.online{color:#f0fff8;border-color:#28ec8e;background:linear-gradient(110deg,#046c49ee,#0b3d43e8);box-shadow:inset 0 0 14px #2cff9d38,0 0 10px #21f69a2a}.online-pill.online .orb{background:#32f08e;box-shadow:0 0 8px #2af18f}.online-pill.offline{border-color:#ff7d81;color:#ffd7d7}.online-pill.offline .orb{background:#ff7272}
.last-seen{font-size:11px;color:#e3eef5;text-shadow:0 1px 5px #000b}.last-seen:before{content:'◷';font-size:14px;margin-right:6px;vertical-align:-1px;color:#d1faff}
.app>main{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 1px 10px;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}.app>main::-webkit-scrollbar{display:none}
.info-banner{padding:8px 11px;border:1px solid #3198af;background:#06384a;border-radius:12px;margin:5px 0 10px;color:#caedf2;font-size:11px;line-height:1.4}.info-banner.hidden{display:none}
.page{display:none}.page.active{display:block}.panel{position:relative;overflow:hidden;border:1px solid #2bafc7;border-radius:15px;background:linear-gradient(115deg,#0a4f64e6 0%,#022c40fb 58%,#0a4257f2 100%);box-shadow:inset 0 1px 2px #b1f7ff45,inset 0 -7px 20px #006c8518,0 5px 15px #0008;margin-bottom:9px}.panel:before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse 65% 55% at 18% 0%,#2ae4f32f,transparent 100%)}
.panel:after{content:'';position:absolute;pointer-events:none;bottom:-24px;right:-10px;width:82%;height:58px;border-radius:50%;border-top:1.5px solid #34d8e1a6;transform:rotate(-10deg);box-shadow:0 -10px 15px #21d8e81d,0 -24px 13px #1ed1ec0a}
.main-panel{padding:11px 11px 15px;border-color:#36d7e6;min-height:189px;background:linear-gradient(127deg,#0e5c72f0 0%,#05384bf5 40%,#0d4a5eef 100%);box-shadow:inset 0 1px 4px #95f7ff4f,0 0 10px #1bc9dc14;margin-top:1px}
.section-title,.small-title{display:flex;align-items:center;gap:9px;position:relative;z-index:2}.section-title svg{width:31px;height:31px;color:#7afffa;filter:drop-shadow(0 0 4px #1ae9ff75)}.section-title h2{font-size:clamp(19px,5.6vw,28px);font-weight:700;letter-spacing:-.5px;margin:0}.mini-status{display:none}
.main-stats{position:relative;z-index:2;display:grid;grid-template-columns:56% 44%;align-items:center;margin-top:9px;min-height:132px;background:linear-gradient(112deg,#05455bc9,#00273b6b 55%,transparent);border-radius:16px}
.stats-left{height:100%;padding:8px 7px 8px 1px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid #72e4ec52}.metric{display:flex;align-items:center;gap:8px}.metric-icon{color:#7ffffa;flex-shrink:0;width:28px;height:28px;margin-left:2px;stroke-width:1.9}.metric-body{min-width:0}.metric small{display:block;font-size:clamp(10px,3.3vw,15px);color:#deedf4;line-height:1.1;white-space:nowrap}.metric-number{display:flex;align-items:baseline;gap:5px;margin-top:5px;white-space:nowrap}.metric strong{font-size:clamp(24px,7.2vw,37px);font-weight:760;line-height:1;letter-spacing:-.6px}.metric span{font-weight:700;font-size:clamp(17px,4.8vw,26px)}.hairline{height:1px;background:#86b9c766;margin:13px 0 10px 6px}.current-hint{display:none}
.soc-wrap{display:grid;place-items:center}.soc-ring{--soc:0%;width:min(35vw,164px);height:min(35vw,164px);min-width:118px;min-height:118px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(from 0deg,#4af2df 0%,#24dbc7 var(--soc),#5f7987 var(--soc) 100%);filter:drop-shadow(0 0 8px #3ae6d133);box-shadow:inset 0 0 10px #62f5e13a}.soc-ring:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0%,#fff9 5%,transparent 12%,transparent 64%,#00e7fe75 65%,transparent 72%);mix-blend-mode:screen;opacity:.32}.soc-ring:after{content:'';position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 50% 80%,#00454e,#00263a 70%,#001726);box-shadow:inset 0 0 9px #00121c,0 0 0 1px #68eeef22}.soc-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-shadow:0 1px 9px #0affc535}.soc-center small{font-size:16px;color:#fff}.soc-text{display:flex;align-items:baseline}.soc-center strong{font-size:clamp(29px,9vw,48px);line-height:1.15}.soc-center .soc-text span{font-size:clamp(20px,6vw,35px);font-weight:750}.soc-icon{width:25px;height:25px;color:#00ebff;margin-top:1px;stroke-width:2.2}.panel-water{position:absolute;bottom:0;width:100%;height:18px;background:linear-gradient(90deg,transparent,#05edff29,transparent);pointer-events:none}
.batt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:9px 0}.batt-tile{margin:0;min-height:78px;padding:9px 7px 8px 13px;background:linear-gradient(128deg,#0b5368ea,#032c42 82%)}.batt-tile:after{height:28px;bottom:-9px;right:-22px;width:75%;border-color:#4ad9e8b5;box-shadow:0 -7px 12px #26bfd928}.batt-tile:before{content:'';position:absolute;top:33%;left:5px;height:42%;width:4px;border-radius:4px;background:#2ce4cc;box-shadow:0 0 9px #27dbc0;inset:auto;transform:none}.batt-tile-top{position:relative;display:flex;align-items:flex-start;gap:11px;z-index:2}.batt-tile-top>svg{width:25px;height:25px;color:#84ffff;flex-shrink:0;stroke-width:2}.batt-tile-top>div{min-width:0}.batt-tile strong{font-size:clamp(12px,3.4vw,17px);display:block;line-height:1.08}.batt-tile small{display:block;font-size:clamp(10px,3.05vw,15px);color:#e0e9f1;margin-top:3px;line-height:1}.batt-value{display:flex;align-items:center;gap:7px;margin-top:5px;color:#f9fcff;font-size:clamp(18px,5.8vw,27px);font-weight:720;white-space:nowrap;letter-spacing:-.3px;line-height:1}.batt-value svg{width:19px;height:19px;stroke-width:2.2;color:#7bffff}
.lower-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:8px}.small-panel{padding:9px 8px;min-height:133px}.small-title svg{width:24px;height:24px;color:#80fff8}.small-title h3{font-size:clamp(17px,4.8vw,23px);margin:0;font-weight:720;line-height:1}.env-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0;margin-top:10px;border-radius:12px;background:#074a5d72;padding:5px 4px}.env-item{display:flex;align-items:center;gap:5px;min-width:0;padding:6px 2px}.env-item:nth-child(1),.env-item:nth-child(2){border-bottom:1px solid #94cce356}.env-item:nth-child(odd){border-right:1px solid #94cce356}.env-item svg{width:18px;height:21px;color:#8affff;flex-shrink:0}.env-item div{min-width:0}.env-grid small{display:block;font-size:clamp(8px,2.25vw,12px);color:#e2edf6;white-space:nowrap}.env-grid strong{display:block;margin-top:3px;font-size:clamp(11px,3.2vw,18px);white-space:nowrap;font-weight:700}
.bilge-panel{background:linear-gradient(125deg,#0a5a56,#034540 55%,#0a6754);border-color:#2ac7a1}.bilge-panel:after{border-color:#35e48f;box-shadow:0 -8px 15px #1fe08138}.bilge-state{position:relative;z-index:2;display:flex;align-items:center;gap:5px;margin-top:14px;padding:6px 0}.bilge-state svg{width:clamp(30px,9vw,52px);height:clamp(30px,9vw,52px);color:#b0f7d8;filter:drop-shadow(0 0 7px #39e39b52);flex-shrink:0}.bilge-state strong{font-size:clamp(10px,3.4vw,19px);color:#d8ffee;display:block;font-weight:750;line-height:1}.bilge-state small{display:block;color:#e7f8f1;margin-top:6px;font-size:clamp(9px,2.5vw,12px);line-height:1.25}.bilge-panel.safe{background:linear-gradient(124deg,#0b6f58,#095848 60%,#13885d);border-color:#31e48f;box-shadow:inset 0 0 20px #1ede7426,0 0 10px #21e77d22}.bilge-panel.safe .bilge-state svg,.bilge-panel.safe .bilge-state strong{color:#52ef98;filter:drop-shadow(0 0 7px #3de58a66)}.bilge-panel.alarm{border-color:#ff7070;background:linear-gradient(120deg,#692038,#431529)}.bilge-panel.alarm .bilge-state strong,.bilge-panel.alarm .bilge-state svg{color:#ffabab}
.alert-panel{padding:11px 12px;min-height:74px;cursor:pointer;background:linear-gradient(118deg,#0b546c,#032f43 65%,#0c5d67)}.alert-panel .small-title{gap:10px}.alert-panel .arrow{margin-left:auto;width:18px}.alarm-rows{position:relative;z-index:2;margin-top:9px;padding:5px 9px;border-top:1px solid #79d4e65e;background:#0844593b}.alarm-row{display:flex;gap:9px;align-items:center;min-height:29px;font-size:clamp(10px,3vw,13px);line-height:1.25;color:#ecfbff}.alarm-row svg{color:#65dce6;width:16px;height:16px;flex-shrink:0}
.tabbar{position:relative;flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:0;margin:2px 0 0;padding:3px 4px max(3px, calc(env(safe-area-inset-bottom,0px) - 22px));width:100%;border-radius:16px 16px 0 0;border:1px solid #217e98;border-bottom:0;background:linear-gradient(180deg,#073d53,#022334);box-shadow:inset 0 1px 2px #2ad7ea38,0 -8px 22px #000c;z-index:10}.tab{border:0;border-radius:12px;background:transparent;color:#e2f1f4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:45px;padding:4px 2px;font-size:clamp(10px,2.9vw,13px);position:relative}.tab:not(:last-child):after{content:'';position:absolute;right:0;top:10px;height:22px;width:1px;background:#53b5ca69}.tab svg{width:20px;height:20px}.tab.active{color:#fff;background:linear-gradient(150deg,#0d6277,#07455a);box-shadow:inset 0 -2px 0 #42e8d8,inset 0 0 13px #34dce95e,0 0 8px #20dbe216}.tab.active svg{color:#8af8ee;filter:drop-shadow(0 0 5px #4de8dd)}footer{display:none}
.page-head{padding:10px 6px}.page-head h2{font-size:24px;margin:0 0 5px}.page-head p{font-size:13px;color:#b5d7e6;margin:0}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-card{padding:16px}.detail-card svg{color:#8cffff}.detail-card small{display:block;font-size:11px;color:#b9d8e3;margin-top:6px}.detail-card h3{font-size:16px;margin:6px 0}.detail-card .big{font-size:25px;color:white}.note{padding:16px;font-size:12px;color:#d4ebf1;line-height:1.6;margin-top:10px}.note strong{font-size:14px;color:white}.note p{margin:7px 0}.history-panel{padding:24px 18px;text-align:center;line-height:1.65}.history-panel h3{font-size:18px;margin:6px 0}.history-panel p{font-size:13px;color:#c0dfeb}.history-icon{width:60px;height:60px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:#074d62;color:#93ffff}.history-note{padding:10px;background:#00334a;border-radius:10px;font-size:12px;color:#abf4fb}
.modal-wrap{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(14px + env(safe-area-inset-bottom,0px))}.modal-wrap.hidden{display:none}.modal-backdrop{position:absolute;inset:0;background:#000b;backdrop-filter:blur(6px)}.settings-card{position:relative;max-width:500px;width:100%;max-height:90%;overflow:auto;padding:22px;background:linear-gradient(150deg,#065772,#002037);border:1px solid #21c5d8;border-radius:22px;box-shadow:0 15px 70px #000b}.settings-head{display:flex;justify-content:space-between;align-items:start}.settings-head small{font-size:10px;letter-spacing:2px;color:#8bffff}.settings-head h2{margin:6px 0 18px}.settings-head button{background:#06415d;border:1px solid #2f94a5;color:white;border-radius:11px;width:36px;height:36px}#settings-form label{font-size:12px;color:#c1e3f0;display:block;margin-bottom:16px}#settings-form input[type=url],#settings-form input[type=password]{width:100%;margin-top:7px;border:1px solid #48a4b4;background:#001d2f;border-radius:10px;padding:12px;color:white;font-size:13px}.remember{display:flex!important;gap:10px;align-items:center}.remember input{accent-color:#32f5d9}.save,.disconnect{width:100%;padding:12px;border-radius:11px;font-weight:700}.save{background:#39ecdd;border:1px solid #94ffed;color:#002a39}.disconnect{margin-top:9px;background:#063c50;border:1px solid #3a8398;color:white}.settings-note{font-size:11px;color:#a9cedb;line-height:1.45}.settings-result{font-size:12px;color:#78ffe1}
@media (min-width:560px){.mast{min-height:145px}.mast-info{margin-top:16px}.main-panel{min-height:235px}.main-stats{min-height:172px}.batt-tile{min-height:94px}.small-panel{min-height:160px}.metric small{font-size:15px}.metric strong{font-size:40px}.metric span{font-size:24px}.soc-ring{width:174px;height:174px}.env-grid small{font-size:12px}.env-grid strong{font-size:19px}.bilge-state strong{font-size:19px}}
@media (max-width:360px){.mark{min-width:44px;width:44px}.brandtext h1{font-size:19px}.tagline{font-size:10px}.mast{min-height:calc(112px + env(safe-area-inset-top,0px))}.main-panel{min-height:173px}.main-stats{min-height:120px}.metric strong{font-size:24px}.metric span{font-size:16px}.soc-ring{min-width:107px;min-height:107px}.batt-tile{min-height:70px}.batt-tile-top{gap:6px}.small-panel{min-height:122px}.env-grid small{font-size:8px}.env-grid strong{font-size:11px}.bilge-state{gap:3px}.bilge-state svg{width:29px;height:29px}}

/* Marine Monitor v2.2.3 - blu oceano intenso, header compatto, navigazione slim */
:root {--aqua:#16caff;--mint:#3df5df;--green:#28f38a;--muted:#d1e5f3;background:#000d25}
body {background:radial-gradient(ellipse at 55% 0%,#064a91 0%,transparent 34%),linear-gradient(180deg,#001e4d 0%,#000c2b 60%,#001638 100%)}
.app {background:linear-gradient(180deg,#001b42 0%,#000e2b 60%,#00142b 100%)}
.mast {min-height:calc(93px + env(safe-area-inset-top,0px));background:linear-gradient(90deg,#00132eed 0%,#00346f8a 48%,transparent 100%),linear-gradient(165deg,#001a43,#02569b);padding-bottom:3px}
.mast-art {background:linear-gradient(90deg,#001535e6 0%,#00204d82 38%,transparent 82%),url('yacht.jpg') right 36% / auto 100% no-repeat;filter:saturate(1.7) contrast(1.25) brightness(.95)}
.mast:after {height:13px;background:linear-gradient(0deg,#00163a,transparent)}
.brandline {padding:0 2px}
.mark {width:45px;min-width:45px;color:#39dcff}
.brandtext h1 {font-size:clamp(20px,5.8vw,30px);letter-spacing:-.7px}
.tagline {font-size:clamp(9px,2.9vw,13px);margin-top:1px;color:#c3e0f5}
.gear {width:31px;height:31px;border-color:#3fbcf0;background:linear-gradient(140deg,#0075b7b0,#003e86b3)}
.mast-info {margin:7px 5px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.online-pill {padding:5px 7px;font-size:clamp(9px,2.65vw,11px);gap:5px;flex-shrink:0}
.last-seen {min-width:0;text-align:right;font-size:clamp(9px,2.5vw,11px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e5f3ff}
.last-seen:before {margin-right:4px;font-size:12px}
.panel {border-color:#139de2;background:linear-gradient(116deg,#074786f0 0%,#002755fc 51%,#064879fa 100%);box-shadow:inset 0 1px 2px #75d4ff65,inset 0 -5px 20px #003a821e,0 5px 15px #0009}
.panel:before {background:radial-gradient(ellipse 70% 55% at 18% 0%,#008cff38,transparent 100%)}
.panel:after {border-top-color:#05d5ffbd;box-shadow:0 -12px 16px #008cf82e,0 -22px 13px #0478fa13}
.main-panel {border-color:#1fd1ff;background:linear-gradient(125deg,#0763a2f7 0%,#002858fc 43%,#034f8cfc 100%);box-shadow:inset 0 1px 5px #61cfff80,0 0 12px #008cfa28}
.main-stats {background:linear-gradient(115deg,#004d92b3,#001d48ad 58%,transparent)}
.stats-left {border-right-color:#62c9fc66}
.metric-icon,.section-title svg,.small-title svg,.batt-tile-top>svg,.batt-value svg,.env-item svg {color:#43e4ff}
.soc-ring {background:conic-gradient(from 0deg,#46ffdd 0%,#03e2cf var(--soc),#34577e var(--soc) 100%);filter:drop-shadow(0 0 11px #00d8ff58)}
.soc-ring:after {background:radial-gradient(circle at 50% 85%,#005073,#001c41 70%,#00112d)}
.batt-tile {background:linear-gradient(135deg,#07558ef5,#002450 85%);border-color:#119de0}
.batt-tile:before {background:#0eeccf;box-shadow:0 0 12px #00eed3}
.batt-tile:after {border-color:#0bc9fb;box-shadow:0 -7px 14px #008bff4a}
.env-grid {background:#00527c75}
.env-item:nth-child(1),.env-item:nth-child(2) {border-bottom-color:#84caf16e}
.env-item:nth-child(odd) {border-right-color:#84caf16e}
/* Keep the luminous green reserved for an actually verified dry bilge. */
.bilge-panel {background:linear-gradient(125deg,#07575c,#003d49 55%,#086b52);border-color:#19cfa5}
.bilge-panel.safe {background:linear-gradient(120deg,#08744e,#026b48 58%,#008e4f);border-color:#37ff9e;box-shadow:inset 0 0 25px #1dff933f,0 0 16px #00ff8e40}
.bilge-panel.safe .bilge-state svg,.bilge-panel.safe .bilge-state strong {color:#43ff92;filter:drop-shadow(0 0 10px #2cff8cbb)}
.alert-panel {background:linear-gradient(118deg,#07568c,#002955 64%,#06658e)}
/* Compact, separately outlined controls; safe-area is OUTSIDE the menu. */
.tabbar {flex:none;position:relative;z-index:10;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;align-items:stretch;min-height:0;margin:3px 0 env(safe-area-inset-bottom,0px);padding:3px;border:1px solid #1379bb;border-radius:13px;background:linear-gradient(180deg,#034779,#002448);box-shadow:inset 0 1px 0 #2ebaf86b,0 -3px 12px #0009}
.tab {min-height:36px;padding:3px 1px 2px;gap:1px;border-radius:9px;border:1px solid #146a9b6e;background:linear-gradient(180deg,#06477780,#002a53a0);font-size:clamp(10px,2.65vw,12px);font-weight:600;line-height:1.05}
.tab svg {width:18px;height:18px;stroke-width:2}
.tab:not(:last-child):after {display:none}
.tab.active {border-color:#1bd7ed;color:#fff;background:linear-gradient(160deg,#0674a3,#034f82);box-shadow:inset 0 -2px 0 #22f1e1,inset 0 0 11px #12d7ff74}
.tab.active svg {color:#a0fffa;filter:drop-shadow(0 0 4px #29efff)}
.app>main {padding-bottom:7px}
@media (max-width:360px){.mast{min-height:calc(90px + env(safe-area-inset-top,0px))}.mast-info{gap:4px}.online-pill{padding:4px 5px;font-size:9px}.last-seen{font-size:9px}.mark{width:38px;min-width:38px}.brandtext h1{font-size:19px}}
@media (min-width:560px){.mast{min-height:145px}.mast-info{margin-top:13px}}

/* v2.2.5 — barra menu sul bordo fisico inferiore, senza fascia vuota. */
.app{padding-bottom:51px;}
.tabbar{
  position:fixed!important;
  bottom:0!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%);
  width:min(100%,560px)!important;
  margin:0!important;
  padding:2px 5px 0!important;
  border-radius:13px 13px 0 0!important;
  min-height:49px;
  z-index:20;
  box-sizing:border-box;
}
.tab{min-height:43px!important;padding:3px 2px!important;}
@supports (height: 100dvh) {
  .app {height:100dvh;}
}

/* v2.2.10: iOS standalone PWA - extend the dock below WebKit's reduced
   viewport, without stacking a second safe-area padding. */
.app { padding-bottom: 51px !important; }
.tabbar {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(8px - env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  width: min(calc(100% - 16px), 544px) !important;
  min-height: 47px !important;
  margin: 0 !important;
  padding: 3px !important;
  gap: 0 !important;
  border: 1px solid #1c7397 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg,#053657 0%,#001b37 100%) !important;
  box-shadow: inset 0 1px 0 #47c8ee55, 0 5px 22px #000a, 0 0 10px #008ae422 !important;
  z-index: 999 !important;
}
.tabbar .tab {
  min-height: 41px !important;
  padding: 4px 2px 3px !important;
  gap: 2px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #dfedf9 !important;
  font-weight: 550 !important;
  position: relative;
}
.tabbar .tab:not(:last-child)::after {
  display: block !important;
  content: '';
  position: absolute;
  top: 10px;
  right: 0;
  height: 23px;
  width: 1px;
  background: #2e8bb670;
}
.tabbar .tab svg {width: 20px !important; height: 20px !important;}
.tabbar .tab.active {
  color:#fff !important;
  background:linear-gradient(145deg,#0c7296 0%,#004361 100%) !important;
  box-shadow:inset 0 -2px 0 #37e5db, inset 0 0 14px #4ee9f267, 0 0 7px #1cd7ed25 !important;
  text-shadow:0 0 5px #bdfcff48;
}
.tabbar .tab.active:after {display:none !important;}
.tabbar .tab.active svg {color:#8cfbf1 !important;filter:drop-shadow(0 0 5px #46e2e5a0)}
/* Slightly shorter content clearance: the dock stays independent of scroll. */
.app>main{padding-bottom:8px !important;}


/* v2.2.10 — dock slightly raised, header and service bank slightly more compact */
.mast{min-height:calc(84px + env(safe-area-inset-top,0px)) !important;padding-bottom:2px !important;}
.mark{width:42px !important;min-width:42px !important;}
.brandtext h1{font-size:clamp(19px,5.6vw,28px) !important;}
.tagline{font-size:clamp(9px,2.8vw,12px) !important;}
.gear{width:29px !important;height:29px !important;}
.mast-info{margin:5px 5px 0 !important;gap:7px !important;}
.online-pill{padding:4px 7px !important;font-size:clamp(9px,2.55vw,10.5px) !important;}
.last-seen{font-size:clamp(9px,2.4vw,10.5px) !important;}
.main-panel{padding:9px 10px 12px !important;min-height:172px !important;}
.main-stats{margin-top:7px !important;min-height:118px !important;}
.metric-label{font-size:clamp(11px,3.1vw,15px) !important;}
.metric-value{font-size:clamp(22px,7vw,50px) !important;}
.soc-ring{width:min(33vw,154px) !important;height:min(33vw,154px) !important;min-width:108px !important;min-height:108px !important;}
.section-title h2{font-size:clamp(18px,5.2vw,26px) !important;}
.app{padding-bottom:50px !important;}
.tabbar{bottom:calc(18px - env(safe-area-inset-bottom,0px)) !important;}


/* v2.2.10 — dock raised a little more, palette darker blue */
:root{background:#00091b !important;}
body{background:radial-gradient(ellipse at 55% 0%,#033b78 0%,transparent 34%),linear-gradient(180deg,#00163c 0%,#000a22 60%,#001127 100%) !important;}
.app{background:linear-gradient(180deg,#001739 0%,#000a22 60%,#001022 100%) !important;}
.mast{background:linear-gradient(90deg,#00102ae8 0%,#002d6182 48%,transparent 100%),linear-gradient(165deg,#001538,#01467d) !important;}
.mast:after{background:linear-gradient(0deg,#00102a,transparent) !important;}
.panel{background:linear-gradient(116deg,#053c74f2 0%,#001f46fc 51%,#043b6afa 100%) !important;border-color:#1191d2 !important;}
.main-panel{background:linear-gradient(125deg,#05558df7 0%,#002147fc 43%,#033f73fc 100%) !important;border-color:#18c6f0 !important;}
.main-stats{background:linear-gradient(115deg,#003f7bb3,#00183aad 58%,transparent) !important;}
.batt-tile{background:linear-gradient(135deg,#04497af5,#001d40 85%) !important;border-color:#0f8ecb !important;}
.env-grid{background:#003f6175 !important;}
.alert-panel{background:linear-gradient(118deg,#054872,#002145 64%,#045571) !important;}
.tabbar{bottom:calc(26px - env(safe-area-inset-bottom,0px)) !important;background:linear-gradient(180deg,#032f4e 0%,#001429 100%) !important;border-color:#176b8f !important;box-shadow:inset 0 1px 0 #3ebae440,0 5px 22px #000b,0 0 10px #0069b61a !important;}
.tabbar .tab.active{background:linear-gradient(145deg,#085f7f 0%,#003753 100%) !important;}


/* v2.2.10 — stesso blu della v2.2.10, menu rialzato, pannelli Ambiente/Sentina più compatti */
.app { padding-bottom: 66px !important; }
.tabbar { bottom: calc(38px - env(safe-area-inset-bottom, 0px)) !important; }
.lower-grid .small-panel { min-height: 117px !important; padding: 7px 7px 6px !important; }
.lower-grid .small-title { gap: 6px !important; }
.lower-grid .small-title h3 { font-size: clamp(16px,4.5vw,22px) !important; }
.lower-grid .small-title svg { width: 21px !important; height: 21px !important; }
.env-grid { margin-top: 6px !important; padding: 2px 3px !important; }
.env-item { padding: 4px 2px !important; }
.bilge-state { margin-top: 9px !important; padding: 4px 0 !important; }
/* La regola generica .panel usa !important nella palette v2.2.10.
   Le varianti della sentina devono quindi prevalere esplicitamente. */
.panel.bilge-panel { background: linear-gradient(120deg,#064b43,#003d40 60%,#066753) !important; border-color: #1cb890 !important; }
.panel.bilge-panel.safe { background: linear-gradient(122deg,#075d40 0%,#076d47 58%,#078951 100%) !important; border-color: #31fc94 !important; box-shadow: inset 0 0 22px #1aff8b45,0 0 14px #00ee8735 !important; }
.panel.bilge-panel.safe .bilge-state strong,.panel.bilge-panel.safe .bilge-state svg {color:#43ff90 !important; filter:drop-shadow(0 0 7px #2cff8cb0) !important;}
.panel.bilge-panel.alarm { background: linear-gradient(125deg,#6b1323 0%,#901e30 57%,#521025 100%) !important; border-color:#ff5268 !important; box-shadow:inset 0 0 24px #ff33483d,0 0 13px #ef294837 !important; }
.panel.bilge-panel.alarm .bilge-state strong,.panel.bilge-panel.alarm .bilge-state svg { color:#ffb1b9 !important; filter:drop-shadow(0 0 7px #ff4c6b8c) !important; }
/* Lo stato sconosciuto non viene rappresentato come "asciutta". */

/* v2.2.10 — header only: 6 px less; all cards, colors and dock untouched. */
.mast { min-height: calc(78px + env(safe-area-inset-top,0px)) !important; }
@media (max-width:360px) { .mast { min-height: calc(78px + env(safe-area-inset-top,0px)) !important; } }
@media (min-width:560px) { .mast { min-height: 139px !important; } }

/* Marine Monitor v2.3 — smaller environment and bilge cards */
.lower-grid .small-panel {min-height:102px !important; padding:6px 7px 5px !important;}
.lower-grid .small-title h3{font-size:clamp(15px,4.2vw,20px) !important;}
.lower-grid .small-title svg{width:19px !important;height:19px !important;}
.env-grid{margin-top:4px !important;padding:1px 3px !important;}
.env-item{padding:3px 1px !important;gap:3px !important;}
.env-item svg{width:15px !important;height:17px !important;}
.env-grid strong{margin-top:1px !important;font-size:clamp(10px,3vw,17px) !important;}
.bilge-state{margin-top:5px !important;padding:2px 0 !important;gap:3px !important;}
.bilge-state svg{width:clamp(29px,8vw,44px) !important;height:clamp(29px,8vw,44px) !important;}
.bilge-state small{margin-top:3px !important;}

/* Preview charts and settings */
.history-panel{padding:14px 13px 12px !important;text-align:left !important;}
.history-panel h3{font-size:16px;margin:0 0 8px;}
.plot-title{display:flex;align-items:center;justify-content:space-between;color:#c4eafa;font-size:12px;}
.plot-title strong{font-size:19px;color:#eaffff;}
.plot{display:block;width:100%;height:132px;margin:8px 0 0;overflow:visible;}
.gridline{fill:none;stroke:#2a8abb50;stroke-width:1;}
.chart-line{fill:none;stroke:#48e7e8;stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round;}
.chart-fill{fill:#17b9f02b;stroke:none;}
.chart-axis{display:flex;justify-content:space-between;color:#a9d2e6;font-size:10px;}
.preview-settings{display:grid;gap:10px;}
.preview-settings div{padding:11px;background:#053f5c;border:1px solid #176d95;border-radius:11px;display:flex;flex-direction:column;gap:3px;}
.preview-settings strong{font-size:12px;color:#e5f7fb;}.preview-settings span{font-size:12px;color:#acd5e3;}

/* v2.3.1 — solo Ambiente e Sentina leggermente più grandi */
.lower-grid .small-panel {min-height:114px !important;padding:8px 7px 7px !important;}
.lower-grid .small-title h3 {font-size:clamp(16px,4.4vw,21px) !important;}
.lower-grid .small-title svg {width:20px !important;height:20px !important;}
.env-grid {margin-top:6px !important;padding:3px 3px !important;}
.env-item {padding:4px 2px !important;gap:4px !important;}
.env-item svg {width:16px !important;height:18px !important;}
.env-grid strong {margin-top:2px !important;font-size:clamp(10px,3.1vw,17px) !important;}
.bilge-state {margin-top:8px !important;padding:4px 0 !important;gap:4px !important;}
.bilge-state svg {width:clamp(30px,8.5vw,47px) !important;height:clamp(30px,8.5vw,47px) !important;}
.bilge-state small {margin-top:5px !important;}

/* v2.3.2 — Ambiente e Sentina appena piu compatti */
.lower-grid .small-panel{min-height:110px !important;padding:7px 7px 6px !important;}
.env-grid{margin-top:5px !important;}
.bilge-state{margin-top:7px !important;}

/* v2.3.5 — riduzione di altri 2 px solo per Ambiente e Sentina */
.lower-grid .small-panel{min-height:108px !important;}

/* v2.3.5 — ulteriori 2 px in meno, solo Ambiente e Sentina */
.lower-grid .small-panel{min-height:106px !important;}

/* v2.3.5 — solo scheda Allarmi leggermente piu compatta */
.alert-panel{padding-top:9px !important;padding-bottom:9px !important;min-height:70px !important;}
.alarm-rows{margin-top:7px !important;padding-top:4px !important;padding-bottom:4px !important;}

/* v2.5: only the Storico screen changes; the approved Home styling stays untouched. */
.period-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:2px 4px 10px;padding:4px;border-radius:12px;background:#001831;border:1px solid #147fb0}
.period-btn{min-height:37px;padding:7px 4px;border-radius:9px;background:linear-gradient(180deg,#043d69,#00264e);border:1px solid #166b9b;color:#d8eaff;font-size:13px;font-weight:650}
.period-btn.active{border-color:#45d7ef;color:#fff;background:linear-gradient(140deg,#076a9d,#064878);box-shadow:inset 0 -2px 0 #40e6d5,0 0 8px #1fdff32b}
.ah-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}
.ah-cell{padding:10px 5px;min-width:0;text-align:center;border:1px solid #167aaa;border-radius:10px;background:linear-gradient(150deg,#063a69,#001f43)}
.ah-cell small{display:block;font-size:10px;color:#c5ddec;min-height:26px;line-height:1.25}
.ah-cell strong{display:block;color:#e9ffff;font-size:clamp(14px,3.8vw,19px);margin-top:6px;white-space:nowrap}
.history-explain{font-size:11px!important;color:#c5d7e9!important;line-height:1.5;margin:7px 0 0}

/* v2.6: unicamente la schermata Allarmi; nessuna modifica alla Home */
#page-alerts .alert-panel,#page-alerts .test-panel{padding:13px 14px;}
#page-alerts .alarm-rows{margin-top:12px;}
#page-alerts .alarm-row{min-height:42px;padding:7px 3px;border-bottom:1px solid #4093b83d;align-items:flex-start;}
#page-alerts .alarm-row:last-child{border:0;}
#page-alerts .alarm-row.alert-critical{color:#ffbaba;}
#page-alerts .alarm-row.alert-test{color:#9cf2e7;}
#page-alerts .alarm-date{font-size:10px;color:#a3c3d4;display:block;margin-bottom:3px;}
#page-alerts .test-panel{background:linear-gradient(127deg,#033b70,#001b42 75%,#04345b);}
#page-alerts .test-panel p{position:relative;font-size:12px;line-height:1.55;color:#d9ebf5;margin:12px 0;}
#page-alerts .test-button{position:relative;z-index:1;width:100%;min-height:48px;border-radius:12px;border:1px solid #2fe9d7;background:linear-gradient(145deg,#087e9e,#034567);color:#f2ffff;font-weight:750;letter-spacing:.6px;box-shadow:inset 0 1px 0 #90ffff60;}
#page-alerts .test-button:disabled{opacity:.5;cursor:not-allowed;}
#page-alerts .alarm-help{font-size:11px;color:#b6dbe8;margin:8px 0 0;}