: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:12px; padding:14px 14px 12px;}
  .brand{font-size:.8rem; font-weight:700; letter-spacing:.02em; color:var(--green); margin:0 0 10px 2px;}
  .brand-logo{display:block; height:12px; width:auto; margin:0 0 10px 2px;}
  .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: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: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{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: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;}
  #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;}
  .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;}
  #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: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;}
  #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,#saveBtn,#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;}