/* Fishscanner - stile dell'app (mappa, pannelli, tema notte, telefono) */
html,body{margin:0;height:100%;font-family:system-ui,sans-serif;font-size:14px}
/* barra/badge che Netlify aggiunge solo a chi e' loggato come proprietario del sito: copriva i tasti in basso */
iframe#nl-badge-frame,iframe[id^="nl-"],netlify-hud,#netlify-hud{display:none!important;visibility:hidden!important;pointer-events:none!important}
#map{position:absolute;inset:0;background:#d9edf2}
.top{position:absolute;z-index:1200;top:10px;left:10px;right:10px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.top>*{pointer-events:auto}
.bar{display:flex;gap:8px;align-items:center}
.bar input[type=text]{flex:1;min-width:0;padding:13px 18px;border:0;border-radius:28px;background:#fffffff2;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 4px 18px #0000002a;font-size:15px;outline:none;transition:box-shadow .2s}
.bar input[type=text]:focus{box-shadow:0 0 0 2.5px #0b3d5c44,0 4px 18px #0000002a}
button,select{padding:10px 14px;border:0;border-radius:14px;background:linear-gradient(135deg,#0b3d5c,#15658f);color:#fff;font-size:13px;font-weight:600;box-shadow:0 2px 8px #00000033;cursor:pointer;transition:transform .1s}
select{appearance:none;-webkit-appearance:none;padding:10px 32px 10px 14px;background:linear-gradient(135deg,#0b3d5c,#15658f) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center}
select option{background:#fff;color:#1a1a1a;font-weight:500}
input[type=file]{font-size:12.5px;color:#234;border:0;box-shadow:none;padding:0;background:none}
input[type=file]::file-selector-button{padding:9px 14px;border:0;border-radius:12px;background:linear-gradient(135deg,#0b3d5c,#15658f);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;margin-right:8px;box-shadow:0 2px 6px #00000033}
button:active{transform:scale(.96)}
#go{flex:0 0 auto;padding:13px 16px;border-radius:28px}
#gear{flex:0 0 48px;height:48px;padding:0;border-radius:50%;font-size:18px;display:flex;align-items:center;justify-content:center}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}
.chips::-webkit-scrollbar{display:none}
.chips button{background:#fffffff0;color:#0b3d5c;white-space:nowrap;border-radius:20px;padding:8px 14px;font-size:12.5px;font-weight:600;box-shadow:0 2px 8px #00000022;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chips button.on{background:linear-gradient(135deg,#0b3d5c,#15658f);color:#fff;box-shadow:0 2px 10px #0b3d5c55}
#panel{display:none;max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain;background:#fffffff2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:22px;padding:14px 16px;box-shadow:0 6px 28px #00000030,0 0 0 1px #ffffff60 inset;gap:10px;flex-wrap:wrap;align-items:center}
#panel input[type=number]{width:58px;padding:9px 10px;border:0;border-radius:12px;background:#e8f1f7;color:#0b3d5c;font-size:13.5px;font-weight:600;text-align:center;outline:none;transition:box-shadow .2s,-webkit-backdrop-filter .2s}
#panel input[type=number]:focus{box-shadow:0 0 0 2.5px #0b3d5c44}
#panel label,#panel .fl{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:600;color:#0b3d5c;background:#e8f1f7ee;padding:8px 14px;border-radius:14px;cursor:pointer;transition:background .15s}
#panel label:hover,#panel .fl:hover{background:#dceaf2}
#panel label:active{background:#cfe0ec}
#panel select{font-size:13px;padding:9px 30px 9px 14px;border-radius:12px}
#panel button{border-radius:12px;padding:9px 14px;font-size:12.5px}
#panel input[type=file]{align-self:center}
.sdw{position:relative}
.sdv{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;min-width:110px;padding:9px 32px 9px 14px;border-radius:12px;background:linear-gradient(135deg,#0b3d5c,#15658f);color:#fff;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px #00000033;position:relative;user-select:none}
.sdv::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5.5px solid #fff;opacity:.9}
.sdm{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:180px;background:#fffffff2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:18px;box-shadow:0 10px 36px #0000003d,0 0 0 1px #ffffff60 inset;padding:6px;z-index:3000;max-height:250px;overflow:auto}
.sdm.open{display:block}
.sdi{padding:11px 14px;border-radius:12px;font-size:13.5px;font-weight:600;color:#0b3d5c;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.sdi:active,.sdi.on{background:linear-gradient(135deg,#0b3d5c,#15658f);color:#fff}
#msg{background:#fffffff0;border-radius:10px;padding:6px 10px;font-size:12px;display:none;box-shadow:0 2px 8px #00000022}
#sheet{position:absolute;z-index:1000;left:0;right:0;bottom:0;background:#fffffff0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:22px 22px 0 0;box-shadow:0 -6px 32px #00000030,0 0 0 1px #ffffff60 inset;max-height:42vh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);transition:max-height .32s cubic-bezier(.32,.72,0,1)}
#sheet.m{max-height:64vh}
#sheet.big{max-height:86vh}
#sheet.min{max-height:58px;overflow:hidden}
#sheet.min::after{content:'';position:absolute;top:0;left:0;right:0;height:28px;background:linear-gradient(#fffffff0,#fff0);pointer-events:none}
#grab{width:44px;height:5px;border-radius:3px;background:#0b3d5c55;margin:8px auto 0;flex-shrink:0;cursor:grab;touch-action:none}
#grab::before{content:'';display:block;height:26px;margin:-12px -60px 0}   /* area di presa piu' grande per il dito */
#tabs{touch-action:pan-x}
#rotta{display:none;align-self:flex-start;align-items:center;gap:8px;background:#0b6efd;color:#fff;border-radius:22px;padding:6px 6px 6px 14px;font-weight:700;font-size:13.5px;box-shadow:0 3px 12px #00000040;max-width:100%}
#rotta .rt{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rotta button{background:#ffffff;color:#0b6efd;border-radius:16px;padding:6px 10px;font-size:12.5px;box-shadow:none;flex-shrink:0}
#panelX{position:sticky;top:0;margin-left:auto;order:-1;background:#e8f1f7;color:#0b3d5c;box-shadow:none;border-radius:50%;width:34px;height:34px;padding:0;font-size:16px;flex:0 0 34px}
html.night #panelX{background:#16283a;color:#cfe0ee}
#legBtn{display:none}
@media (max-width:700px){.bar{gap:6px}.bar .mini{width:34px;height:34px;font-size:14px}#go{padding:11px 13px}#gear{flex-basis:42px;height:42px;font-size:16px}.bar input[type=text]{padding:12px 14px}}
@media (max-width:700px){#legBtn{display:flex}html:not(.legOn) #leg,html:not(.legOn) #legAis{display:none!important}}
#tabs{display:flex;gap:8px;padding:8px 12px 10px;flex-shrink:0}
#tabs button{flex:1;background:#e8f1f7;color:#0b3d5c;box-shadow:none;border-radius:14px;padding:11px 12px;font-size:13.5px;font-weight:600;transition:all .2s}
#tabs button.on{background:linear-gradient(135deg,#0b3d5c,#15658f);color:#fff;box-shadow:0 3px 12px #0b3d5c44}
#tabs #tog{flex:0 0 48px;background:#e8f1f7;color:#0b3d5c;border-radius:14px}
#paneS{display:flex;flex-direction:column;min-height:0;flex:1}
#paneM{display:none;overflow:auto;padding:0 14px 12px;flex:1}
.wxhd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:8px 0}
#handle{padding:10px 14px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:#0b3d5c;background:#e8f1f788;border-radius:12px;margin:2px 12px 6px;padding:10px 14px}
#list{overflow:auto}.sp{padding:11px 14px;border-top:1px solid #e8eef3;cursor:pointer;transition:background .15s}.sp:active{background:#e8f1f788}.sp b{color:#0b3d5c}.sc{float:right;font-weight:700;color:#0b3d5c;background:#e8f1f7;border-radius:8px;padding:1px 7px;font-size:12px}
.warn{padding:8px 14px;font-size:11px;color:#8a4b00;background:#fff4e0;border-radius:12px;margin:0 12px 6px;line-height:1.4}
#leg{position:absolute;z-index:900;right:8px;bottom:96px;background:#fffffff0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:12px;padding:6px 10px;font-size:11px;box-shadow:0 2px 10px #00000022}
/* legenda esagoni a SINISTRA: a destra c'e' l'orologio "adesso"; la posizione verticale la decide placeNow() */
#legAis{position:absolute;z-index:900;left:8px;bottom:96px;max-height:42vh;overflow:auto;background:#fffffff0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:12px;padding:6px 10px;font-size:11px;display:none;box-shadow:0 2px 10px #00000022}
#legAis .lt{cursor:pointer;user-select:none}#legAis{max-width:44vw}#leg{max-width:52vw}#legAis.chiusa .lc{display:none}
html.night #legAis{background:#0f1d2bf2;color:#dbe7f0}
#legAis i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.lbl{font:600 11px system-ui;color:#111;text-shadow:0 0 3px #d9edf2,0 0 3px #d9edf2,0 0 3px #d9edf2;white-space:nowrap;transform:translate(-50%,-50%)}
.iso{font-weight:700;color:#234}.zi{background:#fff;border:2px solid #c0399a;color:#c0399a;border-radius:3px;font:700 12px serif;width:18px;height:18px;text-align:center;line-height:16px}
.pop button{margin-top:6px;margin-right:4px;padding:6px 10px;font-size:12px}
.pop .btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.pop .btns button{margin:0;padding:10px 8px;font-size:13.5px;min-height:42px}
/* solunar compatto: una riga, si espande toccando l'intestazione */
#sol .solH{cursor:pointer}#sol.compatto .solR,#sol.compatto .solF,#sol.compatto .solP,#sol.compatto .solG{display:none}#sol.compatto .solB{margin-top:2px}
#sol .solH .tg{opacity:.7;margin-left:6px}
/* ---- telefono ---- */
@media (max-width:700px){
  #now{top:auto;right:10px;transform:none;padding:6px 10px;min-width:0;border-radius:14px;cursor:pointer}
  #now .t{font-size:15px}#now .v{margin-top:4px;font-size:11.5px;padding:2px 6px}
  #now:not(.esteso) .dt,#now:not(.esteso) .r,#now:not(.esteso) .nx{display:none}
  html #now .v.mare{font-size:11px;padding:2px 6px}
  .leaflet-popup-content{margin:12px 14px;font-size:13.5px;line-height:1.45}
  #sheet:not(.min):not(.m):not(.big){max-height:56vh}
  #disc:not(.open){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;padding:5px 12px}
  #handle{padding:7px 12px;margin-bottom:4px}
  .leaflet-control-attribution{font-size:9px;max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* pulsanti flottanti a destra: seguimi, cattura qui, segna punto, zoom */
#fab{position:absolute;z-index:1140;right:10px;bottom:96px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
#fab button{width:48px;height:48px;padding:0;border-radius:50%;font-size:20px;display:flex;align-items:center;justify-content:center;background:#fffffff2;color:#0b3d5c;box-shadow:0 3px 12px #00000040}
#fab button.on{background:linear-gradient(135deg,#0b6efd,#15658f);color:#fff}
#fab .gpsOnly{display:none}#fab.gps .gpsOnly{display:flex}
#fab .zm{font-size:24px;font-weight:700}
html.night #fab button:not(.on){background:#12212ff2;color:#eaf2f8}
#toast{position:fixed;z-index:6000;left:50%;top:14px;transform:translateX(-50%);max-width:92vw;background:#b00020;color:#fff;font-weight:700;border-radius:14px;padding:10px 14px;box-shadow:0 6px 24px #00000055;display:none;font-size:14px;line-height:1.35;text-align:center}
/* bussola: l'ago rosso indica il nord reale, ruota con il telefono */
#bussola{position:absolute;z-index:1140;left:10px;width:52px;height:52px;border-radius:50%;background:#fffffff2;box-shadow:0 3px 12px #00000040;cursor:pointer;display:flex;align-items:center;justify-content:center;user-select:none;padding:0}
#bussola svg{width:46px;height:46px;transition:transform .25s linear}
#bussola .gr{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:800;color:#0b3d5c;background:#fffffff2;border-radius:8px;padding:0 5px;white-space:nowrap;box-shadow:0 1px 4px #00000030}
html.night #bussola,html.night #bussola .gr{background:#12212ff2;color:#eaf2f8}
#rotta .ar{display:inline-block;transition:transform .3s;font-size:18px;line-height:1}
.wxc{display:flex;flex-direction:column;gap:6px}.wd{background:#e8f1f7;border-radius:12px;padding:8px 10px;cursor:pointer}.wd.sel{outline:2px solid #15658f;background:#d7e8f3}
.wd1{display:flex;align-items:center;gap:8px}.wd1 .vd{margin-left:auto}.wd2{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;margin-top:4px}
html.night .wd{background:#16283a}html.night .wd.sel{background:#1d3550}
#panel .chips{flex-wrap:wrap;width:100%;overflow:visible;padding:0}#panel .chips button{box-shadow:none;background:#e8f1f7}
html.night #panel .chips button:not(.on){background:#16283a;color:#cfe0ee}
.wxt{width:100%;border-collapse:collapse;font-size:13px;text-align:center}.wxt td,.wxt th{padding:5px 3px;border-bottom:1px solid #eee}.wxt tr.sel{background:#e8f1f7}
.vd{color:#fff;border-radius:8px;padding:2px 6px;font-size:11px}.wxh{overflow-x:auto;margin-top:8px}.hr td{min-width:44px;font-size:12px;border:0;vertical-align:top}
.wxn{font-size:11px;color:#666;margin-top:8px}
.tip{position:fixed;z-index:9999;background:#0b3d5cf2;color:#fff;padding:9px 13px;border-radius:12px;font-size:12px;font-weight:500;max-width:250px;box-shadow:0 6px 20px #00000055;pointer-events:none;line-height:1.45;text-align:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:tipIn .18s ease}
@keyframes tipIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
#sol{display:none;flex-shrink:0;margin:2px 12px 6px;padding:10px 14px;background:linear-gradient(135deg,#0b3d5c,#15658f);color:#fff;border-radius:14px;font-size:12.5px;line-height:1.5;box-shadow:0 3px 12px #0b3d5c44}
#sol .solH{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:700;font-size:13px}
#sol .solR{display:flex;gap:12px;flex-wrap:wrap}
#sol .solI{display:flex;align-items:center;gap:4px}
#sol .solP{margin-top:6px;padding-top:6px;border-top:1px solid #ffffff30;display:flex;gap:10px;flex-wrap:wrap}
#sol .solP span{background:#ffffff22;border-radius:8px;padding:2px 8px;font-size:11.5px}
#sol .solG{font-size:11px;opacity:.75;margin-top:4px}
#sol .solF{margin-top:6px;padding:5px 9px;background:#ffffff1f;border-radius:9px;font-size:12px}
#sol .solF b{font-weight:700}
#sol .solB{margin-top:6px;font-size:12px}
#sol .solB .h{background:#4ade8033;border:1px solid #4ade8066;border-radius:8px;padding:2px 8px;margin:2px 3px 0 0;display:inline-block}
#sol .solB .h1{background:#fbbf2444;border-color:#fbbf24aa}
#now{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:1150;background:#fffffff2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:18px;padding:11px 13px;box-shadow:0 4px 22px #00000033,0 0 0 1px #ffffff70 inset;text-align:center;min-width:106px;color:#0b3d5c;user-select:none}
#now .t{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.5px;line-height:1}
#now .dt{font-size:11px;opacity:.7;margin-top:2px;text-transform:capitalize}
#now .v{margin-top:7px;font-weight:800;font-size:13px;border-radius:10px;padding:4px 6px;color:#fff;transition:background .3s}
#now .r{font-size:10px;margin-top:4px;line-height:1.3;opacity:.8;max-width:120px}
#now .nx{font-size:11px;margin-top:3px;opacity:.75}
#now .v.mare{margin-top:5px;font-size:12px}
#inst{position:absolute;z-index:1300;left:10px;right:10px;top:118px;background:#0b3d5c;color:#fff;border-radius:14px;padding:10px 12px;font-size:13px;line-height:1.4;box-shadow:0 4px 18px #00000044;display:none}
#inst button{background:#ffffff26;box-shadow:none;padding:6px 10px;margin-top:6px}
a:focus-visible,button:focus-visible,input:focus-visible,.sdv:focus-visible{outline:3px solid #f9a825;outline-offset:2px}
@media (max-height:560px){#now{top:auto;bottom:90px;transform:none}}
.mini{background:#fffffff0;color:#0b3d5c;border-radius:20px;padding:0;height:38px;width:38px;font-size:16px;box-shadow:0 2px 8px #00000022;display:flex;align-items:center;justify-content:center}
.mini.on{background:linear-gradient(135deg,#0b3d5c,#15658f);color:#fff}
#offline{display:none;background:#9b1c1c;color:#fff;border-radius:10px;padding:6px 12px;font-size:12px;font-weight:600;box-shadow:0 2px 8px #00000033}
.modal{position:fixed;inset:0;z-index:5000;background:#00000055;display:none;align-items:flex-end;justify-content:center}
.modal.open{display:flex}
.modal .card{background:#fffffff7;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:22px 22px 0 0;max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -8px 40px #00000055}
.modal h3{margin:0 0 12px;color:#0b3d5c;display:flex;justify-content:space-between;align-items:center;font-size:16px}
.modal .card input,.modal .card select,.modal .card textarea{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid #cdd9e3;border-radius:12px;background:#fff;font-size:14px;margin:2px 0 10px;font-family:inherit;color:#12212f}
.modal .card textarea{min-height:56px;resize:vertical}
.modal .card label{font-size:12px;font-weight:600;color:#0b3d5c;display:block;margin-top:4px}
.modal .card button{margin-top:8px}
.modal .card table{width:100%;border-collapse:collapse;font-size:12.5px}
.modal .card td,.modal .card th{padding:6px 5px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.modal .card h4{margin:14px 0 6px;color:#0b3d5c;font-size:13.5px}
.reg .disc{background:#fff4e0;color:#8a4b00;border-radius:10px;padding:8px 10px;font-size:11.5px;margin-bottom:8px;line-height:1.4}
#gpsdot{color:#0b6efd;font-size:24px;text-shadow:0 0 3px #fff}
html.boat{font-size:16.5px}
html.boat #list .sp,html.boat #sol,html.boat #now,html.boat #panel label,html.boat #panel .fl{font-size:15px}
html.boat #leg,html.boat #legAis{font-size:13px;padding:9px 12px;background:#fffffffa}
html.boat .top input[type=text]{font-size:17px}
html.night body{background:#0a141f}
html.night #map{background:#06101a}
html.night #panel,html.night #sheet,html.night #leg,html.night #legAis,html.night #msg{background:#0f1d2bf2;color:#dbe7f0}
html.night #now{background:#12212ff2;color:#eaf2f8}
html.night .bar input[type=text]{background:#12212ff2;color:#eaf2f8}
html.night #list .sp{border-color:#1d2c3a;color:#cfe0ee}
html.night #list .sp b,html.night .sc{color:#9fd0f5}
html.night .sc{background:#1a2c3c}
html.night #handle{background:#12212faa;color:#dbe7f0}
html.night #panel label,html.night #panel .fl{background:#16283a;color:#cfe0ee}
html.night #panel input[type=number]{background:#0c1926;color:#eaf2f8}
html.night #tabs button{background:#182a3a;color:#cfe0ee}
html.night #tabs button.on{background:linear-gradient(135deg,#15658f,#1f8fc4)}
html.night .modal .card{background:#0f1d2bf7;color:#dbe7f0}
html.night .modal .card input,html.night .modal .card select,html.night .modal .card textarea{background:#0c1926;color:#eaf2f8;border-color:#26394a}
html.night .modal h3,html.night .modal h4,html.night .modal .card label,html.night .reg h4{color:#9fd0f5}
html.night .modal .card td,html.night .modal .card th{border-color:#1d2c3a}
html.night .warn{background:#3a2a10;color:#ffd79a}
html.night .syncBox{background:#16283a!important;color:#dbe7f0!important}
/* ---- piani: lucchetto sulle funzioni Premium quando il piano e' Gratuito; riquadro account ---- */
html.gratuito .solo-premium::after{content:' 🔒';font-size:.9em}
#list .sp.bloccato{background:#fff8e1;color:#5d4300;cursor:pointer}
html.night #list .sp.bloccato{background:#3a2f10;color:#ffe08a}
.accountBox{width:100%;box-sizing:border-box;background:#e8f1f7;color:#0b3d5c;border-radius:14px;padding:10px 14px;font-size:13px;line-height:1.45}
html.night .accountBox{background:#16283a;color:#dbe7f0}
html.night .modal a{color:#9fd0f5}