/*  Stili di CarSpot.
 *
 *  Stavano dentro un <style> in index.html, insieme a HTML e logica: un solo file da
 *  6.055 righe che andava attraversato per intero per cambiare un colore.
 *  Il file è servito così com'è, senza build step — si modifica e si ricarica.
 *
 *  ATTENZIONE: le variabili --sfondo, --accento e le altre di :root sono confrontate con
 *  i Color di Compose da AllineamentoWebAndroidTest. Cambiarne una qui e non in
 *  ui/theme/Color.kt fa fallire le prove, ed è voluto: le due versioni mostrano lo stesso
 *  gioco, e una divergenza di colore si noterebbe solo affiancando due telefoni.
 */

  :root {
  --logo-mm: url('data:image/webp;base64,UklGRmQQAABXRUJQVlA4IFgQAAAwVACdASpAARoBPj0ejUUiIaER6MSAIAPEs7dwuwCNR681+Yf1nnDWf/P+TzpK6S82zmb/h/dN8y/+D6q/ME/YX12+jvzIfsL+w3u+fkB7sPQA/p3+A9Zj/r+yt+5HsSftH6cPs1/2L/i/tr7RX/m1jRon+48Q/xn7H/NcifI76JvyZ/F4x+AX68/1fDuZe/2HHp3KvG8yF/9b1Kvpf/EesX6P/8Xq2froKTd6xu9Y3esbvWN3rG71jd6xu9Y3esbvWN3rG71jd6xu9U2UkGKSDFJBZ9mZIfa9tcF9fSYhu9Y3esa5pzkzcdyochI5b+Aa6r21ZU0ODG/SmUOCjGEcDzRBLzVvk8lw4QzMXlBemVPFXX1wwBPbtY3ep8kThhnPIJ7zgKQmeT+mficEQx393OZuaceraG8J/H2/NPmG1jd6xBFEjMkgBUSDkyHF2a3hzDt+NZgQiUdcLKexwvdJ6A/XI/RR3d1OP6PB63wjrr7KxsJFkC3LhSndBXr3qEa4b2xD1sTTMeip9DSvlrjK1+2sy564rnvh9OWwcv5KeO71jXWBOirNZAGPqKML8kbZiTyjZT8AlQGUvv1YTesLUMS4Ud8W2XidUBuCqc5zC6lFeEQoKxsMMPxLiVlu8PgLZXUFyZHRDveQUtPioyyZ8O4rJtZtNOhFti0/YRmu3pPg5X1hgRdPRdxG71jd4mjkIpeQPd1d6HE/umcxTAMWo2k8TvNqbvM8KY900Kv/u+lKkcNTZNI5Jo5bWJz9pxZu9Y3ebqX+IPHlsTAOgv2R81xRLrHRrUz/L8BGuqgSe78MHH2Q6m3tfk8ZNG3mKSDFJBdzZQVhK/uz2ap1zc3TikgxSQYpJOXVjJ2QYpIMUkGIWwcd4OO8HHeDjvBx3g47wcd4OO8HHdsAAP7/458AHjtmNcwKHA9JHzcww5VpVSh26C9XzUBar5/Xn3KFfWUhf/43TOHvI6rNphhPoLA1s3dQHFVwNwCzFi6iRUsm3+JHqTYIfP74/FrNZ331li/FL6HX6Ck+TaXCP/6ikR2W928j9rf8tZphmfGHRh+2wBgn1BtL06cBE4PBk5pm05M02iUc43KOz0+1IHKrGy2i7cG8f2/aapxWGU+5pB7TZOvdEqQIRHmymbSPslKeBi4dHs0C/+ynbX5/8YbeF8ybGTlw8r+pDBjX/hGcf4H7+3bcM80xsa25+FDlW6a8gF76xg/0Q9+ALDULjDscrPwMl+VG/M10t8zdFGKHoinzL9/8AGDkQjtNF7rh02orfz2tY/M7vYeAHMdYpTVv8FbT85HMr+inkavWof0z4ahUpyYGQxuxZa5lP/TK+cdZLcPs4+Ru+9KMpXQII+J6KneFVG3uOQCcwBlg8Czf+LMz26hh30LqoIuPcKRPnIMw6o09YuCq/d1b28zqtO/8e8ynBCsP0f8MwXeZ3jplt+o9MfLctduGrApivSbVu0OeS9pYtWPkSFTQlGa5kahmYevhvpYo//yXRJ+DnhPYltHqNP5hCM48v1I+fOtrmaYNKIgR31RAoCCwqrSihomKdD6eYQ8veF2QXVfY3I/9YyD7GJupM4S3/8TFqDnk/q4BjRheNWdjkYfSv994U+T/e2pTt97cS/Q9fokWTaQiMApBBw9eLLmVIY5r8v4e0vsYafp4azELKTuDdm7x0hn58vceL16PapyqDsV+6Jiv7mEj8M/HonkyKTLW3Ht/LNldE0hTfLHRnqhrZxQ4Cg4hOBedcY81a0xb/9UZuux2ok4+cgTcUza687D8gz7T8W6p6mU9CsArBj7iwXWIFP3tNU/kP0wl6/bf840FdD0GQoepJu2t0Z3D4616nHOqe5Snny4qbNbpjqvfvnWSQzJ70X6d1qvjblw0/jx/qKYVfO/Lnr58DEXjZyYHCJ6LZsPbP324vOh44+WPvo/aDR/a9GezmjI3+PugJul8h5d+0zkP2HbHNyqUsglFDVK3M/CySYEQERncZJQpBHV0vvOuKwVSBbyapG9X0uA7qRgCGDf0arV54LTh2IWEudgguUMffMl09CfRLJW6P7XWLhlPp4sVwltq5TB6FJxObTeco2Aedzj485S2HJhqcpgDDXdzjurm/55yVBTrsd8stW4cEAbts7sAjiB3/7nobXBFRMUyceq2EHHhPl6U2AAFec/ugfEofnd9UJP99QRyfm1y+jh9YZQKiy6+HWgGH+TNpvXQFfQthPS9jwOshwRnG7v0mrvMi7sSBE5412KtBHl8C6Pzfk/xmnYknb1eqIv37F6Uyo/l4YGn80KV7RK/x/SR9mFH2HFp5RcC5gbwy3giC9tJxj76/OF6eKw856p4MW0D8ON0WqBpEjiWUaDRFURNPMB04jbJcVK2Qi3C1fjwyPKGgoMb5hvuCyPcD3fKBk/b3wJe2et+N25P9LkMob5UonbP1+JzLwAWl6+Jt+gfEzkI0MdEcZsvtH976Hx9GPhzCC9FIxTlNwAbNciQDHkGs7vmPHJ0kirY1Hi3XKi0R1JjCBDMT1f2Xs6RQbCAt+hxPJxiLLUlmutl/jo7xqp9Wxa7aikV760aO7R8A0KfyudSx5vpl4U2zlt/pDFd3wDiuhxcBW9UbdGqpxk+ZCxRbScoJuapoum7IISIFgAOJQIAHuq0mlPRSXSWW2Uk1J1FRn0tTxmzUI8wFV6uJoVe7pw9/0nULXNBToFiSpwrDp5flAgfPAhdZvHwWzCDJFNOHf8MhL5lP54SYZYa5O56jBkoDAjEBN3g4yDrQEbO0GgILyUvrclgswf4ZLrdOxqhuNfzQUMuvP3E5gunfaL+eDvY2zo8ZkIZskeYSJEjP58Ob9iq9A86mh8uCTdsH90tp/egBj2h15Dh1vgWJAB0l07294bT8o+W7OYMrSf1WjaR2G9U4YOCI+LOhkQCbHfpTGNMWAfbZAB2u5M7xT1xgCj3fvMX3nnfBsbhuNqJKWKhtqdmchO5CZqlDN5VSRzJdFaZKR+SVldGBuBsx6FKKnVW0i85J8dHO1RHhkMc/Qkk6OuuOVY0Th1I9UJC0FL4Lrk3sxZMITjEz041bVsYPlS2x59ncZKnLmfbu6HJzpneUbfV1ogqcTjXN6G1z/TY1RhG46L61VKz25blm6y7vxEZ8dXkawbOjMp7PWIqZKTpHDN+IRSjYr/uGa3zWOo/wg0U9H8D9z+lSXW/kTa0wxN5AMgKvpGlpbHSuAiCW//zawc1kqmzOnJCYXcVjPlUxRJaw8UMJfmRf8oLXA+pvkYFCMXqZxEJwdIXSGcwxxitsL+0pRdv/BdTS9YA3A42WuJew7bLOhWlm8aYcj4Jy43PUhiQLg6RPVXDQ+Ak3v8DzdHPRqDnjM0wxtWs1IPKz+NC26+pS10L+iDL1W4EN5IFjyQdSceP7LHIGa4tGY3sxQrApVinRD5cAb2a3VrOaH+P/JHiSrMYcx3Vi9AUsF1tCOwzT+jP1E2IO7xJOr+hFOt2J3KhovUnpIW/YKZYezPkSJ5fq+GV4DdQ2+AXONAhk4ecryB8Cus0rFMM+qJ+GG+lnP2lJO0Rth3AZvE8J/PKXLJig2J+qVmTFrqH6Tw/efrJHBHDwRXygQ/FIMpsISwGVq4N+elxEDiqt6i2lUat9KunT8igRkIpEWt43vEiR1w8VP02RT0fut4KSYdkrB5HjLUoqpu0mQ3BIF4qjS7Gm5TNIweuFG+4SdV+sqQ0dLc45xqA6muuF4EtFcFsssRqXrWw82GrN3/tjRs7bmmNUtjoF4jOix8h2DMHfFRJuM+vJeiS1mnPdMF/GdV0OsugobI4bc7p/yBICXs5D9JuoAbLCEyEMp4mCK1MJOxKlqIGenm8JfUZ8RGYSL3tFfLUeRnxaMt774UwcK6YzpPdoWi0ptIyAVh6uZc+wxweIRNBSxbc8o2C1f7itN8oPmDCJehQLQn8es/Iz+GJKPxMT9KXdQej77iuxWDwOr/LWgUnn3NbG/fM22M4l3ykhvpa74o9wVpge0+udpLCr2QVf7BY26kPTnrCIgeEu02SNW80sEFva2qvSTBlrziDmkC3Lfo9ojRXuG2HPlumdZePdG8CvUkHcN7/vvqkRIPsifA1nCFwcNqMGWhHq/TI8PdSXKpu9JqRxDynED7wnyRrkGV9xKrfIsGCOaKcdVrduaL/iEQRAYh95c8+bzwDSWxhbDOx70fYcgTMt9yn+Z24QwJC51XVKZFk6MJzUYi3jJNRlpKZE0hbAigGZ+kHeX2cGTjQjrbHGVWeIgstzzPV/sJ37Oyw9SXZAMu/zkRdgDZIdS8/9TPkuL4Rweu9rTIhScLIRDwMfjpHDEUJpiZ9Vrs0lm2tWmB0fNCzadE1EdIQSWIEdyO4E9AR/SAWfv/PyvPw8gSf4TAvy+biygvFIO7+ihjDrkB4TQw5ycTLchf3D2QyvnRb583d/OJ4QnSTPVU+8W+EBSgWUP9T5kSJ0pY0oyWbENc3uHng1MxMUnji+CfWpp2ObpDL9aZ4OZTktGQpNU9mb2MPIlwcy0xvyRttc5xeeP6FXhghbbIk81qNDKIXn22hJBjg0e+7TLA1CimlRTfj20dY+s1gePKGq4adN7qWXnxxzCFT3OFlK/ERZGh6x7VMTeJ7a/JKnq5EOW/Nggb8BM7k5ZDvqZJ6oQ68GPy9LIo2+qiv4v4AXbHJYS7H1zXEI3br9O1qix70kF2LOuEsj69J44voQjqkf1PzJBnydNZp5bEDGRwDfgLxI3Cy6TcZxFo5ZQLgzxcTCePwOSF6Dz3klnxYOdwxJxyJEm9ZUjN7CeOl+w3TwtxF3iHwA40veXDncQZSSAWX2UUOPIB9pBaXFBIZS439FmbX0ebKqxJVTr7IaemOGnDpRD7J6oaCToaFTn8fWFQl2RINv/spIdsy7TjU6na4fluttV0WaO7OIOqQnZgpNVAtSXat8hpXncmuaMNehDM4CMNjxh/orTyOl9QfLD8d+HxwCDN2onX1yGc+8+2wULR/2HT/vMgdbhkRX0mwwLLHFfoH5D5RCKHgtmMf8AeoG0L2cpG17MoIgaaKy5/K+r4PtB6hMbLi/UM8aWAIYCkPujuIkLm+m+pCDD3oGLKDhtvISY6zsDmy1i2mcT6TY9L3VsJiVylUkGDOJYZVR1UZlQT42dGlcosL+9Hvng033yayj1zSE16etfOn+ILcl0YcRrkVsfHztL2J0H2sYNpU2EPElWwImgqcYP1o4YSthxFZ7s3teSbGQgl9S5i8UfXlnHAlI/HF5HpG+Z2A+hwDI8LOWLIfjILAuxDSI/10I9pEVODNM3ATjYiNTwWle1FLeeWZt4qY3frFqnxf098uv+heq/aFOIdXdxoG9ByEuAKn/yYuO/ZG6Cw2BcEs9GJUykEOqlArt7zzepWWEq+yNFbWs33z6PRwaiYQVL6wEtV01IR/f22oZtRpUNF0ekU3ehS0l1lTqwTdMnyCR8P1NJDPeQDmdXe1h8IrPRjinwWFZqVfIsDPPxCG0z3X3bSaWk7bAYAdOcr1P8vWnY/NCVZ7xlFv8QAAAAdzMl3CX9t2qzOBBn/oyifgBqlQAAAAAAAAAA==');
    --sfondo:#0a1526; --sfondo2:#0e1d33; --card:#12213a; --card-hi:#1a3050;
    --bordo:#234058; --accento:#1fd6dc; --accento-scuro:#0f9aa1;
    --ambra:#ffb648; --testo:#eef4fa; --testo-soft:#8fa3bd;
    /* Azioni distruttive: lo stesso CarSpotDanger dell'app Android, scelto per restare
       leggibile sul fondo scuro (il rosso di Bootstrap, su questo blu, non lo è). */
    --pericolo:#ff8a80;
  }
  * { -webkit-tap-highlight-color:transparent; }
  /*  Lo stesso fondo dell'app Android, che usa CarSpotBackground pieno. Prima era una
      sfumatura fra #1c2545, #0f1424 e #0c1020: tre colori che non stanno in nessuna
      palette del progetto, ed erano il motivo per cui le due versioni non avevano lo
      stesso colore di fondo pur avendo le stesse variabili. */
  body { background:var(--sfondo);
    background-attachment:fixed; color:var(--testo); min-height:100vh;
    padding-bottom:88px; font-family:'Inter',system-ui,sans-serif; }
  h1,h2,h3,h4,h5,.font-display { font-family:'Archivo',sans-serif; letter-spacing:-.01em; }

  .card { background:var(--card); border:1px solid var(--bordo); color:var(--testo);
    border-radius:16px; }
  .form-control, .form-control:focus { background:#111931;
    border:1px solid var(--bordo); color:var(--testo); border-radius:12px; }
  .form-control::placeholder { color:#6b7699; }
  .text-secondary { color:var(--testo-soft)!important; }

  /* --- Hero punteggio: contatore arcade --- */
  .intestazione-hero { position:relative; overflow:hidden;
    background:linear-gradient(135deg,#16203f 0%,#131a30 70%);
    border:1px solid var(--bordo); border-radius:20px; padding:22px 18px; }
  .intestazione-hero::before { content:''; position:absolute; inset:0;
    background:radial-gradient(400px 140px at 50% 0%, rgba(0,217,255,.18), transparent 70%);
    pointer-events:none; }
  .punteggio-arcade { font-family:'Archivo',sans-serif; font-weight:800;
    font-size:2.6rem; line-height:1; color:var(--accento);
    text-shadow:0 0 18px rgba(0,217,255,.45); font-variant-numeric:tabular-nums; }
  .etichetta-hero { font-family:'Archivo Narrow',sans-serif; text-transform:uppercase;
    letter-spacing:.14em; font-size:.72rem; color:var(--testo-soft); }

  /* --- Pulsante principale --- */
  .btn-accento { background:linear-gradient(135deg,var(--accento),var(--accento-scuro));
    color:#04222b; border:none; border-radius:14px; font-weight:700; font-family:'Archivo',sans-serif;
    letter-spacing:.02em; box-shadow:0 6px 20px rgba(0,217,255,.30); transition:transform .12s, box-shadow .12s; }
  .btn-accento:hover { color:#04222b; }
  .btn-accento:active { transform:translateY(1px) scale(.99); box-shadow:0 3px 12px rgba(0,217,255,.25); }
  .btn-accento:disabled { opacity:.45; box-shadow:none; }
  .btn-outline-secondary { border-color:var(--bordo); color:var(--testo-soft); border-radius:12px; }

  /* --- Navbar inferiore --- */
  .navbar-fissa { position:fixed; bottom:0; left:0; right:0;
    background:rgba(15,20,36,.92); backdrop-filter:blur(12px);
    border-top:1px solid var(--bordo); display:flex; z-index:100; padding-bottom:env(safe-area-inset-bottom); }
  .navbar-fissa button { flex:1; background:none; border:none; color:#6b7699;
    padding:11px 0 13px; font-size:.7rem; font-family:'Archivo Narrow',sans-serif;
    text-transform:uppercase; letter-spacing:.08em; transition:color .15s; position:relative; }
  .navbar-fissa button.attiva { color:var(--accento); }
  .navbar-fissa button.attiva::after { content:''; position:absolute; top:0; left:50%;
    transform:translateX(-50%); width:26px; height:3px; border-radius:0 0 3px 3px;
    background:var(--accento); box-shadow:0 0 10px var(--accento); }
  /*  L'icona è anche il suo cerchietto: il tondo acceso sotto la voce attiva è lo sfondo
      di questo riquadro, non un elemento a parte messo lì sopra a mano. Prima erano due
      cose distinte — un <span> in posizione assoluta e l'icona nel flusso — e bastava che
      l'altezza del testo cambiasse di un pixel perché il cerchietto scivolasse via
      dall'icona che doveva incorniciare. Così non possono più separarsi. */
  .navbar-fissa button i { display:flex; align-items:center; justify-content:center;
    width:48px; height:28px; margin:0 auto 3px; border-radius:14px; line-height:1;
    font-size:1.3rem; background:transparent; transition:background .15s; }
  .navbar-fissa button.attiva i { background:rgba(31,214,220,.16); }

  /* --- Card auto (distintivo da collezione) --- */
  .foto-garage { width:100%; aspect-ratio:4/3; object-fit:cover; }
  .foto-segnaposto { width:100%; aspect-ratio:4/3; display:flex; align-items:center;
    justify-content:center; font-size:2.6rem; color:#3d486e;
    background:
      repeating-linear-gradient(45deg,#1a2138,#1a2138 10px,#1c2542 10px,#1c2542 20px); }
  .card-spot { cursor:pointer; overflow:hidden; position:relative;
    transition:transform .14s, box-shadow .14s; border:1px solid var(--bordo);
    border-radius:16px; background:var(--card); }
  .card-spot:active { transform:scale(.97); }
  .card-spot::after { content:''; position:absolute; top:0; left:0; right:0; height:4px; }
  .card-spot.bordo-1::after { background:#8a93ad; }
  .card-spot.bordo-2::after { background:#3ddc84; box-shadow:0 0 12px rgba(61,220,132,.5); }
  .card-spot.bordo-3::after { background:#3aa0ff; box-shadow:0 0 12px rgba(58,160,255,.5); }
  .card-spot.bordo-4::after { background:#b26bff; box-shadow:0 0 12px rgba(178,107,255,.55); }
  .card-spot.bordo-5::after { background:linear-gradient(90deg,#ffd700,#ff9500);
    box-shadow:0 0 16px rgba(255,183,0,.65); }
  .titolo-auto { font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:.9rem;
    line-height:1.1; }

  /* --- Stelle rarità --- */
  .stella-1{color:#8a93ad} .stella-2{color:#3ddc84} .stella-3{color:#3aa0ff}
  .stella-4{color:#b26bff} .stella-5{color:#ffb700}

  /* --- Chip punti --- */
  .chip-punti { font-family:'Archivo',sans-serif; font-weight:700; font-size:.72rem;
    color:var(--ambra); font-variant-numeric:tabular-nums; }

  /* --- Barra che salva l'avvistamento ---
     position:sticky e non fixed: cosi' vive dentro la scheda Spot e sparisce da sola
     quando si cambia scheda, senza che nessuno debba ricordarsi di nasconderla. Il
     `bottom` la tiene sopra la navbar inferiore (74px) e sopra la tacca del telefono. */
  .barra-salva-spot { position:sticky; z-index:90;
    bottom:calc(10px + 74px + env(safe-area-inset-bottom));
    background:rgba(15,20,36,.94); backdrop-filter:blur(12px);
    border:1px solid var(--bordo); border-radius:16px; padding:8px; }

  /* --- Risultati ricerca --- */
  .risultato-veicolo { cursor:pointer; transition:border-color .12s, background .12s; }
  .risultato-veicolo.selezionato { border-color:var(--accento);
    background:var(--card-hi); box-shadow:0 0 0 1px var(--accento) inset; }

  /* --- Classifica --- */
  .riga-classifica { cursor:pointer; transition:transform .12s, background .12s; }
  .riga-classifica:active { transform:scale(.99); background:var(--card-hi); }
  .rank-num { font-family:'Archivo',sans-serif; font-weight:800; min-width:34px;
    text-align:center; font-size:1.05rem; color:var(--testo-soft); }
  .medaglia-1{background:linear-gradient(135deg,#ffd700,#e0a000)!important;color:#3a2a00!important;
    box-shadow:0 0 14px rgba(255,215,0,.5);border-radius:10px}
  .medaglia-2{background:linear-gradient(135deg,#e8ecf5,#a8b0c4)!important;color:#20242e!important;border-radius:10px}
  .medaglia-3{background:linear-gradient(135deg,#e08b4a,#a35a24)!important;color:#2a1400!important;border-radius:10px}

  /* La mia riga: la stessa riga della classifica, ma riconoscibile a colpo d'occhio
     senza leggere il nome. Serve perche' compare due volte -- fissa in cima e dentro
     l'elenco quando la pagina che si sta guardando e' la sua -- e le due devono
     leggersi come la stessa cosa. */
  .riga-mia-posizione { border-color:var(--accento); background:var(--card-hi); }
  .riga-classifica.sono-io { border-color:var(--accento); background:var(--card-hi); }
  .etichetta-mia-posizione { font-family:'Archivo Narrow',sans-serif; font-size:.62rem;
    letter-spacing:.08em; text-transform:uppercase; color:var(--accento); }

  /* --- Traguardi --- */
  .badge-traguardo { background:#141c33; border:1px solid var(--bordo); border-radius:24px;
    padding:5px 12px; font-size:.72rem; margin:3px; display:inline-block;
    color:#6b7699; font-family:'Archivo Narrow',sans-serif; letter-spacing:.02em;
    transition:transform .12s; }
  .badge-traguardo.ottenuto { background:linear-gradient(135deg,#123040,#0e2130);
    border-color:var(--accento); color:var(--accento); box-shadow:0 0 12px rgba(0,217,255,.2); }

  /* --- Modali --- */
  .modal-content { background:var(--card); color:var(--testo);
    border:1px solid var(--bordo); border-radius:20px; }
  .modal-header { border-color:var(--bordo)!important; }
  .modal-title { font-family:'Archivo',sans-serif; font-weight:700; }
  .foto-dettaglio { width:100%; max-height:300px; object-fit:cover; border-radius:14px;
    border:1px solid var(--bordo); }

  /* --- Login --- */
  .marchio-login { font-family:'Archivo',sans-serif; font-weight:800; font-size:2rem;
    letter-spacing:-.02em; }
  .marchio-login .spot { color:var(--accento); text-shadow:0 0 20px rgba(0,217,255,.4); }

  /* --- Vari --- */
  /* ==== Barra superiore ====
     Le stesse azioni della TopAppBar dell'app Android: marchio a sinistra, poi nome
     utente, ingranaggio dell'account e menu ⋮ con guida, changelog e privacy. Prima qui
     c'erano due pastiglie che galleggiavano sugli angoli, e changelog e privacy non si
     raggiungevano proprio: erano solo nel piè di pagina della schermata di accesso, cioè
     sparivano appena entravi. */
  .barra-alta { position:sticky; top:0; z-index:200; display:flex; align-items:center;
    gap:6px; padding:8px 10px; padding-top:calc(8px + env(safe-area-inset-top));
    background:var(--sfondo); border-bottom:1px solid var(--bordo); }
  .marchio-barra { font-family:'Archivo',sans-serif; font-weight:900; font-size:1.05rem;
    letter-spacing:-.01em; color:var(--testo); margin-right:auto; }
  .marchio-barra .spot { color:var(--accento); }
  .badge-utente { background:var(--card-hi); border:1px solid var(--bordo);
    color:var(--accento); font-family:'Archivo Narrow',sans-serif; font-weight:700;
    font-size:.72rem; letter-spacing:.05em; padding:4px 10px; border-radius:999px;
    white-space:nowrap; max-width:38vw; overflow:hidden; text-overflow:ellipsis; }
  .azione-barra { background:none; border:0; color:var(--testo-soft); font-size:1.05rem;
    line-height:1; padding:6px 7px; border-radius:10px; }
  .azione-barra:active { background:var(--card-hi); transform:scale(.94); }
  /*  Il menu non è ancorato al suo pulsante ma alla barra: essendo la barra sticky fa già
      da blocco contenitore, e così il pannello scende sotto il bordo inferiore invece di
      sovrapporglisi di qualche pixel. */
  /* --- Campanella delle notifiche (v3.15) --- */
  /*  Il pallino si appoggia allo spigolo della campanella e non ha bisogno di spazio
      suo: se lo avesse, la barra si allargherebbe quando arriva la prima notifica. */
  .campanella { position:relative; display:inline-flex; }
  .badge-notifiche { position:absolute; top:-2px; right:-4px; z-index:2; pointer-events:none;
    min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#ff4d6d;
    color:#fff; font-size:.58rem; line-height:16px; text-align:center;
    font-family:'Archivo',sans-serif; font-weight:700; }
  /*  Una riga della casella. Quelle non lette hanno il fondo acceso e la barretta a
      sinistra: aperta la modale si deve vedere in un colpo d'occhio cosa è nuovo. */
  .riga-notifica { display:flex; gap:10px; align-items:flex-start; padding:10px;
    border-radius:12px; border:1px solid var(--bordo); margin-bottom:8px;
    background:var(--card); cursor:pointer; transition:background .12s; }
  .riga-notifica:active { background:var(--card-hi); }
  .riga-notifica.nuova { background:var(--card-hi); border-left:3px solid var(--accento); }
  .riga-notifica img, .riga-notifica .senza-foto { width:52px; height:52px; border-radius:10px;
    object-fit:cover; flex:0 0 52px; }
  .riga-notifica .senza-foto { display:flex; align-items:center; justify-content:center;
    background:var(--sfondo2); color:#3d486e; font-size:1.3rem; }
  .riga-notifica .quando { color:var(--testo-soft); font-size:.7rem; }

  .menu-alto { display:inline-flex; }
  .menu-alto .voci { position:absolute; right:10px; top:calc(100% + 6px); min-width:210px;
    background:var(--card); border:1px solid var(--bordo); border-radius:14px; padding:6px;
    display:none; box-shadow:0 14px 32px rgba(0,0,0,.5); }
  .menu-alto.aperto .voci { display:block; }
  .menu-alto .voci button, .menu-alto .voci a { display:flex; align-items:center; gap:10px;
    width:100%; background:none; border:0; color:var(--testo); font-size:.85rem;
    padding:9px 10px; border-radius:9px; text-align:left; text-decoration:none; }
  /*  flex:0 0 18px e non solo width: le icone di Bootstrap non hanno tutte la stessa
      larghezza di glifo, e senza la corsia fissa le etichette partirebbero da punti
      diversi riga per riga. */
  .menu-alto .voci i { color:var(--testo-soft); flex:0 0 18px; width:18px; text-align:center; }
  .menu-alto .voci button:active, .menu-alto .voci a:active { background:var(--card-hi); }

  /* ==== Impostazioni ====
     Righe a scheda raggruppate per argomento, come le preferenze di Android. La freccia
     a destra non è decorazione: distingue le voci che aprono un'altra schermata da
     quelle che fanno qualcosa subito, e senza quel segnale ogni riga sembra un pulsante
     che si è dimenticato di rispondere. */
  .titolo-impostazioni { font-family:'Archivo',sans-serif; font-weight:700; font-size:.7rem;
    letter-spacing:.08em; text-transform:uppercase; color:var(--accento);
    padding:16px 4px 6px; }
  /*  display:flex e non block: le due voci accese da JavaScript ricevono uno style
      inline, e 'block' spegnerebbe questo layout — l'etichetta finirebbe attaccata
      all'icona mentre le voci sempre visibili resterebbero allineate. */
  .riga-impostazione { display:flex; align-items:center; gap:12px; width:100%;
    background:var(--card); border:1px solid var(--bordo); border-radius:14px;
    color:var(--testo); text-align:left; text-decoration:none; padding:11px 13px;
    margin-bottom:6px; }
  .riga-impostazione > i { color:var(--testo-soft); flex:0 0 18px; width:18px;
    text-align:center; font-size:1rem; }
  .riga-impostazione > span { flex:1 1 auto; min-width:0; }
  .riga-impostazione strong { display:block; font-size:.88rem; }
  .riga-impostazione small { display:block; color:var(--testo-soft); font-size:.72rem;
    line-height:1.25; }
  .riga-impostazione .freccia { font-size:.85rem; }
  .riga-impostazione:active { background:var(--card-hi); }
  /*  La zona pericolo non è una riga da toccare ma un blocco che si apre: niente flex,
      altrimenti il campo di conferma finirebbe in fila accanto al testo. */
  .riga-impostazione.blocco { display:block; }
  .watermark { text-align:center; color:#4a5578; font-size:.7rem; padding:16px 0; }
  select.form-control option { background:#131a30; }
  @media (prefers-reduced-motion:reduce){ *{transition:none!important} }

  /* --- Livello spotter --- */
  .livello-badge { display:inline-block; font-family:'Archivo',sans-serif; font-weight:700;
    font-size:.85rem; padding:4px 14px; border-radius:20px;
    background:linear-gradient(135deg,#123040,#0e2130); border:1px solid var(--accento);
    color:var(--accento); }
  .barra-livello { height:8px; background:#0c1428;
    border-radius:10px; overflow:hidden; border:1px solid var(--bordo); }
  .barra-livello-fill { height:100%; background:linear-gradient(90deg,var(--accento),var(--ambra));
    border-radius:10px; transition:width .6s ease; box-shadow:0 0 10px rgba(0,217,255,.5); }

  /* --- Sfida del giorno --- */
  .card-sfida { border:1px solid var(--ambra); position:relative; overflow:hidden;
    background:linear-gradient(135deg,#2a2410,#1a2138); }
  .card-sfida .titolo-sfida { font-family:'Archivo Narrow',sans-serif; text-transform:uppercase;
    letter-spacing:.1em; font-size:.7rem; color:var(--ambra); }

  /* --- Celebrazione avvistamento raro --- */
  .overlay-celebrazione { position:fixed; inset:0; z-index:2000; display:none;
    align-items:center; justify-content:center; flex-direction:column;
    background:rgba(8,10,20,.92); backdrop-filter:blur(6px); text-align:center; padding:24px; }
  .overlay-celebrazione.attivo { display:flex; animation:apparire .3s ease; }
  @keyframes apparire { from{opacity:0} to{opacity:1} }
  .celebra-titolo { font-family:'Archivo',sans-serif; font-weight:800; font-size:2rem;
    margin-bottom:8px; animation:pulsa 1.2s ease infinite; }
  @keyframes pulsa { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
  .celebra-stelle { font-size:2.4rem; margin:12px 0; animation:brilla 1.5s ease infinite; }
  @keyframes brilla { 0%,100%{filter:drop-shadow(0 0 8px currentColor)} 50%{filter:drop-shadow(0 0 20px currentColor)} }
  .coriandolo { position:fixed; top:-10px; width:9px; height:9px; z-index:2001;
    animation:cadere linear forwards; }
  @keyframes cadere { to { transform:translateY(105vh) rotate(720deg); opacity:0; } }

  /* --- Streak giornaliera --- */
  .card-streak { border:1px solid #ff6b35; background:linear-gradient(135deg,#2a1810,#1a2138);
    display:flex; align-items:center; gap:14px; }
  .fiamma-streak { font-size:2.2rem; line-height:1; }
  .fiamma-streak.spenta { filter:grayscale(1); opacity:.45; }
  .numero-streak { font-family:'Archivo',sans-serif; font-weight:800; font-size:1.8rem;
    color:#ff6b35; line-height:1; }

  /* --- Collezioni --- */
  .riga-collezione { padding:8px 0; border-bottom:1px solid var(--bordo); }
  .riga-collezione:last-child { border-bottom:none; }
  .riga-collezione.completa .nome-collezione { color:var(--ambra); }
  .nome-collezione { font-family:'Archivo',sans-serif; font-size:.85rem; letter-spacing:.01em; }
  .barra-collezione { height:6px; background:#0c1428; border-radius:6px; overflow:hidden; margin-top:4px; }
  .barra-collezione > div { height:100%; background:linear-gradient(90deg,var(--accento),var(--ambra));
    border-radius:6px; transition:width .5s ease; }
  /* Dettaglio del set (issue #33): l'elenco delle auto trovate e di quelle da trovare */
  .dettaglio-collezione { display:none; padding:6px 0 2px; }
  .dettaglio-collezione.aperto { display:block; }
  .auto-collezione { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:.8rem; }
  .auto-collezione .stelline-mini { color:var(--ambra); font-size:.65rem; white-space:nowrap; }
  .auto-collezione.mancante { opacity:.55; }
  .caccia-collezione { color:var(--accento); font-size:.72rem; font-weight:700;
    font-family:'Archivo',sans-serif; margin-top:6px; }

  /* --- Commenti --- */
  .commento { padding:6px 0; font-size:.85rem; border-bottom:1px solid var(--bordo); }
  .commento:last-child { border-bottom:none; }
  .commento .autore { font-family:'Archivo',sans-serif; font-weight:700; color:var(--accento); }
  /* Segnalazione del commento: deve essere raggiungibile ma non contendere l'attenzione
     al commento stesso, quindi resta smorzata finché non ci si passa sopra. */
  .btn-segnala-commento { float:right; background:none; border:none; padding:0 2px;
    color:var(--testo-soft); opacity:.55; font-size:.8rem; line-height:1; }
  .btn-segnala-commento:hover, .btn-segnala-commento:focus { opacity:1; color:var(--pericolo); }

  /* --- Scheda tecnica (v3.12) --- */
  .riga-tecnica { display:flex; justify-content:space-between; gap:12px; padding:3px 0;
    font-size:.85rem; border-bottom:1px solid var(--bordo); }
  .riga-tecnica:last-child { border-bottom:none; }
  .riga-tecnica > span:last-child { text-align:right; }
  /* Un termine del glossario: si deve capire che si tocca, senza urlarlo — la scheda
     è fatta di termini, e sottolinearli tutti in accento la renderebbe illeggibile. */
  .termine { background:none; border:none; padding:0; color:var(--accento);
    text-decoration:underline dotted; text-underline-offset:2px; font:inherit; }
  .termine:hover, .termine:focus { text-decoration-style:solid; }

  /* --- Feed --- */
  .card-feed { border:1px solid var(--bordo); border-radius:16px; overflow:hidden; margin-bottom:12px; }
  .card-feed .feed-foto { width:100%; max-height:280px; object-fit:cover; }
  .card-feed .feed-header { padding:10px 12px; display:flex; align-items:center; gap:8px; }
  .avatar-cerchio { width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg,var(--accento),var(--accento-scuro));
    display:flex; align-items:center; justify-content:center; font-weight:700; color:#04222b;
    font-family:'Archivo',sans-serif; flex-shrink:0; }
  .btn-like { background:none; border:1px solid var(--bordo); border-radius:20px;
    color:var(--testo-soft); padding:5px 12px; font-size:.85rem; font-weight:600;
    display:flex; align-items:center; gap:5px; transition:all .15s; flex-shrink:0; }
  .btn-like.attivo { color:#ff4d6d; border-color:#ff4d6d; }
  .btn-like:active { transform:scale(.92); }
  /*  Lo scambio nel feed (v3.22) è un'azione, non un contatore come cuore e commenti:
      prende il colore dell'accento perché altrimenti, in fila agli altri due, si legge
      come un terzo numero e non lo tocca nessuno. */
  .btn-scambia { color:var(--accento); border-color:var(--accento); }

  /* --- Statistiche --- */
  .stat-box { background:var(--card); border:1px solid var(--bordo); border-radius:14px;
    padding:14px; text-align:center; }
  .stat-num { font-family:'Archivo',sans-serif; font-weight:800; font-size:1.6rem; color:var(--accento); }
  .stat-lab { font-family:'Archivo Narrow',sans-serif; text-transform:uppercase;
    letter-spacing:.08em; font-size:.65rem; color:var(--testo-soft); }
  .barra-marca { height:6px; background:#0c1428; border-radius:6px; overflow:hidden; margin-top:4px; }
  .barra-marca-fill { height:100%; background:linear-gradient(90deg,var(--accento),var(--ambra)); border-radius:6px; }
  /* Variante Teal Vivace: bagliori ravvicinati alla palette del logo */
  .intestazione-hero::before { background:radial-gradient(400px 140px at 50% 0%, rgba(31,214,220,.20), transparent 70%); }
  .punteggio-arcade { text-shadow:0 0 18px rgba(31,214,220,.5); }
  .marchio-login .spot { text-shadow:0 0 20px rgba(31,214,220,.45); }

  /* --- Posta con chi sviluppa l'app (v3.22) --- */
  /*  L'ingranaggio non è nato per portare un pallino: il contenitore gli dà solo un
      riferimento di posizione e non occupa spazio suo — se lo occupasse, la barra si
      allargherebbe il giorno che arriva la prima risposta. */
  .con-pallino { position:relative; display:inline-flex; }
  /*  Dentro una riga delle impostazioni non c'è nessuno spigolo a cui appoggiarsi: lì il
      pallino sta in fila con gli altri elementi, e torna quindi statico. */
  .badge-notifiche.statico { position:static; }
  .riga-posta { border:1px solid var(--bordo); border-radius:12px; background:var(--card);
    padding:10px; margin-bottom:8px; }
  .riga-posta .quando { color:var(--testo-soft); font-size:.7rem; }
  .stato-posta { font-family:'Archivo Narrow',sans-serif; text-transform:uppercase;
    letter-spacing:.06em; font-size:.6rem; padding:2px 8px; border-radius:8px;
    background:var(--card-hi); color:var(--testo-soft); flex-shrink:0; }
  .stato-posta.stato-presa_in_carico { color:var(--ambra); }
  .stato-posta.stato-risolta { color:var(--accento); }
  /*  La risposta si stacca dal messaggio: quando arriva è l'unica cosa che si sta
      cercando in questa schermata, e attaccata al proprio testo non si distinguerebbe. */
  .risposta-assistenza { margin-top:8px; padding:8px 10px; border-radius:10px;
    background:var(--card-hi); border-left:3px solid var(--bordo); font-size:.82rem; }
  .risposta-assistenza.nuova { border-left-color:var(--accento); }
  .risposta-assistenza .quando { color:var(--testo-soft); font-size:.7rem; margin-bottom:2px; }

  /* --- Scambi --- */
  /*  Il pallino si appoggia allo spigolo in alto a destra del riquadro dell'icona
      (48×28 centrato), non alla cima del pulsante: più su galleggerebbe da solo. */
  .badge-scambi { position:absolute; top:5px; right:calc(50% - 22px); z-index:2;
    min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#ff4d6d;
    color:#fff; font-size:.6rem; line-height:17px; font-family:'Archivo',sans-serif;
    font-weight:700; letter-spacing:0; }
  .card-scambio { border:1px solid var(--bordo); border-radius:16px; background:var(--card);
    padding:12px; margin-bottom:12px; }
  .card-scambio.in-arrivo { border-color:var(--accento); }
  .riga-scambio { display:flex; align-items:center; gap:10px; }
  .lato-scambio { flex:1; min-width:0; background:var(--card-hi); border:1px solid var(--bordo);
    border-radius:10px; padding:8px; }
  .lato-scambio .titolo-auto { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .freccia-scambio { color:var(--accento); font-size:1.3rem; flex-shrink:0; }
  .auto-selezionabile { background:var(--card-hi); border:1px solid var(--bordo);
    border-radius:10px; padding:8px; margin-bottom:6px; cursor:pointer; transition:border-color .12s; }
  .auto-selezionabile.selezionata { border-color:var(--accento);
    box-shadow:0 0 0 1px var(--accento) inset; }
  .auto-selezionabile:active { transform:scale(.98); }
  #listaMieAuto { max-height:230px; overflow-y:auto; -webkit-overflow-scrolling:touch; }

  /* --- Nota personale sull'avvistamento --- */
  .nota-spot { background:#111931; border:1px solid var(--bordo); border-radius:12px;
    color:var(--testo); width:100%; padding:8px 10px; font-size:.85rem; resize:vertical; }

  /* ==== UI nativa ibrida: bottom sheet, tab bar, feedback tattile, safe area ==== */
  @media (max-width: 992px) {
    .modal-dialog { position:fixed; margin:0; left:0; right:0; bottom:0; width:100%; max-width:100%;
      transform:translateY(100%) !important; transition:transform .28s cubic-bezier(.32,.72,0,1) !important; }
    .modal.show .modal-dialog { transform:translateY(0) !important; }
    .modal-content { border-radius:20px 20px 0 0 !important; border-bottom:none; max-height:88vh; }
    .modal-body { max-height:calc(88vh - 64px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
    .modal-dialog-centered, .modal-dialog-scrollable { align-items:flex-end !important; min-height:auto !important; max-height:88vh; }
  }
  .grabber-sheet { width:38px; height:4px; border-radius:3px; background:var(--bordo); margin:8px auto -4px; }

  .navbar-fissa button { position:relative; }
  .navbar-fissa button.attiva::after { display:none; }
  .navbar-fissa button:active { transform:scale(.93); }

  .btn:active { transform:scale(.97); }
  .riga-collezione { transition:background .12s; border-radius:10px; }
  .riga-collezione:active { background:var(--card-hi); }
  .badge-traguardo:active { transform:scale(.94); }
  .risultato-veicolo:active { transform:scale(.98); }

  /*  Il margine per la tacca lo mette la barra superiore (che è sticky e deve restare
      sotto la tacca anche da scrollata); qui serve solo alla schermata di accesso, che
      la barra non ce l'ha. */
  #vistaLogin { padding-top:calc(1rem + env(safe-area-inset-top)); }
  .navbar-fissa { padding-bottom:calc(6px + env(safe-area-inset-bottom)) !important; }


  /* ==== Garage interattivo (v3.7) ==== */
  /* Barra strumenti: ricerca, ordinamento, filtri per rarità, vista griglia/lista */
  .barra-garage { background:var(--card); border:1px solid var(--bordo); border-radius:16px;
    padding:10px; margin-bottom:12px; }
  .chip-filtro { background:#141c33; border:1px solid var(--bordo); color:var(--testo-soft);
    border-radius:20px; padding:3px 11px; font-size:.75rem; font-family:'Archivo Narrow',sans-serif;
    letter-spacing:.04em; white-space:nowrap; transition:all .12s; }
  .chip-filtro.attivo { border-color:var(--accento); color:var(--accento);
    background:linear-gradient(135deg,#123040,#0e2130); box-shadow:0 0 10px rgba(31,214,220,.18); }
  .chip-filtro:active { transform:scale(.94); }
  .riga-chip { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .riga-chip::-webkit-scrollbar { display:none; }
  .select-mini { background:#111931; border:1px solid var(--bordo); color:var(--testo);
    border-radius:10px; font-size:.78rem; padding:4px 8px; }
  .btn-vista { background:#141c33; border:1px solid var(--bordo); color:var(--testo-soft);
    border-radius:10px; padding:4px 9px; }
  .btn-vista.attivo { border-color:var(--accento); color:var(--accento); }

  /* Stella "in vetrina" sulla card: il tocco resta separato dall'apertura del dettaglio */
  .stella-preferita { position:absolute; top:6px; right:6px; z-index:3; width:30px; height:30px;
    border-radius:50%; border:none; background:rgba(8,14,28,.62); backdrop-filter:blur(4px);
    color:#8fa3bd; font-size:.95rem; line-height:1; display:flex; align-items:center;
    justify-content:center; transition:transform .12s, color .12s; }
  .stella-preferita.attiva { color:var(--ambra); text-shadow:0 0 10px rgba(255,182,72,.7); }
  .stella-preferita:active { transform:scale(.85); }
  .card-spot.in-vetrina { box-shadow:0 0 0 1px var(--ambra) inset; }

  /* Vista a lista: card orizzontali compatte, utili quando il garage cresce */
  .lista-garage .col-6 { width:100%; }
  .lista-garage .card-spot { display:flex; align-items:stretch; }
  .lista-garage .foto-garage, .lista-garage .foto-segnaposto { width:96px; aspect-ratio:1/1; flex-shrink:0; }
  .lista-garage .foto-segnaposto { font-size:1.6rem; }
  .lista-garage .card-spot > .p-2 { flex:1; min-width:0; display:flex; flex-direction:column;
    justify-content:center; padding-right:44px !important; }
  .lista-garage .stella-preferita { top:50%; right:8px; transform:translateY(-50%); }
  .lista-garage .stella-preferita:active { transform:translateY(-50%) scale(.85); }

  /* Vetrina: le auto messe in evidenza, sempre in cima */
  .vetrina { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .vetrina::-webkit-scrollbar { display:none; }
  .card-vetrina { flex:0 0 132px; border:1px solid var(--ambra); border-radius:14px;
    background:var(--card); overflow:hidden; cursor:pointer; position:relative; }
  .card-vetrina:active { transform:scale(.97); }
  .card-vetrina img, .card-vetrina .foto-segnaposto { width:100%; aspect-ratio:4/3; object-fit:cover; }
  .soprannome-auto { font-family:'Archivo',sans-serif; font-size:.72rem; color:var(--ambra); }

  /* Primi passi: la checklist che trasforma la guida in pratica */
  .missione { display:flex; align-items:center; gap:9px; padding:5px 0; font-size:.83rem; }
  .missione .segno { width:20px; text-align:center; flex-shrink:0; }
  .missione.fatta { color:var(--testo-soft); text-decoration:line-through; }
  .missione.fatta .segno { color:#3ddc84; }

  /* Navigazione fra le auto dentro il dettaglio */
  .nav-dettaglio { background:#141c33; border:1px solid var(--bordo); color:var(--testo-soft);
    border-radius:10px; padding:2px 10px; font-size:.9rem; }
  .nav-dettaglio:disabled { opacity:.35; }
  .foto-dettaglio { cursor:zoom-in; }

  /* Lightbox della foto */
  .overlay-foto { position:fixed; inset:0; z-index:2100; display:none;
    background:rgba(6,9,18,.96); align-items:center; justify-content:center; padding:12px; }
  .overlay-foto.attivo { display:flex; }
  .overlay-foto img { max-width:100%; max-height:88vh; border-radius:12px; }

  /* ==== Tour guidato (onboarding pratico) ==== */
  .tour-buco { position:fixed; z-index:2200; border-radius:16px; pointer-events:none;
    box-shadow:0 0 0 9999px rgba(6,9,18,.86), 0 0 0 2px var(--accento), 0 0 26px rgba(31,214,220,.55);
    transition:top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
  .tour-fumetto { position:fixed; z-index:2201; max-width:min(340px, calc(100vw - 24px));
    background:var(--card); border:1px solid var(--accento); border-radius:16px; padding:14px;
    box-shadow:0 12px 40px rgba(0,0,0,.5); }
  .tour-fumetto h6 { font-family:'Archivo',sans-serif; font-weight:700; color:var(--accento);
    margin-bottom:4px; }
  .tour-fumetto p { font-size:.85rem; color:var(--testo); margin-bottom:10px; }
  .tour-passo { font-family:'Archivo Narrow',sans-serif; text-transform:uppercase;
    letter-spacing:.1em; font-size:.65rem; color:var(--testo-soft); }

  /* Benvenuto: le slide del primo accesso */
  .slide-benvenuto { display:none; text-align:center; }
  .slide-benvenuto.attiva { display:block; animation:apparire .25s ease; }
  .slide-benvenuto .emoji { font-size:2.8rem; line-height:1; }
  .punti-slide { display:flex; gap:6px; justify-content:center; margin:14px 0 4px; }
  .punti-slide span { width:7px; height:7px; border-radius:50%; background:var(--bordo); }
  .punti-slide span.attivo { background:var(--accento); box-shadow:0 0 8px rgba(31,214,220,.6); }

  /* --- Striscia delle foto dell'avvistamento (v3.9) --- */
  .striscia-foto { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  .miniatura-foto { position:relative; width:64px; height:64px; border-radius:10px;
    overflow:hidden; border:2px solid var(--bordo); flex-shrink:0; }
  .miniatura-foto.attiva { border-color:var(--accento); box-shadow:0 0 10px rgba(31,214,220,.35); }
  .miniatura-foto img { width:100%; height:100%; object-fit:cover; display:block; }
  .miniatura-foto .togli { position:absolute; top:1px; right:1px; width:19px; height:19px;
    border:none; border-radius:50%; background:rgba(8,14,28,.78); color:#fff;
    font-size:.62rem; line-height:19px; padding:0; }
  .miniatura-foto .indice { position:absolute; bottom:0; left:0; right:0;
    background:rgba(8,14,28,.72); color:var(--testo-soft); font-size:.6rem; }
  .aggiungi-foto { width:64px; height:64px; border-radius:10px; border:2px dashed var(--bordo);
    background:none; color:var(--testo-soft); font-size:1.3rem; flex-shrink:0; }

  /* --- Galleria nella scheda dell'avvistamento (v3.9) --- */
  .punti-galleria { display:flex; gap:6px; justify-content:center; margin-top:6px; }
  .punti-galleria button { width:9px; height:9px; padding:0; border:none; border-radius:50%;
    background:var(--bordo); }
  .punti-galleria button.attivo { background:var(--accento); }
  .conta-foto { position:absolute; top:6px; left:6px; z-index:3; background:rgba(8,14,28,.7);
    color:var(--testo); border-radius:10px; padding:1px 7px; font-size:.62rem;
    font-family:'Archivo Narrow',sans-serif; }
  /* Sopra la foto a tutto schermo il bordo dello schermo può essere sotto la tacca. */
  .conta-foto-intera { top:calc(10px + env(safe-area-inset-top)); left:12px; z-index:2102;
    font-size:.75rem; padding:2px 9px; }

  /* Sfogliare le foto: il dito trascina, le frecce servono al mouse.
     `touch-action: pan-y` è la riga che fa funzionare il trascinamento su telefono —
     senza, il browser interpreta il gesto come scorrimento della scheda e la sequenza di
     eventi si interrompe a metà, senza che niente lo segnali. `pan-y` e non `none`
     perché la scheda sotto deve continuare a scorrere in verticale. */
  .foto-dettaglio, .overlay-foto img { touch-action:pan-y; -webkit-user-drag:none;
    user-select:none; }
  .freccia-galleria { position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:32px; height:32px; align-items:center; justify-content:center; padding:0;
    border:1px solid var(--bordo); border-radius:50%; background:rgba(8,14,28,.72);
    color:var(--testo); }
  .freccia-galleria.sinistra { left:8px; }
  .freccia-galleria.destra { right:8px; }

  /* Banner installazione e stato offline */
  .banner-app { position:fixed; left:10px; right:10px; bottom:calc(74px + env(safe-area-inset-bottom));
    z-index:150; background:var(--card-hi); border:1px solid var(--accento); border-radius:14px;
    padding:10px 12px; display:none; align-items:center; gap:10px; box-shadow:0 8px 24px rgba(0,0,0,.4); }
  .banner-app.attivo { display:flex; }
  .banner-offline { position:fixed; left:0; right:0; top:0; z-index:300; display:none;
    background:#c2410c; color:#fff; text-align:center; font-size:.78rem; padding:5px 8px;
    padding-top:calc(5px + env(safe-area-inset-top)); }
  .banner-offline.attivo { display:block; }

  /*  Rete assente sul serio (v3.16): non un banner ma una schermata, perché quando il
      backend non risponde ogni pulsante dell'app è una promessa che non può mantenere.
      Sopra le modali (z-index più alto di 1055, quello di Bootstrap): se la linea cade
      mentre una scheda è aperta, l'errore riguarda anche quella. */
  .schermata-rete { position:fixed; inset:0; z-index:2000; display:none;
    background:var(--sfondo); padding:24px;
    padding-top:calc(24px + env(safe-area-inset-top)); }
  .schermata-rete.attiva { display:flex; align-items:center; justify-content:center; }
  .schermata-rete .contenuto { max-width:360px; text-align:center; }
  .schermata-rete .bi-cloud-slash { font-size:3.4rem; color:var(--accento); opacity:.85; }
  .schermata-rete h2 { margin:14px 0 10px; font-size:1.25rem; }

  /*  Qui c'era una modalità chiara automatica: col telefono in tema chiaro il fondo
      diventava bianco. Era un tema chiaro a metà — pagina bianca e schede rimaste blu
      scure — e soprattutto non esisteva nell'app Android, che è sempre scura: le due
      versioni si vedevano diverse sullo stesso telefono. CarSpot ha un tema solo. */