/* FlyDown — pelle della dashboard.
 *
 * I colori, la tipografia e le forme stanno in brand.css: qui c'e' solo come
 * si compongono le parti della dashboard. I nomi delle classi sono gli stessi
 * di prima: la pelle cambia, la logica JavaScript no.
 *
 * Tre regole che spiegano quasi tutte le scelte qui sotto:
 *   1. il prezzo e' la cosa che si cerca: e' sempre il pezzo piu' grande e
 *      l'unico in color pesca;
 *   2. tutto e' tondo, come la mascotte: raggi grandi, niente spigoli;
 *   3. il colore serve a distinguere le compagnie e a segnalare le occasioni,
 *      non a decorare.
 */

/* ------------------------------------------------------------ intestazione */
.topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:14px clamp(16px,4vw,36px);
  background:color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter:blur(12px); border-bottom:1.5px solid var(--rule);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand .logo-ufficiale{width:186px; height:48px}
.brand .logo-ufficiale img{width:100%; height:100%; object-fit:contain; object-position:left center}
.brand h1{font-size:0; position:absolute; width:1px; height:1px; overflow:hidden}  /* il logo e' gia' il nome */
.tagline{margin:0; font-size:12px; font-weight:700; color:var(--muted)}
.topbar-right{display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; min-width:0}
@media (max-width:640px){.topbar-right{justify-content:flex-start; width:100%}}

.pill-health .dot{background:var(--muted)}
.pill-health.h-ok{border-color:var(--ok); color:var(--ok); background:var(--ok-soft)}
.pill-health.h-ok .dot{background:var(--ok)}
.pill-health.h-warning{border-color:var(--gold); color:var(--gold); background:var(--gold-soft)}
.pill-health.h-warning .dot{background:var(--gold)}
.pill-health.h-error{border-color:var(--danger-bg); color:var(--danger-ink); background:var(--danger-bg)}
.pill-health.h-error .dot{background:var(--danger-ink)}
.pill-live{border-color:var(--accent); color:var(--accent-deep); background:var(--accent-soft)}
.pill-live .dot{background:var(--accent); animation:blip 1.4s ease-in-out infinite}
.pill-work{border-color:var(--gold); color:var(--gold); background:var(--gold-soft)}
.pill-work .dot{background:var(--gold); animation:blip .7s ease-in-out infinite}
.pill-bad{border-color:var(--bad); color:var(--bad); background:var(--bad-soft)}
.pill-bad .dot{background:var(--bad)}
.pill-idle .dot{background:var(--muted)}
@keyframes blip{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.7)}}

.account{display:flex; align-items:center; gap:8px}
.avatar{
  width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-deep); font-weight:900; font-size:13px;
  border:1.5px solid var(--rule-2); cursor:pointer;
}
.avatar:hover{border-color:var(--accent)}

/* ------------------------------------------------------------------ pagina */
.wrap{max-width:1260px; margin:0 auto; padding:24px clamp(16px,4vw,36px) 48px}
.block{margin-top:34px}
.block-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.block-head h2{font-size:21px}
.block-note{font-size:12px; font-weight:700; color:var(--muted)}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.filters .select{width:auto; min-width:168px; font-size:13px; border-radius:var(--r-pill); padding:8px 14px}

.banner{
  display:block; width:100%; text-align:left; margin-bottom:16px; cursor:pointer;
  padding:14px 18px; border-radius:var(--r); border:1.5px solid var(--gold);
  background:var(--gold-soft); color:var(--ink); font-size:13.5px; font-weight:600;
}
.banner strong{display:block; font-size:15px; margin-bottom:3px; font-weight:800}
.banner code{
  font-family:var(--mono); font-size:12px; background:var(--surface);
  padding:2px 6px; border-radius:var(--r-xs);
}
.banner-health{border-color:var(--danger-bg); background:var(--danger-bg); color:var(--danger-ink); display:flex;
               align-items:center; justify-content:space-between; gap:12px}
.banner-health .go{font-weight:800; color:inherit; white-space:nowrap}

