:root{ --ink:#1b1d1f; --muted:#667; --green:#089e4f; --red:#d0402b; --card:#ffffff; --line:#e3e1db; }
  *{box-sizing:border-box;}
  button,input,select,textarea{font-family:inherit; letter-spacing:inherit;}
  html,body{height:100%; margin:0; background:#eef0ea;}
  @font-face{font-family:"Manrope"; src:url("../fonts/manrope-latin-400-normal.woff2") format("woff2"); font-weight:100 500; font-style:normal; font-display:swap;}
  @font-face{font-family:"Manrope"; src:url("../fonts/manrope-latin-600-normal.woff2") format("woff2"); font-weight:501 700; font-style:normal; font-display:swap;}
  @font-face{font-family:"Manrope"; src:url("../fonts/manrope-latin-800-normal.woff2") format("woff2"); font-weight:701 900; font-style:normal; font-display:swap;}
  body{font-family:"Manrope","Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); letter-spacing:.02em; -webkit-font-smoothing:antialiased;}
  #map{position:fixed; inset:0;}
  /* Tap corto sulla mappa (senza tendine aperte): fa scivolare via i pannelli, come Google
     Maps — quello in alto verso l'alto, quello in basso verso il basso. Non tocca l'attributo
     "hidden" di ciascuna card: quando la classe viene rimossa, ognuna torna esattamente allo
     stato (nascosta o visibile) e alla posizione che aveva prima del tap. */
  .card{position:fixed; left:12px; width:min(400px, calc(100% - 24px)); background:var(--card); border-radius:16px;
        box-shadow:0 6px 24px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.08); z-index:5;
        transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease;}
  body.map-ui-hidden #panel, body.map-ui-hidden #navPanel{transform:translateY(-140%); opacity:0; pointer-events:none;}
  body.map-ui-hidden #result{transform:translateY(140%); opacity:0; pointer-events:none;}
  #panel{top:calc(env(safe-area-inset-top, 0px) + 12px); padding:14px 14px 12px;}
  .brand{font-size:.8rem; font-weight:700; letter-spacing:.02em; color:var(--green); margin:0 0 10px 2px;}
  .brand-row{display:flex; align-items:center; justify-content:space-between; margin:0 0 10px;}
  .brand-logo{display:block; height:15px; width:auto; margin:0 0 0 2px;}
  #accountBtn{width:30px; height:30px; margin:-6px -4px -6px 0; padding:0; border:none; background:none; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  #accountBtn img{width:20px; height:20px; display:block;}
  .route-pref{display:flex; gap:6px; margin:2px 0 8px;}
  .pref-btn{flex:1; height:34px; border:1px solid var(--line); border-radius:8px; background:#fafaf8;
        color:var(--muted); font-size:.74rem; font-weight:650; cursor:pointer; padding:0 4px;}
  .pref-btn.active{background:#fafaf8; color:var(--green); border-color:var(--green); border-width:1.5px;}
  .row{position:relative; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:0 6px 0 12px; height:40px; margin-bottom:8px; background:#fafaf8;}
  .row:focus-within{border-color:#9cd8b9; background:#fff;}
  .suggest{position:absolute; top:100%; left:0; right:0; margin:4px 0 0; padding:4px; list-style:none;
        background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.16);
        max-height:220px; overflow:auto; z-index:20; display:none;}
  .suggest.show{display:block;}
  .suggest li{padding:9px 10px; border-radius:6px; font-size:14px; line-height:1.35; cursor:pointer; color:var(--ink);}
  .suggest li:hover, .suggest li.active{background:#ebf7f1;}
  /* Quadratino mappa/satellite in basso a destra, come in Google Maps: mostra l'anteprima
     di dove si passerebbe (defaultmap.png/satelitemap.png), non la mappa attuale. La sua
     "bottom" è impostata via JS (positionBasemapToggle) per restare appena sopra #result. */
  .basemap-toggle{position:fixed; right:12px; bottom:44px; width:54px; height:54px; padding:0;
        border:2px solid #fff; border-radius:8px; background-color:#ccc; background-size:cover;
        background-position:center; box-shadow:0 4px 14px rgba(0,0,0,.28); cursor:pointer;
        z-index:6; overflow:hidden;
        transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease, bottom .25s ease;}
  body.map-ui-hidden .basemap-toggle{transform:translateY(140%); opacity:0; pointer-events:none;}
  .basemap-toggle span{position:absolute; left:0; right:0; bottom:0; padding:3px 0; font-size:.6rem;
        font-weight:700; color:#fff; text-align:center; background:linear-gradient(transparent, rgba(0,0,0,.55));}
  /* Bussola e "Riposiziona": restano sempre sullo schermo, anche quando un tap sulla mappa fa
     scivolare via le tendine (non hanno la classe .card, quindi map-ui-hidden non li tocca). */
  #compassBtn{position:fixed; top:calc(env(safe-area-inset-top, 0px) + 12px); right:12px; z-index:7; width:44px; height:44px; padding:0; border:none; border-radius:50%;
        background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.24); cursor:pointer; display:grid; place-items:center;}
  #compassBtn[hidden], #recenterBtn[hidden], #recalcBtn[hidden]{display:none;}
  #compassBtn img{width:30px; height:30px; pointer-events:none;}
  #compassBtn, #recenterBtn, #recalcBtn{touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:top .3s cubic-bezier(.4,0,.2,1), transform .08s ease;}
  #compassBtn:active, #recenterBtn:active, #recalcBtn:active{transform:scale(.92);}
  #recenterBtn{position:fixed; left:12px; bottom:max(24px, env(safe-area-inset-bottom)); z-index:7; height:44px; padding:0 18px 0 14px;
        border:none; border-radius:999px; background:#fff; color:var(--green); font-size:.85rem; font-weight:650; cursor:pointer;
        display:flex; align-items:center; gap:8px; box-shadow:0 4px 14px rgba(0,0,0,.24);}
  /* "Ricalcola percorso": stesso stile di Riposiziona, ma sta sopra di lui (o al suo posto se
     Riposiziona non c'è). */
  #recalcBtn{position:fixed; left:12px; bottom:max(24px, env(safe-area-inset-bottom)); z-index:7; height:44px; padding:0 18px 0 14px;
        border:none; border-radius:999px; background:var(--green); color:#fff; font-size:.85rem; font-weight:650; cursor:pointer;
        display:flex; align-items:center; gap:8px; box-shadow:0 4px 14px rgba(0,0,0,.24); transition:bottom .2s ease, transform .08s ease;}
  #recalcBtn:disabled{opacity:.7; cursor:default;}
  #recenterBtn:not([hidden]) ~ #recalcBtn{bottom:calc(max(24px, env(safe-area-inset-bottom)) + 54px);}
  @media (min-width:601px){ #compassBtn{top:calc(env(safe-area-inset-top, 0px) + 92px);} }
  /* Puntino blu della posizione (durante la navigazione) con cono di direzione. */
  .me-marker{position:relative; width:22px; height:22px; pointer-events:none;}
  .me-dot{position:absolute; inset:3px; border-radius:50%; background:#4285f4; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35);}
  .me-halo{position:absolute; inset:-10px; border-radius:50%; background:rgba(66,133,244,.22);}
  .me-cone{position:absolute; left:50%; bottom:50%; width:72px; height:56px; margin-left:-36px; opacity:0; transition:opacity .3s ease;
        background:linear-gradient(to top, rgba(66,133,244,.55), rgba(66,133,244,0));
        clip-path:polygon(50% 100%, 6% 0, 94% 0);}
  .me-marker.has-heading .me-cone{opacity:1;}
  .pin{position:relative; cursor:pointer; -webkit-tap-highlight-color:transparent;}
  .pin::after{content:""; position:absolute; inset:-14px;}      /* zona di tocco più grande del pallino */
  .pin:focus-visible{outline:2px solid #9cd8b9; outline-offset:2px;}
  .pin{width:12px; height:12px; border-radius:50%; flex:none; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15);}
  .row input{flex:1; min-width:0; border:none; outline:none; background:transparent; font-size:.8rem; color:var(--ink); height:100%;}
  .row input::placeholder{color:#99a;}
  #myloc{flex:none; width:36px; height:36px; border:none; border-radius:8px; background:transparent; cursor:pointer; display:grid; place-items:center; color:var(--green);}
  #myloc:hover{background:#ebf7f1;}
  .actions{display:flex; gap:8px; margin-top:2px;}
  #expandBtn{flex:none; width:40px; height:40px; padding:0; border:none; border-radius:10px; background:none; cursor:pointer; display:grid; place-items:center;}
  #expandBtn img{width:26px; height:26px; transition:transform .3s ease;}
  #panel.open #expandBtn img{transform:rotate(180deg);}
  #go{flex:1; height:40px; border:none; border-radius:10px; background:var(--green); color:#fff; font-size:14px; font-weight:650; cursor:pointer;}
  #extra{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease;}
  #panel.open #extra{grid-template-rows:1fr;}
  .extra-inner{overflow:hidden; min-height:0;}
  #panel:not(.open) .extra-inner{visibility:hidden;}
  #result .route-pref{margin:10px 0 0;}
  .extra-row{display:flex; gap:8px; align-items:center; padding-top:8px;}
  #whenBtn{flex:none; width:96px; height:36px; border:1px solid var(--line); border-radius:10px; padding:0 10px; font-size:.75rem; background:#fafaf8; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;}
  #whenBtn svg{flex:none; transition:transform .2s ease;}
  #whenBtn[aria-expanded="true"] svg{transform:rotate(180deg);}
  #whenList{position:fixed; z-index:25; margin:0; padding:4px; list-style:none; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.16); max-height:240px; overflow:auto;}
  #whenList[hidden]{display:none;}
  #whenList li{padding:8px 12px; border-radius:8px; font-size:.85rem; cursor:pointer; color:var(--ink);}
  #whenList li:hover{background:#ebf7f1;}
  #whenList li.sel{color:var(--green); font-weight:650;}
  #toggleShadows{flex:1; height:36px; border:1px solid var(--line); border-radius:10px; background:#fafaf8; color:var(--ink); font-size:.75rem; font-weight:400; cursor:pointer;}
  #saveBtn{flex:none; width:36px; height:36px; padding:0; border:none; border-radius:10px; background:none; cursor:pointer; display:grid; place-items:center;}
  #saveBtn img{width:18px; height:18px;}
  #toggleShadows:disabled{opacity:.4; cursor:default;}
  #go:disabled{opacity:.55; cursor:default;}
  #loader{position:fixed; top:calc(env(safe-area-inset-top, 0px) + 12px); left:12px; z-index:8; background:#fff; border-radius:999px; padding:12px 24px; display:flex; align-items:center; gap:10px; font-size:.9rem; font-weight:600; color:var(--green); box-shadow:0 6px 24px rgba(0,0,0,.14);}
  #loader[hidden]{display:none;}
  #loader .spin{width:14px; height:14px; border-radius:50%; border:2px solid var(--green); border-right-color:transparent; animation:spin .8s linear infinite;}
  .modal{position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:16px;}
  .modal[hidden]{display:none;}
  .modal-card{background:#fff; border-radius:16px; width:min(400px,100%); max-height:85vh; overflow:auto; padding:18px; box-shadow:0 10px 40px rgba(0,0,0,.25);}
  .modal-card h2{margin:0 0 12px; font-size:1.1rem;}
  .modal-card h3{margin:16px 0 8px; font-size:.9rem; color:var(--muted);}
  .save-form{display:flex; gap:8px;}
  .save-form input{flex:1; min-width:0; height:40px; border:1px solid var(--line); border-radius:10px; padding:0 12px; font-size:16px; background:#fafaf8;}
  .save-form button, #saveClose{height:40px; padding:0 16px; border:none; border-radius:10px; background:var(--green); color:#fff; font-size:15px; font-weight:650; cursor:pointer;}
  #saveClose{display:block; width:100%; margin-top:14px; background:#eee; color:var(--ink);}
  #saveMsg{margin-top:8px; font-size:.85rem; color:var(--red);}
  #saveMsg.ok{color:var(--green);}
  #saveMsg[hidden]{display:none;}
  #savedList{list-style:none; margin:0; padding:0;}
  #savedList:empty::after{content:'Nessun percorso salvato.'; color:var(--muted); font-size:.85rem;}
  #savedList li{display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:10px; padding:0 6px 0 8px; height:44px; margin-bottom:6px; background:#fafaf8;}
  #savedList .sname{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; font-size:.95rem; height:100%; display:flex; align-items:center;}
  #savedList .sdel{flex:none; width:32px; height:32px; padding:0; border:none; background:none; cursor:pointer; display:grid; place-items:center;}
  #savedList .sdel img{width:18px; height:18px;}
  #savedList .sfav{flex:none; width:32px; height:32px; padding:0; border:none; background:none; cursor:pointer; display:grid; place-items:center; color:#c4c4bc;}
  #savedList .sfav svg{fill:none;}
  #savedList .sfav.on{color:#f2a900;}
  #savedList .sfav.on svg{fill:currentColor;}
  .modal.confirm{z-index:40;}
  .modal.confirm p{margin:0 0 14px; font-size:.95rem; line-height:1.4;}
  .confirm-btns{display:flex; gap:8px;}
  .confirm-btns button{flex:1; height:40px; border:none; border-radius:999px; font-size:15px; font-weight:650; cursor:pointer; background:#eee; color:var(--ink);}
  .confirm-btns #confirmYes{background:var(--red); color:#fff;}
  #msgWrap{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .3s ease, opacity .3s ease;}
  #msgWrap.show{grid-template-rows:1fr; opacity:1;}
  #msgWrap.instant{transition:none;}
  #msgInner{overflow:hidden; min-height:0;}
  #msg{padding:10px 2px 0; font-size:.86rem; line-height:1.4;}
  #msg.err{color:var(--red);}
  #msg.hint{color:var(--muted);}
  #msg.busy{color:var(--green);}
  #msg.busy::before{content:""; display:inline-block; width:10px; height:10px; margin-right:8px; border-radius:50%;
        border:2px solid var(--green); border-right-color:transparent; animation:spin .8s linear infinite; vertical-align:-1px;}
  @keyframes spin{to{transform:rotate(360deg);}}
  #result{bottom:12px; padding:14px 16px 12px;}
  #result .big{font-size:1.28rem; font-weight:750; color:var(--green); letter-spacing:.01em;}
  #result .big span{font-size:.9rem; font-weight:600; color:var(--muted);}
  #result .sub{font-size:.95rem; color:var(--ink); margin-top:2px;}
  #resAlt{font-size:.85rem; color:var(--muted); margin-top:8px; padding-top:8px; border-top:1px solid var(--line);}
  #resAlt:empty{display:none;}
  #navStart[hidden]{display:none;}
  #result .delta{color:var(--red); font-size:.9rem; font-weight:650; margin-left:4px;}
  #result .note{font-size:.78rem; color:var(--muted); margin-top:3px;}
  #result .note.warn{color:var(--red); font-size:.85rem; font-weight:650; margin-top:5px;}
  .dash{display:inline-block; width:24px; height:3px; background:repeating-linear-gradient(90deg,#089e4f 0 5px,transparent 5px 9px); vertical-align:middle; margin-right:8px;}
  .res-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .res-head #resMain{flex:1; min-width:0;}
  #resetBtn{position:absolute; top:4px; right:6px; width:36px; height:36px; padding:0; border:none; background:none; cursor:pointer; display:grid; place-items:center; -webkit-tap-highlight-color:transparent;}
  #resetBtn img{width:16px; height:16px;}
  #resMain > .big{padding-right:30px;}
  /* icona trekking: sagoma colorata con la maschera del png (spenta = grigio, accesa/attiva = verde) */
  .trek-ico{display:block; width:20px; height:20px; background:#4a4a4a; -webkit-mask:url(../trekking.png) center/contain no-repeat; mask:url(../trekking.png) center/contain no-repeat;}
  #toggleTrek{flex:none; width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:10px; background:#fafaf8; cursor:pointer; display:grid; place-items:center;}
  #toggleTrek.on{border-color:var(--green); border-width:1.5px;}
  #toggleTrek.on .trek-ico{background:var(--green);}
  /* icona trekking accanto alla percentuale d'ombra (percorso che passa su sentieri nel bosco) */
  .trek-inline{display:inline-block; width:22px; height:22px; margin-left:8px; vertical-align:-3px; background:var(--green); border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent;}
  #result .trek-msg{color:var(--green); font-weight:400;}
  #result .trek-msg[hidden]{display:none;}
  /* freccia accanto a "Evita i sentieri boschivi": mostra il percorso che passa dai sentieri */
  .go-btn{display:inline-block; width:.85em; height:.85em; padding:0; margin:0 0 0 6px; border:none; background:none; vertical-align:-0.08em; cursor:pointer; position:relative; -webkit-tap-highlight-color:transparent;}
  .go-btn::after{content:""; position:absolute; inset:-10px;}   /* area di tocco più grande dell'icona */
  .go-btn img{display:block; width:100%; height:100%;}
  .go-btn.on{outline:2px solid var(--green); outline-offset:2px; border-radius:50%;}
  /* avvisi in rosso: pulsante con warning.png prima della percentuale; l'elenco si apre/chiude al tocco */
  .warn-btn{display:inline-block; width:28px; height:28px; padding:0; margin:0 6px 0 0; border:none; background:none; vertical-align:-6px; cursor:pointer; -webkit-tap-highlight-color:transparent;}
  .warn-btn img{display:block; width:24px; height:24px; margin:2px;}
  .warn-btn:focus-visible{outline:2px solid var(--red); outline-offset:1px; border-radius:6px;}
  #result .warn-list{margin:6px 0 0; padding-left:18px; color:var(--red); font-size:.85rem; font-weight:650;}
  #result .warn-list[hidden]{display:none;}
  #result .warn-list li{margin-top:3px;}
  #navStart{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:44px; margin-top:10px; border:none; border-radius:10px;
        background:var(--green); color:#fff; font-size:15px; font-weight:650; cursor:pointer;}
  #navPanel{top:calc(env(safe-area-inset-top, 0px) + 12px); padding:16px 16px 14px;}
  .nav-head{display:flex; align-items:center; justify-content:space-between;}
  #voiceBtn{flex:none; width:36px; height:36px; margin:-8px -6px 2px 0; padding:0; border:none; background:none; color:var(--green); cursor:pointer; display:grid; place-items:center;}
  #voiceBtn[hidden]{display:none;}
  #voiceBtn .off-icon{display:none;}
  #voiceBtn.off{color:var(--muted);}
  #voiceBtn.off .on-icon{display:none;}
  #voiceBtn.off .off-icon{display:block;}
  #navMain{font-size:1.25rem; font-weight:750; color:var(--ink); line-height:1.3;}
  #navSub{font-size:.9rem; color:var(--muted); margin-top:4px;}
  #navHazard{font-size:.88rem; font-weight:650; color:var(--red); margin-top:8px; line-height:1.35;}
  #navHazard[hidden]{display:none;}
  #navHazard div + div{margin-top:4px;}
  #navWarn{font-size:.84rem; color:var(--red); margin-top:8px;}
  #navStop{display:block; width:100%; height:44px; margin-top:14px; border:none; border-radius:10px;
        background:var(--red); color:#fff; font-size:15px; font-weight:650; cursor:pointer;}
  .blocked{position:absolute; inset:auto 20px 30px 20px; max-width:440px; background:#fff; border-radius:14px; padding:18px 20px; line-height:1.55; box-shadow:0 6px 24px rgba(0,0,0,.12);}
  @media (max-width:600px){
    .card{left:8px; width:calc(100% - 16px); border-radius:14px;}
    #panel{top:8px;} #result{bottom:8px;}
    .maplibregl-ctrl-top-right{display:none;}
  }

  /* Prova: lati sx e dx completamente arrotondati (pillola) su pulsanti e campi.
     Per tornare indietro basta eliminare questo blocco (prima: 10px / 8px / 6px). */
  .pref-btn,.row,#myloc,#expandBtn,#go,#whenBtn,#toggleShadows,#toggleTrek,#saveBtn,.warn-btn,.go-btn,.trek-inline,#navStart,#navStop,
  .save-form input,.save-form button,#saveClose,#savedList li,#savedList .sdel,#savedList .sfav{border-radius:999px;}
  .row{padding-left:16px;}
  .save-form input{padding:0 16px;}

/* ---------- tappe intermedie ---------- */
.pin.num{width:18px; height:18px; margin:-3px; display:grid; place-items:center; color:#fff; font-size:10px; font-weight:800; line-height:1; box-sizing:border-box;}
.pin.num::after{inset:-8px;}
#addVia, .via-del{flex:none; width:32px; height:32px; padding:0; border:none; background:none; border-radius:8px; cursor:pointer; display:grid; place-items:center; position:relative; -webkit-tap-highlight-color:transparent;}
.line{display:flex; align-items:flex-start; gap:6px;}
.line > .row{flex:1; min-width:0;}
.slot{flex:none; width:40px; height:40px; display:grid; place-items:center;}
.slot:empty, .slot:has(#addVia[hidden]){display:none;}
#addVia{width:36px; height:36px; border-radius:50%; background:#fafaf8; border:1px solid var(--line);}
#addVia[hidden]{display:none;}
#addVia:active{transform:scale(.92);}
#addVia img{width:17px; height:17px; display:block;}
#myloc img{width:15.4px; height:15.4px; display:block;}
.via-del img{width:14px; height:14px; display:block;}
.via-dot{width:26px; height:26px; box-sizing:border-box; border-radius:50%; background:#089e4f; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); color:#fff; font:800 11px/20px system-ui,sans-serif; text-align:center; pointer-events:none;}

/* ---------- avviso iniziale ---------- */
.modal.disclaimer{z-index:60;}
.disclaimer .brand-logo{height:16px; margin:0 0 14px;}
.disclaimer h2{margin:0 0 10px;}
.disclaimer p{margin:0 0 10px; font-size:.92rem; line-height:1.5; color:var(--ink);}
#disclaimerOk{display:block; width:100%; height:44px; margin-top:14px; border:none; border-radius:999px; background:var(--green); color:#fff; font-size:15px; font-weight:650; cursor:pointer;}
#disclaimerOk:focus-visible{outline:2px solid #9cd8b9; outline-offset:2px;}

/* ---------- tappe raggiunte ---------- */
.row.reached{outline:2px solid var(--green); outline-offset:-1px;}
#navVia{font-size:.95rem; font-weight:700; color:var(--green); margin-top:8px; line-height:1.35;}
#navVia[hidden]{display:none;}

/* promemoria tappe nella tendina di navigazione */
#navStops{display:flex; flex-direction:column; gap:6px; margin-top:10px;}
#navStops[hidden]{display:none;}
.nav-stop{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-size:.85rem; color:var(--ink); background:#fafaf8; min-width:0;}
.nav-stop.reached{outline:2px solid var(--green); outline-offset:-1px; border-color:transparent;}
.nav-stop .stop-dot{flex:none; width:18px; height:18px; border-radius:50%; background:var(--green); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); box-sizing:border-box;}
.nav-stop .stop-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nav-stop .stop-state{flex:none; font-size:.75rem; font-weight:700; color:var(--green);}

.nav-actions{display:flex; align-items:center; gap:8px; margin-top:14px;}
.nav-actions #navStop{flex:1; margin-top:0;}
#navStopsBtn{flex:none; width:40px; height:40px; padding:0; border:none; border-radius:10px; background:none; cursor:pointer; display:grid; place-items:center; -webkit-tap-highlight-color:transparent;}
#navStopsBtn[hidden]{display:none;}
#navStopsBtn img{width:26px; height:26px; transition:transform .3s ease;}
#navStopsBtn[aria-expanded="true"] img{transform:rotate(180deg);}

  .suggest li.suggest-note{cursor:default; color:#5a6b63; font-size:13px;}
  .suggest li.suggest-note:hover{background:none;}

/* ---- piani Gratis / PRO / MAX ---- */
#upgradeBtn{display:block; width:100%; height:40px; margin-top:10px; border:none; border-radius:10px; background:#0217d3; color:#fff; font-size:14px; font-weight:650; cursor:pointer;}
#upgradeBtn[hidden]{display:none;}
#upgradeBtn.max,#accUpgrade.max{background:#1b1d1f;}
.plan-card{width:min(440px,100%);}
.plan{border:1px solid var(--line); border-radius:12px; padding:12px; background:#fafaf8;}
.plan-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; font-size:.95rem;}
.plan-head span{font-size:.72rem; color:var(--muted); font-weight:600;}
.plan ul{margin:0; padding:0; list-style:none;}
.plan li{position:relative; padding:3px 0 3px 18px; font-size:.82rem; line-height:1.35; color:var(--ink);}
.plan li::before{content:"✓"; position:absolute; left:0; top:3px; color:var(--green); font-weight:800;}
.plan-grid{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px;}

.plan-pro{border-color:#0217d3; background:#f3f8ff;}
.plan-pro .plan-head b{color:#0217d3;}
.plan-max{border-color:#1b1d1f;}
.plan-cta{display:block; width:100%; height:36px; margin-top:10px; border:none; border-radius:8px; background:#0217d3; color:#fff; font-size:.78rem; font-weight:650;}
.plan-max .plan-cta{background:#1b1d1f;}
.plan-cta:disabled{background:#c9ced6; color:#fff; cursor:default;}
#planClose{display:block; width:100%; height:40px; margin-top:14px; border:none; border-radius:10px; background:#eee; color:var(--ink); font-size:15px; font-weight:650; cursor:pointer;}
#planIntro{margin-bottom:12px; font-size:.9rem; line-height:1.5; color:var(--ink);}
#planIntro p{margin:0 0 8px;}
#planIntro .intro-list{margin:0 0 10px; padding-left:20px;}
#planIntro .intro-list li{margin:2px 0;}
.plan-price{margin:0 0 8px; line-height:1.35;}
.plan-price b{font-size:1.05rem; font-weight:750;}
.plan-price span{font-size:.75rem; color:var(--muted);}
.plan-pro .plan-price b{color:#0217d3;}
.plan-note{margin-top:8px; font-size:.72rem; color:var(--muted); text-align:center;}
.plan.current{box-shadow:0 0 0 2px var(--green);}
.plan-cta.current:disabled{background:#e4f3ea; color:var(--green); cursor:default;}
.plan-toggle{display:flex; margin:0 0 8px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff;}
.plan-toggle button{flex:1; height:28px; border:none; background:transparent; color:var(--muted); font-size:.72rem; font-weight:650; cursor:pointer; padding:0 4px;}
.plan-pro .plan-toggle button.on{background:#0217d3; color:#fff;}
.plan-max .plan-toggle button.on{background:#1b1d1f; color:#fff;}

/* account */
.modal.legal{z-index:35;}
.acc-card [hidden]{display:none !important;}
.acc-card form{display:flex; flex-direction:column; gap:8px;}
.acc-card input{height:40px; border:1px solid var(--line); border-radius:8px; padding:0 12px; font-size:.9rem; font-family:inherit;}
#accMsg{margin-top:10px; font-size:.78rem; color:#b3261e; line-height:1.35;}
#accMsg.ok{color:#1b7a3a;}
.acc-primary{display:block; width:100%; height:40px; margin-top:8px; border:none; border-radius:8px; background:#1d6fd8; color:#fff; font-size:.85rem; font-weight:650;}
.acc-primary:disabled{opacity:.6;}
.acc-primary.danger{background:#b3261e;}
.acc-link{display:block; margin:10px auto 0; background:none; border:none; color:#1d6fd8; font-size:.8rem;}
.acc-link.left{margin:0; text-align:left; font-size:.76rem;}
.acc-or{display:flex; align-items:center; gap:10px; margin:12px 0; color:var(--muted); font-size:.75rem;}
.acc-or::before,.acc-or::after{content:""; flex:1; height:1px; background:var(--line);}
.acc-btn{display:block; width:100%; height:40px; margin-top:8px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:.85rem; font-weight:650;}
.acc-close{display:block; width:100%; height:36px; margin-top:12px; border:none; background:none; color:var(--muted); font-size:.8rem;}
.acc-mail{margin:0 0 12px; font-size:.9rem; word-break:break-all;}
.acc-box{border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fafaf8; margin-bottom:6px;}
.acc-row{display:flex; justify-content:space-between; gap:10px; font-size:.82rem; padding:4px 0;}
.acc-row span{color:var(--muted);}
.acc-sub{font-size:.74rem; color:var(--muted); margin:-2px 0 4px;}
.acc-bar{height:6px; border-radius:3px; background:#e4e6e0; overflow:hidden; margin:2px 0 6px;}
.acc-bar i{display:block; height:100%; width:0; background:#1d6fd8;}
.acc-danger{display:block; margin:14px auto 0; background:none; border:none; color:#b3261e; font-size:.8rem;}
#accDelAsk p{font-size:.8rem; line-height:1.4; margin:12px 0 0;}
.acc-legal{margin-top:14px; text-align:center; font-size:.74rem; color:var(--muted);}
.acc-legal button{background:none; border:none; padding:0; color:#1d6fd8; font-size:.74rem; text-decoration:underline;}
.acc-ver{margin-top:6px; text-align:center; font-size:.68rem; color:var(--muted);}
.legal-card{max-height:85vh;}
.legal-card h3{margin:14px 0 4px;}
#legalBody p{margin:0 0 6px; font-size:.82rem; line-height:1.45;}
#legalBody h3{font-size:.86rem; color:var(--ink); margin:16px 0 4px;}
#legalBody ul{margin:0 0 6px; padding-left:18px; font-size:.82rem; line-height:1.45;}
#legalBody li{margin-bottom:4px;}
#legalBody .legal-date{color:var(--muted); font-size:.74rem;}
#accUpgrade{background:#0217d3;}
.plan-max .plan-head b,.plan-max .plan-price b{color:#1b1d1f;}

/* gradiente del logo MAX (nero, viola, blu) sui pulsanti MAX */
:root{--max-grad:linear-gradient(135deg,#000 0%,#000 40%,#14003a 54%,#3a00b8 68%,#3147ff 82%,#12003a 94%,#000 100%);}
#upgradeBtn.max,#accUpgrade.max,.plan-max .plan-cta:not(:disabled),.plan-max .plan-toggle button.on{background:var(--max-grad);color:#fff;}
.plan-head b{font-weight:800;}
.plan-free .plan-price b{font-size:.85rem; color:var(--green);}
#saveUpgrade{display:block; width:100%; height:38px; margin-top:8px; border:none; border-radius:999px; background:#0217d3; color:#fff; font-size:.85rem; font-weight:650; cursor:pointer;}
#saveUpgrade[hidden]{display:none;}
#saveUpgrade.max{background:var(--max-grad);}
.plan li.no{color:var(--muted);}
.plan li.no::before{content:"\2715"; color:#b4b8bd; font-weight:700;}
#gpxBtn{display:block; width:100%; height:36px; margin-top:8px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font-size:.82rem; font-weight:650; cursor:pointer;}
#viaRows{overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
#viaRows.scrolls{padding-right:4px;}
#viaRows.scrolls::-webkit-scrollbar{width:4px;}
#viaRows.scrolls::-webkit-scrollbar-thumb{background:#aab0ab; border-radius:2px;}
#viaRows.scrolls::-webkit-scrollbar-track{background:#eef0ea; border-radius:2px;}
#viaRows.scrolls::before,#viaRows.scrolls::after{content:""; display:none; position:sticky; left:0; right:0; height:18px; pointer-events:none; z-index:3;}
#viaRows.scrolls::before{top:0; margin-bottom:-18px; background:linear-gradient(#fff 15%, rgba(255,255,255,0));}
#viaRows.scrolls::after{bottom:0; margin-top:-18px; background:linear-gradient(rgba(255,255,255,0), #fff 85%);}
#viaRows.more-up::before,#viaRows.more-down::after{display:block;}
.acc-credit{margin-top:10px; text-align:center; font-size:.76rem; color:var(--muted);}
.acc-credit a{color:#1d6fd8; text-decoration:underline;}
#accGoogle{position:relative; display:flex; align-items:center; justify-content:center;}
#accGoogle img{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px;}
#planModal .plan-card{position:relative;}
.plan-x-wrap{height:0;}
#planX{position:absolute; top:12px; right:12px; width:34px; height:34px; padding:0; border:none; border-radius:50%; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center;}
#planX img{width:18px; height:18px; display:block;}
#planTitle{padding-right:34px;}