/* ----------------------------------------------------------- riepilogo */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px}
.stat{
  background:var(--surface); border:1.5px solid var(--rule); border-radius:var(--r);
  padding:15px 17px; display:flex; flex-direction:column; gap:4px;
}
.stat-k{font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.stat-v{font-size:26px; font-weight:900; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stat.pop{background:var(--pop-soft); border-color:transparent}
.stat.pop .stat-v,.stat.pop .stat-k{color:var(--pop-ink)}

/* --------------------------------------------------------- monitoraggi */
.watches{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
.watch{
  background:var(--surface); border:1.5px solid var(--rule); border-radius:var(--r);
  padding:17px 18px 15px; display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--shadow-s); transition:border-color .16s ease, transform .16s ease;
}
.watch:hover{border-color:var(--rule-2); transform:translateY(-2px)}
.watch.off{opacity:.62}
.watch-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.watch-name{font-size:18px; font-weight:800; line-height:1.2}
.watch-sub{font-size:11.5px; font-weight:700; color:var(--muted); margin-top:3px}
.watch-crit{display:flex; flex-wrap:wrap; gap:6px}
.watch-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;
            border-top:1.5px solid var(--rule); padding-top:11px}
.watch-best{font-size:13px; font-weight:800; color:var(--ink)}
.watch-best small{font-weight:700; color:var(--muted); font-size:11px}
.watch-acts{display:flex; gap:7px}
/* Azioni sul monitoraggio: pastiglie tonde nei colori della palette. */
.azione-watch{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0;
  border:1.5px solid transparent; transition:transform .12s ease, background .16s ease, color .16s ease}
.azione-watch svg{width:18px; height:18px}
.azione-watch:hover{transform:translateY(-1px)}
.azione-watch:focus-visible{outline:none; box-shadow:var(--ring)}
.azione-watch:disabled{cursor:default; transform:none}
.az-controlla{background:var(--c-lilac); color:#4F5BD5}
.az-controlla:hover{background:color-mix(in srgb, var(--c-iris) 26%, var(--c-lilac))}
.az-controlla.gira svg{animation:giro-az 1s linear infinite}
@keyframes giro-az{to{transform:rotate(360deg)}}
.az-modifica{background:color-mix(in srgb, var(--c-mint) 55%, #FFFFFF); color:#1F7A5C}
.az-modifica:hover{background:var(--c-mint)}
.az-elimina{background:color-mix(in srgb, #F2B8AC 40%, #FFFFFF); color:#B4412F}
.az-elimina:hover{background:#F2B8AC}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .az-controlla{background:color-mix(in srgb, var(--c-iris) 22%, var(--surface)); color:#B9C1FF}
  :root:not([data-theme="light"]) .az-modifica{background:color-mix(in srgb, var(--c-mint) 16%, var(--surface)); color:var(--c-mint)}
  :root:not([data-theme="light"]) .az-elimina{background:color-mix(in srgb, #FF9C8A 16%, var(--surface)); color:#FF9C8A}
}
:root[data-theme="dark"] .az-controlla{background:color-mix(in srgb, var(--c-iris) 22%, var(--surface)); color:#B9C1FF}
:root[data-theme="dark"] .az-modifica{background:color-mix(in srgb, var(--c-mint) 16%, var(--surface)); color:var(--c-mint)}
:root[data-theme="dark"] .az-elimina{background:color-mix(in srgb, #FF9C8A 16%, var(--surface)); color:#FF9C8A}

.chip{
  display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-pill);
  padding:4px 10px; font-size:11.5px; font-weight:800; background:var(--surface-2); color:var(--ink-2);
}
.chip-air{background:var(--accent-soft); color:var(--accent-deep)}
.chip-wizz{background:var(--grape-soft); color:var(--grape)}
.chip-easy{background:var(--pop-soft); color:var(--pop-ink)}
.chip-vueling{background:var(--gold-soft); color:var(--gold)}
.chip-volotea{background:var(--sky-soft); color:var(--sky)}
.chip-transavia{background:var(--ok-soft); color:var(--ok)}
.chip-iata,.chip-dest{font-weight:900; letter-spacing:.02em}
.chip-abroad{background:var(--gold-soft); color:var(--gold)}
.chip-period{background:var(--accent-soft); color:var(--accent-deep)}
.chip-dest{background:var(--gold-soft); color:var(--gold)}
.chip-excl-card{background:var(--gold-soft); color:var(--gold)}
/* Mete escluse: pesca, leggibili. Il barrato su decine di voci diventava un
   muro di segni; l'esclusione la dice gia' il titolo del campo. */
.chip-sel.chip-excl{background:var(--gold-soft); color:var(--gold)}
.chip-country{background:var(--accent-soft); color:var(--accent-deep)}
.chip.has-logo{padding-left:4px}

/* -------------------------------------------------------------- offerte */
.offers{display:grid; grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); gap:16px}
.offer{
  position:relative; background:var(--surface); border:1.5px solid var(--rule);
  border-radius:var(--r); overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  box-shadow:var(--shadow-s); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.offer:hover{transform:translateY(-3px); box-shadow:var(--shadow-m); border-color:var(--rule-2)}
.offer:focus-visible{outline:none; box-shadow:var(--ring)}
.offer-cover{position:relative; height:120px; overflow:hidden; background:var(--surface-3)}
.offer-cover img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease}
.offer:hover .offer-cover img{transform:scale(1.05)}
.offer-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,23,42,.55), rgba(15,23,42,0) 62%);
}
.cover-code{
  position:absolute; left:14px; bottom:10px; z-index:1; font-weight:900; font-size:12px;
  letter-spacing:.08em; color:#fff; text-shadow:0 1px 6px rgba(15,23,42,.6);
}
.offer-cover.no-img::after{display:none}
.offer-cover.no-img .cover-code{
  inset:0; left:0; bottom:0; display:flex; align-items:center; justify-content:center;
  font-size:30px; color:var(--accent-deep); text-shadow:none; letter-spacing:-.02em;
}
.offer-head{padding:15px 16px 11px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.offer-dest{min-width:0}
.offer-city{font-size:20px; font-weight:800; line-height:1.15; letter-spacing:-.02em; overflow-wrap:anywhere}
.offer-geo{font-size:11.5px; font-weight:700; color:var(--muted); margin-top:4px;
           display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.offer-price{text-align:right; flex:none}
.offer-price .amt{font-size:25px; font-weight:900; color:var(--pop); letter-spacing:-.03em;
                  font-variant-numeric:tabular-nums; display:block; line-height:1}
.offer-price .per{font-size:10.5px; color:var(--muted); font-weight:700; display:block; margin-top:4px}
.offer-when{padding:0 16px 12px; font-size:12.5px; font-weight:700; color:var(--ink-2);
            display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.offer-when .arr{color:var(--muted)}
.offer-when .ora{color:var(--muted); font-size:11px; margin-left:3px}
.offer-badges{padding:0 16px 13px; display:flex; gap:6px; flex-wrap:wrap}
.badge{border-radius:var(--r-pill); padding:4px 10px; font-size:11px; font-weight:800}
.b-deal{background:var(--ok-soft); color:var(--ok)}
.b-drop{background:var(--pop-soft); color:var(--pop-ink)}
.b-new{background:var(--gold-soft); color:var(--gold)}
.b-neutral{background:var(--surface-2); color:var(--muted)}
.offer-foot{margin-top:auto; padding:11px 16px 13px; border-top:1.5px solid var(--rule);
            display:flex; align-items:center; justify-content:space-between; gap:10px}
.offer-watch{font-size:11px; color:var(--muted); font-weight:700; overflow:hidden;
             text-overflow:ellipsis; white-space:nowrap}
.book{
  border:none; border-radius:var(--r-pill); padding:8px 15px; font-size:12.5px; font-weight:800;
  background:var(--accent-btn); color:var(--accent-btn-ink); cursor:pointer; white-space:nowrap;
}
.book:hover{filter:brightness(1.07)}
/* L'offerta migliore: nastro in alto, come un bollino cucito sulla card. */
.offer.top{border-color:var(--pop)}
.offer.top::before{
  content:var(--testo-piu-economico, "Il piu' economico"); position:absolute; top:12px; right:12px; z-index:3;
  background:var(--pop); color:var(--su-pop); font-size:10.5px; font-weight:800; letter-spacing:.04em;
  padding:4px 10px; border-radius:var(--r-pill); box-shadow:var(--shadow-s);
}

.empty{
  grid-column:1/-1; text-align:center; padding:34px 20px; border-radius:var(--r);
  border:2px dashed var(--rule-2); color:var(--muted); background:var(--surface-2);
}
.empty strong{display:block; font-size:18px; font-weight:800; color:var(--ink); margin-bottom:6px}
.empty p{margin:0; font-size:14px}

/* ------------------------------------------------------------- pannelli */
.sheet{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center}
.sheet-backdrop{position:absolute; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(4px)}
.sheet-panel{
  position:relative; width:100%; max-width:640px; max-height:92vh; overflow:auto;
  background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-l); animation:rise .22s ease;
}
@keyframes rise{from{transform:translateY(18px); opacity:0} to{transform:none; opacity:1}}
@media (min-width:720px){
  .sheet{align-items:center}
  .sheet-panel{border-radius:var(--r-xl); max-height:88vh}
}
.sheet-head{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:18px 22px 14px; background:var(--surface); border-bottom:1.5px solid var(--rule);
}
.sheet-head h2{font-size:20px}
.form{padding:18px 22px 24px; display:flex; flex-direction:column; gap:16px}
.sheet-actions{display:flex; justify-content:flex-end; gap:9px; padding-top:4px}
.icon-btn{
  border:1.5px solid var(--rule-2); background:var(--surface); color:var(--muted);
  border-radius:var(--r-pill); width:34px; height:34px; display:grid; place-items:center;
  cursor:pointer; font-size:14px; line-height:1;
}
.icon-btn:hover{background:var(--surface-2); color:var(--ink)}
.icon-btn.danger:hover{background:var(--bad-soft); color:var(--bad); border-color:var(--bad)}
.label em{font-style:normal; color:var(--pop); text-transform:none; letter-spacing:0; margin-left:5px}
.label .opt{font-weight:700; color:var(--muted); text-transform:none; letter-spacing:0; margin-left:5px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.form-error{
  margin:0; padding:11px 14px; border-radius:var(--r-s); font-size:13.5px; font-weight:700;
  background:var(--danger-bg); color:var(--danger-ink);
}

.range{appearance:none; width:100%; height:7px; border-radius:var(--r-pill);
       background:var(--surface-3); outline:none}
.range::-webkit-slider-thumb{
  appearance:none; width:22px; height:22px; border-radius:50%; background:var(--accent);
  border:3px solid var(--surface); box-shadow:var(--shadow-s); cursor:pointer;
}
.range::-moz-range-thumb{
  width:22px; height:22px; border:3px solid var(--surface); border-radius:50%;
  background:var(--accent); cursor:pointer;
}
.segmented{display:flex; background:var(--surface-2); border-radius:var(--r-pill); padding:4px; gap:4px}
.segmented button{
  flex:1; border:none; background:transparent; border-radius:var(--r-pill); padding:8px 12px;
  font-size:13px; font-weight:800; color:var(--muted); cursor:pointer;
}
.segmented button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-s)}

.toggles{display:flex; gap:9px; flex-wrap:wrap}
.air-toggle{
  display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--rule-2);
  border-radius:var(--r-pill); padding:7px 14px 7px 8px; font-size:13px; font-weight:800;
  color:var(--muted); cursor:pointer; position:relative; background:var(--surface);
}
.air-toggle input{position:absolute; opacity:0; width:0; height:0}
.air-toggle .swatch{width:10px; height:10px; border-radius:50%; background:var(--muted); flex:none}
.air-toggle.on{border-color:currentColor}
.air-toggle.on .swatch{background:currentColor}
.air-logo{width:22px; height:22px; border-radius:7px; flex:none; display:block; object-fit:cover;
          transition:filter .15s ease, opacity .15s ease}
.chip .air-logo{width:16px; height:16px; border-radius:5px}
.air-toggle:not(.on) .air-logo{filter:grayscale(1); opacity:.5}

.switch{display:flex; align-items:center; gap:10px; cursor:pointer; position:relative}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch .track{
  width:42px; height:24px; border-radius:var(--r-pill); background:var(--surface-3);
  border:1.5px solid var(--rule-2); position:relative; transition:background .16s ease;
}
.switch .track::after{
  content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%;
  background:var(--surface); box-shadow:var(--shadow-s); transition:transform .16s ease;
}
.switch input:checked + .track{background:var(--accent); border-color:var(--accent)}
.switch input:checked + .track::after{transform:translateX(18px)}
.switch input:focus-visible + .track{box-shadow:var(--ring)}
.switch-text{font-size:12.5px; font-weight:700; color:var(--muted)}
.switch-text b{color:var(--ink-2)}
.switch-field{justify-content:flex-start}
.switch-inline{margin-top:8px}

/* ------------------------------------------------------ impostazioni notifiche */
.riga-impostazione{text-decoration:none; margin-bottom:0;
  display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; cursor:pointer;
  font:inherit; text-align:left; color:var(--ink); background:var(--surface-2); border:1.5px solid var(--rule);
  border-radius:var(--r)}
.riga-impostazione:hover{border-color:var(--rule-2)}
.riga-impostazione:focus-visible{outline:none; box-shadow:var(--ring)}
.riga-impostazione svg{width:22px; height:22px; flex:none; color:var(--c-iris)}
.riga-impostazione > span:not(.freccia){display:flex; flex-direction:column; gap:1px; flex:1; min-width:0}
.riga-impostazione b{font-size:14.5px; font-weight:800}
.riga-impostazione small{font-size:12.5px; font-weight:600; color:var(--muted)}
.riga-impostazione .freccia{font-size:22px; font-weight:700; color:var(--muted); line-height:1}

.impostazioni{display:flex; flex-direction:column; gap:2px}
.impostazioni + .impostazioni{padding-top:14px; border-top:1.5px solid var(--rule)}
.impostazioni h3{margin:0 0 6px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.voce{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; cursor:pointer}
.voce > span:first-child{display:flex; flex-direction:column; gap:1px; min-width:0}
.voce b{font-size:14.5px; font-weight:800; color:var(--ink)}
.voce small{font-size:12.5px; font-weight:600; color:var(--muted)}
.voce .switch{flex:none}
.voce-doppia{display:block; cursor:default}
.voce-interna{padding:0}
.voce-sotto{display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:2px 0 8px; font-size:13px; font-weight:700; color:var(--ink-2)}
.voce-sotto.spenta{opacity:.45; pointer-events:none}
.select-mini{width:auto; padding:6px 30px 6px 12px; font-size:13px; border-radius:var(--r-pill)}
.seg{display:flex; gap:4px; padding:4px; margin:2px 0 8px; background:var(--surface-2); border-radius:var(--r-pill)}
.seg button{flex:1; border:none; background:transparent; border-radius:var(--r-pill); padding:8px 12px; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:800; color:var(--muted)}
.seg button[aria-checked="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-s)}
.seg button:focus-visible{outline:none; box-shadow:var(--ring)}
.notifiche-azioni{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 2px}
.notifiche-azioni:not(:has(button:not([hidden]))){display:none}

.combo{position:relative}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px}
.chips:empty{display:none}
.chip-sel{
  display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft);
  color:var(--accent-deep); border-radius:var(--r-pill); padding:5px 8px 5px 11px;
  font-size:12px; font-weight:800;
}
.chip-sel button{border:none; background:none; cursor:pointer; color:inherit; font-size:14px;
                 line-height:1; padding:0 2px; opacity:.7}
.chip-sel button:hover{opacity:1}
.chip-sel.chip-country{background:var(--accent); color:var(--accent-ink)}
.combo-list{
  position:absolute; z-index:5; left:0; right:0; top:calc(100% + 6px); max-height:280px; overflow:auto;
  background:var(--surface); border:1.5px solid var(--rule-2); border-radius:var(--r-s);
  box-shadow:var(--shadow-m);
}
.combo-list{padding:4px}
/* Le voci sono bottoni: senza azzerare lo stile del browser prendevano il suo
   fondo grigio, e col tema scuro il testo chiaro ci spariva sopra. */
.combo-item{display:flex; align-items:center; gap:9px; width:100%; padding:9px 12px; cursor:pointer;
            font:inherit; font-size:13.5px; font-weight:600; text-align:left; color:var(--ink);
            background:transparent; border:none; border-radius:var(--r-xs)}
.combo-item:hover,.combo-item.hi{background:var(--accent-soft)}
.combo-item .code{font-weight:900; font-size:12px; color:var(--accent-deep); flex:none; width:34px}
.combo-item .sub{color:var(--muted); font-size:11.5px; margin-left:auto; flex:none; font-weight:700}
.combo-item.country .code{width:34px; font-size:16px; text-align:center}
.combo-empty{padding:12px; color:var(--muted); font-size:13px; text-align:center; font-weight:700}
.combo-sep{padding:7px 12px 4px; font-size:10.5px; font-weight:900; letter-spacing:.08em;
           text-transform:uppercase; color:var(--muted)}

/* ---------------------------------------------------------------- volo */
.flight-panel{width:min(1040px,100%); position:relative}
.flight-hero{display:grid; grid-template-columns:1fr}
/* Foto sopra, mappa sotto a tutta larghezza: una mappa stretta accanto alla
   foto non lascia leggere rotta e tappe. */
@media (min-width:860px){.flight-hero .flight-cover{aspect-ratio:16/7}}
.flight-cover{position:relative; width:100%; aspect-ratio:3/2; max-height:56vh; overflow:hidden;
              display:flex; align-items:flex-end; background:var(--surface-3)}
.flight-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.flight-cover::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(15,23,42,.8), rgba(15,23,42,.05) 60%);
}
.flight-cover-text{position:relative; z-index:2; padding:18px 22px; min-width:0; max-width:100%}
.flight-eyebrow{display:block; font-size:11.5px; font-weight:800; letter-spacing:.1em;
                text-transform:uppercase; color:rgba(255,255,255,.9)}
.flight-cover h2{font-size:32px; font-weight:900; color:#fff; line-height:1.05; margin-top:4px}
.flight-close{position:absolute; top:12px; right:12px; z-index:1100; border:none;
              background:rgba(15,23,42,.6); color:#fff}
.flight-close:hover{background:rgba(15,23,42,.8); color:#fff}
.flight-credit{display:block; margin-top:6px; font-size:10.5px; color:rgba(255,255,255,.82); font-weight:700}
.flight-credit:hover{text-decoration:underline}
/* Mappa della rotta: piatta, chiara, coi colori della palette. */
.flight-map{position:relative; background:var(--map-sea); z-index:0}
.flight-map{height:300px}
@media (max-width:859px){.flight-map{height:260px}}
.leaflet-container{font-family:var(--sans); background:var(--map-sea)}
.leaflet-mondo-pane canvas{filter:drop-shadow(0 2px 0 var(--map-shadow))}
.leaflet-control-attribution{font-size:9.5px; background:color-mix(in srgb, var(--surface) 78%, transparent) !important;
  color:var(--muted); border-radius:var(--r-s) 0 0 0; padding:1px 7px !important}
.leaflet-control-attribution a{color:var(--muted)}
.leaflet-bar a{background:var(--surface); color:var(--ink); border-color:var(--rule) !important}
.leaflet-bar a:hover{background:var(--surface-2); color:var(--ink)}
.leaflet-bar{border:1.5px solid var(--rule) !important; border-radius:var(--r-s) !important; overflow:hidden; box-shadow:var(--shadow-s) !important}
.leaflet-div-icon.pin-wrap{background:none; border:none}
.map-pin{display:flex; align-items:center; gap:6px; white-space:nowrap}
.map-pin.a-sinistra{flex-direction:row-reverse}
.map-pin .p{width:18px; height:18px; border-radius:50%; flex:none; border:3px solid var(--surface); box-shadow:var(--shadow-m)}
.map-pin.partenza .p{background:var(--c-ink)}
.map-pin.arrivo .p{background:var(--c-iris)}
.map-pin.tappa .p{width:26px; height:26px; background:transparent; border:none; box-shadow:none}
.map-pin .l{display:flex; align-items:baseline; gap:5px; font-size:12px; font-weight:900; letter-spacing:.04em;
  padding:3px 9px; border-radius:var(--r-pill); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-m)}
.map-pin .l small{font-size:11px; font-weight:700; letter-spacing:0; opacity:.78}
.map-pin.arrivo .l{background:var(--c-iris); color:var(--c-ink)}
.map-pin.tappa .l{font-size:12px; letter-spacing:0; background:var(--map-bus-soft); color:var(--c-ink)}
.map-pin.tappa .l small{opacity:.75}
.map-aereo{width:26px; height:26px; display:grid; place-items:center; border-radius:50%;
  background:var(--surface); color:var(--c-iris); box-shadow:var(--shadow-m)}
.map-aereo svg{width:15px; height:15px; transition:transform .2s ease}

/* Colori della mappa: mare lilla e terre crema di giorno, notte blu di sera. */
:root{
  --map-sea:color-mix(in srgb, var(--c-lilac) 78%, #FFFFFF);
  --map-land:#FFFCF7;
  --map-coast:color-mix(in srgb, var(--c-iris) 34%, var(--c-lilac));
  --map-border:color-mix(in srgb, var(--c-iris) 26%, var(--c-lilac));
  --map-grid:color-mix(in srgb, var(--c-iris) 12%, transparent);
  --map-shadow:color-mix(in srgb, var(--c-iris) 16%, transparent);
  --map-bus:#2E9C79;
  --map-bus-soft:var(--c-mint);
  --map-casing:#FFFFFF;
  --map-bus-ink:#FFFFFF;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --map-sea:color-mix(in srgb, var(--c-ink) 82%, #000000);
    --map-land:color-mix(in srgb, var(--c-iris) 13%, var(--c-ink));
    --map-coast:color-mix(in srgb, var(--c-iris) 42%, var(--c-ink));
    --map-border:color-mix(in srgb, var(--c-iris) 26%, var(--c-ink));
    --map-grid:color-mix(in srgb, var(--c-iris) 9%, transparent);
    --map-shadow:rgba(0,0,0,.35);
    --map-bus:var(--c-mint);
    --map-casing:color-mix(in srgb, var(--c-ink) 70%, #000000);
    --map-bus-ink:var(--c-ink);
  }
}
:root[data-theme="dark"]{
  --map-bus-ink:var(--c-ink);
  --map-casing:color-mix(in srgb, var(--c-ink) 70%, #000000);
  --map-sea:color-mix(in srgb, var(--c-ink) 82%, #000000);
  --map-land:color-mix(in srgb, var(--c-iris) 13%, var(--c-ink));
  --map-coast:color-mix(in srgb, var(--c-iris) 42%, var(--c-ink));
  --map-border:color-mix(in srgb, var(--c-iris) 26%, var(--c-ink));
  --map-grid:color-mix(in srgb, var(--c-iris) 9%, transparent);
  --map-shadow:rgba(0,0,0,.35);
  --map-bus:var(--c-mint);
}

/* Barre di scorrimento dei pannelli: sottili, nei colori del tema, e staccate
   dagli angoli arrotondati invece di tagliarli. */
.sheet-panel::-webkit-scrollbar,.combo-list::-webkit-scrollbar,.modale-piano::-webkit-scrollbar{width:12px}
.sheet-panel::-webkit-scrollbar-track,.combo-list::-webkit-scrollbar-track,.modale-piano::-webkit-scrollbar-track{background:transparent; margin-block:26px}
.sheet-panel::-webkit-scrollbar-thumb,.combo-list::-webkit-scrollbar-thumb,.modale-piano::-webkit-scrollbar-thumb{
  background:var(--rule-2); border-radius:999px; border:4px solid transparent; background-clip:padding-box}
.sheet-panel::-webkit-scrollbar-thumb:hover,.combo-list::-webkit-scrollbar-thumb:hover,.modale-piano::-webkit-scrollbar-thumb:hover{
  background-color:color-mix(in srgb, var(--c-iris) 60%, var(--rule-2))}
.sheet-panel::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){
  .sheet-panel,.combo-list,.modale-piano{scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent}
}
.flight-body{padding:20px 22px 26px; display:flex; flex-direction:column; gap:18px}

/* ---------------------------------------------------------------- varie */
.health-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.health-item{border-radius:var(--r-s); padding:12px 14px; background:var(--surface-2); border-left:4px solid var(--rule-2)}
.health-item.error{background:var(--danger-bg); color:var(--danger-ink); border-left-color:var(--danger-bg)}
.health-item.error .a,.health-item.error .d{color:inherit; opacity:.85}
.health-item.warning{background:var(--gold-soft); border-left-color:var(--gold)}
.health-item .a{font-size:10.5px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.health-item .t{font-size:15px; font-weight:800; margin-top:2px}
.health-item .d{font-size:13px; font-weight:600; color:var(--ink-2); margin-top:3px}
.health-ok{padding:16px; border-radius:var(--r-s); background:var(--ok-soft); color:var(--ok)}
.health-ok strong{font-size:16px; font-weight:800}
.health-ok p{margin:4px 0 0; font-size:13.5px; color:var(--ink-2)}
.health-notes{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.health-notes li{font-size:12.5px; font-weight:600; color:var(--muted); padding-left:14px; position:relative}
.health-notes li::before{content:"•"; position:absolute; left:0; color:var(--accent)}
.health-meta{margin:14px 0 0; font-size:12px; font-weight:600; color:var(--muted)}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:200;
  background:var(--toast-bg); color:var(--toast-ink); padding:12px 20px; border-radius:var(--r-pill);
  font-size:13.5px; font-weight:700; box-shadow:var(--shadow-l); max-width:calc(100vw - 32px);
}
.foot{max-width:none; margin:0; padding:24px clamp(16px,4vw,36px) 40px; text-align:center;
      color:var(--muted); font-size:12.5px; font-weight:600; border-top:1.5px solid var(--rule)}
.foot p{margin:0 0 7px}

/* ------------------------------------------------- dettaglio volo: corpo */
/* Le tratte: partenza a sinistra, arrivo a destra, in mezzo la durata. Si
   legge come un biglietto, non come una tabella. */
.legs{display:grid; gap:10px}
.leg{
  display:grid; grid-template-columns:1fr auto 1fr; gap:4px 14px; align-items:center;
  padding:14px 16px; border:1.5px solid var(--rule); border-radius:var(--r-s);
  background:var(--surface-2);
}
.leg-tag{grid-column:1 / -1; font-size:10.5px; font-weight:900; letter-spacing:.08em;
         text-transform:uppercase; color:var(--muted)}
.leg-end .t{font-size:21px; font-weight:900; letter-spacing:-.02em; line-height:1.1;
            font-variant-numeric:tabular-nums}
.leg-end .c{font-size:11.5px; font-weight:700; color:var(--muted)}
.leg-end:last-child{text-align:right}
.leg-mid{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px;
         font-weight:700; color:var(--muted); min-width:90px}
.leg-mid .line{width:100%; height:2px; border-radius:2px; background:var(--rule-2); position:relative}
.leg-mid .line::after{
  content:"✈"; position:absolute; right:-2px; top:-9px; font-size:11px; color:var(--accent);
}

/* Riquadri dei dati: distanza, notti, compagnia. */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:9px}
.fact{padding:11px 13px; border-radius:var(--r-s); background:var(--surface-2)}
.fact .k{font-size:10.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.fact .v{font-size:16px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums}
.flight-actions{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
/* Su telefono: compagnia e monitoraggio sopra, poi i due tasti a tutta larghezza, uno sotto l'altro. */
@media (max-width:640px){
  .flight-actions{flex-direction:column; align-items:stretch}
  .flight-actions .offer-badges{justify-content:flex-start}
  .flight-actions .btn-condividi{margin-left:0; width:100%; justify-content:center}
  .flight-actions .book{display:flex; justify-content:center; align-items:center; min-height:44px; padding:11px 20px; font-size:14px; text-decoration:none}
}

/* Andamento del prezzo sulla rotta: una linea, l'ultimo punto in evidenza. */
.spark-wrap{display:flex; flex-direction:column; gap:6px}
.spark{width:100%; height:64px; display:block}
.spark .area{fill:var(--accent-soft)}
.spark .ln{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.spark .now{fill:var(--pop)}
.spark-note{font-size:12px; font-weight:700; color:var(--muted)}

/* Senza coordinate non c'e' globo: la foto si prende tutto lo spazio. */
.flight-hero.no-map{grid-template-columns:1fr}

/* --------------------------------------------------------------- account */
.account-testa{display:flex; align-items:center; gap:13px}
.avatar-grande{width:48px; height:48px; font-size:17px; cursor:default}
.account-testa strong{display:block; font-size:16px; font-weight:800}
.plan-scelta{cursor:pointer; text-align:left; font:inherit}
.plan-scelta:hover{transform:translateY(-2px)}
.plan .btn{width:100%}


/* --------------------------------------------------- intestazione su telefono */
/* Su 390 px l'intestazione occupava tre righe prima di qualunque contenuto.
   Restano le cose su cui si agisce: marchio, salute, "nuovo" e account. Piano
   e stato dei giri si leggono nel pannello account e nel riepilogo. */
@media (max-width:640px){
  .topbar{padding:10px clamp(14px,4vw,20px); gap:8px; flex-wrap:nowrap}
  .brand{flex:1 1 auto; min-width:0}
  .brand .logo-ufficiale{width:min(150px,44vw); height:40px}
  .topbar-right{width:auto; flex:none; flex-wrap:nowrap; gap:7px}
  #live-pill{display:none}
  .pill{padding:6px 10px; font-size:12px}
  /* Il bottone diventa un "+" grande: la parola la dice il pannello che apre. */
  /* tondo, col + esattamente al centro: niente gap, niente testo nascosto che occupi spazio */
  #btn-new{font-size:0; gap:0; padding:0; width:40px; height:40px; min-height:40px; border-radius:50%; flex:none}
  #btn-new::after{content:"+"; font-size:24px; font-weight:800; line-height:1; margin-top:-2px}
  .avatar{width:32px; height:32px; font-size:12px}
}

/* Compagnia che non vola da quegli aeroporti: resta selezionabile (magari
   domani ci volera'), ma si vede che non portera' risultati. */
.air-toggle.senza-rotte{opacity:.45}
.air-toggle.senza-rotte .air-logo{filter:grayscale(1)}
.avviso-rotte{color:var(--gold); font-weight:700}
/* Nota sulla card: ha cercato davvero, e in quel periodo non ci sono voli. */
.watch-nota{
  margin:0; font-size:12px; font-weight:700; line-height:1.45;
  color:var(--gold); background:var(--gold-soft); padding:8px 12px; border-radius:var(--r-s);
}


/* Nome del piano dentro il logo: sotto "flydown", allineato alla fine di
   "down", nel colore del piano. Niente fondo ne' bordo: e' parte del marchio. */
.brand .logo-ufficiale{position:relative}
.piano-logo{
  position:absolute; right:1px; top:69%; line-height:1; pointer-events:none;
  font-size:9.5px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
}
.piano-logo.piano-basic{color:color-mix(in srgb, var(--c-peach) 45%, var(--c-ink))}
.piano-logo.piano-pro{color:var(--c-iris)}
.piano-logo.piano-unlimited{color:color-mix(in srgb, var(--c-mint) 48%, var(--c-ink))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .piano-logo.piano-basic{color:var(--c-peach)}
  :root:not([data-theme="light"]) .piano-logo.piano-pro{color:color-mix(in srgb, var(--c-iris) 55%, var(--c-lilac))}
  :root:not([data-theme="light"]) .piano-logo.piano-unlimited{color:var(--c-mint)}
}
:root[data-theme="dark"] .piano-logo.piano-basic{color:var(--c-peach)}
:root[data-theme="dark"] .piano-logo.piano-pro{color:color-mix(in srgb, var(--c-iris) 55%, var(--c-lilac))}
:root[data-theme="dark"] .piano-logo.piano-unlimited{color:var(--c-mint)}
@media (max-width:640px){.piano-logo{font-size:8px; letter-spacing:.1em}}

/* Firma nel footer */
.firma{display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap; margin-top:10px !important;
       font-size:12.5px; font-weight:700; color:var(--muted)}
.firma b{color:var(--ink-2)}
.cuore{width:14px; height:14px; color:var(--c-iris); display:inline-block; vertical-align:-2px}

/* ------------------------------------------------------------ mete in bus */
.bus-field .voce{padding-top:0}
.bus-opzioni{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; margin-top:4px}
.bus-opzioni .hint,.bus-opzioni .bus-intera{grid-column:1 / -1}
.bus-ico{width:14px; height:14px; flex:none; vertical-align:-2px}
.badge.b-bus{display:inline-flex; align-items:center; gap:4px;
  background:color-mix(in srgb, var(--c-mint) 45%, var(--surface)); color:var(--ink)}
.bus-wrap{margin-top:14px}
.bus-wrap > .k{display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.bus-lista{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.bus-riga{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; padding:10px 14px;
  border:1.5px solid var(--rule); border-radius:var(--r); background:var(--surface-2); color:var(--ink); text-decoration:none}
.bus-riga:hover{border-color:var(--rule-2)}
.bus-riga:focus-visible{outline:none; box-shadow:var(--ring)}
.bus-meta{display:flex; flex-direction:column; gap:1px; min-width:0}
.bus-meta b{font-size:14.5px; font-weight:800}
.bus-meta small{font-size:12.5px; font-weight:600; color:var(--muted)}
.bus-prezzo{font-size:16px; font-weight:900; letter-spacing:-.02em}
.bus-vai{font-weight:800; color:var(--muted)}
.bus-nota{margin:8px 0 0; font-size:12px; font-weight:600; color:var(--muted)}
@media (max-width:560px){ .bus-opzioni{grid-template-columns:1fr} }
.giri{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.giro{border:1.5px solid var(--rule); border-radius:var(--r); background:var(--surface-2); overflow:hidden}
.giro[open]{border-color:var(--rule-2)}
.giro summary{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; cursor:pointer; list-style:none}
.giro summary::-webkit-details-marker{display:none}
.giro summary:focus-visible{outline:none; box-shadow:var(--ring)}
.giro-tappe{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 6px; font-size:14px; color:var(--ink); min-width:0}
.giro-tappe b{font-weight:800}
.giro-tappe small{font-size:11.5px; font-weight:700; color:var(--muted)}
.giro-casa{font-weight:700; color:var(--muted)}
.giro-freccia{color:var(--muted); font-weight:700}
.giro-totale{font-size:17px; font-weight:900; letter-spacing:-.02em; white-space:nowrap}
.giro-tratte{display:flex; flex-direction:column; border-top:1.5px solid var(--rule)}
.giro-tratta{display:grid; grid-template-columns:92px 1fr auto; gap:10px; align-items:center; padding:9px 14px;
  color:var(--ink); text-decoration:none; border-top:1px solid var(--rule)}
.giro-tratta:first-child{border-top:none}
.giro-tratta:hover{background:var(--surface)}
.giro-quando{font-size:12.5px; font-weight:800; color:var(--ink-2)}
.giro-dove{display:flex; flex-direction:column; font-size:13.5px; font-weight:700; min-width:0}
.giro-dove small{font-size:12px; font-weight:600; color:var(--muted)}
.giro-prezzo{font-size:14px; font-weight:800; white-space:nowrap}

/* ------------------------------------------------------------ condividi */
.btn-condividi{display:inline-flex; align-items:center; gap:8px; margin-left:auto}
.btn-condividi svg{width:17px; height:17px}
.modale-condividi .mp-corpo{padding:22px; gap:14px}
.modale-condividi h2{margin:0; font-size:22px}
.modale-condividi .seg{margin:0}
.condividi-anteprima{display:grid; place-items:center; background:var(--surface-2); border-radius:var(--r); padding:12px; min-height:200px}
.condividi-anteprima img{display:block; width:100%; max-height:58vh; object-fit:contain; border-radius:12px;
  box-shadow:var(--shadow-m); transition:opacity .2s ease}

/* Tappe, durate, frecce e legenda della mappa delle citta' in piu' */
.map-tappa{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; box-sizing:border-box;
  background:var(--map-bus); color:var(--map-bus-ink); font-size:13px; font-weight:900; border:3px solid var(--map-casing); box-shadow:var(--shadow-m)}
.map-durata{display:inline-flex; align-items:center; gap:4px; width:max-content; margin:0 auto; padding:2px 8px; border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink); font-size:11px; font-weight:800; box-shadow:var(--shadow-s); border:1.5px solid var(--map-bus)}
.map-durata .bus-ico{width:12px; height:12px}
.map-freccia{width:20px; height:20px; display:grid; place-items:center; color:var(--map-bus)}
.map-freccia svg{width:18px; height:18px; filter:drop-shadow(0 0 1.5px var(--map-casing)) drop-shadow(0 0 1.5px var(--map-casing))}
.map-legenda{display:flex; flex-direction:column; gap:4px; padding:7px 10px; border-radius:var(--r-s);
  background:color-mix(in srgb, var(--surface) 90%, transparent); box-shadow:var(--shadow-s); font-size:11.5px; font-weight:800; color:var(--ink)}
.map-legenda span{display:flex; align-items:center; gap:7px}
.map-legenda i{display:inline-block; width:22px; height:5px; border-radius:3px}
.map-legenda .l-volo{background:var(--c-iris)}
.map-legenda .l-bus{background:var(--map-bus)}
.giro-num{display:inline-grid; place-items:center; width:19px; height:19px; border-radius:50%; margin-right:3px;
  background:var(--map-bus); color:var(--map-bus-ink); font-size:11px; font-weight:900; vertical-align:1px}

/* Invita un amico, nel profilo */
.invita-amico p.hint{margin:0 0 8px; line-height:1.45}
.invita-riga{display:flex; gap:8px; margin-bottom:8px}
.invita-riga .input{flex:1; min-width:0; font-size:13.5px}

/* Più città: altri modi di dividere le notti */
.giro-alt{margin:8px 0 2px; border-top:1px dashed var(--rule)}
.giro-alt > summary{cursor:pointer; padding:9px 2px 4px; font-size:12.5px; font-weight:800; color:var(--accent-deep)}
.giro-alt-voce{margin:6px 0; padding:6px 10px; border-radius:var(--r-s); background:var(--surface-2)}
.giro-alt-voce > summary{cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px}
.giro-alt-diff{flex:none; font-size:12.5px; font-weight:900; color:var(--ink-2)}

.modale-avvisi .mp-corpo{padding:26px 24px 22px; display:flex; flex-direction:column; gap:12px}
.modale-avvisi h2{margin:0; padding-right:34px}
.modale-avvisi p{margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.banner-verifica{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--pop-soft); color:var(--ink); cursor:default}
.banner-verifica .btn{min-height:38px}