:root {
  color-scheme: light;
  --bg: #f3f4f6;
  --surface: #ffffff;
  --line: #e6e8ec;
  --soft: #f6f7f9;
  --accent: #e8412c;
  --accent-soft: #fdece9;
  --blue: #1f6feb;
  --ok: #188038;
  --danger: #c5221f;
  --r: 16px;
  --sh-1: 0 1px 2px rgba(21,23,28,.06), 0 1px 1px rgba(21,23,28,.04);
  --sh-2: 0 10px 30px -12px rgba(21,23,28,.25), 0 2px 6px rgba(21,23,28,.06);
  --t0: #6b7280; --t1: #d93025; --t2: #ea6a0c; --t3: #c28a00; --t4: #7a4b2e; --t5: #1f6feb; --t6: #8b3fd9; --t7: #d0247a; --t8: #1e8a4c; --t9: #8e1b3a; --t10: #0e9f9a; --t11: #7c9a16;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* niente testo "gonfiato" da Android o dall'iPhone in orizzontale */
body { color: var(--ink); font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline-offset: 2px; }
h1, h2, h3, .logo, .lcount { font-family: var(--font-d); }

/* ---------- bottoni ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; font-size: .92rem; border: 1px solid transparent; background: none; white-space: nowrap; text-decoration: none; line-height: 1.2; }
.btn.ghost { border-color: var(--line); color: var(--ink); }
.btn.light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.25); }
.btn.sm { padding: 6px 12px; font-size: .84rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link { border: 0; background: none; color: var(--blue); font-weight: 600; padding: 4px; font-size: .88rem; }
.x { width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; line-height: 1; color: var(--ink-2); flex: none; }
.x:hover { background: var(--line); }
.grow { flex: 1; }
.mob { display: none; }

/* ---------- header ---------- */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--hdr); display: flex; align-items: center; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.logo { display: flex; align-items: center; font-weight: 800; color: var(--ink); text-decoration: none; white-space: nowrap; }
.omni { flex: 1; margin: 0 auto; display: flex; align-items: center; border-radius: 999px; transition: box-shadow .2s, background .2s; }
.omni:focus-within { border-color: #bcd2f7; }
.mode { border: 0; background: none; border-radius: 999px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.mode.on { color: #fff; }
.searchbox gmp-place-autocomplete, .searchbox gmp-placeautocomplete { width: 100%; color-scheme: light; }
.go { flex: none; border-radius: 50%; border: 0; color: #fff; font-size: 1rem; }
.hdr-r { display: flex; align-items: center; gap: 8px; flex: none; }
.who img { width: 32px; height: 32px; border-radius: 50%; display: block; border: 2px solid var(--surface); box-shadow: var(--sh-1); }

/* ---------- layout ---------- */
.app { display: grid; height: calc(100vh - var(--hdr) - env(safe-area-inset-top, 0px)); height: calc(100dvh - var(--hdr) - env(safe-area-inset-top, 0px)); }
.side, .listcol { overflow-y: auto; }
.side { padding: 18px 18px 28px; }
.listcol { display: flex; flex-direction: column; overflow: hidden; }
.mapcol { display: flex; flex-direction: column; min-width: 0; }

/* ---------- filtri ---------- */
.side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.side-head h2 { margin: 0; font-size: 1.25rem; flex: 1; }
.fsec { padding: 14px 0; border-top: 1px solid var(--line); }
.fsec:first-of-type { border-top: 0; padding-top: 4px; }
.flabel { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.seg { display: flex; background: var(--soft); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 8px 6px; font-weight: 600; font-size: .86rem; color: var(--ink-2); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.seg.cats { display: grid; gap: 8px; background: none; padding: 0; }
.seg.cats .catbtn { color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; text-align: left; }
.seg.cats .catbtn:hover { border-color: #c9ced6; }
.seg.cats .catbtn .cb-ic { font-size: 1.35rem; line-height: 1; margin-bottom: 6px; }
.seg.cats .catbtn .cb-t { font-weight: 700; line-height: 1.2; }
.seg.cats .catbtn .cb-n { font-size: .78rem; color: var(--ink-3); }
.seg.cats .catbtn.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.seg.cats .catbtn.on .cb-n { color: rgba(255,255,255,.7); }
.tipolist { display: flex; flex-direction: column; gap: 2px; }
.tipo { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 7px 8px; text-align: left; width: 100%; font-size: .93rem; }
.tipo .ti { display: grid; place-items: center; font-size: 1rem; background: color-mix(in srgb, var(--c) 13%, #fff); flex: none; }
.tipo .tn { flex: 1; }
.tipo .tc { font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tipo .tk { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #cdd1d8; flex: none; display: grid; place-items: center; font-size: 12px; color: #fff; }
.tipo.on .tn { font-weight: 600; }
.tipo.on .tk { background: var(--c); border-color: var(--c); }
.tipo.on .tk::after { content: "✓"; }
.origin { margin-top: 8px; display: flex; align-items: center; gap: 6px; background: #eaf1fe; color: #174ea6; border-radius: 10px; padding: 6px 6px 6px 12px; font-size: .88rem; font-weight: 600; }
.origin span { flex: 1; }
.origin button { border: 0; background: none; width: 26px; height: 26px; border-radius: 50%; color: inherit; font-size: 1.1rem; }
.rangebox { display: block; margin-top: 12px; font-size: .88rem; color: var(--ink-2); }
.rangebox input { width: 100%; accent-color: var(--ink); margin-top: 6px; }
.more summary { cursor: pointer; list-style: none; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "▾"; font-size: .9rem; }
.more:not([open]) summary::after { content: "▸"; }
.more[open] summary { margin-bottom: 10px; }
.fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; min-width: 0; }
.fld > span { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.fld input, .fld select, .fld textarea { width: 100%; border: 1px solid var(--line); background: var(--soft); border-radius: 10px; padding: 10px 12px; font-size: 16px; }
.fld textarea { min-height: 72px; resize: vertical; }
.fld select, .mini-sel { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235d6370'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; }
.fld.private textarea { background: #fff8e6; border-color: #f6dea0; }
.tog { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--ink-2); cursor: pointer; }
.tog input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.hint { font-size: .82rem; color: var(--ink-2); line-height: 1.4; }
.hint:empty { display: none; }
#near-msg { margin-top: 8px; }

/* ---------- mappa ---------- */
.aichip { display: flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 6px 5px 12px; font-size: .86rem; font-weight: 600; }
.aichip button { border: 0; background: rgba(255,255,255,.7); width: 24px; height: 24px; border-radius: 50%; color: inherit; }
.map { position: relative; flex: 1; min-height: 320px; overflow: hidden; background: #e8eaed; }
#gmap { position: absolute; inset: 0; }
.gpin { position: relative; cursor: pointer; transition: transform .15s; transform-origin: 50% 100%; }
.gpin .ph { position: absolute; top: 1px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c); display: grid; place-items: center; }
.gpin .pi { transform: rotate(45deg); font-size: 13px; line-height: 1; }
.gpin:hover, .gpin.hot { transform: scale(1.18); }
.gpin.dim { opacity: .35; }
.clu { width: 42px; height: 42px; border-radius: 50%; color: #fff; display: grid; place-items: center; font: 700 13px var(--font); }
.medot { width: 18px; height: 18px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(31,111,235,.2), 0 1px 4px rgba(0,0,0,.35); }
.origdot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.tmpdot { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--accent); background: rgba(232,65,44,.2); }
.pickbar { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 5; display: flex; gap: 10px; align-items: center; border-radius: 999px; padding: 6px 6px 6px 16px; box-shadow: var(--sh-2); font-size: .9rem; font-weight: 600; max-width: calc(100% - 20px); }
.card { position: absolute; left: 14px; bottom: 14px; z-index: 5; width: min(380px, calc(100% - 28px)); padding: 16px; }
.card .x { position: absolute; top: 10px; right: 10px; }
.card-top { display: flex; gap: 12px; align-items: flex-start; padding-right: 34px; }
.card-ic { width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.4rem; background: color-mix(in srgb, var(--c) 14%, #fff); flex: none; }
.card h3 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.card .meta { font-size: .85rem; color: var(--ink-2); margin-top: 3px; }
.card p { margin: 12px 0 0; font-size: .92rem; }
.card p:empty { display: none; }
.priv, .privnote { background: #fff8e6; border-radius: 10px; padding: 8px 10px; font-size: .86rem; margin-top: 10px; color: #6b4e00; }
.card .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- elenco ---------- */
.lhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); flex: none; }
.lcount { font-size: 1.2rem; font-weight: 700; }
.lsub { font-size: .8rem; color: var(--ink-3); }
.lsub:empty { display: none; }
.mini-sel { border-radius: 999px; padding: 7px 30px 7px 12px; font-size: .84rem; font-weight: 600; }
.list { overflow-y: auto; padding: 6px 10px 24px; flex: 1; }
.item { display: flex; gap: 12px; padding: 12px 10px; cursor: pointer; position: relative; }
.i-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.3rem; background: color-mix(in srgb, var(--c) 13%, #fff); flex: none; }
.i-body { flex: 1; min-width: 0; }
.i-top { display: flex; gap: 8px; justify-content: space-between; }
.i-name { font-weight: 700; font-size: .98rem; line-height: 1.25; overflow-wrap: anywhere; }
.i-dist { flex: none; font-size: .8rem; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.i-meta { font-size: .82rem; color: var(--ink-2); margin-top: 2px; }
.i-meta b { font-weight: 600; color: var(--c); }
.i-note { font-size: .86rem; margin-top: 5px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item.sel .i-note { -webkit-line-clamp: unset; }
.i-acts { display: none; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.item.sel .i-acts { display: flex; }
.item .privnote { display: none; }
.item.sel .privnote { display: block; }
.empty { text-align: center; padding: 50px 20px; color: var(--ink-2); }
.empty b { display: block; font-size: 1.05rem; color: var(--ink); margin-bottom: 4px; }

/* ---------- AI ---------- */
.ai { border-bottom: 1px solid var(--line); display: flex; flex-direction: column; max-height: 62%; flex: none; }
.ai-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; }
.ai-head strong { flex: 1; font-family: var(--font-d); font-size: 1.05rem; }
.msgs { overflow-y: auto; padding: 6px 16px 10px; display: flex; flex-direction: column; gap: 10px; }
.msg.me { align-self: flex-end; color: #fff; border-radius: 16px 16px 4px 16px; padding: 8px 12px; max-width: 88%; font-size: .9rem; }
.msg.ai { font-size: .93rem; line-height: 1.5; }
.msg.ai p { margin: 0 0 8px; }
.msg.ai p:last-child { margin: 0; }
.msg.ai.thinking { color: var(--ink-2); font-style: italic; }
.msg .note { font-size: .8rem; color: var(--ink-2); margin-top: 6px; }
.pchip { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px; padding: 1px 9px 1px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 45%, #fff); background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--ink); font-size: .8rem; font-weight: 600; vertical-align: 1px; }
.ai-follow { display: flex; gap: 6px; padding: 8px 12px 12px; }
.ai-follow input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font-size: 16px; background: #fff; }
.ai-follow .go { width: 40px; height: 40px; }
.ai-follow .btn.light { color: var(--ink); border-color: var(--line); background: #fff; }

/* ---------- pannelli ---------- */
.sheet { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.panel { width: 100%; max-width: 560px; max-height: 100%; overflow: auto; padding: 22px 22px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--sh-2); }
.panel.wide { max-width: 720px; }
.p-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.p-head h2 { margin: 0; flex: 1; }
.p-foot { display: flex; gap: 8px; align-items: center; margin-top: 16px; padding-top: 14px; }
.step { display: flex; gap: 14px; margin-bottom: 18px; }
.step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.step-b { flex: 1; min-width: 0; }
.step-t { font-weight: 700; margin: 3px 0 10px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: .78rem; margin: 12px 0 8px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#f-link { width: 100%; border: 1px solid var(--line); background: var(--soft); border-radius: 10px; padding: 10px 12px; font-size: 15px; resize: vertical; }
.linkst { font-size: .84rem; color: var(--ink-2); margin-top: 8px; }
.linkst:empty { display: none; }
.linkst.ok { color: var(--ok); font-weight: 600; }
.qpanel { max-width: 560px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; }
.qpanel > .hint { margin: 0 0 10px; }
.qlist { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; margin: 0 -2px; }
.qitem { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.qitem.st-ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
.qitem.st-no { opacity: .55; }
.qitem.st-no .qname { text-decoration: line-through; }
.qinfo { flex: 1; min-width: 0; }
.qname { font-weight: 700; }
.qsub { font-size: .8rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qdescr { font-size: .82rem; color: var(--ink); margin-top: 3px; }
.qdup { display: inline-block; margin-top: 4px; font-size: .72rem; font-weight: 700; color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); padding: 2px 8px; border-radius: 999px; }
.qact { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: none; }
.qact .btn { white-space: nowrap; }
.qdone { color: var(--ok); font-weight: 700; font-size: .86rem; white-space: nowrap; }
.qno { color: var(--ink-3); font-size: .8rem; text-align: center; }
.qfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.fld .auto { background: #eaf1fe; border-color: #b8cff7; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.posrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .85rem; color: var(--ink-2); }
.err { color: var(--danger); font-size: .88rem; margin-top: 8px; }
.err:empty { display: none; }
.mtabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 0 -22px 16px; padding: 0 22px; scrollbar-width: none; }
.mtab { border: 0; background: none; padding: 10px 12px; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.mtab.on { color: var(--ink); border-bottom-color: var(--ink); }
.mbody { min-height: 280px; }
.mlist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mrow { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: var(--soft); }
.mrow.noic { grid-template-columns: 1fr auto auto auto; }
.mrow.city { grid-template-columns: 1fr auto; }
.mrow input, .mrow select { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 7px 9px; font-size: 15px; min-width: 0; }
.m-ic { width: 48px; text-align: center; }
.m-colwrap { display: flex; align-items: center; gap: 6px; }
.m-col { width: 118px; }
.m-sw { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.m-n { font-size: .78rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-bs { display: flex; gap: 4px; }
.m-b { border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 32px; height: 32px; }
.m-b:disabled { opacity: .3; }
.mrow.del { opacity: .7; }
.mrow.del .m-nm { text-decoration: line-through; }
.m-move { grid-column: 1 / -1; font-size: .82rem; color: var(--ink-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.checks { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(21,23,28,.35); }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: 11px 18px; font-size: .9rem; font-weight: 600; }
.foot { display: none; }

/* il footer compare solo in fondo alla colonna filtri */
.side::after { content: ""; display: block; height: 10px; }
.footside { margin-top: 18px; font-size: .8rem; color: var(--ink-3); }

@media (max-width: 1280px) {
  .mode { padding: 8px 10px; }
}
@media (max-width: 980px) {
  .hdr { flex-wrap: wrap; height: auto; padding: 10px 14px; }
  .hdr-r .lbl { display: none; }
  .omni { order: 3; flex-basis: 100%; }
  .hdr-r { margin-left: auto; }
  .app { display: block; }
  .map { flex: none; height: 52vh; min-height: 300px; }
  .listcol { border: 0; box-shadow: var(--sh-1); overflow: visible; }
  .list { overflow: visible; }
  .ai { max-height: none; border-radius: 18px 18px 0 0; }
  .msgs { max-height: 50vh; }
  .mob { display: inline-flex; }
  .side { position: fixed; z-index: 80; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); transform: translateX(-102%); transition: transform .25s ease; padding-top: calc(18px + env(safe-area-inset-top, 0px)); box-shadow: var(--sh-2); }
  .side.open { transform: none; }
  #fcount { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 7px; font-size: .75rem; }
  .card { left: 10px; right: 10px; bottom: 10px; width: auto; }
  .gtitle { top: 0; }
  .grid2 { grid-template-columns: 1fr; }
  .mrow { grid-template-columns: auto 1fr auto; }
  .mrow .m-colwrap, .mrow .m-n { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.link.pulse { background: var(--accent); color: #fff; border-radius: 999px; padding: 8px 14px; }

.logo-txt { display: flex; flex-direction: column; line-height: 1.05; }
.byline { font-family: var(--font); font-weight: 500; letter-spacing: .01em; color: var(--ink-3); }

/* barra filtri di posizione sopra la mappa */
.geobar { align-items: stretch; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; border: 1px solid var(--line); box-shadow: var(--sh-1); gap: 0; }
.gf { flex: 0 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 4px 12px; border-left: 1px solid var(--line); min-width: 0; }
.gf:first-child { border-left: 0; }
.gf > span { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.gf select { border: 0; background: none; font-weight: 600; font-size: .92rem; padding: 2px 22px 2px 0; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235d6370'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; cursor: pointer; outline: none; }
.gf select:disabled { color: var(--ink-3); cursor: default; }
.gnear { padding-left: 4px; }
#near-msg { margin: -2px 6px 0; }
@media (max-width: 980px) {
  .geobar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-radius: 16px; }
  .geobar::-webkit-scrollbar { display: none; }
  .gf { flex: none; }
}

.mapfab { position: absolute; top: 12px; right: 12px; z-index: 4; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: .85rem; box-shadow: var(--sh-2); }
.mapfab:hover { background: var(--soft); }
.gnear { flex: none; }

.msg .note.tech { overflow-wrap: anywhere; font-size: .74rem; }

/* ---------- sfondo pastello (cambia con la categoria) ---------- */
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; transition: opacity .6s ease; }
body::before { opacity: 1; }
body::after { opacity: 0; }
body[data-cat="visitare"]::after, body[data-section="viaggi"]::after { opacity: 1; }
body[data-cat="visitare"]::before, body[data-section="viaggi"]::before { opacity: 0; }
.hdr { background: rgba(255,255,255,.55); border-bottom-color: rgba(21,23,28,.06); }
.side, .listcol { background: rgba(255,255,255,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.side { border-right-color: rgba(21,23,28,.06); }
.listcol { border-left-color: rgba(21,23,28,.06); }
.geobar { border-color: rgba(21,23,28,.06); }
body[data-cat="mangiare"] .catbtn.on, body[data-cat="mangiare"] .seg.cats .catbtn.on { background: #e8573f; border-color: #e8573f; }

/* ---------- schede sezione (centrate sopra la mappa) ---------- */
.sections { justify-content: center; flex: none; }
.sec { border-radius: 999px; font-weight: 700; font-size: .92rem; display: inline-flex; gap: 6px; align-items: center; }
.sec.on { border-color: var(--ink); }
body[data-section="viaggi"] .omni { visibility: hidden; }
body[data-section="viaggi"] #add, body[data-section="viaggi"] #manage { display: none; }
@media (max-width: 980px) {
  .sections { padding: 2px 0 0; }
  .sec { flex: 1; justify-content: center; padding: 9px 8px; white-space: nowrap; font-size: .88rem; }
  body[data-section="viaggi"] .omni { display: none; }
}

/* ---------- Mappa Viaggi ---------- */
.vapp { display: grid; height: calc(100vh - var(--hdr) - env(safe-area-inset-top, 0px)); height: calc(100dvh - var(--hdr) - env(safe-area-inset-top, 0px)); }
.vside { background: rgba(255,255,255,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-right: 1px solid rgba(21,23,28,.06); }
.vside .side-head { margin-bottom: 2px; padding: 0 4px; }
.vs-sub { margin: 0 4px 12px; }
.vs-country { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 16px 8px 4px; }
.vs-foot { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 0 4px; }
.btn.wide { width: 100%; justify-content: center; }
.vwarn { font-size: .82rem; background: #fff3d6; color: #6b4e00; border-radius: 10px; padding: 8px 10px; }
.vbadge { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: 2px 8px; background: rgba(21,23,28,.07); color: var(--ink-2); white-space: nowrap; }
.vbadge.demo { background: #fff0c2; color: #7a5a00; }
.vbadge.next { background: #dff3ea; color: #146b4c; }
.vbadge.now { background: #1f8a65; color: #fff; }
.vbadge.past { background: #e9e6f7; color: #4b3c96; }
.vbadge.idea { background: #eef1f5; color: #5d6370; }
.vbadge.k { background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); }
.vbadge.ok { background: #dff3ea; color: #146b4c; }
.vbadge.warn { background: #fde8e6; color: #a32a1d; }
.vbadge.prenotata { background: #efe6ff; color: #5b2bb5; }
.vbadge.dafare { background: #fff0c2; color: #7a5a00; }
.vbadge.fatta { background: #dff3ea; color: #146b4c; }

.vmain { overflow-y: auto; min-width: 0; }
.vnav-slot { display: flex; justify-content: center; margin-bottom: 14px; }
.vmapcol { display: flex; }
.vmap { position: relative; flex: 1; overflow: hidden; background: #e8eaed; }
#vgmap { position: absolute; inset: 0; }
.vhero { -webkit-backdrop-filter: blur(10px); padding: 22px; margin-bottom: 16px; }
.vhero.ov { display: flex; align-items: flex-end; gap: 16px; justify-content: space-between; }
.vhero h1 { margin: 0; font-size: 2rem; line-height: 1.1; }
.vhero p { margin: 6px 0 0; color: var(--ink-2); max-width: 640px; }
.vback { border: 0; background: none; color: var(--ink-2); font-weight: 600; padding: 0; margin-bottom: 10px; font-size: .88rem; }
.vback:hover { color: var(--ink); }
.vh-row { display: flex; gap: 16px; align-items: center; }
.vh-cover { width: 68px; height: 68px; border-radius: 20px; background: #fff; display: grid; place-items: center; font-size: 2.2rem; box-shadow: var(--sh-2); flex: none; }
.vh-flag { font-size: 1.5rem; vertical-align: 2px; }
.vh-meta { color: var(--ink-2); font-weight: 600; margin-top: 3px; }
.vh-acts { display: flex; align-items: center; margin-top: 16px; }
.vnote { background: #fff8e0; border: 1px solid #f5e2a8; border-radius: 16px; padding: 12px 14px; font-size: .9rem; color: #5c4a14; margin-bottom: 14px; }
.vgroup { font-family: var(--font-d); font-weight: 700; font-size: 1.15rem; margin: 20px 4px 10px; }
.vgroup.sm { font-size: 1rem; margin: 18px 2px 8px; }
.vccard { border: 0; padding: 0; text-align: left; overflow: hidden; background: rgba(255,255,255,.85); box-shadow: var(--sh-1); transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; }
.vccard:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.vcc-top { height: 96px; position: relative; display: flex; align-items: center; justify-content: center; }
.vcc-cover { font-size: 2.6rem; }
.vcc-flag { position: absolute; left: 12px; top: 10px; font-size: 1.3rem; }
.vcc-top .vbadge { position: absolute; right: 10px; top: 10px; }
.vcc-b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.vcc-b b { font-family: var(--font-d); font-size: 1.2rem; }
.vcc-b small { color: var(--ink-2); font-size: .82rem; }
.vcc-cnt { font-size: .78rem; color: var(--ink-3); margin-top: 4px; }

.vtabs { position: sticky; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 2px; margin: 0 -2px 8px; }
.vtabs::-webkit-scrollbar { display: none; }
.vtab { flex: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: .9rem; color: var(--ink-2); }
.vtab.on { background: var(--c); color: #fff; }
.vt-n { font-size: .74rem; background: rgba(21,23,28,.08); border-radius: 999px; padding: 0 7px; }
.vtab.on .vt-n { background: rgba(255,255,255,.25); }
.vpane { padding-top: 4px; }
.vaddbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 12px; }
.vaddbar .hint { flex: 1; }
.vempty { text-align: center; padding: 28px 16px; color: var(--ink-2); background: rgba(255,255,255,.5); border: 1px dashed rgba(21,23,28,.15); border-radius: 18px; margin-bottom: 12px; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.vgrid.one { grid-template-columns: 1fr; }
.vitem { display: flex; gap: 12px; background: rgba(255,255,255,.88); padding: 14px; transition: box-shadow .2s, transform .2s; }
.vitem.clickable { cursor: pointer; }
.vitem.clickable:hover { box-shadow: var(--sh-2); }
.vitem.done { opacity: .72; }
.vitem.flash, .vcheck.flash { box-shadow: 0 0 0 3px var(--c, #1f8a65), var(--sh-2); transform: scale(1.01); }
.vi-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.3rem; background: color-mix(in srgb, var(--c) 12%, #fff); flex: none; }
.vi-b { flex: 1; min-width: 0; }
.vi-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vi-name { font-weight: 700; font-size: 1rem; line-height: 1.25; margin-right: 2px; }
.vi-meta { font-size: .82rem; color: var(--ink-2); margin-top: 4px; }
.vi-note { font-size: .9rem; margin-top: 5px; }
.vi-code { font-size: .82rem; margin-top: 6px; background: #f3effd; color: #4a2aa8; border-radius: 8px; padding: 4px 8px; display: inline-block; }
.vi-acts { margin-top: 10px; }
.vi-acts .btn.sm { padding: 5px 10px; font-size: .8rem; }
.vi-where { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: .84rem; }
.vw-l { font-weight: 700; color: var(--ink-2); }
.vw-t { color: var(--ink-2); }
.vchip { border: 1px solid rgba(21,23,28,.1); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: .82rem; font-weight: 600; }
.vchip:hover { border-color: rgba(21,23,28,.3); }
.vchip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.vchips { display: flex; flex-wrap: wrap; gap: 6px; }
.vfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 2px 12px; }
.vpasti { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.vpasto { border: 1px dashed rgba(21,23,28,.18); background: none; border-radius: 999px; padding: 2px 9px; font-size: .76rem; font-weight: 600; color: var(--ink-3); }
.vpasto.on { border: 1px solid #f3c1b6; background: #fdece8; color: #a1331f; }
.vrecipe { margin-top: 10px; border: 1px solid #f4e0c6; border-radius: 12px; padding: 8px 12px; }
.vrecipe summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.vr-t { white-space: pre-wrap; font-size: .88rem; margin: 8px 0; line-height: 1.5; }
.vsec h3 { margin: 6px 2px 8px; font-size: 1.1rem; }
.vsec + .vsec { margin-top: 24px; }
.vchecklist { display: flex; flex-direction: column; gap: 6px; }
.vcheck { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.88); border-radius: 14px; padding: 10px 12px; box-shadow: var(--sh-1); --c: #d0247a; }
.vcheck input { width: 20px; height: 20px; accent-color: #d0247a; flex: none; }
.vc-t { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.vc-t small { color: var(--ink-2); font-size: .82rem; }
.vcheck.done b { text-decoration: line-through; color: var(--ink-3); }
.vsugg { margin-top: 20px; background: rgba(255,255,255,.55); border-radius: 16px; padding: 12px 14px; }
.vs-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: .9rem; }
.vs-row .vs-n { min-width: 0; }
.vs-sub { color: var(--ink-3); font-size: .8rem; }
.vs-h { font-size: .78rem; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; margin: 10px 0 2px; }
.vsugg > .hint { margin: 2px 0 4px; }
.vsugg > .btn { margin-top: 6px; }
.vday { background: rgba(255,255,255,.88); box-shadow: var(--sh-1); padding: 14px; margin-bottom: 12px; }
.vd-h { display: flex; align-items: center; gap: 12px; }
.vd-n { width: 52px; height: 52px; border-radius: 16px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; flex: none; }
.vd-n small { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.vd-n b { font-size: 1.35rem; font-family: var(--font-d); }
.vd-t { flex: 1; }
.vd-t b::first-letter { text-transform: uppercase; }
.vd-t span { color: var(--ink-2); font-size: .9rem; }
.vtl { margin: 12px 0 0 25px; border-left: 2px solid #d5e9e1; padding-left: 14px; display: flex; flex-direction: column; gap: 4px; }
.vtl-r { display: flex; align-items: center; padding: 7px 8px; border-radius: 12px; position: relative; }
.vtl-r::before { content: ""; position: absolute; left: -21px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--c); border: 2px solid #fff; }
.vtl-r.clickable { cursor: pointer; }
.vtl-r.clickable:hover { background: #f4faf7; }
.vtl-o { font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--ink-2); flex: none; }
.vtl-ic { font-size: 1.1rem; flex: none; }
.vtl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.vtl-t small { color: var(--ink-3); font-size: .78rem; }
.vtl-empty { color: var(--ink-3); font-size: .88rem; padding: 6px 0; }
.vd-add { margin: 8px 0 0 39px; }
.vrefs { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow: auto; background: var(--soft); border-radius: 10px; padding: 8px 10px; }
.vref { display: flex; gap: 8px; align-items: center; font-size: .92rem; }
.vref input { width: 18px; height: 18px; accent-color: var(--ink); }
.vf-check { margin: 4px 0 12px; }
.vcpin { display: flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 10px 4px 6px; font: 700 13px var(--font); cursor: pointer; white-space: nowrap; }
.vcpin span { font-size: 16px; }
@media (max-width: 980px) {
  .vapp { display: flex; flex-direction: column; }
  .vside { display: none; }
  .vmain { order: 1; overflow: visible; }
  .vmapcol { order: 2; }
  .vmap { height: 48vh; min-height: 280px; flex: none; width: 100%; border-radius: 18px; }
  body[data-vcity="1"] .vmapcol { order: 1; }
  body[data-vcity="1"] .vmain { order: 2; padding-top: 0; }
  body[data-vcity="1"] .vnav-slot { display: none; }
  .vnav-slot { margin-bottom: 10px; }
  .vhero { padding: 16px; border-radius: 20px; }
  .vhero.ov { flex-direction: column; align-items: stretch; }
  .vhero h1 { font-size: 1.6rem; }
  .vh-cover { width: 54px; height: 54px; font-size: 1.8rem; border-radius: 16px; }
  .vcc-top { height: 76px; }
  .vgrid { grid-template-columns: 1fr; }
  .vaddbar { flex-direction: column; align-items: stretch; }
  .vtabs { flex-wrap: nowrap; }
}

/* =====================================================================
   LIQUID GLASS — pannelli di vetro traslucido su sfondo vivo
   ===================================================================== */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
  --font-d: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --glass-strong: rgba(255,255,255,.62);
  --glass-edge: rgba(255,255,255,.7);
  --glass-hl: linear-gradient(160deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.14) 38%, rgba(255,255,255,.04) 62%, rgba(255,255,255,.22) 100%);
}
h1, h2, h3, .logo, .lcount { letter-spacing: -0.022em; font-weight: 700; }
body { font-family: var(--font); }

/* sfondo: macchie di colore che si muovono piano, cambiano con la sezione */
@keyframes lg-drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2%, -2%, 0) scale(1.05); } 100% { transform: translate3d(-2%, 2%, 0) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }

/* superfici di vetro */
.hdr, .side, .listcol, .geobar, .sections, .card, .mapfab, .panel, .toast, .pickbar, .aichip,
.vside, .vhero, .vitem, .vday, .vccard, .vcheck, .vsugg, .vempty, .vnote {
  background: var(--glass-hl), var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-sh);
}

/* header a capsula flottante */
.hdr { margin: 10px 12px 0; border-radius: 26px; top: calc(10px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--glass-edge); }
.omni { background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 2px rgba(40,30,60,.08); }
.omni:focus-within { background: rgba(255,255,255,.8); box-shadow: 0 0 0 4px rgba(31,111,235,.14), inset 0 1px 2px rgba(40,30,60,.06); }
.mode { transition: background .25s, color .25s, box-shadow .25s; }
.mode.on { background: rgba(17,19,24,.88); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px -4px rgba(0,0,0,.35); }

/* colonne flottanti con spazi tra i pannelli */
.app { padding: 12px; gap: 12px; grid-template-columns: 290px minmax(0, 1fr) 390px; height: calc(100vh - var(--hdr) - 10px - env(safe-area-inset-top, 0px)); height: calc(100dvh - var(--hdr) - 10px - env(safe-area-inset-top, 0px)); margin-top: 0; }
.side, .listcol { border-radius: var(--r-xl); }
.side { border-right: 1px solid var(--glass-edge); }
.listcol { border-left: 1px solid var(--glass-edge); }
.mapcol { padding: 0; gap: 12px; }
.map { border-radius: var(--r-xl); box-shadow: 0 0 0 1px rgba(255,255,255,.75), 0 0 0 6px rgba(255,255,255,.28), 0 20px 50px -20px rgba(40,30,60,.35); }
.geobar { background: var(--glass-hl), rgba(255,255,255,.5); }
.gf { border-left-color: rgba(21,23,28,.08); }
.gtitle { -webkit-backdrop-filter: blur(16px); }
.lhead { border-bottom-color: rgba(255,255,255,.55); }

/* tab di sezione: segmented control di vetro */
.sections { align-self: center; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; }
.vnav-slot .sections { align-self: auto; }
.sec { border: 0; background: none; box-shadow: none; padding: 8px 18px; color: var(--ink-2); transition: background .3s, color .3s, box-shadow .3s; }
.sec:not(.on):hover { background: rgba(255,255,255,.45); }
.sec.on { background: rgba(255,255,255,.92); color: var(--ink); box-shadow: 0 4px 14px -4px rgba(40,30,60,.28), inset 0 1px 0 #fff; }

/* bottoni */
.btn.ghost { -webkit-backdrop-filter: blur(12px); }
.x { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 1px 0 #fff; }
.go { background: linear-gradient(180deg, #2c2f38, #0f1014); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }

/* categorie: tessere di vetro, quella attiva colorata e luminosa */
.seg.cats .catbtn { background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.8); border-radius: 20px; box-shadow: inset 0 1px 0 #fff, 0 4px 14px -6px rgba(40,30,60,.15); transition: transform .2s, background .25s, box-shadow .25s; }
.seg.cats .catbtn:hover { transform: translateY(-1px); background: rgba(255,255,255,.7); }
body[data-cat="mangiare"] .seg.cats .catbtn.on { background: linear-gradient(150deg, rgba(255,140,105,.95), rgba(236,72,90,.92)); border-color: rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 12px 28px -10px rgba(236,72,90,.65); }
body[data-cat="visitare"] .seg.cats .catbtn.on { background: linear-gradient(150deg, rgba(56,201,150,.95), rgba(35,130,200,.92)); border-color: rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 12px 28px -10px rgba(35,130,200,.6); }
.tipo { border-radius: 14px; transition: background .2s; }
.tipo:hover { background: rgba(255,255,255,.55); }
.tipo.on { background: rgba(255,255,255,.7); box-shadow: inset 0 1px 0 #fff, 0 2px 8px -3px rgba(40,30,60,.15); }
.tipo .ti, .i-ic, .card-ic, .vi-ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px -2px rgba(40,30,60,.18); background: color-mix(in srgb, var(--c) 16%, rgba(255,255,255,.7)); }

/* elenco */
.item { border-radius: 18px; transition: background .2s, box-shadow .2s; }
.item:hover, .item.hot { background: rgba(255,255,255,.55); }
.item.sel { background: rgba(255,255,255,.78); box-shadow: inset 3px 0 0 var(--c), 0 6px 18px -8px rgba(40,30,60,.25); }
.mini-sel { background-color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); }
.ai { background: linear-gradient(180deg, rgba(236,226,255,.65), rgba(255,255,255,.2)); border-bottom-color: rgba(255,255,255,.55); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.msg.me { background: linear-gradient(180deg, #2c2f38, #111318); }

/* scheda sulla mappa, pannelli, toast */
.card { background: var(--glass-hl), rgba(255,255,255,.72); }
.mapfab { background: var(--glass-hl), rgba(255,255,255,.62); }
.sheet { -webkit-backdrop-filter: blur(8px) saturate(140%); }
.panel { background: var(--glass-hl), rgba(255,255,255,.8); border-radius: 30px; }
.fld input, .fld select, .fld textarea, #f-link { background: rgba(255,255,255,.6); border: 1px solid rgba(21,23,28,.08); border-radius: 14px; box-shadow: inset 0 1px 2px rgba(40,30,60,.06); }
.fld input:focus, .fld select:focus, .fld textarea:focus, #f-link:focus { outline: none; background: #fff; border-color: #9cc0fb; box-shadow: 0 0 0 4px rgba(31,111,235,.12); }
.toast { color: var(--ink); }
.pickbar { color: var(--ink); background: var(--glass-hl), rgba(255,255,255,.8); }
.pickbar .btn.light { color: var(--ink); border-color: rgba(21,23,28,.15); background: rgba(255,255,255,.6); }
.aichip { color: #4a2aa8; }
.clu { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 5px rgba(255,255,255,.45), 0 6px 16px rgba(0,0,0,.28); }

/* Mappa Viaggi */
.vapp { padding: 12px; gap: 12px; height: calc(100vh - var(--hdr) - 10px - env(safe-area-inset-top, 0px)); height: calc(100dvh - var(--hdr) - 10px - env(safe-area-inset-top, 0px)); }
.vmain { padding: 0 6px 40px; }
.vmapcol { padding: 0; }
.vmap { box-shadow: 0 0 0 1px rgba(255,255,255,.75), 0 0 0 6px rgba(255,255,255,.28), 0 20px 50px -20px rgba(40,30,60,.35); }
.vccard { border-radius: 24px; }
.vcc-top { background: linear-gradient(135deg, hsl(var(--h) 90% 82% / .75), hsl(calc(var(--h) + 50) 90% 88% / .55)); border-bottom: 1px solid rgba(255,255,255,.6); }
.vitem { border-radius: 22px; border-left: 1px solid var(--glass-edge); box-shadow: inset 3px 0 0 var(--c), var(--glass-sh); }
.vday { border-radius: 26px; }
.vtabs { background: none; }
.vtab { background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .25s, color .25s, box-shadow .25s; }
.vtab.on { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c)); border-color: rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px -8px var(--c); }
.vchip, .vpasto { background: rgba(255,255,255,.6); }
.vrecipe { background: rgba(255,248,238,.7); border-color: rgba(255,255,255,.8); }
.vtabs { top: 0; }
.vcpin { box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 1px 0 #fff; }

@media (max-width: 1280px) { .app { grid-template-columns: 260px minmax(0, 1fr) 340px; } .vapp { grid-template-columns: 250px minmax(0, 1fr) 340px; } }
@media (max-width: 980px) {
  .hdr { padding: 10px 12px; }
  .app { padding: 10px 0 0; gap: 0; height: auto; }
  .mapcol { padding: 0 10px; gap: 10px; }
  .map { border-radius: 24px; }
  .listcol { margin: 12px 10px 20px; border-radius: 26px; }
  .side { border-radius: 0 28px 28px 0; background: var(--glass-hl), rgba(255,255,255,.72); }
  .sections { align-self: stretch; display: flex; }
  .vapp { padding: 10px 0 0; height: auto; gap: 0; }
  .vmain { padding: 0 10px 30px; }
  .vmapcol { padding: 0 10px 16px; }
}
.toast { text-align: center; width: max-content; max-width: calc(100% - 32px); }

/* aggiunti di recente */
.recentbtn { justify-content: center; }
.recentbtn.desk { width: 100%; margin: 0 0 14px; }
.btn.recentbtn.on, .btn.recentbtn.on:hover { background: linear-gradient(150deg, rgba(123,77,240,.92), rgba(80,110,245,.92)); color: #fff; border-color: rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px -10px rgba(100,80,240,.7); }
.i-date { flex: none; font-size: .76rem; font-weight: 700; color: #5b3fd0; background: rgba(123,77,240,.1); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
@media (max-width: 980px) { .recentbtn.desk { display: none; } }

/* destinazione nel modulo: Mappa Luoghi / viaggio */
.destwrap { margin: -4px 0 16px; }
.dest { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(21,23,28,.06); box-shadow: inset 0 1px 2px rgba(40,30,60,.08); }
.dest button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 9px 10px; font-weight: 700; font-size: .9rem; color: var(--ink-2); transition: background .25s, color .25s, box-shadow .25s; }
.dest button.on { background: #fff; color: var(--ink); box-shadow: 0 4px 12px -4px rgba(40,30,60,.3), inset 0 1px 0 #fff; }
.dest button[data-d="viaggio"].on { background: linear-gradient(150deg, #38c996, #2382c8); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 20px -8px rgba(35,130,200,.6); }
.desthint { margin-top: 8px; font-size: .84rem; font-weight: 600; color: #1d6f8f; background: rgba(35,130,200,.1); border-radius: 12px; padding: 7px 12px; }
.tripbox { background: linear-gradient(150deg, rgba(56,201,150,.12), rgba(35,130,200,.1)); border: 1px solid rgba(35,130,200,.18); border-radius: 18px; padding: 12px 12px 4px; margin-bottom: 12px; }
.tripbox .hint { margin: -4px 2px 10px; }

/* ---------- prestazioni: vetro più leggero ----------
   Sfondo fermo (niente animazione/filtri), sfocatura solo sui pannelli grandi. */
body::before, body::after { animation: none !important; filter: none !important; inset: 0; will-change: auto; }
.vitem, .vday, .vccard, .vcheck, .vsugg, .vempty, .vnote, .card, .mapfab, .toast, .pickbar, .aichip, .geobar,
.btn.ghost, .vtab, .gtitle, .clu, .sections {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.vitem, .vday, .vccard, .vcheck { background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.74)); }
.vsugg, .vempty, .vnote { background: rgba(255,255,255,.66); }
.card, .toast, .pickbar { background: rgba(255,255,255,.94); }
.mapfab, .geobar, .sections { background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.72)); }
.btn.ghost, .vtab { background: rgba(255,255,255,.72); }
.clu { background: rgba(17,19,24,.88); }
.aichip { background: rgba(240,232,255,.95); }
@media (max-width: 980px) {
  /* sul telefono niente sfocatura: pannelli quasi opachi, stesso look */
  .hdr, .side, .listcol, .vside, .vhero, .panel {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .side, .panel { background: rgba(255,255,255,.97); }
  .listcol, .vhero { background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.76)); }
  .sheet { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(30,24,40,.4); }
}

/* ---------- riga compatta sopra la mappa: GPS + interruttore | tab sezioni ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.maprow { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.mr-tools { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; }
.mr-nav { display: flex; justify-content: center; }
.mr-nav .sections { align-self: auto; }
.gnear { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; }
.gpsbtn { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #1f6feb;
  background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.75)); border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(40,30,60,.35); transition: transform .15s, background .2s, color .2s; }
.gpsbtn:hover { transform: scale(1.06); }
.gpsbtn:active { transform: scale(.94); }
.gpsbtn svg { transform: translate(-1px, 1px); }
.gpsbtn.on { background: linear-gradient(160deg, #3b8bff, #1f5fd6); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px -8px rgba(31,111,235,.7); }
.gnear .origin { margin: 0; white-space: nowrap; padding: 4px 4px 4px 10px; font-size: .82rem; border-radius: 999px; background: rgba(31,111,235,.12); }
.gnear .origin button { width: 22px; height: 22px; font-size: 1rem; }
.mr-range select { border: 1px solid rgba(255,255,255,.9); font-weight: 600; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235d6370'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; box-shadow: 0 4px 12px -8px rgba(40,30,60,.3); cursor: pointer; }
/* barra Paese / Provincia / Città più compatta */
.geobar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 20px; }
.geobar .gf { padding: 3px 14px; }
.geobar .gf[hidden] { display: none !important; }
.gf select { max-width: none; width: 100%; }

@media (max-width: 980px) {
  .maprow { grid-template-columns: 1fr; gap: 8px; }
  .mr-nav { order: -1; }
  .gpsbtn { width: 38px; height: 38px; }
  .geobar { overflow: visible; }
  .geobar .gf { padding: 3px 10px; }
}
.geobar.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .mr-tools { row-gap: 8px; }
  .geobar.four { grid-template-columns: repeat(4, minmax(96px, 1fr)); overflow-x: auto; }
}

/* ---------- intestazione compatta ---------- */
:root { --hdr: 62px; }
.hdr { gap: 14px; padding: 0 10px 0 16px; }
.logo { font-size: 1.08rem; gap: 9px; }
.byline { font-size: .66rem; margin-top: 2px; }
.omni { max-width: 700px; padding: 3px; gap: 4px; }
.mode { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; font-size: .78rem; line-height: 1.08; text-align: left; }
.mode .m-ic { font-size: .95rem; }
.go { width: 34px; height: 34px; }
/* ricerca Google: arrotondata, senza riquadro */
gmp-place-autocomplete { background-color: transparent; border: none; border-radius: 999px; color-scheme: light; font-family: var(--font); font-size: 15px; }
gmp-place-autocomplete::part(focus-ring) { display: none; }
gmp-place-autocomplete::part(input) { background: transparent; border-radius: 999px; }
gmp-place-autocomplete::part(prediction-list) { border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px -12px rgba(40,30,60,.3); border: 1px solid rgba(21,23,28,.06); }
gmp-place-autocomplete::part(prediction-item-selected) { background: rgba(31,111,235,.08); }
.searchbox { border-radius: 999px; border: 1.5px solid rgba(17,19,24,.18); background: rgba(255,255,255,.85); padding: 0 6px; overflow: visible; }
.searchbox:focus-within { border-color: #9cc0fb; box-shadow: 0 0 0 4px rgba(31,111,235,.12); }
@media (max-width: 1280px) {
  .hdr-r .lbl { display: none; }
  .hdr-r .btn { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
}
@media (max-width: 1100px) { .byline { display: none; } .logo { font-size: 1rem; } }
@media (max-width: 980px) {
  :root { --hdr: auto; }
  .mode { justify-content: center; font-size: .86rem; padding: 8px 10px; }
  .mode br { display: none; }
  .mode .m-t { white-space: nowrap; }
}
@media (min-width: 981px) and (max-width: 1280px) {

  .sec { padding: 8px 14px; }
}
@media (min-width: 981px) and (max-width: 1120px) {
  .app { grid-template-columns: 230px minmax(0, 1fr) 300px; }
  .vapp { grid-template-columns: 220px minmax(0, 1fr) 300px; }
  .seg.cats .catbtn { padding: 10px; }
}

/* tessere categoria: stessa larghezza, testo che va a capo */
.seg.cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg.cats .catbtn { min-width: 0; }
.seg.cats .catbtn .cb-t { overflow-wrap: normal; font-size: .9rem; }
@media (max-width: 1280px) { .seg.cats .catbtn .cb-t { font-size: .82rem; } .seg.cats .catbtn { padding: 10px; } .seg.cats { gap: 6px; } }

/* interruttore nel modulo città (date sì/no) */
.vf-toggle { display: flex; align-items: flex-start; gap: 12px; margin: 2px 0 14px; padding: 12px 14px; border-radius: 16px; background: rgba(21,23,28,.04); cursor: pointer; }
.vf-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vf-toggle .sw { width: 44px; height: 26px; border-radius: 999px; background: rgba(21,23,28,.18); position: relative; flex: none; transition: background .2s; margin-top: 1px; }
.vf-toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: transform .2s; }
.vf-toggle input:checked + .sw { background: #34c759; }
.vf-toggle input:checked + .sw::after { transform: translateX(18px); }
.vf-toggle input:focus-visible + .sw { outline: 2px solid var(--blue); outline-offset: 2px; }
.vt-t { display: flex; flex-direction: column; gap: 2px; }
.vt-t b { font-size: .92rem; }
.vt-t small { font-size: .8rem; color: var(--ink-2); }
.fld.dim { opacity: .38; filter: grayscale(1); pointer-events: none; }
.fld.dim input { background: rgba(21,23,28,.12) !important; }

/* ---------- leggibilità testi Mappa Viaggi ---------- */
.vi-top, .vi-b, .vtl-t, .vcc-b, .vc-t { min-width: 0; }
.vi-name, .vtl-t b, .vcc-b b, .vc-t b, .vd-t b, .vh-t h1 { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.vchip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtl-r { gap: 8px; }
.vtl-o { width: 42px; }
.btn.vtl-ed { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; flex: none; font-size: .85rem; }
.panel select, .panel input { text-overflow: ellipsis; min-width: 0; }
.vf-body .grid2 > .fld { min-width: 0; }
.vi-acts .btn.icon { width: 32px; height: 30px; padding: 0; justify-content: center; }
@media (max-width: 980px) {
  .vtl { margin-left: 18px; padding-left: 12px; }
  .vtl-r { padding: 6px 4px; }
  .vtl-o { width: 38px; font-size: .8rem; }
  .vtl-t b { font-size: .92rem; }
  .vd-add { margin-left: 30px; }
  .vitem { padding: 12px; gap: 10px; }
  .vi-ic { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 11px; }
  .vh-meta { font-size: .88rem; }
}

/* conferma eliminazione viaggio */
.vf-intro p { margin: 0 0 10px; font-size: .92rem; }
.vf-list { margin: 0 0 12px; padding: 10px 14px 10px 30px; background: rgba(197,34,31,.06); border-radius: 14px; font-size: .9rem; font-weight: 600; }
.btn.danger.armed { background: #c5221f; color: #fff; border-color: #c5221f; }
.btn.vdel { color: var(--danger); }
#f-nocatbox { margin-bottom: 14px; }

/* ---------- intestazione da telefono: 2 righe compatte, non fissa ---------- */
gmp-place-autocomplete::part(input) { border: none; outline: none; text-decoration: none; }
@media (max-width: 980px) {
  .hdr { padding: 8px 8px 8px 12px; gap: 8px; }
  :root { padding-top: 0; }
  .logo { font-size: .98rem; gap: 7px; }
  .byline { display: none !important; }
  .hdr-r { gap: 6px; }
  .hdr-r .btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
  .who img { width: 30px; height: 30px; }
  /* ricerca: una sola riga, le modalità diventano due icone dentro la barra */
  .omni { flex-direction: row; align-items: center; border-radius: 999px; padding: 3px; gap: 4px; background: rgba(21,23,28,.05); border: 1px solid rgba(21,23,28,.06); }
  .mode .m-t { display: none; }
  .mode .m-ic { font-size: 1rem; }
  .go { width: 32px; height: 32px; }
  #listcol, #map { scroll-margin-top: 12px; }
}

/* distanza come pillola accanto a Recenti / GPS */
.mr-range select { padding: 8px 26px 8px 12px; font-size: .84rem; border-radius: 999px; background-color: rgba(255,255,255,.9); }
@media (max-width: 980px) {
  #open-filters { order: 1; } #recent-m { order: 2; } #rangebox { order: 3; } #aichip { order: 4; } .gnear { order: 5; }
}
@media (max-width: 980px) {
  .mr-tools:has(#rangebox:not([hidden])) .btn.mob { padding: 8px 9px; font-size: .8rem; }
  .mr-tools:has(#rangebox:not([hidden])) .mr-range select { padding: 8px 20px 8px 8px; font-size: .8rem; background-position: right 7px center; }
  .mr-tools:has(#rangebox:not([hidden])) { gap: 5px; }
}
@media (max-width: 980px) { .mr-tools:has(#rangebox:not([hidden])) #recent-m .rl { display: none; } }

/* intestazioni di gruppo nell'elenco: ben visibili e fisse mentre scorri */
.gtitle { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0; z-index: 2;
  margin: 10px 0 4px; padding: 9px 12px 9px 14px; border-radius: 14px; text-transform: none; letter-spacing: 0;
  font-family: var(--font-d); font-size: 1rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #2b2f3a, #14161c) !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,.45);
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body[data-cat="mangiare"] .gtitle { background: linear-gradient(135deg, #ef6b52, #d9435a) !important; }
body[data-cat="visitare"] .gtitle { background: linear-gradient(135deg, #2fb487, #2a7fc4) !important; }
.gt-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-c { flex: none; min-width: 28px; text-align: center; font-size: .8rem; font-weight: 800; background: rgba(255,255,255,.25); border-radius: 999px; padding: 2px 9px; }
.list > .gtitle:first-child { margin-top: 4px; }
@media (max-width: 980px) { .gtitle { top: calc(4px + env(safe-area-inset-top, 0px)); } }

/* testo dell'interruttore sempre visibile: se non c'è spazio va a capo sotto */
@media (min-width: 981px) and (max-width: 1280px) {
  .maprow { grid-template-columns: 1fr; gap: 8px; }
  .mr-nav { order: -1; }
  .mr-tools { flex-wrap: wrap; row-gap: 6px; }
}

/* ---------- comandi sulla mappa (GPS, filtro vista mappa, mostra tutto) ---------- */
.mapctl { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.mapctl > * { pointer-events: auto; }
.mapctl .mapfab { position: static; display: inline-flex; align-items: center; gap: 4px; height: 42px; }
.mapctl .gnear { display: block; }
.mapctl .gpsbtn { width: 44px; height: 44px; background: rgba(255,255,255,.95); box-shadow: 0 6px 18px -6px rgba(0,0,0,.35), inset 0 1px 0 #fff; }
.mapctl .gpsbtn.on { background: linear-gradient(160deg, #3b8bff, #1f5fd6); }
.mapsw { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 10px; border-radius: 999px; cursor: pointer; user-select: none;
  background: rgba(255,255,255,.95); box-shadow: 0 6px 18px -6px rgba(0,0,0,.35), inset 0 1px 0 #fff; font-weight: 700; font-size: .84rem; color: var(--ink); transition: background .2s, color .2s; }
.mapsw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mapsw .ms-ic { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #b8bec9; display: grid; place-items: center; font-size: 12px; transition: all .2s; flex: none; }
.mapsw:has(input:checked) { background: linear-gradient(160deg, #3b8bff, #1f5fd6); color: #fff; }
.mapsw:has(input:checked) .ms-ic { border-color: #fff; background: #fff; }
.mapsw:has(input:checked) .ms-ic::after { content: "✓"; color: #1f5fd6; font-weight: 900; }
.mapsw:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
/* riga sotto i tab: centrata e simmetrica */
.mr-tools { justify-content: flex-start; }
.maprow .origin { margin: 0; white-space: nowrap; padding: 6px 6px 6px 12px; font-size: .84rem; border-radius: 999px; background: rgba(31,111,235,.12); }
.maprow .origin button { width: 24px; height: 24px; }
@media (max-width: 980px) {
  .mr-tools { justify-content: center; flex-wrap: wrap; gap: 8px; }
  .mr-tools .btn.mob { padding: 9px 14px; font-size: .88rem; }
  #recent-m .rl { display: inline !important; }
  .mr-range select { padding: 9px 26px 9px 12px; font-size: .86rem; }
  .mapctl { top: 10px; left: 10px; right: 10px; gap: 6px; }
  .mapsw { height: 40px; font-size: .78rem; padding: 0 12px 0 9px; }
  .mapctl .gpsbtn { width: 40px; height: 40px; }
  .mapctl .mapfab { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .mapctl .mf-l { display: none; }
}
@media (min-width: 981px) {
  .maprow:not(:has(#rangebox:not([hidden]))):not(:has(#origin:not([hidden]))):not(:has(#aichip:not([hidden]))) { grid-template-columns: 1fr; }
  .maprow:not(:has(#rangebox:not([hidden]))):not(:has(#origin:not([hidden]))):not(:has(#aichip:not([hidden]))) .mr-tools { display: none; }
}
.mapctl .gnear { order: 1; } .mapctl .mapsw { order: 2; white-space: nowrap; } .mapctl .grow { order: 3; } .mapctl .mapfab { order: 4; white-space: nowrap; }
@media (max-width: 1280px) {
  .mapctl .mapfab { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; }
  .mapctl .mf-l { display: none; }
}
@media (min-width: 981px) and (max-width: 1280px) { .mr-tools { justify-content: center; } }

/* dati privati dei viaggi */
.vf-priv { display: block; margin-top: 4px; font-size: .74rem; font-weight: 600; color: #6b5ca5; }
.vpriv-date { color: var(--ink-3); font-weight: 600; opacity: .85; }
.vpriv-note { background: rgba(107,92,165,.08); border-radius: 12px; padding: 8px 12px; font-size: .88rem; color: #4b3c96; }
.vd-date { font-size: .8rem; color: var(--ink-3); }
.vd-date.priv { opacity: .7; }

.aiweb { border: 1px solid rgba(21,23,28,.1); background: rgba(255,255,255,.7); border-radius: 999px; padding: 4px 10px; font-size: .74rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.aiweb.on { background: linear-gradient(150deg, #7b4df0, #5a67f2); color: #fff; border-color: transparent; }
.ai-head { flex-wrap: wrap; }

/* ---------- allegati prenotazioni ---------- */
.vatt { background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); border-radius: 20px; padding: 12px; box-shadow: inset 0 1px 0 #fff, 0 6px 18px -10px rgba(40,30,60,.25); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.va-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.va-h b { font-size: .95rem; }
.va-lock { font-size: .7rem; font-weight: 700; color: #6b5ca5; background: rgba(107,92,165,.1); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.va-empty { font-size: .82rem; color: var(--ink-2); }
.va-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.va-cat { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 6px 2px 2px; }
.va-row { display: flex; align-items: center; gap: 6px; }
.va-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: rgba(255,255,255,.85); border-radius: 12px; padding: 7px 9px; text-align: left; }
.va-open:hover { background: #fff; }
.va-ic { font-size: 1.1rem; flex: none; }
.va-t { display: flex; flex-direction: column; min-width: 0; }
.va-t b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-t small { font-size: .72rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-del { flex: none; border: 0; background: none; border-radius: 10px; padding: 6px 8px; font-size: .85rem; color: var(--ink-3); }
.va-del.armed { background: #c5221f; color: #fff; font-weight: 700; font-size: .74rem; }
.va-add { align-self: flex-start; }
.vf-file { padding: 10px !important; background: rgba(255,255,255,.7) !important; }
.vf-intro .vf-priv { margin: 0 0 12px; font-size: .82rem; }
.vviewer .panel { max-width: 900px; display: flex; flex-direction: column; }
.vv-body { flex: 1; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.vv-img { max-width: 100%; max-height: 70vh; border-radius: 12px; }
.vv-pdf { width: 100%; height: 70vh; border: 0; border-radius: 12px; background: #fff; }
@media (max-width: 980px) {
  .vv-pdf { height: 60vh; }
}

.va-actfiles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.va-fchip { background: rgba(107,92,165,.08); border-color: rgba(107,92,165,.25); color: #4b3c96; max-width: 220px; }

/* ---------- viaggi: GPS, distanze, giorni e percorso ---------- */
.vmap .vgps { position: absolute; top: 12px; z-index: 4; width: 44px; height: 44px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.35), inset 0 1px 0 #fff; }
.vmap .vgps.on { color: #fff; }
.vmap .mapfab { position: absolute; top: 12px; right: 12px; }
.vi-dist { flex: none; margin-left: auto; font-size: .76rem; font-weight: 800; color: #1f6feb; background: rgba(31,111,235,.1); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.vinfo { position: relative; background: linear-gradient(150deg, rgba(56,201,150,.14), rgba(35,130,200,.12)); border: 1px solid rgba(35,130,200,.2); border-radius: 18px; padding: 12px 44px 10px 14px; margin-bottom: 12px; font-size: .86rem; }
.vinfo .x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; font-size: 1rem; }
.vinfo ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); }
.vinfo li { margin-bottom: 3px; }
.vdays { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 2px 12px; }
.vday-chip b { font-weight: 800; }
.vday-chip.on { background: var(--c); border-color: var(--c); color: #fff; }
.vday { border-top: 4px solid var(--dc, #1f8a65); }
.vd-n { background: var(--dc, #1f8a65); }
.vroute { flex: none; }
.vnum { display: flex; align-items: center; gap: 3px; background: #fff; border: 3px solid var(--c); border-radius: 999px; padding: 2px 8px 2px 3px; box-shadow: 0 4px 12px rgba(0,0,0,.25); cursor: pointer; font: 700 12px var(--font); }
.vnum b { width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 11px; }
.vnum span { font-size: 14px; }
@media (max-width: 980px) { .vmap .vgps { width: 40px; height: 40px; } .vroute { padding: 5px 9px; } }
.vtl-dist { margin: 2px 0 0; align-self: flex-start; font-size: .7rem; }

/* ---------- giudizio personale e orari ---------- */
.mioseg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mioseg button { border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.5); border-radius: 12px; padding: 8px 4px; font-size: .78rem; font-weight: 700; color: var(--ink-2); box-shadow: inset 0 1px 0 #fff; }
.mioseg button.on { background: linear-gradient(150deg, #f5b301, #e8862b); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -8px rgba(232,134,43,.8); }
.mio-n { float: right; text-transform: none; letter-spacing: 0; font-weight: 600; }
.openrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .86rem; font-weight: 600; cursor: pointer; }
.openrow input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.openrow .sw { width: 38px; height: 23px; border-radius: 999px; background: rgba(21,23,28,.16); position: relative; flex: none; transition: background .2s; }
.openrow .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: transform .2s; }
.openrow input:checked + .sw { background: #34c759; }
.openrow input:checked + .sw::after { transform: translateX(15px); }
.stars { display: inline-flex; gap: 1px; font-size: .9rem; line-height: 1; color: #d6d9df; }
.stars .st.on { color: #f5b301; }
.stars.ed .st { border: 0; background: none; padding: 2px; font-size: 1.15rem; cursor: pointer; color: #d6d9df; }
.stars.ed .st.on { color: #f5b301; }
.stars.ed .st:hover { transform: scale(1.15); }
.pbadge, .obadge { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.pbadge.visto { background: #dff3ea; color: #146b4c; }
.pbadge.provare { background: #fff0c2; color: #7a5a00; }
.obadge.open { color: #146b4c; background: rgba(52,199,89,.12); }
.obadge.soon { color: #8a5a00; background: rgba(245,179,1,.15); }
.obadge.closed { color: #a32a1d; background: rgba(197,34,31,.08); }
.obadge.perm { color: #fff; background: #6b7280; }
.i-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }
.cx2 { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cx2:empty { display: none; }
.cx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vdate { font-size: .74rem; color: var(--ink-3); }
.hours { font-size: .84rem; background: rgba(21,23,28,.04); border-radius: 12px; padding: 6px 10px; }
.hours summary { cursor: pointer; font-weight: 600; }
.hours ul { margin: 6px 0 2px; padding-left: 18px; color: var(--ink-2); }
.hours li.today { font-weight: 700; color: var(--ink); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
@media (max-width: 980px) { .grid3 { grid-template-columns: 1fr 1fr; } .grid3 .fld:last-child { grid-column: 1 / -1; } }

/* ---------- valigia, esportazione, AI itinerario, backup automatico ---------- */
.vitbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 2px 12px; }
.btn.vai { background: linear-gradient(120deg, #7b4df0, #ff5a7a); border-color: transparent; }
.vai-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vprog { position: relative; height: 30px; border-radius: 999px; background: rgba(255,255,255,.7); overflow: hidden; margin: 0 2px 12px; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.vprog-b { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #f0b45a, #e0862b); transition: width .3s; }
.vprog span { position: relative; display: block; text-align: center; line-height: 30px; font-weight: 700; font-size: .84rem; }
.vcheckgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 12px; }
.vcsec { background: rgba(255,255,255,.88); border-radius: 18px; padding: 12px; box-shadow: var(--sh-1); }
.vcs-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.vcitem { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 10px; cursor: pointer; font-size: .92rem; }
.vcitem:hover { background: rgba(21,23,28,.04); }
.vcitem input { width: 20px; height: 20px; accent-color: #e0862b; flex: none; }
.vcitem span { flex: 1; min-width: 0; }
.vcitem.done span { text-decoration: line-through; color: var(--ink-3); }
.vc-x { border: 0; background: none; color: var(--ink-3); font-size: 1.1rem; padding: 0 4px; opacity: 0; }
.vcitem:hover .vc-x { opacity: 1; }
@media (hover: none) { .vc-x { opacity: .6; } }
.vc-add input { width: 100%; border: 1px dashed rgba(21,23,28,.18); background: none; border-radius: 10px; padding: 7px 10px; font-size: 16px; margin-top: 4px; }
.bkauto { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.bk-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: rgba(21,23,28,.06); }
.bk-seg.two { grid-template-columns: 1fr 1fr; }
.bk-seg button { border: 0; background: none; border-radius: 999px; padding: 8px 6px; font-weight: 700; font-size: .82rem; color: var(--ink-2); }
.bk-seg button.on { background: #fff; color: var(--ink); box-shadow: 0 3px 10px -4px rgba(40,30,60,.3); }
.bk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bk-dest { font-size: .88rem; font-weight: 600; }
.bkbanner { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 150; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.97); border-radius: 999px; padding: 6px 6px 6px 16px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.35); font-weight: 600; font-size: .88rem; max-width: calc(100% - 24px); }
.bkbanner .x { width: 30px; height: 30px; }
@media (max-width: 980px) { .bk-seg { grid-template-columns: 1fr 1fr; border-radius: 18px; } }

.mio-stars { position: relative; display: block; }
.mio-stars select { width: 100%; height: 100%; min-height: 38px; appearance: none; -webkit-appearance: none; text-align: center; text-align-last: center; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.5); border-radius: 12px; padding: 8px 4px; font-size: .78rem; font-weight: 700; color: var(--ink-2); box-shadow: inset 0 1px 0 #fff; cursor: pointer; }
.mio-stars.on select { background: linear-gradient(150deg, #f5b301, #e8862b); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -8px rgba(232,134,43,.8); }
.mio-stars select option { color: var(--ink); background: #fff; }

/* intestazione città: pulsanti su una riga */
.vh-acts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding-bottom: 2px; }
.vh-acts::-webkit-scrollbar { display: none; }
.vh-acts > * { flex: none; }
.vh-acts .btn.sm { padding: 6px 11px; font-size: .8rem; }
.vh-acts .btn.icon { width: 32px; height: 30px; padding: 0; justify-content: center; }
/* valigia */
.vval-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vval-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.vaddbar .btn { flex: none; }
.tpl-sec { flex: 1; min-width: 0; border: 0; background: none; font-weight: 700; font-size: .95rem; padding: 2px 0; border-bottom: 1px dashed transparent; }
.tpl-sec:focus { outline: none; border-bottom-color: rgba(21,23,28,.3); }
.vc-x.on { opacity: .7; }
.vcitem.tpl { cursor: default; }
.tpl-new { display: flex; align-items: center; border: 1.5px dashed rgba(21,23,28,.18); background: rgba(255,255,255,.5); }
.tpl-new input { width: 100%; border: 0; background: none; font-size: 16px; padding: 8px; }
.vaddbar.val { flex-direction: column; align-items: flex-start; gap: 8px; }

.vh-t { min-width: 0; }
.l-short { display: none; }
.vhero:not(.has-att) { container-type: inline-size; }
@container (max-width: 600px) {
  .vh-acts .l-long { display: none; } .vh-acts .l-short { display: inline; }
  .vh-acts .btn.sm { padding: 6px 8px; font-size: .78rem; }
  .vh-acts .vbadge { font-size: .64rem; padding: 2px 6px; }
  .vh-acts { gap: 4px; }
}

.va-h { flex-wrap: wrap; }
.va-h b { flex: 1; }
.va-actbtn { padding: 4px 10px !important; font-size: .76rem !important; }
.vbk { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(21,23,28,.04); margin-top: 8px; }
.vbk-t { display: flex; flex-direction: column; gap: 2px; }
.vbk-t small { color: var(--ink-2); }
.vbk-f { display: flex; flex-wrap: wrap; gap: 6px; }

/* giorni simulati, avviso date, valuta */
.vsim { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--ink-2); background: rgba(255,255,255,.6); border-radius: 999px; padding: 2px 4px 2px 12px; }
.vsim .btn.icon { width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 50%; }
.vfit { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 0 2px 12px; }
.vday.over { border-top-color: #e0862b !important; opacity: .85; outline: 2px dashed rgba(224,134,43,.5); outline-offset: -2px; }
.vd-over { font-size: .76rem; font-weight: 700; color: #a35b00; }
.fx-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.fx-grid input { font-size: 1.3rem !important; font-weight: 700; }
.fx-swap { padding-bottom: 22px; font-size: 1.2rem; }
.fx-info { margin-bottom: 10px; }
.fx-quick { display: flex; flex-wrap: wrap; gap: 6px; }
/* telefono: la mappa del viaggio segue lo scorrimento */
@media (max-width: 980px) {
  body[data-vcity="1"] .vmapcol { padding-top: 6px; }
  body[data-vcity="1"] .vmap { box-shadow: 0 10px 24px -12px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.8); }
  .vtabs { position: static; }
}

/* cambio valuta in linea */
.fxbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; padding: 8px 12px; border-radius: 16px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 0 #fff; }
.fx-ic { font-size: 1.05rem; }
.fx-f { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid rgba(21,23,28,.1); border-radius: 12px; padding: 2px 4px 2px 10px; }
.fx-f input { width: 92px; border: 0; background: none; font-size: 16px; font-weight: 700; padding: 6px 0; outline: none; }
.fx-c { font-weight: 700; color: var(--ink-2); padding-right: 8px; }
.fx-sel { border: 0; background: rgba(21,23,28,.06); border-radius: 9px; padding: 5px 6px; font-weight: 700; font-size: .82rem; }
.fx-swap { color: var(--ink-3); }
.fx-r { font-size: .76rem; color: var(--ink-2); flex: 1 1 160px; min-width: 0; }
.vh-acts .btn.on { background: rgba(31,111,235,.12); border-color: rgba(31,111,235,.3); }
@media (max-width: 980px) { .fx-f input { width: 76px; } }
/* telefono: anche in Mappa Luoghi la mappa resta in alto mentre scorri l'elenco */
@media (max-width: 980px) {
  body[data-section="luoghi"] .mapcol { position: sticky; top: calc(-1 * var(--mtop, 0px)); z-index: 20; }
  body[data-section="luoghi"] .map { height: 40vh; min-height: 240px; box-shadow: 0 12px 26px -12px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.85); }
}
@media (max-width: 980px) { body[data-section="luoghi"] .item, body[data-section="luoghi"] .gtitle { scroll-margin-top: calc(40vh + 24px); } }
@media (max-width: 980px) { body[data-section="luoghi"] .gtitle { top: calc(40vh + 12px); } }

.tipo.zero { opacity: .5; cursor: default; }
.tipo.zero .tk { visibility: hidden; }
#fx-voto[hidden] { display: none; }
#fx-mio { grid-template-columns: 1fr 1fr; }

body[data-cat="visitare"] #mioseg button[data-m] { display: none; }
body[data-cat="visitare"] .mioseg { grid-template-columns: 1fr; }
body[data-cat="visitare"] #mio-n { display: none; }

/* =====================================================================
   I TUOI LUOGHI · v2 — impostazione stile Apple Maps
   computer: pannello a sinistra + mappa grande · telefono: mappa piena + foglio che scorre
   ===================================================================== */
#app-luoghi.lx { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 12px; padding: 12px; }
#app-luoghi .lpanel { order: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; border-radius: 28px; border: 1px solid var(--glass-edge); margin: 0; }
#app-luoghi .mapcol { order: 2; display: flex; padding: 0; min-width: 0; min-height: 0; }
#app-luoghi .map { flex: 1; height: auto; min-height: 0; border-radius: 28px; }

/* testa del pannello */
.lp-head { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 8px; }
.grab { display: none; }
#app-luoghi .mr-nav { display: block; }
#app-luoghi .mr-nav .sections { display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 3px; gap: 3px; border-radius: 14px; background: rgba(21,23,28,.06); border: 0; box-shadow: inset 0 1px 2px rgba(40,30,60,.06); }
#app-luoghi .mr-nav .sec { justify-content: center; border-radius: 11px; padding: 7px 10px; font-size: .86rem; }
#app-luoghi .mr-nav .sec.on { background: #fff; box-shadow: 0 2px 8px -2px rgba(40,30,60,.25); }
#app-luoghi .cats-wrap { padding: 0; border: 0; margin: 0; }
#app-luoghi .cats-wrap .flabel { display: none; }
#app-luoghi .seg.cats { gap: 8px; }
#app-luoghi .seg.cats .catbtn { flex-direction: row; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 16px; transform: none; }
#app-luoghi .seg.cats .catbtn .cb-ic { font-size: 1.2rem; margin: 0; }
#app-luoghi .seg.cats .catbtn .cb-t { font-size: .9rem; flex: 1; min-width: 0; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app-luoghi .seg.cats .catbtn .cb-n { display: none; flex: none; font-size: .74rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: rgba(21,23,28,.07); color: var(--ink-2); }
#app-luoghi .seg.cats .catbtn.on .cb-n { background: rgba(255,255,255,.28); color: #fff; }

/* filtri rapidi: chip in una riga che scorre */
.chips { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 2px 12px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(21,23,28,.09);
  background: rgba(255,255,255,.85); color: var(--ink); font: 600 .84rem/1 var(--font); white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .12s; }
.chip:hover { background: #fff; border-color: rgba(21,23,28,.16); }
.chip:active { transform: scale(.96); }
.chip.on { background: var(--ink); color: #fff; border-color: transparent; }
body[data-cat="mangiare"] .chip.on { background: #e5533f; }
body[data-cat="visitare"] .chip.on { background: #1f8a65; }
.chip.ch-sel select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }

/* riga di stato (posizione, distanza, risposta AI): compare solo se serve */
#app-luoghi .lp-status { flex: none; display: block; padding: 0 12px; }
#app-luoghi .lp-status .mr-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; padding-bottom: 8px; }
#app-luoghi .lp-status:not(:has(#origin:not([hidden]), #rangebox:not([hidden]), #aichip:not([hidden]), #near-msg:not(:empty))) { display: none; }
#app-luoghi #open-filters, #app-luoghi #recent-m, #side #recent-d { display: none !important; }
#app-luoghi #near-msg { width: 100%; margin: 0; font-size: .8rem; }
#app-luoghi #near-msg:empty { display: none; }
#app-luoghi .lp-status .origin { padding: 5px 5px 5px 11px; font-size: .82rem; }

/* intestazione elenco ed elenco */
#app-luoghi .lhead { padding: 8px 16px 10px; border-top: 1px solid rgba(21,23,28,.06); border-bottom: 0; }
#app-luoghi .list { padding: 0 8px 24px; }
#app-luoghi .gtitle { top: 0 !important; border-radius: 12px; }
#app-luoghi .item, #app-luoghi .gtitle { scroll-margin-top: 0 !important; }
#app-luoghi .ai { border-radius: 0; max-height: 46vh; display: flex; flex-direction: column; }
#app-luoghi .ai[hidden] { display: none; }
#app-luoghi .ai .msgs { flex: 1; min-height: 0; }

/* cassetto dei filtri: sempre a scomparsa, anche da computer */
#side.side { position: fixed; z-index: 80; top: 0; bottom: 0; left: 0; width: min(380px, 92vw); margin: 0; border-radius: 0 28px 28px 0; padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 28px;
  transform: translateX(-104%); transition: transform .32s cubic-bezier(.2,.8,.2,1); overflow-y: auto; background: rgba(255,255,255,.97); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 30px 60px -20px rgba(20,16,40,.45); }
#side.side.open { transform: none; }
#side.side .mob, #side #side-x { display: inline-flex; }
.scrim { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* comandi sulla mappa: bottoni rotondi in alto a destra, filtro vista in alto a sinistra */
#app-luoghi .mapctl { top: 12px; left: 12px; right: 12px; }
#app-luoghi .mapctl .mapfab { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
#app-luoghi .mapctl .mf-l { display: none; }
#app-luoghi .mapctl .mapsw { height: 38px; font-size: .8rem; }
#app-luoghi .card { left: 14px; bottom: 14px; }

@media (min-width: 981px) and (max-width: 1180px) { #app-luoghi.lx { grid-template-columns: 370px minmax(0, 1fr); } #app-luoghi .seg.cats .catbtn { padding: 9px 10px; gap: 7px; } #app-luoghi .seg.cats .catbtn .cb-ic { font-size: 1.05rem; } #app-luoghi .seg.cats .catbtn .cb-t { font-size: .84rem; } }

/* ---------- telefono: mappa a tutto schermo + foglio ---------- */
@media (max-width: 980px) {
  body[data-section="luoghi"] { overflow: hidden; height: 100dvh; overscroll-behavior: none; }
  #app-luoghi.lx { display: block; position: fixed; left: 0; right: 0; padding: 0; margin: 0; height: auto; overflow: hidden; }
  #app-luoghi .mapcol { position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--peek, 190px) - 22px); }
  #app-luoghi .map { height: 100%; }
  #app-luoghi .lpanel { position: absolute; top: 0; height: 100%; z-index: 30; border-bottom: 0; transition: transform .38s cubic-bezier(.2,.85,.2,1); touch-action: auto; }
  #app-luoghi .lp-head, #app-luoghi .lhead, #app-luoghi .prow { touch-action: none; user-select: none; -webkit-user-select: none; }
  #app-luoghi .lp-head { padding: 4px 12px 8px; gap: 8px; }
  .grab { display: block; align-self: center; width: 64px; height: 18px; border: 0; background: none; padding: 0; cursor: grab; }
  .grab span { display: block; width: 40px; height: 5px; margin: 6px auto; border-radius: 999px; background: rgba(21,23,28,.22); }
  #app-luoghi .mr-nav { display: none; }
  #app-luoghi .seg.cats .catbtn { padding: 8px 10px; gap: 7px; }
  #app-luoghi .seg.cats .catbtn .cb-t { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #app-luoghi .seg.cats .catbtn .cb-ic { font-size: 1.05rem; }
  #app-luoghi .seg.cats .catbtn .cb-n { display: none; }
  #app-luoghi .lpanel[data-snap="peek"] .list { overflow: hidden; }
  #app-luoghi .ai { max-height: 52vh; }
  #app-luoghi .card { left: 10px; right: 10px; width: auto; max-height: calc(100% - 80px); overflow-y: auto; }
  #app-luoghi .mapctl .mapsw { font-size: .74rem; }
  #app-luoghi .mapctl .gpsbtn, #app-luoghi .mapctl .mapfab { width: 40px; height: 40px; }
  #app-luoghi .pickbar { bottom: 30px; }
  .toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* barra delle sezioni in basso (telefono, entrambe le sezioni) */
.sections.tabbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; width: auto;
  padding: 6px 14px calc(6px + env(safe-area-inset-bottom, 0px)); border-radius: 0; border: 0; border-top: 1px solid rgba(21,23,28,.08);
  background: #fff !important; box-shadow: 0 -6px 20px -12px rgba(30,24,50,.25); }
.sections.tabbar .sec { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px; border-radius: 14px; font-size: .72rem; font-weight: 700; color: var(--ink-3); background: none !important; box-shadow: none !important; }
.sections.tabbar .sec > span:first-child { font-size: 1.25rem; line-height: 1; filter: grayscale(1) opacity(.6); transition: filter .2s; }
.sections.tabbar .sec.on { color: var(--ink); }
.sections.tabbar .sec.on > span:first-child { filter: none; }

body[data-section="viaggi"] #side { display: none; }
#side .side-done { position: sticky; bottom: calc(-28px + env(safe-area-inset-bottom, 0px)); margin: 16px -20px -28px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(255,255,255,0), #fff 30%); }
#side .side-done .btn { width: 100%; justify-content: center; height: 46px; font-size: .95rem; }
#side .footside { margin-top: 10px; }

/* ===== sfondo: pastello tenue ed elegante (nebbia azzurra, salvia, lavanda) ===== */
body { background: #eef2f5 !important; }
body::before { background:
  radial-gradient(48% 42% at 8% 6%, #dfe8f4 0%, transparent 70%),
  radial-gradient(42% 46% at 94% 12%, #e7e3f3 0%, transparent 70%),
  radial-gradient(50% 44% at 82% 94%, #dcece6 0%, transparent 70%),
  radial-gradient(44% 46% at 12% 92%, #f1ece3 0%, transparent 70%),
  linear-gradient(135deg, #f2f5f8, #edf1f0) !important; }
body::after { background:
  radial-gradient(48% 42% at 8% 6%, #dcebe6 0%, transparent 70%),
  radial-gradient(42% 46% at 94% 12%, #dfe9f4 0%, transparent 70%),
  radial-gradient(50% 44% at 82% 94%, #e6e3f2 0%, transparent 70%),
  radial-gradient(44% 46% at 12% 92%, #eef0e4 0%, transparent 70%),
  linear-gradient(135deg, #f0f5f3, #eef2f6) !important; }

/* ===== barra "Zona" al centro dell'intestazione ===== */
.omni.zbar { position: relative; display: flex; align-items: center; gap: 6px; flex: 1; max-width: 680px; height: 48px; padding: 4px 4px 4px 4px; border-radius: 999px;
  background: rgba(255,255,255,.78); border: 1px solid rgba(21,23,28,.08); box-shadow: inset 0 1px 2px rgba(40,30,60,.05); }
.omni.zbar:focus-within { background: #fff; box-shadow: 0 0 0 4px rgba(31,111,235,.12); border-color: #a9c6f5; }
.z-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; max-width: 46%; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: rgba(21,23,28,.05); cursor: pointer; text-align: left; transition: background .2s; }
.z-btn:hover { background: rgba(21,23,28,.09); }
.z-btn.on { background: rgba(31,111,235,.12); }
.z-btn .z-ic { font-size: 1rem; }
.z-l { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.z-l small { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.z-l b { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-btn.on .z-l b { color: #1f5fd6; }
.z-car { font-size: .7rem; color: var(--ink-3); }
.z-form { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.z-form input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 500 15px var(--font); color: var(--ink); padding: 8px 6px; -webkit-appearance: none; appearance: none; }
.z-form input::-webkit-search-cancel-button { display: none; }
.z-form .go { width: 38px; height: 38px; flex: none; }
.z-pop { position: absolute; z-index: 95; top: calc(100% + 8px); left: 0; right: 0; min-width: 300px; max-height: min(70vh, 520px); overflow-y: auto; padding: 8px; border-radius: 22px;
  background: rgba(255,255,255,.98); border: 1px solid rgba(21,23,28,.08); box-shadow: 0 24px 50px -18px rgba(30,24,50,.35); }
.zs-h { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 4px; }
.zs-i { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 14px; cursor: pointer; }
.zs-i:hover, .zs-i.on { background: rgba(31,111,235,.08); }
.zs-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(21,23,28,.05); font-size: 1.05rem; }
.zs-t { display: flex; flex-direction: column; min-width: 0; }
.zs-t b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-t small { font-size: .78rem; color: var(--ink-3); }
.z-zone { padding: 14px 16px 16px; max-width: 440px; right: auto; }
.zp-head { display: flex; align-items: center; justify-content: space-between; }
.zp-head b { font-size: 1rem; }
.zp-hint { margin: 4px 0 12px; font-size: .84rem; color: var(--ink-2); }
.z-zone .geobar { display: grid !important; grid-template-columns: 1fr !important; gap: 8px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.z-zone .gf { border: 1px solid rgba(21,23,28,.09) !important; border-radius: 14px; padding: 7px 12px !important; background: rgba(21,23,28,.03); }
.zp-acts { display: flex; gap: 8px; margin-top: 14px; }
.zp-acts .btn.solid { margin-left: auto; }
body[data-section="viaggi"] .omni.zbar { visibility: hidden; }

/* ===== pannello: Categorie + giudizio ===== */
.prow { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 2px 12px 10px; }
.prow-1 { display: flex; gap: 6px; }
.catpick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px 0 10px; border-radius: 16px; border: 1px solid rgba(21,23,28,.09); background: rgba(255,255,255,.85); cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }
.catpick:hover { background: #fff; border-color: rgba(21,23,28,.18); }
.catpick .cp-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(21,23,28,.05); font-size: 1.05rem; }
.cp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.cp-t small { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cp-t b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-car { color: var(--ink-3); font-size: .75rem; }
.catpick.on { border-color: currentColor; }
body[data-cat="mangiare"] .catpick.on { color: #d9443a; } body[data-cat="visitare"] .catpick.on { color: #1f8a65; }
.catpick.on .cp-t b { color: inherit; } .catpick.on .cp-t small, .catpick.on .cp-car { color: inherit; opacity: .75; }
.prow-2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.prow-2.solo { grid-template-columns: minmax(0, 1fr); }
.prow-2 .chip { justify-content: center; width: 100%; padding: 0 8px; }
#side #sec-mio { display: none; }
#side .fsec#sec-tipo { border-top: 0; padding-top: 4px; }
#side #sec-tipo .flabel { display: none; }

/* ===== sulla mappa: Aperti ora, Recenti, Vicino a me ===== */
.mapchips { display: contents; }
.mapctl .chip.mchip { height: 38px; background: rgba(255,255,255,.96); border-color: transparent; box-shadow: 0 6px 18px -6px rgba(0,0,0,.3), inset 0 1px 0 #fff; }
.mapctl .chip.mchip.on { color: #fff; }
.mapctl .chip.mchip:nth-child(1).on { background: #1f9d55; }
.mapctl .chip.mchip:nth-child(2).on { background: #6a4be0; }
#app-luoghi .mapctl { flex-wrap: wrap; row-gap: 8px; }
#app-luoghi .mapctl .mapsw { order: 1; } #app-luoghi .mapctl .mapchips { order: 2; } #app-luoghi .mapctl .grow { order: 3; } #app-luoghi .mapctl .gnear { order: 4; } #app-luoghi .mapctl .mapfab { order: 5; }
#app-luoghi .mapctl .gpsbtn { width: auto; height: 44px; padding: 0 16px 0 13px; gap: 7px; display: inline-flex; align-items: center; border-radius: 999px; color: #1f5fd6; background: #fff; border: 1.5px solid rgba(31,111,235,.35); box-shadow: 0 8px 20px -8px rgba(31,95,214,.55), inset 0 1px 0 #fff; }
#app-luoghi .mapctl .gpsbtn svg { transform: none; }
#app-luoghi .mapctl .gps-l { font-weight: 800; font-size: .86rem; white-space: nowrap; }
#app-luoghi .mapctl .gpsbtn.on { background: linear-gradient(160deg, #3b8bff, #1f5fd6); color: #fff; border-color: transparent; }
@media (max-width: 980px) {
  .omni.zbar { height: 46px; flex-basis: 100%; }
  .z-btn { max-width: 42%; padding: 0 10px 0 8px; height: 38px; }
  .z-l b { font-size: .84rem; }
  .z-form input { font-size: 16px; }
  .z-pop { left: -4px; right: -4px; min-width: 0; }
  .z-zone { max-width: none; right: -4px; }
  .catpick { height: 44px; }
  .prow { padding: 0 12px 8px; gap: 7px; }
  #app-luoghi .mapctl .mapsw { height: 36px; }
  #app-luoghi .mapctl .chip.mchip { height: 36px; padding: 0 11px; font-size: .8rem; }
}
#app-luoghi .mapctl .chip.mchip { order: 2; }
@media (max-width: 980px) {
  .omni.zbar { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; flex: 1 1 100%; }
  .z-form, .z-form input { min-width: 0; width: 100%; }
  .z-form input { width: 0; }
}

/* Aggiunti di recente: largo sotto Provati/Da provare/Voto · Distanza sulla mappa */
.prow > .chip.ch-recent { width: 100%; justify-content: center; }
.prow > .chip.ch-recent.on { background: #6a4be0; }
#app-luoghi .mapctl .mr-range { order: 2; }
#app-luoghi .mapctl .mr-range select { height: 38px; border: 0; background-color: rgba(255,255,255,.96); box-shadow: 0 6px 18px -6px rgba(0,0,0,.3), inset 0 1px 0 #fff; font-weight: 700; font-size: .84rem; padding: 0 30px 0 13px; border-radius: 999px; color: var(--ink); }
#app-luoghi .mapctl .mr-range.on select { background-color: #1f5fd6; color: #fff; }
#app-luoghi .mapctl .mr-range[hidden] { display: none; }

/* =====================================================================
   I TUOI VIAGGI · v2 — stesso stile, sfondo sabbia e salvia
   ===================================================================== */
body[data-section="viaggi"] { background: #f4efe7 !important; }
body[data-section="viaggi"]::before { opacity: 1 !important; background:
  radial-gradient(48% 42% at 6% 8%, #efe3cf 0%, transparent 70%),
  radial-gradient(42% 46% at 96% 10%, #e3ebdc 0%, transparent 70%),
  radial-gradient(50% 44% at 84% 94%, #f1e4d6 0%, transparent 70%),
  radial-gradient(44% 46% at 10% 92%, #e2e9e6 0%, transparent 70%),
  linear-gradient(135deg, #f7f2ea, #f1efe6) !important; }
body[data-section="viaggi"]::after { opacity: 0 !important; }
body[data-section="viaggi"] .omni.zbar { display: none; }

/* computer: panoramica = lista | contenuto | mappa grande */
.vapp { grid-template-columns: 300px minmax(0, 1fr) minmax(360px, 40%) !important; }
.vside { border-radius: 28px !important; }
.vmap { border-radius: 28px !important; }
.vgrab, .vlistbtn { display: none; }
.vh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vh-top .vback { margin: 0; }
/* dentro una città: la lista va a scomparsa, spazio a scheda e mappa */
body[data-vcity="1"] .vapp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important; }
body[data-vcity="1"] .vside { position: fixed; z-index: 85; top: 0; bottom: 0; left: 0; width: min(340px, 90vw); margin: 0; border-radius: 0 28px 28px 0 !important; padding-top: calc(18px + env(safe-area-inset-top, 0px));
  transform: translateX(-104%); transition: transform .32s cubic-bezier(.2,.8,.2,1); background: rgba(255,253,249,.98) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 30px 60px -20px rgba(40,30,20,.4); display: block !important; overflow-y: auto; }
body[data-vcity="1"][data-vlist="1"] .vside { transform: none; }
.vscrim { display: none; }
body[data-vcity="1"][data-vlist="1"] .vscrim { display: block; position: fixed; inset: 0; z-index: 84; background: rgba(30,24,20,.3); }
body[data-vcity="1"] .vlistbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(21,23,28,.1); background: rgba(255,255,255,.8); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: .82rem; color: var(--ink-2); cursor: pointer; }
body[data-vcity="1"] .vlistbtn:hover { background: #fff; color: var(--ink); }
@media (min-width: 981px) and (max-width: 1280px) { .vapp { grid-template-columns: 260px minmax(0, 1fr) minmax(300px, 36%) !important; } }

/* telefono: dentro una città mappa piena + scheda che scorre dal basso */
@media (max-width: 980px) {
  body[data-section="viaggi"][data-vcity="1"] { overflow: hidden; height: 100dvh; overscroll-behavior: none; }
  body[data-section="viaggi"][data-vcity="1"] #sez-viaggi { padding-bottom: 0; }
  body[data-vcity="1"] .vapp { position: fixed; left: 0; right: 0; top: calc(var(--hdrb, 70px) + 6px); bottom: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 0 !important; margin: 0; display: block !important; height: auto !important; overflow: hidden; }
  body[data-vcity="1"] .vmapcol { position: absolute !important; left: 0; right: 0; top: 0; bottom: 128px; padding: 0 8px !important; z-index: 1; background: none !important; }
  body[data-vcity="1"] .vmap { height: 100% !important; min-height: 0 !important; border-radius: 24px !important; }
  body[data-vcity="1"] .vmain { position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 5; overflow-y: auto; padding: 0 12px calc(var(--sy, 0px) + 30px) !important; border-radius: 26px 26px 0 0;
    background: rgba(252,249,244,.98); box-shadow: 0 -10px 34px -12px rgba(40,30,20,.35); transition: transform .38s cubic-bezier(.2,.85,.2,1); will-change: transform; overscroll-behavior: contain; }
  body[data-vcity="1"] .vmain[data-snap="peek"] { overflow: hidden; }
  body[data-vcity="1"] .vgrab { display: block; position: sticky; top: 0; z-index: 9; width: calc(100% + 24px); margin: 0 -12px; height: 24px; background: rgba(252,249,244,.98); touch-action: none; border-radius: 26px 26px 0 0; }
  body[data-vcity="1"] .vhero.city { margin-top: 2px; }
}
@media (max-width: 980px) {
  #app-luoghi .mapctl { bottom: 30px; align-content: flex-start; }
  #app-luoghi .mapctl .mapfab { position: absolute; right: 0; bottom: 0; }
  #app-luoghi .card { bottom: 64px; }
}
@media (max-width: 980px) { #app-luoghi .mapctl .mapfab { top: auto; } }

/* ===== assistente: finestra al centro sotto la barra Zona ===== */
.ai.aiwin { position: fixed; z-index: 92; top: calc(var(--hdrb, 80px) + 10px); left: 50%; transform: translateX(-50%); width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - var(--hdrb, 80px) - 40px);
  display: flex; flex-direction: column; border-radius: 26px; border: 1px solid rgba(21,23,28,.08); overflow: hidden;
  background: linear-gradient(180deg, rgba(246,241,255,.98), rgba(255,255,255,.98) 140px) !important; box-shadow: 0 30px 70px -24px rgba(40,30,80,.45); animation: aiIn .28s cubic-bezier(.2,.85,.2,1); }
.ai.aiwin[hidden] { display: none !important; }
@keyframes aiIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.aiwin .ai-head { padding: 14px 16px 8px; flex-wrap: nowrap; border-bottom: 1px solid rgba(21,23,28,.06); }
.aiwin .ai-head strong { font-size: 1.05rem; }
.aiwin .msgs { flex: 1; min-height: 120px; max-height: none !important; overflow-y: auto; padding: 14px 18px; gap: 12px; }
.aiwin .msg { font-size: .96rem; line-height: 1.5; }
.aiwin .ai-follow { border-top: 1px solid rgba(21,23,28,.06); padding: 10px 14px 14px; background: rgba(255,255,255,.9); }
.aiwin .x.aimin { font-size: 1.2rem; line-height: 1; }
.aibub { position: fixed; z-index: 91; top: calc(var(--hdrb, 80px) + 10px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px;
  background: linear-gradient(120deg, #7b4df0, #ff5a7a); color: #fff; font: 700 .86rem var(--font); cursor: pointer; box-shadow: 0 12px 28px -10px rgba(123,77,240,.7); animation: aiIn .25s ease; }
.aibub[hidden] { display: none; }
.ab-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.8); animation: abPulse 1.6s infinite; }
@keyframes abPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); } 100% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }
body[data-section="viaggi"] .aiwin, body[data-section="viaggi"] .aibub { display: none !important; }
@media (max-width: 980px) {
  .ai.aiwin { left: 8px; right: 8px; width: auto; transform: none; max-height: calc(100dvh - var(--hdrb, 120px) - 90px); border-radius: 22px; animation: none; }
  .aiwin .ai-head { gap: 6px; } .aiwin .ai-head .aiweb { font-size: .72rem; }
  .aibub { top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px) + var(--peek, 190px)); }
}

/* ===== Viaggi v3: panoramica = lista a riquadri + mappa grande ===== */
body[data-section="viaggi"]:not([data-vcity="1"]) .vapp { grid-template-columns: 360px minmax(0, 1fr) !important; }
body[data-section="viaggi"]:not([data-vcity="1"]) .vmain { display: none; }
.vside { display: flex !important; flex-direction: column; padding: 12px 12px 24px !important; overflow-y: auto; border: 1px solid var(--glass-edge); }
.vside-nav:empty { display: none; }
.vside-nav .sections { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; padding: 3px; gap: 3px; border-radius: 14px; background: rgba(21,23,28,.06) !important; border: 0 !important; box-shadow: inset 0 1px 2px rgba(40,30,60,.06) !important; margin-bottom: 12px; }
.vside-nav .sec { justify-content: center; border-radius: 11px; padding: 7px 10px; font-size: .86rem; }
.vside-nav .sec.on { background: #fff; box-shadow: 0 2px 8px -2px rgba(40,30,60,.25); }
.vs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 2px 4px 4px; }
.vs-head h2 { margin: 0; font-size: 1.35rem; }
.vs-head .vs-sub { margin: 2px 0 0; }
.vs-add { flex: none; }
.vnote.sm { font-size: .82rem; padding: 10px 12px; margin: 8px 0 0; border-radius: 14px; }
.vside .vs-country { margin: 18px 4px 8px; font-size: .72rem; }
.vtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vtile { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.8); padding: 0; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.88); text-align: left; cursor: pointer;
  box-shadow: 0 6px 16px -10px rgba(40,30,20,.35); transition: transform .18s, box-shadow .18s; }
.vtile:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(40,30,20,.45); }
.vtile:active { transform: scale(.97); }
.vtile.on { box-shadow: 0 0 0 2px var(--ink), 0 10px 22px -12px rgba(40,30,20,.4); }
.vt-top { position: relative; height: 82px; display: grid; place-items: center; background: linear-gradient(135deg, hsl(var(--h) 70% 86%), hsl(calc(var(--h) + 45) 70% 91%)); }
.vt-cover { font-size: 2.3rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,.12)); }
.vt-flag { position: absolute; left: 9px; top: 7px; font-size: 1.05rem; }
.vt-top .vbadge { position: absolute; right: 7px; top: 7px; font-size: .58rem; padding: 2px 7px; }
.vt-b { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px 11px; min-width: 0; }
.vt-b b { font-family: var(--font-d); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-b small { font-size: .74rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vside .vs-foot { margin-top: 18px; }
@media (min-width: 981px) and (max-width: 1180px) { body[data-section="viaggi"]:not([data-vcity="1"]) .vapp { grid-template-columns: 320px minmax(0, 1fr) !important; } }

/* telefono: mappa piena anche nella panoramica, i viaggi in un foglio dal basso */
@media (max-width: 980px) {
  body[data-section="viaggi"] { overflow: hidden; height: 100dvh; overscroll-behavior: none; }
  body[data-section="viaggi"] #sez-viaggi { padding-bottom: 0 !important; }
  body[data-section="viaggi"] .vapp { position: fixed; left: 0; right: 0; top: calc(var(--hdrb, 70px) + 6px); bottom: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 0 !important; margin: 0; display: block !important; height: auto !important; overflow: hidden; }
  body[data-section="viaggi"] .vmapcol { position: absolute !important; left: 0; right: 0; top: 0; bottom: 128px; padding: 0 8px !important; z-index: 1; background: none !important; display: flex; }
  body[data-section="viaggi"] .vmap { height: 100% !important; min-height: 0 !important; border-radius: 24px !important; }
  body[data-section="viaggi"]:not([data-vcity="1"]) .vside { position: absolute; left: 0; right: 0; top: 0; height: 100%; width: auto; z-index: 5; border-radius: 26px 26px 0 0 !important; transform: none;
    padding: 0 12px calc(var(--sy, 0px) + 30px) !important; background: rgba(252,249,244,.98) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 -10px 34px -12px rgba(40,30,20,.35);
    transition: transform .38s cubic-bezier(.2,.85,.2,1); will-change: transform; overscroll-behavior: contain; }
  body[data-section="viaggi"]:not([data-vcity="1"]) .vside[data-snap="peek"] { overflow: hidden; }
  body[data-section="viaggi"]:not([data-vcity="1"]) .vsgrab { display: block; position: sticky; top: 0; z-index: 9; flex: none; width: calc(100% + 24px); margin: 0 -12px; height: 24px; background: rgba(252,249,244,.98); touch-action: none; border-radius: 26px 26px 0 0; }
  body[data-section="viaggi"]:not([data-vcity="1"]) .vmain { display: none !important; }
  .vtiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  body[data-vcity="1"] .vside .vsgrab { display: none; }
}
@media (max-width: 980px) { body[data-vcity="1"][data-vlist="1"] .vapp { z-index: 70; } }
@media (max-width: 980px) { #app-luoghi.lx, body[data-section="viaggi"] .vapp { overflow: clip; } body[data-vcity="1"][data-vlist="1"] .vapp { overflow: visible; }
  .aiwin #ai-new { font-size: .8rem; } }
@media (min-width: 981px) { .aibub { top: auto; bottom: 26px; } }
.aibub { white-space: nowrap; } .aiwin .ai-head strong { white-space: nowrap; } @media (max-width: 980px) { .aiwin .ai-head .aiweb #ai-web-l { display: none; } }

/* ===== elenco I Tuoi Luoghi più compatto ===== */
#app-luoghi .item { gap: 10px; padding: 8px 8px; border-radius: 14px; }
#app-luoghi .i-ic { font-size: 1.02rem; }
#app-luoghi .i-name { font-size: .88rem; line-height: 1.2; }
#app-luoghi .i-meta { font-size: .74rem; margin-top: 1px; }
#app-luoghi .i-note { font-size: .78rem; margin-top: 3px; -webkit-line-clamp: 1; color: var(--ink-2); }
#app-luoghi .item.sel .i-note { -webkit-line-clamp: unset; }
#app-luoghi .i-tags { margin-top: 3px; gap: 4px; }
#app-luoghi .i-tags > * { font-size: .68rem; }
#app-luoghi .i-dist, #app-luoghi .i-date { font-size: .7rem; }
#app-luoghi .i-acts { margin-top: 8px; }
#app-luoghi .gtitle { padding: 6px 11px; font-size: .82rem; margin: 6px 2px 2px; }
#app-luoghi .gt-c { font-size: .72rem; padding: 1px 8px; }
#app-luoghi .lcount { font-size: .98rem; }

/* ===== scheda città compatta ===== */
.vhero.city { padding: 12px 14px 12px; border-radius: 22px !important; margin-bottom: 10px; display: block !important; }
.vhero.city .vh-top { margin-bottom: 6px; }
.vhero.city .vback, .vhero.city .vlistbtn { font-size: .78rem; }
.vhero.city .vh-row { gap: 12px; }
.vhero.city .vh-cover { width: 46px; height: 46px; border-radius: 14px; font-size: 1.6rem; box-shadow: 0 6px 14px -8px rgba(40,30,20,.4); }
.vhero.city h1 { font-size: 1.35rem; line-height: 1.15; }
.vhero.city .vh-flag { font-size: 1.05rem; }
.vhero.city .vh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .78rem; font-weight: 600; margin-top: 2px; }
.vhero.city .vh-meta .vbadge { font-size: .62rem; padding: 2px 7px; }
.vh-notes { margin-top: 8px; font-size: .8rem; color: var(--ink-2); }
.vh-notes summary { cursor: pointer; list-style: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-notes summary::-webkit-details-marker { display: none; }
.vh-notes[open] summary { white-space: normal; }
.vh-notes p { margin: 6px 0 0; font-size: .8rem; }
.vhero.city .vh-acts { margin-top: 10px; gap: 6px; }
.vhero.city .vh-acts .btn.sm { padding: 5px 10px; font-size: .76rem; height: 30px; }
.vhero.city .fxbar { margin-top: 8px; padding: 6px 10px; }
.vatt-wrap { margin-top: 10px; }
.vatt-wrap[hidden] { display: none; }
.vatt-wrap .vatt { box-shadow: none; }
/* sezioni in evidenza */
.vtabs { margin-top: 2px; }

/* ===== assistente di viaggio ===== */
.vaibar { display: none; }
body[data-section="viaggi"] .vaibar { display: flex; align-items: center; gap: 6px; flex: 1; max-width: 640px; height: 46px; padding: 4px 4px 4px 16px; border-radius: 999px; background: rgba(255,255,255,.8); border: 1px solid rgba(21,23,28,.08); }
body[data-section="viaggi"] .vaibar:focus-within { background: #fff; box-shadow: 0 0 0 4px rgba(123,77,240,.14); border-color: #c7b6f5; }
.vaibar input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 500 15px var(--font); }
.vaibar .go { width: 38px; height: 38px; flex: none; background: linear-gradient(120deg, #7b4df0, #ff5a7a); }
.vai-ctx { font-size: .8rem; font-weight: 700; color: var(--ink-2); background: rgba(21,23,28,.05); border-radius: 999px; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.vp-h { font-weight: 800; font-size: .86rem; margin-bottom: 6px; }
.vp-row.ok { border-radius: 12px; }
.vp-row.busy { opacity: .6; }
.vp-t { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.vp-t b { font-size: .9rem; }
.vp-t .vbadge { font-size: .6rem; }
.vp-t small { width: 100%; font-size: .78rem; color: var(--ink-2); line-height: 1.35; }
.vp-t small.vp-info { color: var(--ink-3); }
.vp-ok { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(21,23,28,.1); font-size: 1rem; cursor: pointer; }
.vp-ok { background: #1f9d55; color: #fff; border-color: transparent; }
.btn.vai-sbtn { background: linear-gradient(120deg, rgba(123,77,240,.12), rgba(255,90,122,.1)) !important; border-color: rgba(123,77,240,.25) !important; }
@media (max-width: 980px) {
  body[data-section="viaggi"] .vaibar { order: 3; flex-basis: 100%; max-width: none; height: 44px; }
  body[data-section="viaggi"] .vaibar input { font-size: 16px; }
}
.vlev { font-size: .64rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(21,23,28,.06); color: var(--ink-2); white-space: nowrap; }
.vlev.imperdibile { background: #fff2cc; color: #8a5a00; } .vlev.chicca { background: #ece4ff; color: #5b3fd0; } .vlev.insolito { background: #e2f1ff; color: #1f5fd6; } .vlev.autentico { background: #e3f5ea; color: #1f7a45; } .vlev.consigliato { background: #f0f2f5; color: #4b5260; }

/* elenco: deve poter scorrere dentro il pannello */
#app-luoghi .list { min-height: 0; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
/* pulsante Azzera filtri */
.cp-reset { flex: none; width: 64px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 16px; border: 0; cursor: pointer;
  background: #e5533f; color: #fff; box-shadow: 0 6px 16px -8px rgba(229,83,63,.8); }
body[data-cat="visitare"] .cp-reset { background: #1f8a65; box-shadow: 0 6px 16px -8px rgba(31,138,101,.8); }
.cp-reset span { font-size: 1.15rem; line-height: 1; font-weight: 800; }
.cp-reset small { font-size: .62rem; font-weight: 800; letter-spacing: .02em; }
.mbreak { display: none; }
@media (max-width: 980px) {
  .cp-reset { height: 44px; width: 58px; }
  /* comandi mappa: 1) filtro vista  2) distanza ... vicino a me  3) aperti ora */
  #app-luoghi .mapctl .mbreak { display: block; flex-basis: 100%; height: 0; }
}
#app-luoghi .list { overflow-y: auto !important; overflow-x: hidden; flex: 1 1 auto; }
@media (max-width: 980px) {
  /* telefono: in alto Filtra lista + Vicino a me, sotto Distanza, sotto Aperti ora */ #app-luoghi .mapctl .gnear { order: 2; margin-left: auto; }
  #app-luoghi .mapctl .mbreak.b1 { order: 3; }
  #app-luoghi .mapctl .mbreak.b2 { order: 5; } #app-luoghi .mapctl .chip.mchip { order: 6; }
  #app-luoghi .mapctl .mapsw { padding: 0 10px 0 8px; gap: 6px; }
}
@media (max-width: 980px) {
  #app-luoghi .mapctl .ms-l { font-size: .68rem; }
  #app-luoghi .mapctl { column-gap: 5px; }
}
.vh-edit { border: 0; background: rgba(21,23,28,.06); width: 26px; height: 26px; border-radius: 50%; font-size: .72rem; cursor: pointer; vertical-align: middle; margin-left: 4px; transition: background .2s; }
.vh-edit:hover { background: rgba(21,23,28,.12); }
.vmap .vgmaps { text-decoration: none; color: var(--ink); font-weight: 700; font-size: .84rem; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: 0 8px 20px -8px rgba(0,0,0,.35); }
.vmap .vgmaps[hidden] { display: none; }
@media (max-width: 980px) { .vmap .vgmaps { bottom: auto; left: 58px; height: 40px; font-size: .78rem; } }

/* ===== pannello Assistente di viaggio ===== */
.vpanel { position: fixed; inset: 0; z-index: 120; background: rgba(30,24,40,.35); display: flex; align-items: center; justify-content: center; padding: 20px; }
.vpanel[hidden] { display: none; }
body.vp-on { overflow: hidden; }
.vp-box { width: min(880px, 100%); height: min(88dvh, 860px); display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: #fdfcfa; box-shadow: 0 40px 90px -30px rgba(30,20,60,.55); animation: aiIn2 .25s cubic-bezier(.2,.85,.2,1); }
@keyframes aiIn2 { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.vp-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; background: linear-gradient(120deg, rgba(123,77,240,.12), rgba(255,90,122,.1)); }
.vp-head > b { font-size: 1.08rem; font-family: var(--font-d); flex: 1; white-space: nowrap; }
.vp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin: 0 14px; border-radius: 14px; background: rgba(21,23,28,.06); }
.vp-tab { border: 0; background: none; border-radius: 11px; padding: 9px 6px; font: 700 .86rem var(--font); color: var(--ink-2); cursor: pointer; }
.vp-tab.on { background: #fff; color: var(--ink); box-shadow: 0 3px 10px -4px rgba(40,30,60,.3); }
.vp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 16px 18px; display: flex; flex-direction: column; }
.vp-sec { margin-top: 14px; }
.vp-l { font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.vp-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.vp-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 18px; border: 2px solid transparent; background: #fff; cursor: pointer; box-shadow: 0 4px 12px -8px rgba(40,30,60,.35); transition: border-color .2s, background .2s; }
.vp-tile .vt-i { font-size: 1.5rem; }
.vp-tile b { font-size: .82rem; text-align: center; line-height: 1.15; }
.vp-tile small { font-size: .7rem; color: var(--ink-3); }
.vp-tile.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, #fff); }
.vp-blk { background: #fff; border-radius: 18px; padding: 12px 14px; margin-bottom: 10px; box-shadow: inset 3px 0 0 var(--c), 0 4px 12px -8px rgba(40,30,60,.3); }
.vp-bh { font-weight: 800; font-size: .92rem; margin-bottom: 8px; }
.vp-n { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.vp-n span { margin-right: 4px; }
.vp-n .chip { min-width: 42px; justify-content: center; height: 30px; }
.vp-f { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-f .chip, .vp-n .chip, .vp-sugg .chip { height: 32px; font-size: .8rem; }
.vpanel .chip.on { background: var(--c, #7b4df0) !important; color: #fff; border-color: transparent; }
.vp-go { margin-top: 14px; align-self: stretch; justify-content: center; height: 48px; font-size: .98rem; background: linear-gradient(120deg, #7b4df0, #ff5a7a) !important; position: sticky; bottom: 0; z-index: 2; box-shadow: 0 10px 24px -10px rgba(123,77,240,.7); }
.vp-rtabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.vp-rtab { flex: none; border: 1px solid rgba(21,23,28,.1); background: #fff; border-radius: 999px; padding: 7px 12px; font: 700 .8rem var(--font); cursor: pointer; white-space: nowrap; }
.vp-rtab.on { background: var(--ink); color: #fff; border-color: transparent; }
.vp-list { background: #fff; border-radius: 18px; padding: 4px 12px 8px; box-shadow: 0 4px 12px -8px rgba(40,30,60,.3); }
.vp-wait { padding: 16px 4px; font-size: .88rem; color: var(--ink-2); }
.vp-row { display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(21,23,28,.06); }
.vp-row:first-child { border-top: 0; }
.vp-row.no { opacity: .4; } .vp-row.no .vp-t b { text-decoration: line-through; }
.vp-hook { border: 0; border-radius: 999px; padding: 2px 9px; margin: 0 4px; font: 800 .72rem var(--font); background: #7b4df0; color: #fff; cursor: pointer; vertical-align: 1px; }
.vp-hook.ok { background: #e3f5ea; color: #1f7a45; cursor: default; }
.vp-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.vp-msgs .msg { font-size: .94rem; line-height: 1.5; }
.vp-msgs .msg p { margin: 0 0 6px; }
.vp-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-in { position: sticky; bottom: -18px; margin: 10px -16px -18px; padding: 10px 14px 14px; background: #fdfcfa; border-top: 1px solid rgba(21,23,28,.06); }
.vp-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-opt { flex: 1 1 140px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 16px; border: 2px solid rgba(21,23,28,.08); background: #fff; cursor: pointer; text-align: left; }
.vp-opt b { font-size: .86rem; } .vp-opt small { font-size: .72rem; color: var(--ink-3); }
.vp-opt.on { border-color: #7b4df0; background: rgba(123,77,240,.08); }
.vp-days { display: flex; align-items: center; gap: 8px; }
.vp-dn { font-weight: 700; font-size: .9rem; }
.vp-dsel { border: 1px solid rgba(21,23,28,.12); border-radius: 12px; padding: 8px 12px; font: 600 .9rem var(--font); background: #fff; }
.vp-warn { margin-top: 10px; padding: 10px 12px; border-radius: 14px; font-size: .84rem; }
.vp-warn.ok { background: #e9f7ef; color: #1f6b42; } .vp-warn.warn { background: #fff4dc; color: #7a5200; }
.vp-wacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vp-ta { width: 100%; min-height: 70px; border: 1px solid rgba(21,23,28,.12); border-radius: 14px; padding: 10px 12px; font: 15px var(--font); resize: vertical; }
.vp-keep { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .84rem; font-weight: 600; }
.vp-done { margin-top: 14px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 4px 12px -8px rgba(40,30,60,.3); display: flex; flex-direction: column; gap: 6px; font-size: .88rem; align-items: flex-start; }
.vp-tip { color: #5b3fd0; }
@media (max-width: 980px) {
  .vpanel { padding: 0; align-items: flex-end; }
  .vp-box { width: 100%; height: calc(100dvh - env(safe-area-inset-top, 0px) - 10px); border-radius: 24px 24px 0 0; }
  .vp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vp-tab { font-size: .76rem; padding: 8px 4px; }
  .vp-in { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .vp-go { margin-bottom: env(safe-area-inset-bottom, 0px); }
}

/* riquadro Assistente di viaggio: chiaramente cliccabile */
.vai-card { position: relative; overflow: hidden; margin: 0 0 12px; padding: 14px 14px 12px; border-radius: 22px; cursor: pointer; color: #fff;
  background: linear-gradient(120deg, #6d4ae8 0%, #9b4fe0 45%, #ff5a7a 100%); box-shadow: 0 14px 30px -14px rgba(123,77,240,.75); transition: transform .18s, box-shadow .18s; }
.vai-card::after { content: ""; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); pointer-events: none; }
.vai-card:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(123,77,240,.85); }
.vai-card:active { transform: scale(.99); }
.vai-card:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.vc-top { display: flex; align-items: center; gap: 12px; }
.vc-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.22); font-size: 1.35rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.vc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vc-tx b { font-family: var(--font-d); font-size: 1.05rem; }
.vc-tx small { font-size: .78rem; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-go { flex: none; background: #fff; color: #6d4ae8; font-weight: 800; font-size: .82rem; padding: 7px 14px; border-radius: 999px; box-shadow: 0 6px 14px -6px rgba(0,0,0,.35); }
.vc-acts { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.vc-a { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.16); color: #fff; font: 700 .8rem var(--font); cursor: pointer; white-space: nowrap; transition: background .2s; }
.vc-a:hover { background: rgba(255,255,255,.3); }
@media (max-width: 980px) { .vc-a { font-size: .74rem; padding: 0 9px; height: 32px; } .vc-tx small { white-space: normal; } }

/* icona della guida turistica (al posto delle stelline AI) */
.gico { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.24em; background: url(icons/guida.svg) center / contain no-repeat; flex: none; }
.gico.w { background-image: url(icons/guida-w.svg); }
.vc-ic .gico { vertical-align: middle; }
.vaibar .gico { width: 24px; height: 24px; margin-left: -4px; }
.vp-head .gico { width: 1.35em; height: 1.35em; }
.aiwin .ai-head .gico { width: 1.3em; height: 1.3em; }
.zs-ic .gico { width: 26px; height: 26px; } .vc-ic .gico { width: 32px; height: 32px; }
/* proposte: si selezionano, poi si aggiungono dalla barra in fondo */
.vp-go.flat { position: static; box-shadow: none; }
.vp-lhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 2px 6px; font-size: .78rem; color: var(--ink-3); }
.vp-lhead .link { font-size: .8rem; font-weight: 700; }
.vp-row { cursor: pointer; border-radius: 14px; padding: 9px 8px; margin: 2px -6px; transition: background .15s; }
.vp-row:hover { background: rgba(123,77,240,.05); }
.vp-row.sel { background: rgba(123,77,240,.1); }
.vp-row.ok { cursor: default; background: rgba(31,157,85,.07); }
.vp-ck { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(21,23,28,.2); display: grid; place-items: center; font-weight: 900; font-size: .8rem; color: #fff; transition: all .15s; }
.vp-row.sel .vp-ck { background: #7b4df0; border-color: #7b4df0; }
.vp-row.sel .vp-ck::after { content: "✓"; }
.vp-row.ok .vp-ck { background: #1f9d55; border-color: #1f9d55; }
.vp-okt { color: #1f7a45 !important; font-weight: 700; }
.vp-abar { position: sticky; bottom: -18px; z-index: 3; margin: 14px -16px -18px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(253,252,250,.97); border-top: 1px solid rgba(21,23,28,.08); box-shadow: 0 -10px 24px -16px rgba(30,20,60,.35); }
.vp-ab-t { font-size: .84rem; font-weight: 700; margin-bottom: 8px; }
.vp-ab-b { display: flex; gap: 8px; }
.vp-ab-b .btn { flex: 1; justify-content: center; height: 44px; font-size: .9rem; }
.vp-ab-b .btn.solid { background: linear-gradient(120deg, #7b4df0, #ff5a7a) !important; }
.vp-ab-b .btn:disabled { opacity: .45; }
.vp-ab-n { font-size: .72rem; color: var(--ink-3); margin-top: 6px; }
@media (max-width: 980px) { .vp-ab-b { flex-direction: column; gap: 6px; } .vp-ab-b .btn { height: 40px; width: 100%; font-size: .86rem; } }
/* logo: la guida turistica */
.logo-ic { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 4px 8px rgba(109,74,232,.3)); }
@media (max-width: 980px) { .logo-ic { width: 28px; height: 28px; } }
.vp-vinfo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 2px 4px; font-size: .76rem; color: #1f7a45; font-weight: 700; border-bottom: 1px solid rgba(21,23,28,.06); }
.vp-minr { display: flex; align-items: center; gap: 5px; color: var(--ink-3); }
.vp-minr .chip { height: 28px; font-size: .74rem; padding: 0 10px; }
.vpanel .vp-minr .chip.on { background: #f5a300 !important; }
.vrate { font-size: .68rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #fff4d6; color: #8a5a00; white-space: nowrap; }
.vrate.top { background: #ffe8a3; } .vrate.low { background: #f1f1f1; color: #777; }
.vlev.temp { background: #ffe3e0; color: #b3261e; }
.vp-hid { font-size: .76rem; color: var(--ink-3); padding: 8px 2px 4px; }
.vp-hid .link { font-size: .76rem; font-weight: 700; }

/* =====================================================================
   PAGINA DI PRESENTAZIONE
   ===================================================================== */
body.ld-on { overflow: hidden; }
.landing { position: fixed; inset: 0; z-index: 300; overflow-y: auto; overflow-x: hidden; color: var(--ink); -webkit-overflow-scrolling: touch; }
.landing[hidden] { display: none; }
.ld-wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.ld-nav { z-index: 5; padding: 12px 0; -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(21,23,28,.05); }
.ld-nav .ld-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ld-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 800 1.05rem var(--font-d); }
.ld-brand img { width: 34px; height: 34px; }
.ld-nav-r { display: flex; align-items: center; gap: 8px; }
.ld-link { border: 0; background: none; font: 700 .9rem var(--font); color: var(--ink-2); cursor: pointer; padding: 8px 10px; }
.ld-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer; font: 800 1rem var(--font); color: #fff; }
.ld-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(123,77,240,.8); }
.ld-btn.sm { height: 40px; padding: 0 18px; font-size: .9rem; }
.ld-btn:disabled { opacity: .45; transform: none; cursor: default; }
.ld-btn .g { width: 22px; height: 22px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.3 0 24 0 14.6 0 6.6 5.4 2.7 13.3l7.9 6.1C12.5 13.6 17.8 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.1 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.4c-.5 2.9-2.2 5.4-4.7 7l7.6 5.9c4.4-4.1 6.8-10.1 6.8-17.4z'/%3E%3Cpath fill='%23FBBC05' d='M10.6 28.6A14.5 14.5 0 0 1 9.5 24c0-1.6.3-3.2.8-4.6l-7.9-6.1A24 24 0 0 0 0 24c0 3.9.9 7.5 2.6 10.7l8-6.1z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.6-5.9c-2.1 1.4-4.9 2.3-8.3 2.3-6.2 0-11.5-4.1-13.4-9.9l-8 6.1C6.6 42.6 14.6 48 24 48z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ld-eyebrow { display: inline-block; padding: 6px 12px; border-radius: 999px; font: 800 .78rem var(--font); letter-spacing: .02em; }
.ld-hero { padding: 48px 0 30px; }
.ld-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.ld-hero h1 { font: 800 clamp(2rem, 4.6vw, 3.5rem)/1.06 var(--font-d); margin: 16px 0 16px; }
.ld-hero h1 em { font-style: normal; background: linear-gradient(120deg, #6d4ae8, #ff5a7a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-hero p { font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); max-width: 540px; margin: 0 0 24px; }
.ld-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.ld-ctas.c { justify-content: center; }
.ld-note { display: block; margin-top: 12px; color: var(--ink-3); font-size: .82rem; font-weight: 600; }
/* telefono finto con la mappa */
.ld-phone { justify-self: center; width: min(320px, 80vw); aspect-ratio: 9 / 18.5; border-radius: 44px; padding: 10px; background: #15161b; box-shadow: 0 40px 80px -30px rgba(40,20,90,.55), inset 0 0 0 2px #2c2d35; transform: rotate(3deg); animation: ldFloat 6s ease-in-out infinite; }
@keyframes ldFloat { 50% { transform: rotate(3deg) translateY(-10px); } }
.ld-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; }
.ld-map { position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%) 0 0 / 120px 120px,
  linear-gradient(0deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%) 0 0 / 120px 120px,
  radial-gradient(40% 30% at 70% 75%, #bfe3f5 0 60%, transparent 61%), radial-gradient(30% 20% at 20% 30%, #cfe8c9 0 60%, transparent 61%), #eef1ea; }
.ld-map .p { position: absolute; font-style: normal; width: 34px; height: 34px; display: grid; place-items: center; font-size: 1rem; animation: ldDrop .7s cubic-bezier(.2,1.6,.4,1) both; }
.ld-map .p { line-height: 1; }
.ld-map .p { text-indent: 0; }
.p1 { left: 18%; top: 22%; animation-delay: .2s !important; } .p2 { left: 60%; top: 16%; animation-delay: .4s !important; } .p3 { left: 40%; top: 38%; animation-delay: .6s !important; }
.p4 { left: 72%; top: 44%; animation-delay: .8s !important; } .p5 { left: 22%; top: 55%; animation-delay: 1s !important; } .p6 { left: 55%; top: 60%; animation-delay: 1.2s !important; }
@keyframes ldDrop { from { opacity: 0; transform: rotate(-45deg) translate(-20px, -20px); } to { opacity: 1; transform: rotate(-45deg); } }
.ld-me { position: absolute; left: 46%; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #1f6feb; box-shadow: 0 0 0 6px rgba(31,111,235,.2); animation: ldPulse 2s infinite; }
@keyframes ldPulse { 50% { box-shadow: 0 0 0 12px rgba(31,111,235,.05); } }
.ld-card { position: absolute; left: 8%; right: 8%; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; font-size: .78rem; animation: ldUp .6s ease both; }
.ld-card b { font-size: .86rem; } .ld-card small { color: var(--ink-2); } .ld-card .ok { color: #1f9d55; font-style: normal; font-weight: 700; }
.ld-card.c1 { animation-delay: 1.4s; }
.ld-card.c2, .ld-card.c3 { flex-direction: row; align-items: center; gap: 10px; }
.ld-card.c2 { animation-delay: 1.8s; } .ld-card.c2 .ig { font-size: 1.3rem; }
.ld-card.c3 { animation-delay: 2.2s; background: linear-gradient(120deg, #f2ecff, #ffeef2); } .ld-card.c3 img { width: 32px; height: 32px; }
.ld-card.c2 div, .ld-card.c3 div { display: flex; flex-direction: column; }
@keyframes ldUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* sezioni */
.ld-sec { padding: 46px 0; }
.ld-h { font: 800 clamp(1.5rem, 3vw, 2.2rem)/1.15 var(--font-d); letter-spacing: -.02em; text-align: center; margin: 0 auto 28px; max-width: 720px; }
.ld-h.l { text-align: left; margin: 12px 0 12px; }
.ld-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ld-f { padding: 22px; border-radius: 24px; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 16px 34px -24px rgba(40,20,90,.45); transition: transform .2s; }
.ld-f:hover { transform: translateY(-4px); }
.ld-f > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(135deg, #f0eaff, #ffe9ef); font-size: 1.5rem; }
.ld-f h3 { margin: 14px 0 6px; font: 800 1.12rem var(--font-d); }
.ld-f p { margin: 0; color: var(--ink-2); line-height: 1.55; font-size: .94rem; }
.ld-try-in { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.ld-try-t p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; }
.ld-demo { padding: 16px; border-radius: 26px; background: #fff; box-shadow: 0 30px 60px -30px rgba(40,20,90,.5); }
.ld-dh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ld-dh img { width: 30px; } .ld-dh small { margin-left: auto; color: #1f7a45; font-weight: 700; font-size: .72rem; }
.ld-di { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 10px; border: 0; border-radius: 14px; background: none; cursor: pointer; transition: background .15s; }
.ld-di:hover { background: rgba(123,77,240,.05); }
.ld-di i { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(21,23,28,.2); display: grid; place-items: center; font-style: normal; color: #fff; font-weight: 900; font-size: .75rem; transition: all .15s; }
.ld-di span { display: flex; flex-direction: column; } .ld-di small { color: var(--ink-3); font-size: .78rem; }
.ld-di.on { background: rgba(123,77,240,.1); } .ld-di.on i { background: #7b4df0; border-color: #7b4df0; } .ld-di.on i::after { content: "✓"; }
.ld-di.done { background: rgba(31,157,85,.08); cursor: default; } .ld-di.done i { background: #1f9d55; border-color: #1f9d55; } .ld-di.done i::after { content: "✓"; }
.ld-dbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(21,23,28,.08); font-size: .86rem; font-weight: 700; }
.ld-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.ld-st { padding: 22px; border-radius: 24px; background: rgba(255,255,255,.6); }
.ld-st b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 1.1rem; }
.ld-st h3 { margin: 12px 0 4px; font: 800 1.1rem var(--font-d); } .ld-st p { margin: 0; color: var(--ink-2); line-height: 1.5; font-size: .94rem; }
.ld-final { padding: 56px 0 40px; text-align: center; }
.ld-final img { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 20px 40px -18px rgba(123,77,240,.8); }
.ld-final h2 { font: 800 clamp(1.6rem, 3.4vw, 2.4rem) var(--font-d); margin: 18px 0 8px; letter-spacing: -.02em; }
.ld-final p { color: var(--ink-2); margin: 0 0 22px; }
.ld-foot { text-align: center; padding: 20px 0 calc(28px + env(safe-area-inset-bottom, 0px)); color: var(--ink-3); font-size: .8rem; }
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } .ld-phone, .ld-map .p, .ld-card { animation: none !important; } }
@media (max-width: 860px) {
  .ld-hero { padding: 26px 0 10px; }
  .ld-hero-in, .ld-try-in { grid-template-columns: 1fr; gap: 28px; } .ld-hero p { margin-left: auto; margin-right: auto; } .ld-ctas { justify-content: center; }
  .ld-phone { width: min(270px, 70vw); }
  .ld-grid, .ld-steps { grid-template-columns: 1fr; }
  .ld-btn { height: 50px; padding: 0 20px; font-size: .95rem; }
  .ld-nav .ld-link { display: none; }
  .ld-brand span { font-size: .95rem; }
  .ld-sec { padding: 30px 0; }
}
.ld-f > span.gi { background: url(icons/guida.svg) center / 30px no-repeat, linear-gradient(135deg, #f0eaff, #ffe9ef); }
.ld-hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
.ld-map .p { transform: none; border-radius: 0; background: none; box-shadow: none; isolation: isolate; animation-name: ldDrop2; }
.ld-map .p::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: #fff; box-shadow: 0 6px 14px -4px rgba(0,0,0,.35); }
@keyframes ldDrop2 { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }

/* ---------- multiutente: trasloco, nome utente, account, pubblico/solo io */
.migbar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 9000; width: min(560px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-2); }
.migbar .mig-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.migbar .mig-t span { font-size: .82rem; color: var(--ink-2); line-height: 1.35; }
.migbar .btn { flex: none; }
.migbar .x { flex: none; border: 0; background: none; font-size: 1.3rem; color: var(--ink-3); padding: 4px 6px; }
@media (max-width: 980px) { .migbar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
.udlg { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px; }
.udlg-box { width: min(420px, 100%); background: var(--surface); border-radius: 22px; padding: 24px 22px 18px; box-shadow: var(--sh-2); display: flex; flex-direction: column; gap: 10px; text-align: center; }
.udlg-ic { font-size: 2rem; }
.udlg-box h3 { margin: 0; font-size: 1.25rem; }
.udlg-box p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.udlg-in { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--line); border-radius: 14px; padding: 0 14px; height: 50px; margin-top: 6px; background: var(--soft); }
.udlg-in:focus-within { border-color: var(--blue); background: var(--surface); }
.udlg-in span { font-weight: 800; color: var(--ink-3); font-size: 1.1rem; }
.udlg-in input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 1.1rem; font-weight: 700; }
.udlg-msg { font-size: .8rem; color: var(--ink-3); min-height: 1.2em; }
.udlg-msg.err { color: var(--danger); }
.udlg-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.macc { display: flex; flex-direction: column; gap: 10px; }
.acc-me { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--soft); border-radius: 14px; font-weight: 700; }
.acc-inv { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: vertical; }
.macc > .btn { align-self: flex-start; }
.acc-wr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: .9rem; }
.acc-wr span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lockb { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 700; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; }
#fx-pub { margin: 4px 0 10px; }
.vpub.off { color: var(--ink-2); }
/* landing in lista d'attesa */
.ld-wait { background: #fff7e6; border-bottom: 1px solid #f3dfb4; }
.ld-wait-in { display: flex; align-items: center; gap: 14px; padding-top: 14px; padding-bottom: 14px; }
.ld-wait-ic { font-size: 1.8rem; }
.ld-wait-in > div:nth-child(2) { flex: 1; min-width: 0; }
.ld-wait-in p { margin: 2px 0 0; font-size: .9rem; color: var(--ink-2); }
.ld-wait-b { display: flex; align-items: center; gap: 6px; flex: none; }
.ld-waiting [data-act="login"] { display: none !important; }
@media (max-width: 640px) { .ld-wait-in { flex-wrap: wrap; } .ld-wait-b { width: 100%; } }

/* ---------- consenso, cerca persone, profilo di un altro, pannello admin */
.cons { text-align: left; max-height: calc(100dvh - 32px); overflow: auto; }
.cons h3, .cons .udlg-ic { text-align: center; }
.cons-l { margin: 4px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--ink-2); }
.cons-links { font-size: .85rem; }
.cons-ck { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; font-weight: 600; padding: 10px 12px; background: var(--soft); border-radius: 12px; cursor: pointer; }
.cons-ck input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--ink); }
.ppl { text-align: left; align-self: start; margin-top: 8vh; }
.ppl-h { display: flex; align-items: center; justify-content: space-between; }
.ppl-h .x { border: 0; background: none; font-size: 1.5rem; color: var(--ink-3); }
.ppl-r { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.ppl-row { width: 100%; border: 0; background: none; text-align: left; }
.ppl-row:hover { background: var(--soft); }
.ppl-row img, .profbar img, .au-r > img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.ppl-av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #e8412c); }
.ppl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ppl-t small { color: var(--ink-3); }
.ppl-go { color: var(--ink-3); font-weight: 700; font-size: .85rem; }
.ppl-me { font-weight: 700; font-size: .85rem; }
#people, #admin { width: 40px; padding: 0; justify-content: center; }
.profbar { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); top: calc(var(--hdrb, 120px) + 10px); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; box-shadow: var(--sh-2); max-width: calc(100vw - 24px); }
.profbar img, .profbar .ppl-av { width: 34px; height: 34px; }
.pb-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pb-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-t small { color: var(--ink-3); font-size: .75rem; }
.profbar .btn { flex: none; }
.acc-me.lk span { font-size: .85rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.acc-me > div { font-weight: 600; font-size: .9rem; min-width: 0; }
.acc-me.danger { background: #fdeeee; }
.acc-me .btn { flex: none; }
.footside .link.sm { font-size: .8rem; color: var(--ink-3); display: block; margin-top: 6px; text-decoration: none; }
.ld-legal { display: block; margin-top: 6px; font-size: .75rem; color: var(--ink-3, #9197a3); }
.ld-legal a, .ld-foot a { color: inherit; }
body.adm-on { overflow: hidden; }
.adm { position: fixed; inset: 0; z-index: 9200; background: var(--bg); display: flex; flex-direction: column; }
.adm-h { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.adm-h h2 { margin: 0; font-size: 1.1rem; }
.adm-h .x { border: 0; background: none; font-size: 1.6rem; color: var(--ink-3); margin-left: auto; }
.adm-tabs { display: flex; gap: 4px; background: var(--soft); border-radius: 99px; padding: 3px; }
.adm-tab { border: 0; background: none; border-radius: 99px; padding: 6px 14px; font-weight: 700; font-size: .85rem; color: var(--ink-2); }
.adm-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.adm-b { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; max-width: 1100px; width: 100%; margin: 0 auto; }
.adm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.adm-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.ak-l { font-size: .78rem; color: var(--ink-2); font-weight: 700; }
.adm-kpi b { font-size: 1.7rem; line-height: 1.1; font-family: var(--font-d); }
.adm-kpi small { color: var(--ink-3); font-size: .74rem; }
.adm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.adm-card h3 { margin: 0; font-size: 1rem; }
.adm-sub { color: var(--ink-3); margin-top: -6px; }
.adm-bars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.ab-c { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; cursor: pointer; }
.ab-b { background: var(--blue); border-radius: 4px 4px 0 0; min-height: 0; opacity: .85; }
.ab-c.on .ab-b, .ab-c:hover .ab-b { opacity: 1; background: #1559c4; }
.ab-x { position: absolute; bottom: -20px; left: 0; font-size: .68rem; color: var(--ink-3); white-space: nowrap; }
.ab-max { position: absolute; right: 16px; top: 14px; font-size: .72rem; color: var(--ink-3); }
.adm-tip { position: absolute; top: -4px; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: .75rem; font-weight: 600; padding: 5px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none; }
.af-r { display: grid; grid-template-columns: minmax(120px, 230px) 1fr auto; align-items: center; gap: 10px; font-size: .86rem; }
.af-l { color: var(--ink-2); }
.af-t { height: 12px; background: var(--soft); border-radius: 99px; overflow: hidden; }
.af-b { height: 100%; background: var(--blue); border-radius: 99px; }
.af-b.g { background: #0e9f9a; }
.af-v { font-size: .82rem; min-width: 70px; text-align: right; }
.adm-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.am { background: var(--soft); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.am b { font-size: 1.25rem; }
.am small { color: var(--ink-2); font-size: .76rem; }
.adm-dev { font-size: .85rem; color: var(--ink-2); margin-top: 4px; font-weight: 600; }
.adm-foot { text-align: center; padding-bottom: 20px; }
.adm-users { display: flex; flex-direction: column; gap: 8px; }
.au-r { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.au-r.ban { opacity: .7; border-color: #f2c4c4; }
.au-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.au-t small { color: var(--ink-3); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.au-t .au-n { color: var(--ink-2); font-weight: 700; }
.au-a { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .adm-kpis, .adm-mini { grid-template-columns: repeat(2, 1fr); }
  .adm-b { padding: 12px; }
  .af-r { grid-template-columns: 1fr auto; } .af-t { grid-column: 1 / -1; grid-row: 2; }
  .au-r { flex-wrap: wrap; } .au-a { width: 100%; justify-content: flex-start; }
  .adm-tabs { order: 3; width: 100%; } .adm-tab { flex: 1; padding: 6px 8px; }
  #people .lbl, #admin .lbl { display: none; }
}

.acc-me { flex-wrap: wrap; }
@media (max-width: 980px) { #admin { display: none !important; } #people { width: 38px; height: 38px; } }
.profbar.inhdr { position: static; transform: none; box-shadow: none; padding: 3px 4px 3px 4px; background: var(--soft); max-width: 340px; }
.profbar.inhdr img, .profbar.inhdr .ppl-av { width: 30px; height: 30px; }
@media (max-width: 980px) { body.viewing #app-luoghi .mapctl, body.viewing .mapctl { top: 66px !important; } }
@media (max-width: 460px) {
  .hdr-r { gap: 4px; }
  .hdr-r .btn, #people { width: 33px; height: 33px; font-size: .9rem; }
  .logo { font-size: .92rem; min-width: 0; }
}
/* landing: fonti di aggiunta ed Esplora */
.ld-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 18px; }
.ld-src span { font-size: .8rem; font-weight: 700; color: var(--ink-3); margin-right: 2px; }
.ld-src i { font-style: normal; font-size: .82rem; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid rgba(123,77,240,.18); box-shadow: 0 6px 16px -12px rgba(40,20,90,.5); }
.ld-hero-t p b, .ld-f p b { color: var(--ink); }
.ld-exp-t { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.ld-exp-t .ld-h { margin: 12px auto 10px; }
.ld-exp-t p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; margin: 0; }
.ld-pr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ld-pc { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px; border-radius: 24px; background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 16px 34px -24px rgba(40,20,90,.45); transition: transform .2s; }
.ld-pc:hover { transform: translateY(-4px); }
.ld-pa { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 1.3rem var(--font-d); margin-bottom: 8px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(123,77,240,.35); }
.ld-pa.a1 { background: linear-gradient(135deg, #ff6b8b, #ffb547); } .ld-pa.a2 { background: linear-gradient(135deg, #7b4df0, #e8412c); } .ld-pa.a3 { background: linear-gradient(135deg, #0e9f9a, #7c9a16); }
.ld-pc b { font: 800 1.05rem var(--font-d); }
.ld-pc small { color: var(--ink-2); font-size: .86rem; }
.ld-pt { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 12px; }
.ld-pt i { font-style: normal; font-size: .76rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: #f3efff; color: #4c34b8; }
.ld-pb { margin-top: auto; border: 0; border-radius: 999px; padding: 9px 14px; font: 800 .84rem var(--font); background: var(--ink); color: #fff; cursor: pointer; }
.ld-soon { text-align: center; margin: 22px auto 0; color: var(--ink-2); font-size: .92rem; }
.ld-soon b { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #fff3d6; color: #8a5a00; font-size: .75rem; margin-right: 4px; }
@media (max-width: 820px) { .ld-pr { grid-template-columns: 1fr; } }
/* configurazione guidata e feedback */
.ob { text-align: left; max-height: calc(100dvh - 32px); overflow: auto; gap: 12px; }
.ob-top { display: flex; align-items: center; justify-content: space-between; }
.ob-dots { display: flex; gap: 6px; }
.ob-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .2s; }
.ob-dots i.done { background: #b9a6f5; }
.ob-dots i.on { width: 22px; background: linear-gradient(90deg, #7b4df0, #e8412c); }
.ob-skip { border: 0; background: none; color: var(--ink-3); font-weight: 700; font-size: .85rem; }
.ob-b { display: flex; flex-direction: column; gap: 10px; }
.ob-b h3 { margin: 0; font-size: 1.3rem; }
.ob-b p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.ob-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 1.8rem; background: linear-gradient(135deg, #f0eaff, #ffe9ef); }
.ob-l { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ob-l li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; }
.ob-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-weight: 800; font-size: .8rem; }
.ob-big { align-self: stretch; justify-content: center; height: 48px; font-size: 1rem; text-decoration: none; display: flex; align-items: center; }
.ob-ok { padding: 10px 12px; border-radius: 12px; background: #e9f7ee; color: #146c2e; font-weight: 700; font-size: .9rem; }
.ob-or { text-align: center; font-size: .8rem !important; color: var(--ink-3) !important; }
.ob-fb { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--soft); font-size: .85rem; color: var(--ink-2); }
.ob-fb .btn { flex: none; }
.ob-again { color: var(--ink-3); font-size: .75rem; text-align: center; }
.fbk { text-align: left; }
.fbk h3, .fbk .udlg-ic { text-align: center; }
.fbk-t { display: flex; gap: 6px; flex-wrap: wrap; }
.fbk-c { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 7px 12px; font-weight: 700; font-size: .85rem; }
.fbk-c.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.fbk-x { width: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px; resize: vertical; font-size: .95rem; }
.fbk-x:focus { outline: none; border-color: var(--blue); }
.footside .link.sm { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.fb-r.read { opacity: .65; }
.fb-h { display: flex; flex-direction: column; gap: 2px; }
.fb-h small { color: var(--ink-3); }
.fb-x { margin: 0; white-space: pre-wrap; font-size: .92rem; }

/* ---------- tre sezioni */
#app-luoghi .mr-nav .sections, .vside-nav .sections, .sections.tabbar, #tnav-slot .sections { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#tnav-slot .sections { display: grid !important; width: 100%; padding: 3px; gap: 3px; border-radius: 14px; background: rgba(21,23,28,.06) !important; border: 0 !important; box-shadow: inset 0 1px 2px rgba(40,30,60,.06) !important; margin-bottom: 12px; }
.mr-nav .sec, .vside-nav .sec, #tnav-slot .sec { font-size: .8rem; padding-left: 6px; padding-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* interruttore I miei / Condivisi */
.spsw { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(21,23,28,.05); margin-top: 8px; }
.sp-o { border: 0; background: none; border-radius: 9px; padding: 6px 8px; font-weight: 700; font-size: .8rem; color: var(--ink-2); }
.sp-o.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.vside-nav .spsw { margin: -4px 0 12px; }

/* ---------- I posti del momento */
.trendsec { min-height: calc(100dvh - var(--hdr)); }
.tapp { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 12px; padding: 12px; height: calc(100dvh - var(--hdr) - 10px - env(safe-area-inset-top, 0px)); }
.tside { overflow-y: auto; padding: 16px 14px 28px; border-radius: var(--r-xl, 24px); background: rgba(255,255,255,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(21,23,28,.06); }
.tmapcol { border-radius: var(--r-xl, 24px); overflow: hidden; min-height: 300px; box-shadow: var(--sh-2); }
#tmap { width: 100%; height: 100%; }
.t-head h2 { margin: 2px 0 2px; font-size: 1.35rem; }
.t-head p { margin: 0 0 12px; color: var(--ink-2); font-size: .9rem; }
.t-where { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.t-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.t-mode { border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 10px; font-weight: 800; font-size: .86rem; }
.t-mode.on { border-color: #e8412c; background: #fff2ef; color: #b52a17; }
.t-search { display: flex; gap: 6px; }
.t-search input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 12px; font-size: .95rem; }
.t-chips { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.t-chips::-webkit-scrollbar { display: none; }
.t-chip { flex: none; border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 6px 11px; font-weight: 700; font-size: .8rem; color: var(--ink-2); }
.t-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.t-status { padding: 10px 12px; border-radius: 12px; background: var(--soft); color: var(--ink-2); font-size: .86rem; margin-bottom: 8px; }
.t-sum { font-size: .78rem; font-weight: 700; color: var(--ink-3); margin: 4px 2px 8px; }
.t-list { display: flex; flex-direction: column; gap: 8px; }
.t-row { display: grid; grid-template-columns: 30px 40px minmax(0, 1fr); grid-template-areas: "r i t" "a a a"; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.t-row:hover { box-shadow: var(--sh-2); }
.t-row.sel { border-color: #e8412c; box-shadow: 0 0 0 2px rgba(232,65,44,.18); }
.t-row.top1 { background: linear-gradient(135deg, #fff8e1, #fff); } .t-row.top2 { background: linear-gradient(135deg, #f3f4f6, #fff); } .t-row.top3 { background: linear-gradient(135deg, #fbefe6, #fff); }
.t-rank { grid-area: r; font: 800 1.05rem var(--font-d); text-align: center; color: var(--ink-3); }
.t-row.top1 .t-rank, .t-row.top2 .t-rank, .t-row.top3 .t-rank { font-size: 1.5rem; }
.t-ic { grid-area: i; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: color-mix(in srgb, var(--c, #888) 14%, white); }
.t-t { grid-area: t; min-width: 0; display: flex; flex-direction: column; }
.t-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-t small { color: var(--ink-3); font-size: .8rem; }
.t-st { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.t-n, .t-hot { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: #fdeef0; color: #b0233f; }
.t-hot { background: #fff1d6; color: #8a5200; }
.t-a { grid-area: a; display: flex; gap: 6px; justify-content: flex-end; }
.t-have { font-size: .8rem; font-weight: 800; color: #146c2e; align-self: center; margin-right: auto; }
.t-empty { display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; border-radius: 16px; background: var(--soft); text-align: center; color: var(--ink-2); font-size: .9rem; }
.tpin { display: flex; align-items: center; gap: 3px; padding: 3px 8px 3px 3px; border-radius: 99px; background: #fff; box-shadow: 0 4px 12px -4px rgba(0,0,0,.35); font-size: .95rem; border: 2px solid #fff; transition: transform .15s; }
.tpin b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: .7rem; }
.tpin.top b { background: linear-gradient(135deg, #ffb547, #e8412c); }
.tpin.sel { transform: scale(1.25); border-color: #e8412c; }
@media (max-width: 980px) {
  .tapp { display: flex; flex-direction: column; height: auto; padding: 0 8px 90px; gap: 10px; }
  .tmapcol { order: -1; height: 36vh; min-height: 220px; margin-top: 8px; }
  .tside { padding: 14px 12px; overflow: visible; }
  #tnav-slot { display: none; }
}

/* ---------- Persone, novità, profilo */
.av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.av-l { display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #e8412c); }
.av.mini { width: 24px; height: 24px; font-size: .7rem; border: 2px solid var(--surface); }
.ppl-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 12px; background: var(--soft); }
.ppl-tab { border: 0; background: none; border-radius: 9px; padding: 7px 6px; font-weight: 700; font-size: .82rem; color: var(--ink-2); }
.ppl-tab.on { color: var(--ink); box-shadow: var(--sh-1); }
.ppl-b { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.ppl-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 12px; }
.ppl-row .ppl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 0; background: none; text-align: left; padding: 0; }
.ppl-row .ppl-t small { color: var(--ink-3); }
.ppl-empty { padding: 16px; border-radius: 14px; background: var(--soft); color: var(--ink-2); font-size: .9rem; text-align: center; line-height: 1.5; }
.btn.fol { flex: none; }
.feed-r { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.feed-r:last-child { border-bottom: 0; }
.feed-t { flex: 1; min-width: 0; font-size: .88rem; display: flex; flex-direction: column; gap: 2px; }
.feed-t small { color: var(--ink-3); font-size: .78rem; }
.feed-a { display: flex; gap: 4px; flex: none; }
.prof { padding: 0; align-items: stretch; place-items: stretch; overflow-y: auto; }
.pf { width: min(720px, 100%); margin: 24px auto; background: var(--surface); border-radius: 28px; overflow: hidden; box-shadow: var(--sh-2); display: flex; flex-direction: column; }
.pf-cov { position: relative; height: 130px; background: radial-gradient(120% 140% at 0% 0%, #ffb547 0%, transparent 55%), radial-gradient(120% 140% at 100% 0%, #7b4df0 0%, transparent 60%), linear-gradient(135deg, #ff6b8b, #7b4df0); }
.pf-x, .pf-sh { position: absolute; top: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); font-size: 1.2rem; display: grid; place-items: center; backdrop-filter: blur(6px); }
.pf-x { right: 12px; font-size: 1.5rem; } .pf-sh { right: 58px; font-size: 1rem; }
.pf-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 20px 6px; gap: 4px; }
.pf-av { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; border: 5px solid var(--surface); box-shadow: 0 10px 30px -10px rgba(60,30,120,.5); font-size: 2.4rem; }
.pf-head h2 { margin: 6px 0 0; font-size: 1.45rem; }
.pf-u { color: var(--ink-2); font-weight: 700; }
.pf-bio { max-width: 460px; color: var(--ink); font-size: .95rem; line-height: 1.45; }
.pf-bio.empty { color: var(--ink-3); font-style: italic; }
.pf-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.pf-note { margin: 4px 20px 0; padding: 8px 12px; border-radius: 12px; background: var(--soft); color: var(--ink-2); font-size: .8rem; text-align: center; }
.pf-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 14px 16px 6px; }
.pf-st { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 16px; }
.pf-st b { font: 800 1.35rem/1.1 var(--font-d); }
.pf-st small { color: var(--ink-2); font-size: .74rem; font-weight: 700; }
.pf-st.lk { cursor: pointer; } .pf-st.lk:hover { background: #efeaff; }
.pf-body { padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.pf-card { border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.pf-card h3 { margin: 0; font-size: 1.05rem; }
.pf-sub { color: var(--ink-3); margin-top: -6px; }
.pf-split { display: flex; height: 34px; border-radius: 12px; overflow: hidden; gap: 2px; }
.pf-sp { display: flex; align-items: center; padding: 0 10px; min-width: 0; color: #fff; font-size: .78rem; font-weight: 800; white-space: nowrap; overflow: hidden; }
.pf-sp span { overflow: hidden; text-overflow: ellipsis; }
.pf-sp.c0 { background: #e8412c; } .pf-sp.c1 { background: #7b4df0; } .pf-sp.c2 { background: #0e9f9a; }
.pf-bar { display: grid; grid-template-columns: minmax(110px, 200px) 1fr auto; gap: 10px; align-items: center; font-size: .85rem; }
.pf-bl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-bt { height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.pf-bb { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff8a5c, #e8412c); }
.pf-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.pf-mini div { background: var(--soft); border-radius: 12px; padding: 8px; text-align: center; display: flex; flex-direction: column; }
.pf-mini small { color: var(--ink-3); font-size: .74rem; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chips span { padding: 5px 10px; border-radius: 99px; background: #f3efff; color: #4c34b8; font-size: .8rem; font-weight: 700; }
.pf-chips.fl span { background: #eaf6ff; color: #12507a; }
.pf-list { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-align: left; transition: transform .15s, box-shadow .15s; }
.pf-list:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.pl-ic { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 1.3rem; background: color-mix(in srgb, var(--c, #888) 15%, white); }
.pl-t { min-width: 0; display: flex; flex-direction: column; }
.pl-t b { font-size: .9rem; } .pl-t small { color: var(--ink-3); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-trips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.pf-trip { flex: 0 0 210px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; border: 0; text-align: left; background: linear-gradient(160deg, #fff3e8, #f3efff); }
.pt-c { font-size: 2rem; }
.pt-t { display: flex; flex-direction: column; } .pt-t small { color: var(--ink-2); font-size: .78rem; }
.pf-pi { width: 34px; height: 34px; border-radius: 10px; background: var(--soft); display: grid; place-items: center; flex: none; }
.pb-av { border: 0; background: none; padding: 0; display: flex; }
.profbar .pb-t { border: 0; background: none; text-align: left; padding: 0; cursor: pointer; }
.profbar .fol { padding: 6px 10px; }
.profbar.shb { background: linear-gradient(135deg, #f3efff, #fff); }
.sh-em { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: #fff; font-size: 1.2rem; flex: none; box-shadow: var(--sh-1); }
.sh-mem { display: flex; align-items: center; gap: 6px; }
.mem-av { display: inline-flex; } .mem-av .av { margin-left: -6px; } .mem-av .av:first-child { margin-left: 0; }
.shm-p { margin: 0; color: var(--ink-2); font-size: .88rem; }
.shm-new { border: 1.5px dashed #b9a6f5; background: #f8f5ff; color: #5b3fd0; border-radius: 14px; padding: 12px; font-weight: 800; }
.shm-l { display: flex; flex-direction: column; gap: 6px; }
.shm-r { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; }
.shm-r.on { border-color: #7b4df0; }
.shm-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shm-t small { color: var(--ink-3); display: flex; align-items: center; gap: 6px; font-size: .78rem; }
.shn { text-align: left; }
.emo-r { display: flex; flex-wrap: wrap; gap: 6px; }
.emo { width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); font-size: 1.15rem; }
.emo.on { border-color: #7b4df0; background: #f3efff; }
.shn-n { border: 1.5px solid var(--line); border-radius: 14px; padding: 11px 12px; font-size: 1rem; font-weight: 700; }
.pk-r { display: flex; flex-direction: column; gap: 4px; }
.pk-o { display: flex; align-items: center; gap: 6px; border: 0; background: var(--soft); border-radius: 10px; padding: 7px 10px; text-align: left; font-size: .88rem; }
.pk-c { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-ch { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 3px; border-radius: 99px; background: #f3efff; font-size: .82rem; font-weight: 700; }
.pk-ch button { border: 0; background: none; font-size: 1rem; color: var(--ink-3); }
.sh-ft { justify-content: space-between !important; flex-wrap: wrap; }
body.sharedsp #fx-nota, body.sharedsp #fx-pub { display: none !important; }
@media (max-width: 640px) {
  .pf { margin: 0; border-radius: 0; min-height: 100%; }
  .pf-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 12px 10px 4px; }
  .pf-st b { font-size: 1.1rem; } .pf-st small { font-size: .66rem; }
  .pf-bar { grid-template-columns: minmax(90px, 140px) 1fr auto; }
}
.udlg.prof { display: block; overflow-y: auto; padding: 0; -webkit-overflow-scrolling: touch; }
.pf-head { position: relative; z-index: 1; }
#tmap { position: relative; }
@media (min-width: 981px) {
  .mr-nav .sec, .vside-nav .sec, #tnav-slot .sec { font-size: .74rem; padding: 7px 4px; gap: 3px; letter-spacing: -.01em; }
}
@media (min-width: 981px) {
  #app-luoghi .mr-nav .sections .sec, .vside-nav .sections .sec, #tnav-slot .sections .sec, .vnav-slot .sections .sec { font-size: .74rem !important; padding: 7px 3px !important; gap: 3px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: center; }
}
.pf-list { width: 100%; min-width: 0; overflow: hidden; }

/* ---------- pannello I Tuoi Luoghi su computer e tablet: più compatto, scorre tutto insieme */
.lp-more { display: none; }
@media (min-width: 981px) {
  #app-luoghi .lpanel { overflow-y: auto !important; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(21,23,28,.25) transparent; }
  #app-luoghi .lpanel::-webkit-scrollbar { width: 6px; } #app-luoghi .lpanel::-webkit-scrollbar-thumb { background: rgba(21,23,28,.25); border-radius: 99px; }
  #app-luoghi .list { overflow: visible !important; flex: none !important; min-height: 0; }
  #app-luoghi .lhead { position: sticky; top: 0; z-index: 6; background: rgba(250,250,253,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 6px 14px 7px !important; }
  #app-luoghi .lp-head { padding-bottom: 4px; }
  #app-luoghi .seg.cats { gap: 6px; }
  #app-luoghi .seg.cats .catbtn { padding: 6px 10px !important; min-height: 0 !important; }
  #app-luoghi .seg.cats .catbtn .cb-t { font-size: .82rem !important; white-space: nowrap; }
  #app-luoghi .seg.cats .catbtn .cb-ic { font-size: 1rem !important; margin: 0 !important; }
  #app-luoghi .catpick { height: 40px !important; }
  #app-luoghi .catpick .cp-ic { width: 26px; height: 26px; font-size: .9rem; }
  #app-luoghi .catpick .cp-t b { font-size: .86rem; } #app-luoghi .catpick .cp-t small { font-size: .6rem; }
  #app-luoghi .prow { gap: 6px !important; padding: 0 12px 8px !important; }
  #app-luoghi .prow .chip { height: 30px !important; font-size: .76rem !important; padding: 0 6px !important; gap: 4px !important; white-space: nowrap; }
  #app-luoghi .prow-2 { gap: 5px !important; }
  #app-luoghi .lhead .lcount, #app-luoghi .lhead b { font-size: .95rem; }
  #app-luoghi .spsw { margin-top: 6px; padding: 2px; } #app-luoghi .sp-o { padding: 4px 6px; font-size: .74rem; }
  #app-luoghi .item { padding-top: 7px; padding-bottom: 7px; }
  .lp-more { display: flex; position: sticky; bottom: 0; z-index: 6; justify-content: center; align-items: flex-end; gap: 8px; padding: 26px 10px 10px; margin-top: -52px; pointer-events: none; background: linear-gradient(rgba(250,250,253,0), rgba(250,250,253,.96) 60%); }
  .lp-more[hidden] { display: none; }
  .lp-more button { pointer-events: auto; border: 0; border-radius: 99px; box-shadow: 0 6px 16px -8px rgba(30,20,60,.5); font-weight: 800; }
  .lpm-dn { background: var(--ink); color: #fff; padding: 7px 14px; font-size: .78rem; animation: lpb 2.4s ease-in-out infinite; }
  .lpm-up { position: absolute; right: 12px; bottom: 10px; width: 34px; height: 34px; background: #fff; color: var(--ink); font-size: 1rem; }
  .lpm-up[hidden] { display: none; }
  .lp-more.end { background: none; } .lp-more.end .lpm-dn { display: none; }
}
@keyframes lpb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ---------- telefono: intestazione pulita, attaccata in alto (niente fascia sfocata sopra) */
@media (max-width: 980px) {
  html { background: #fff; }
  .hdr { margin: 0 !important; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 10px 14px !important; border-radius: 0 0 22px 22px !important; background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 8px 24px -16px rgba(30,20,60,.35); border: 0 !important; }
  #app-luoghi .mapctl .gpsbtn { font-size: .82rem; }
}

/* ---------- telefono: elenco tutto su = intestazione a bolla + striscia di mappa */
.hbub { display: none; }
@media (max-width: 980px) {
  body.hmini #app-luoghi .mapctl { transition: opacity .2s; }
  .hbub { place-items: center; position: fixed; z-index: 75; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 18px; width: 50px; height: 50px; border-radius: 50%; border: 0; padding: 0;
    background: #fff; box-shadow: 0 10px 26px -10px rgba(60,30,120,.55), 0 0 0 3px rgba(123,77,240,.18); transform: scale(0); opacity: 0; pointer-events: none; }
  .hbub img { width: 32px; height: 32px; }
  body.hmini .hbub { transform: scale(1); opacity: 1; pointer-events: auto; }
  body.hmini .hbub::after { content: "AI"; position: absolute; right: -4px; bottom: -2px; font: 800 .58rem var(--font); color: #fff; background: linear-gradient(135deg, #7b4df0, #e8412c); border-radius: 99px; padding: 2px 5px; }
}
@media (max-width: 980px) { body.hmini #app-luoghi .card { visibility: hidden; } }

/* ---------- telefono v2: la mappa va sotto l'intestazione; l'intestazione sale e sfuma (solo transform, niente scatti) */
@media (max-width: 980px) {
  body::before, body::after { display: none !important; }
  .hdr { position: fixed !important; top: 0; left: 0; right: 0; z-index: 70; will-change: transform, opacity;
    transition: transform .38s cubic-bezier(.2,.85,.2,1), opacity .3s ease, box-shadow .3s !important; }
  #app-luoghi.lx { transition: none !important; }
  #app-luoghi .mapctl { transition: opacity .25s ease, transform .38s cubic-bezier(.2,.85,.2,1); }
  body.hmini .hdr { transform: translateY(calc(-100% - 12px)) !important; opacity: 0; box-shadow: none; pointer-events: none; }
  body.hmini #app-luoghi .mapctl { opacity: 0; transform: translateY(-24px); pointer-events: none; }
  body.hmini #app-luoghi.lx { top: 0 !important; }
  /* le altre sezioni restano sotto l'intestazione fissa */
  #sez-trend { padding-top: calc(var(--hdrb, 110px) + 4px); }
  .hbub { transition: transform .38s cubic-bezier(.3,1.35,.5,1) .08s, opacity .25s ease .08s; }
  body.hmini::before { content: ""; display: block !important; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: rgba(255,255,255,.92); z-index: 74; opacity: 1; filter: none !important; inset: 0 0 auto 0 !important; animation: none !important; }
}

/* ================= TELEFONO v3: stile app (sezioni in vetro in alto, barra in basso) ================= */
.mbar, .pfilt { display: none; }
@media (min-width: 981px) { .msearch { display: none !important; } }
@media (max-width: 980px) {
  .hdr { display: none !important; }
  .hbub { display: none !important; }
  /* sezioni in alto, vetro */
  .sections.tabbar { position: fixed !important; z-index: 72; top: calc(env(safe-area-inset-top, 0px) + 8px) !important; bottom: auto !important;
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin: 0 !important;
    background: rgba(255,255,255,.58) !important; backdrop-filter: blur(22px) saturate(1.8) !important; -webkit-backdrop-filter: blur(22px) saturate(1.8) !important;
    border: 1px solid rgba(255,255,255,.75) !important; box-shadow: 0 10px 30px -14px rgba(20,20,50,.45), inset 0 1px 0 rgba(255,255,255,.9) !important; }
  .sections.tabbar .sec { flex-direction: row !important; gap: 5px !important; padding: 0 6px !important; font-size: .78rem !important; white-space: nowrap; overflow: hidden; }
  .sections.tabbar .sec > span:first-child { font-size: .95rem !important; filter: none !important; }
  /* barra in basso */
  .mbar { grid-template-columns: repeat(4, 1fr); align-items: center; position: fixed; bottom: 0; -webkit-backdrop-filter: blur(22px) saturate(1.8); border-top: 1px solid rgba(21,23,28,.06); }
  body.ld-on .mbar, body.ld-on .sections.tabbar { display: none !important; }
  .mb-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; color: var(--ink-2); font-weight: 700; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
  .mb-b:active { transform: scale(.92); }
  .mb-ic { display: grid; place-items: center; line-height: 1; }
  .mb-l { letter-spacing: .01em; }
  .mb-guida .mb-ic { background: linear-gradient(135deg, #7b4df0, #e8412c); }
  .mb-guida .mb-l { color: #5b3fd0; }
  .mb-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(21,23,28,.15); }
  /* contenuti: lasciano spazio alla barra in alto e a quella in basso */
  #app-luoghi.lx { top: 0 !important; }
  #app-luoghi .mapctl { top: calc(var(--hdrb, 60px) + 8px) !important; gap: 8px; }
  #app-luoghi .mapctl .mbreak, #app-luoghi .mapctl .grow, #app-luoghi .mapctl .mapfab { display: none !important; }
  #app-luoghi .mapctl .gpsbtn { justify-content: center; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.8) !important; }
  body.viewing #app-luoghi .mapctl { top: calc(var(--hdrb, 60px) + 62px) !important; }
  .profbar { top: calc(var(--hdrb, 60px) + 8px) !important; }
  body[data-section="viaggi"] .vapp, body[data-vcity="1"] .vapp { bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  /* foglio dell'elenco: più semplice */
  #app-luoghi .maprow #open-filters, #app-luoghi .maprow #recent-m { display: none !important; }
  .pfilt { overflow-x: auto; scrollbar-width: none; flex: none; -webkit-overflow-scrolling: touch; }
  .pfilt::-webkit-scrollbar { display: none; }
  .pfilt > * { flex: none; }
  .pfilt #chips { display: contents !important; }
  .pfilt .prow-1, .pfilt .prow-2 { display: contents !important; }
  .pfilt .catpick { display: none !important; }
  .pfilt .chip, .pfilt .mapsw, .pfilt .mr-range select, .pfilt .mapchips .chip { height: 32px !important; min-height: 0 !important; padding: 0 11px !important; font-size: .76rem !important; font-weight: 700; border-radius: 999px !important; white-space: nowrap; width: auto !important; box-shadow: none !important; border: 1px solid rgba(21,23,28,.1) !important; background: #fff; }
  .pfilt .mapchips { display: flex; gap: 6px; }
  .pfilt .mapsw .ms-ic { width: 16px; height: 16px; }
  .pfilt .mapsw .ms-l::before { content: "🗺️ "; }
  .pfilt .mapsw .ms-l { font-size: 0; } .pfilt .mapsw .ms-l::after { content: "Solo zona sulla mappa"; font-size: .76rem; }
  .pfilt .mr-range { display: inline-flex !important; } .pfilt .mr-range[hidden] { display: none !important; }
  .pfilt .cp-reset { order: -1; }
  /* categorie: foglio dal basso */
  #side { position: fixed !important; top: auto !important; bottom: 0 !important; width: auto !important; height: auto !important; max-height: 84dvh !important; overflow-y: auto !important; }
  #side .side-head { padding-top: 14px; }
  #side .side-head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 99px; background: rgba(21,23,28,.18); }
  #side .cats-wrap { padding: 0 16px 10px; }
  #side .footside { display: none; }
  #scrim { background: rgba(15,17,22,.35) !important; }
  /* fogli dal basso (cerca/AI) */
  .bsh { position: fixed; inset: 0; background: rgba(15,17,22,0); transition: background .3s; }
  .bsh.on { background: rgba(15,17,22,.35); }
  .bsh-p { position: absolute; bottom: 0; max-height: 88dvh; overflow-y: auto; padding: 6px 16px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -20px 40px -20px rgba(20,20,50,.4); }
  .bsh-grab { width: 40px; height: 5px; border-radius: 99px; background: rgba(21,23,28,.18); margin: 4px auto 10px; }
  .bsh-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .bsh-h .x { border: 0; background: var(--soft); width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; color: var(--ink-2); }
  .gs-t { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; } .gs-t img { width: 30px; height: 30px; }
  .gs-in { display: flex; gap: 6px; align-items: center; background: var(--soft); border-radius: 16px; padding: 4px 4px 4px 14px; border: 1.5px solid transparent; }
  .gs-in:focus-within { border-color: #7b4df0; background: #fff; }
  .gs-in input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 1rem; height: 42px; }
  .gs-go { width: 42px; height: 42px; border-radius: 12px; border: 0; background: var(--ink); color: #fff; font-size: 1.1rem; }
  .gs-chip { flex: none; border: 1px solid rgba(21,23,28,.1); background: #fff; border-radius: 99px; padding: 7px 12px; font-weight: 700; font-size: .8rem; white-space: nowrap; }
  .gs-chip.solid { background: var(--ink); color: #fff; border-color: var(--ink); }
  .gs-r { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; min-height: 30dvh; }
  .gs-hh { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 12px 4px 4px; }
  .gs-i, .gs-tip { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 9px 6px; border-radius: 14px; text-align: left; }
  .gs-i:active, .gs-tip:active { background: var(--soft); }
  .gs-i.gask { background: linear-gradient(135deg, #f3efff, #fff1ee); }
  .gs-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--soft); display: grid; place-items: center; font-size: 1.15rem; flex: none; }
  .gs-tx { display: flex; flex-direction: column; min-width: 0; } .gs-tx b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gs-tx small { color: var(--ink-3); font-size: .78rem; }
  .gs-tip { color: var(--ink-2); font-size: .9rem; } .gs-tip .gico { flex: none; }
  /* menu del mio profilo */
  .prof { padding-bottom: 0 !important; }
}
/* menu del profilo (anche su computer) */
.pf-menu { display: flex; flex-direction: column; margin: 10px 16px 4px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pf-mi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: var(--surface); text-align: left; border-bottom: 1px solid var(--line); }
.pf-mi:last-child { border-bottom: 0; }
.pf-mi:active { background: var(--soft); }
.pm-ic { width: 34px; height: 34px; border-radius: 11px; background: var(--soft); display: grid; place-items: center; font-size: 1.05rem; flex: none; }
.pm-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pm-t small { color: var(--ink-3); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-go { color: var(--ink-3); font-size: 1.2rem; }
.pf-mi.out b { color: var(--danger); }

/* ================= v4: Liquid Glass ovunque, mappamondo del profilo, telefono rifinito ================= */
:root { --glass: rgba(255,255,255,.62); --glass-hi: rgba(255,255,255,.82); --glass-b: rgba(255,255,255,.72); --glass-blur: blur(24px) saturate(1.8); --glass-sh: 0 12px 34px -16px rgba(20,20,50,.35), inset 0 1px 0 rgba(255,255,255,.9); }
.hdr, #app-luoghi .lpanel, .vside, .vmain, .tside, .card, .profbar, .udlg-box, .adm-h, .mpanel, #side { background: var(--glass) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border-color: var(--glass-b) !important; }
.udlg-box, .card, #side { background: var(--glass-hi) !important; }
.udlg { background: rgba(15,17,22,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* mappamondo nella copertina del profilo */
.pf-cov.glb { height: 210px; overflow: hidden; background: linear-gradient(160deg,#e9f4ff,#fdeef3); }
.glb-cv { position: absolute; inset: 0; display: block; }
.glb-f { position: absolute; left: 0; top: 0; font-size: 22px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); transition: opacity .3s; pointer-events: none; will-change: transform; }
.glb-st { position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; gap: 4px; padding: 3px; border-radius: 99px; background: rgba(255,255,255,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); }
.glb-s { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; font-size: 1rem; }
.glb-s.on { background: #fff; box-shadow: 0 3px 10px -4px rgba(0,0,0,.3); }
.pf-x, .pf-sh { z-index: 3; }
.pf-head { margin-top: -58px; }
.pf-bio { margin: 4px 0 0 !important; }

@media (max-width: 980px) {
  /* barra in basso: pillola di vetro che galleggia */
  .mbar { bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; z-index: 80 !important;
    background: rgba(255,255,255,.58) !important; backdrop-filter: blur(24px) saturate(1.9) !important; -webkit-backdrop-filter: blur(24px) saturate(1.9) !important; border: 1px solid rgba(255,255,255,.75) !important; box-shadow: 0 14px 36px -14px rgba(20,20,50,.45), inset 0 1px 0 rgba(255,255,255,.95) !important; }
  .mb-b { height: 56px !important; border-radius: 20px; margin: 4px 2px; overflow: hidden; }
  .mb-b.on { background: rgba(255,255,255,.85); box-shadow: 0 4px 14px -8px rgba(20,20,50,.35); color: var(--ink); }
  .mb-ic { width: 28px !important; height: 28px !important; font-size: 1.25rem !important; }
  .mb-guida .mb-ic { width: 34px !important; height: 34px !important; border-radius: 12px !important; margin-top: 0 !important; box-shadow: 0 6px 14px -6px rgba(123,77,240,.8) !important; }
  .mb-guida .mb-ic img { width: 22px !important; height: 22px !important; }
  .mb-l { font-size: .62rem !important; }
  /* mappa stondata e con margini */
  #app-luoghi.lx { bottom: 0 !important; }
  #app-luoghi .map { overflow: hidden; }
  #app-luoghi .list { padding-bottom: calc(var(--sy, 0px) + 110px) !important; }
  /* sulla mappa: Aperti ora e Solo zona a sinistra, posizione a destra (vetro) */
  #app-luoghi .mapctl { left: 18px !important; right: 18px !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between; }
  #app-luoghi .mapctl .grow { display: block !important; flex: 1; }
  #app-luoghi .mapctl .mapchips { order: 2; }
  #app-luoghi .mapctl .mapsw { order: 1; }
  #app-luoghi .mapctl #sec-near { order: 4; }
  #app-luoghi .mapctl .mapsw, #app-luoghi .mapctl .chip.mchip { height: 36px !important; padding: 0 12px !important; font-size: .76rem !important; font-weight: 800; border-radius: 99px !important; background: rgba(255,255,255,.62) !important; backdrop-filter: blur(16px) saturate(1.8); -webkit-backdrop-filter: blur(16px) saturate(1.8); border: 1px solid rgba(255,255,255,.75) !important; box-shadow: 0 8px 20px -12px rgba(20,20,50,.45) !important; color: var(--ink) !important; }
  #app-luoghi .mapctl .mapsw .ms-l { font-size: 0 !important; } #app-luoghi .mapctl .mapsw .ms-l::after { content: "Solo zona"; font-size: .76rem; }
  #app-luoghi .mapctl .mapsw .ms-ic { width: 16px; height: 16px; }
  #app-luoghi .mapctl > :not(.mbreak) { margin-right: 6px; }
  /* filtri sopra l'elenco: tessere con icona, niente scorrimento laterale */
  .pfilt { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px !important; overflow: visible !important; padding: 2px 12px 10px !important; touch-action: auto !important; }
  .pfilt > *, .pfilt .chip, .pfilt .cp-reset, .pfilt .mr-range, .pfilt .mr-range select { min-width: 0; }
  .pfilt .chip, .pfilt .cp-reset, .pfilt .mr-range select { height: 44px !important; padding: 0 4px !important; justify-content: center; text-align: center; white-space: normal !important; line-height: 1.1; font-size: .7rem !important; font-weight: 800; width: 100% !important; }
  .pfilt .mr-range select { -webkit-appearance: none; appearance: none; text-align-last: center; background-image: none !important; }
  .pfilt .cp-reset { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .pfilt .cp-reset span { font-size: .9rem; } .pfilt .cp-reset small { font-size: .62rem; }
  .pfilt .ch-sel select { position: absolute; inset: 0; opacity: 0; }
  /* foglio dell'elenco in vetro, scorre bene */
  #app-luoghi .lpanel { -webkit-backdrop-filter: blur(26px) saturate(1.8) !important; }
  #app-luoghi .list { touch-action: pan-y !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* pagine (profilo, persone…) e fogli: la barra in basso resta sempre visibile */
  .udlg { z-index: 76 !important; bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
  .udlg.prof { bottom: 0 !important; padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; backdrop-filter: none; }
  .udlg.prof .pf { margin: 0 !important; border-radius: 0 0 28px 28px !important; }
  .udlg.prof .pf-cov.glb { height: calc(220px + env(safe-area-inset-top, 0px)); }
  .udlg.prof .pf-x, .udlg.prof .pf-sh, .udlg.prof .glb-st { top: calc(env(safe-area-inset-top, 0px) + 10px); }
  .udlg.prof .pf-x { display: none; }
  .udlg.prof .pf-sh { right: 12px; }
  .bsh { z-index: 76 !important; }
  .bsh-p { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; max-height: calc(100dvh - 140px) !important; padding-bottom: 16px !important; background: rgba(255,255,255,.86) !important; backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8); border: 1px solid rgba(255,255,255,.8); }
  #side { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; max-height: calc(100dvh - 140px) !important; z-index: 77 !important; }
  #scrim { z-index: 76 !important; }
  .udlg .udlg-box { max-height: calc(100dvh - 120px); overflow-y: auto; }
}

/* ================= v5 · Sistema grafico "Aurora Glass" (tutte le viste, computer e telefono) ================= */
:root {
  --au-1: #7b4df0; --au-2: #e8412c; --au-3: #ffb547; --au-grad: linear-gradient(135deg, #7b4df0 0%, #c445a8 52%, #ff6a4d 100%);
  --ink: #12141a; --ink-2: #545a68; --ink-3: #8d93a1;
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
  --ring: 0 0 0 4px rgba(123,77,240,.18);
  --lift: 0 18px 40px -22px rgba(30,20,70,.45), 0 2px 6px -2px rgba(30,20,70,.08);
}
::selection { background: rgba(123,77,240,.22); }
* { scrollbar-width: thin; scrollbar-color: rgba(20,20,40,.22) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-thumb { background: rgba(20,20,40,.22); border-radius: 99px; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: none !important; box-shadow: var(--ring) !important; }
h1, h2, h3 { letter-spacing: -.02em; }
/* sfondo aurora (computer) */
@media (min-width: 981px) {
  body::before { background: radial-gradient(900px 600px at 0% 0%, rgba(255,181,71,.28), transparent 60%), radial-gradient(900px 700px at 100% 0%, rgba(123,77,240,.22), transparent 60%), radial-gradient(1000px 700px at 50% 110%, rgba(232,65,44,.16), transparent 60%), linear-gradient(180deg, #faf8ff, #fff7f3) !important; opacity: 1 !important; }
}
/* pulsanti */
.btn { font-weight: 700; letter-spacing: -.005em; transition: transform .18s cubic-bezier(.3,1.4,.5,1), box-shadow .2s, background .2s, border-color .2s, color .2s; }
.btn:active { transform: scale(.96); }
.btn.solid { background: linear-gradient(180deg, #23262f, #12141a); color: #fff; box-shadow: 0 8px 18px -10px rgba(18,20,26,.7), inset 0 1px 0 rgba(255,255,255,.14); }
.btn.solid:hover { box-shadow: 0 12px 24px -12px rgba(18,20,26,.75), inset 0 1px 0 rgba(255,255,255,.16); }
#add.btn.solid, #f-save.btn.solid, .btn.solid.vai, #m-save.btn.solid, .ob-big.btn.solid, .shm-new, .ld-btn:not(.ghost) { background: var(--au-grad) !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 24px -12px rgba(196,69,168,.75), inset 0 1px 0 rgba(255,255,255,.3) !important; }
.btn.ghost { background: rgba(255,255,255,.72); border: 1px solid rgba(20,20,40,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 12px -8px rgba(30,20,70,.3), inset 0 1px 0 rgba(255,255,255,.9); }
.btn.ghost:hover { border-color: rgba(123,77,240,.25); }
.btn.danger { border-color: rgba(197,34,31,.2); }
/* campi */
.fld input, .fld select, .fld textarea, .udlg-in, .shn-n, .acc-inv, .fbk-x, .t-search input, .gs-in, .mini-sel { border-radius: var(--r-md) !important; border: 1.5px solid rgba(20,20,40,.08) !important; background-color: rgba(246,245,250,.9) !important; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .shn-n:focus, .acc-inv:focus, .fbk-x:focus, .t-search input:focus { border-color: rgba(123,77,240,.55) !important; box-shadow: var(--ring) !important; background-color: #fff !important; outline: none; }
.fld > span, .flabel { color: var(--ink-2); font-weight: 700; letter-spacing: .01em; }
/* finestre e fogli: vetro chiaro, angoli ampi, intestazione e piede fissi */
.sheet { background: rgba(15,14,30,.32) !important; backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); }
.panel, .udlg-box, .vpanel { border-radius: var(--r-xl) !important; background: rgba(255,255,255,.86) !important; backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8); border: 1px solid rgba(255,255,255,.8) !important; box-shadow: 0 30px 70px -30px rgba(25,15,60,.55), inset 0 1px 0 rgba(255,255,255,.95) !important; animation: au-pop .32s cubic-bezier(.2,.9,.25,1.15); }
@keyframes au-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.p-head { position: sticky; top: -22px; z-index: 3; margin: -22px -22px 12px; padding: 18px 22px 12px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(20,20,40,.05); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.p-head h2 { font-size: 1.25rem; }
.p-foot { position: sticky; bottom: -18px; z-index: 3; margin: 14px -22px -18px; padding: 12px 22px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(255,255,255,.98), rgba(255,255,255,.85)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(20,20,40,.05); }
.x, .pf-x { transition: transform .2s, background .2s; } .x:active { transform: scale(.9); }
/* schede, segmenti e chip coerenti */
.mtabs, .seg:not(.cats), .ppl-tabs, .adm-tabs, .spsw, .vtabs { background: rgba(20,20,40,.05) !important; border-radius: 14px !important; padding: 3px !important; }
.mtab, .ppl-tab, .adm-tab, .sp-o, .vtab { border-radius: 11px !important; transition: background .2s, color .2s, box-shadow .2s; }
.mtab.on, .ppl-tab.on, .adm-tab.on, .sp-o.on, .vtab.on { background: #fff !important; color: var(--ink) !important; box-shadow: 0 4px 12px -6px rgba(30,20,70,.35) !important; }
.chip, .vchip, .t-chip, .fbk-c, .gs-chip, .pk-o { transition: transform .15s, background .2s, color .2s, border-color .2s; }
.chip:active, .vchip:active, .t-chip:active, .fbk-c:active { transform: scale(.95); }
.t-chip.on, .fbk-c.on { background: var(--ink) !important; }
/* elenchi e righe: superfici morbide */
.item, .t-row, .ppl-row, .shm-r, .acc-wr, .au-r, .pf-list, .pf-mi, .feed-r { transition: background .2s, transform .15s, box-shadow .2s; }
.item:active, .t-row:active, .shm-r:active, .pf-list:active { transform: scale(.985); }
.adm-kpi, .adm-card, .pf-card, .t-row, .au-r, .shm-r, .pf-list { border-color: rgba(20,20,40,.06) !important; box-shadow: 0 10px 28px -22px rgba(30,20,70,.45) !important; }
.adm-kpi b, .pf-st b { background: var(--au-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-st { background: rgba(246,245,250,.9) !important; border: 1px solid rgba(20,20,40,.04); }
/* avviso (toast): pillola di vetro scuro */
.toast { background: rgba(18,20,26,.82) !important; backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); animation: au-toast .35s cubic-bezier(.2,.9,.25,1.2); }
@keyframes au-toast { from { opacity: 0; transform: translate(-50%, 12px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
/* scheda del posto sulla mappa */
.card { border-radius: var(--r-xl) !important; box-shadow: 0 26px 60px -28px rgba(25,15,60,.6), inset 0 1px 0 rgba(255,255,255,.95) !important; animation: au-pop .3s cubic-bezier(.2,.9,.25,1.15); }
.card-ic, .gs-ic, .pm-ic, .t-ic, .pl-ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
/* intestazione computer: vetro più deciso e logo con alone */
@media (min-width: 981px) {
  .hdr { border: 1px solid rgba(255,255,255,.75) !important; box-shadow: 0 14px 36px -22px rgba(30,20,70,.45), inset 0 1px 0 rgba(255,255,255,.95); }
  .logo-ic { filter: drop-shadow(0 6px 10px rgba(123,77,240,.35)); }
  #app-luoghi .lpanel, .vside, .vmain, .tside, .tmapcol, #app-luoghi .map, .vmap { border-radius: var(--r-xl) !important; box-shadow: 0 20px 50px -30px rgba(30,20,70,.5), inset 0 1px 0 rgba(255,255,255,.9) !important; }
}
/* passaggio tra sezioni: dissolvenza morbida */
#app-luoghi:not([hidden]), #sez-viaggi:not([hidden]), #sez-trend:not([hidden]) { animation: au-in .35s ease both; }
@keyframes au-in { from { opacity: .0; } to { opacity: 1; } }
/* caricamento: luccichio */
.hint:only-child:not(:empty) { position: relative; overflow: hidden; }
/* telefono: foglio dell'elenco senza sfocatura (scorre fluido), resto in vetro */
@media (max-width: 980px) {
  #app-luoghi .lpanel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: transform; }
  #app-luoghi .list { -webkit-overflow-scrolling: touch; overflow-y: auto !important; overscroll-behavior-y: contain; scroll-behavior: auto; contain: content; }
  #app-luoghi .item { content-visibility: auto; contain-intrinsic-size: auto 64px; }
  #side { -webkit-backdrop-filter: none !important; }
  .sheet { align-items: flex-end; padding: 0; }
  .sheet .panel { max-height: 92dvh; animation: au-up .38s cubic-bezier(.2,.85,.2,1); }
  @keyframes au-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
}
/* segnaposto che "cadono" sulla mappa */
.gpin { animation: au-drop .45s cubic-bezier(.3,1.5,.5,1) backwards; }
@keyframes au-drop { from { transform: translateY(-14px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
/* apertura dell'app */
.splash { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--au-grad); color: #fff; transition: opacity .5s ease, transform .5s ease; }
.splash img { width: 92px; height: 92px; animation: au-pop .6s cubic-bezier(.2,.9,.25,1.3); filter: drop-shadow(0 14px 24px rgba(0,0,0,.25)); }
.splash b { font: 800 1.3rem var(--font-d); letter-spacing: -.02em; opacity: .95; }
.splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
/* sezione attiva con un alone colorato */
.sections .sec.on { position: relative; }
.sections .sec.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 3px; height: 3px; border-radius: 99px; background: var(--au-grad); opacity: .85; }

/* =====================================================================================
   v6 · LIQUID GLASS secondo le linee guida Apple (Adopting Liquid Glass, WWDC25)
   - il vetro sta solo nel livello di navigazione (barre, controlli sulla mappa, fogli, menu);
     i contenuti (schede, righe, card) restano superfici piene: niente vetro su vetro
   - dentro il vetro: riempimenti trasparenti ("fill"), non altri vetri
   - colore (tinta) solo per le azioni principali e la selezione
   - forme concentriche: capsule vicino ai bordi, raggio interno = raggio esterno − margine
   - bordo di scorrimento morbido al posto delle linee; luce sotto il dito; barra che si riduce
   - accessibilità: meno trasparenza, più contrasto, meno movimento
   ===================================================================================== */
:root {
  --tint: #6a45e8; --tint-2: #5634d6; --tint-soft: rgba(106,69,232,.12);
  --lg: rgba(255,255,255,.5); --lg-thick: rgba(255,255,255,.76); --lg-solid: #ffffff;
  --lg-blur: blur(14px) saturate(1.9) brightness(1.05);
  --lg-blur-thick: blur(28px) saturate(1.8);
  --lg-sheen: linear-gradient(140deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,255,255,.16) 100%);
  --lg-rim: inset 0 0 0 .5px rgba(255,255,255,.7), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.3);
  --lg-sh: 0 10px 28px -12px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.06);
  --lg-sh-lg: 0 30px 70px -28px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.06);
  --fill-1: rgba(120,120,128,.2); --fill-2: rgba(120,120,128,.14); --fill-3: rgba(120,120,128,.08);
  --sep: rgba(60,60,67,.12);
  --page: #f2f2f7; --card: #ffffff;
  --r-dev: 46px; --r-sheet: 34px; --r-card: 22px; --r-in: 16px; --r-ctl: 12px;
  --spring: cubic-bezier(.25,1.25,.4,1); --ease: cubic-bezier(.2,.8,.2,1);
}
/* ---------- tipografia: più decisa, titoli allineati a sinistra */
h1, h2, h3, .lcount { font-weight: 800 !important; letter-spacing: -.025em; }
.p-head h2, .bsh-h b, .side-head h2, .ppl-h h3, .vs-head h2, .t-head h2 { font-size: 1.32rem !important; text-align: left; }

/* ---------- materiale: vetro "regular" (piccoli elementi di navigazione) */
.lg, .sections.tabbar, .mbar, .msearch, #app-luoghi .mapctl .gpsbtn, #app-luoghi .mapctl .mapsw, #app-luoghi .mapctl .chip.mchip, .vmap .gpsbtn, .vmap .mapfab, .tmapcol .mapfab, .glb-st, .pf-sh, .pf-x, .profbar {
  background: var(--lg-sheen), var(--lg) !important; -webkit-backdrop-filter: var(--lg-blur) !important; backdrop-filter: var(--lg-blur) !important;
  border: 0 !important; box-shadow: var(--lg-rim), var(--lg-sh) !important; color: var(--ink);
}
/* vetro "thick" (fogli, menu, finestre: elementi grandi, più densi e con ombra più profonda) */
.bsh-p, .z-pop, .card, .panel, .udlg-box:not(.pf), .vpanel {
  background: var(--lg-sheen), var(--lg-thick) !important; -webkit-backdrop-filter: var(--lg-blur-thick) !important; backdrop-filter: var(--lg-blur-thick) !important;
  border: 0 !important; box-shadow: var(--lg-rim), var(--lg-sh-lg) !important;
}
/* strato che oscura dietro le finestre che interrompono (come su iOS) */
.sheet, .udlg:not(.prof), #scrim, .bsh.on { background: rgba(0,0,0,.24) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---------- contenuti: superfici piene, niente vetro */
.pf-card, .vitem, .vday, .vccard, .vcheck, .vsugg, .vempty, .vnote, .t-row, .adm-kpi, .adm-card, .au-r, .shm-r, .ld-f, .ld-pc, .ld-st, .ld-demo, .feed-r {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.pf-card, .vitem, .vday, .vccard, .vcheck, .t-row, .adm-kpi, .adm-card { background: var(--card) !important; border: 0 !important; border-radius: var(--r-card) !important; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.25) !important; }
/* dentro i fogli di vetro: riempimenti, non altro vetro */
.vhero { background: var(--fill-3) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border-radius: var(--r-card) !important; }
.vhero.city { background: linear-gradient(135deg, hsl(var(--h) 85% 60% / .16), hsl(var(--h) 85% 60% / .04) 70%) !important; }

/* ---------- pulsanti */
.btn { border-radius: 999px !important; }
.btn.ghost, .gs-chip:not(.solid), .t-mode, .vchip, .pf-acts .btn.ghost { background: var(--fill-2) !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--ink) !important; }
.btn.ghost:hover { background: var(--fill-1) !important; }
.btn.ghost.on, .vpub:not(.off) { background: var(--tint-soft) !important; color: var(--tint) !important; }
/* azione principale: tinta piena (prominent) */
.btn.solid, .gs-chip.solid, .gs-go, .vs-add { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), var(--tint) !important; color: #fff !important; border: 0 !important; box-shadow: 0 8px 20px -10px rgba(86,52,214,.75), inset 0 1px 0 rgba(255,255,255,.28) !important; }
.btn.solid:hover { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), var(--tint-2) !important; }
.btn.danger { background: rgba(255,59,48,.1) !important; color: #e0352b !important; border: 0 !important; }
.x, .bsh-h .x, .pf-x { width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 0 !important; background: var(--fill-2) !important; color: var(--ink-2) !important; display: grid !important; place-items: center; font-size: 1.15rem !important; line-height: 1; padding: 0 !important; }
/* luce sotto il dito ed elasticità */
.lg-lit { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; z-index: 0; }
.lg-lit::before { content: ""; position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,.25) 55%, rgba(255,255,255,0)); transform: scale(.2); opacity: 0; animation: lg-lit .45s var(--ease) forwards; mix-blend-mode: soft-light; }
.btn.solid .lg-lit::before, .gs-go .lg-lit::before { mix-blend-mode: normal; background: radial-gradient(closest-side, rgba(255,255,255,.4), rgba(255,255,255,0)); }
.lg-lit.out { transition: opacity .35s; opacity: 0; }
@keyframes lg-lit { to { transform: scale(1); opacity: 1; } }
.lg-press { scale: .965; }
.btn, .chip, .mb-b, .msearch, .sec, .gs-chip, .gs-i, .t-chip, .t-mode, .vtab, .mtab, .ppl-tab, .sp-o, .pf-st.lk, .pf-list, .pf-trip, .catbtn, .tipo, .glb-s, .gpsbtn, .mapfab, .mapsw, .pf-mi, .vtile, .vc-a, .ld-btn { transition: scale .35s var(--spring), background-color .2s, color .2s, box-shadow .2s, opacity .2s; }

/* ---------- campi: riempimenti morbidi, anello di tinta al focus */
.fld input, .fld select, .fld textarea, .udlg-in, .shn-n, .acc-inv, .fbk-x, .t-search input, .mini-sel, #f-link, .mrow input, .mrow select { background-color: var(--fill-3) !important; border: 1.5px solid transparent !important; border-radius: var(--r-ctl) !important; box-shadow: none !important; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .udlg-in:focus, .shn-n:focus, .fbk-x:focus, .t-search input:focus, #f-link:focus { background-color: var(--card) !important; border-color: var(--tint) !important; box-shadow: 0 0 0 4px var(--tint-soft) !important; }
.gs-in { background: var(--fill-2) !important; border: 1.5px solid transparent !important; border-radius: 999px !important; padding: 4px 4px 4px 16px !important; }
.gs-in:focus-within { background: var(--card) !important; border-color: var(--tint) !important; box-shadow: 0 0 0 4px var(--tint-soft) !important; }
.gs-in input:focus, .gs-in input:focus-visible { box-shadow: none !important; outline: none !important; }
.gs-go { width: 40px !important; height: 40px !important; border-radius: 50% !important; }

/* ---------- controlli segmentati: binario di riempimento, segmento selezionato come una lente */
.mtabs, .seg:not(.cats), .ppl-tabs, .adm-tabs, .spsw, .vtabs, .dest, .mioseg, .vp-seg { background: var(--fill-3) !important; border-radius: 999px !important; padding: 3px !important; border: 0 !important; }
.mtab, .ppl-tab, .adm-tab, .sp-o, .vtab, .dest button, .mioseg button { border-radius: 999px !important; }
.mtab.on, .ppl-tab.on, .adm-tab.on, .sp-o.on, .vtab.on, .dest button.on, .mioseg button.on { background: var(--card) !important; color: var(--ink) !important; box-shadow: 0 3px 10px -4px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.04) !important; }

/* ---------- chip */
.chip, .t-chip, .fbk-c, .pk-o { background: var(--fill-2) !important; border: 0 !important; box-shadow: none !important; border-radius: 999px !important; color: var(--ink) !important; }
.chip.on, .t-chip.on, .fbk-c.on, .pk-o.on { background: var(--tint) !important; color: #fff !important; }

/* ---------- icone disegnate dei tipi: tessera piena con il simbolo bianco */
.glyph { display: block; flex: none; }
.i-ic, .tipo .ti, .card-ic, .t-ic, .pl-ic, .pf-pi { background: linear-gradient(180deg, color-mix(in srgb, var(--c, #8e8e93) 78%, #fff), var(--c, #8e8e93)) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px -4px color-mix(in srgb, var(--c, #8e8e93) 70%, transparent) !important; border: 0 !important; }
#app-luoghi .i-ic { width: 38px !important; height: 38px !important; border-radius: 12px !important; }
.tipo .ti { width: 32px !important; height: 32px !important; border-radius: 10px !important; }
.card-ic { border-radius: 14px !important; }
.pl-ic { --c: inherit; }
.pf-list .pl-ic { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c)) !important; }
/* segnaposto: goccia piena con il simbolo bianco */
.gpin { width: 36px !important; height: 44px !important; }
.gpin .ph { width: 30px !important; height: 30px !important; left: 3px !important; border: 2.5px solid #fff !important; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 72%, #fff), var(--c)) !important; box-shadow: 0 6px 14px -4px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.25) !important; }
.gpin .pi { color: #fff; display: grid; place-items: center; }
.gpin .pi .glyph { width: 15px; height: 15px; }
.tpin span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c, #8e8e93); color: #fff; }
.tpin span .glyph { width: 13px; height: 13px; }

/* ---------- toast: capsula di vetro scuro */
.toast { border-radius: 999px !important; border: 0 !important; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18), 0 18px 40px -18px rgba(0,0,0,.6) !important; }

/* ---------- sagome di caricamento */
.skel { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; }
.skel .sk-r { display: flex; align-items: center; gap: 12px; padding: 6px 4px; }
.skel-card .sk-r { flex-direction: column; align-items: stretch; gap: 8px; padding: 16px; border-radius: var(--r-card); background: var(--card); }
.skel-stat { flex-direction: row; } .skel-stat .sk-r { flex: 1; flex-direction: column; gap: 6px; padding: 12px 6px; border-radius: 16px; background: var(--fill-3); }
.sk-c { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.sk-r span { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.sk-b { display: block; height: 11px; border-radius: 99px; width: 80%; }
.sk-t { width: 58%; height: 13px; } .sk-s { width: 36%; } .sk-n { width: 40%; height: 18px; margin: 0 auto; }
.sk-c, .sk-b { background: linear-gradient(90deg, var(--fill-2) 0%, var(--fill-3) 40%, var(--fill-2) 80%); background-size: 300% 100%; animation: sk 1.3s ease-in-out infinite; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- coriandoli */
.lg-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 100000; pointer-events: none; }

/* =================== TELEFONO =================== */
@media (max-width: 980px) {
  html, body { background: var(--page) !important; }
  /* sezioni in alto: capsula di vetro, segmento attivo = lente */
  .sections.tabbar { height: 48px !important; left: 12px !important; right: 12px !important; border-radius: 999px !important; padding: 4px !important; gap: 2px !important; }
  .sections.tabbar .sec { border-radius: 999px !important; color: var(--ink-2) !important; font-weight: 750 !important; }
  .sections.tabbar .sec.on { background: rgba(255,255,255,.9) !important; color: var(--ink) !important; box-shadow: 0 2px 10px -3px rgba(0,0,0,.18), inset 0 0 0 .5px rgba(0,0,0,.04) !important; }
  .sections .sec.on::after { display: none !important; }
  /* barra in basso: capsula con le sezioni + cerchio della ricerca a destra (si riducono scorrendo) */
  .mbar { left: 14px !important; right: 82px !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; height: 62px !important; border-radius: 999px !important; padding: 4px !important; display: flex !important; gap: 0; overflow: visible !important;
    transition: left .45s var(--spring), right .45s var(--spring), height .45s var(--spring), bottom .45s var(--spring) !important; }
  .mbar .mb-b { flex: 1; height: auto !important; margin: 0 !important; border-radius: 999px !important; color: var(--ink) !important; gap: 1px !important; transition: background-color .25s, color .25s, scale .35s var(--spring) !important; }
  .mbar .mb-b.on { background: var(--fill-2) !important; box-shadow: none !important; color: var(--tint) !important; }
  .mbar .mb-ic { font-size: 1.3rem !important; width: 30px !important; height: 30px !important; transition: transform .45s var(--spring); }
  .mbar .mb-l { font-size: .66rem !important; font-weight: 700; transition: opacity .2s, max-height .3s; max-height: 14px; overflow: hidden; }
  .msearch { position: fixed; z-index: 80; right: 14px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 50% !important; display: grid !important; place-items: center; border: 0; }
  .msearch .mb-l { display: none; }
  .msearch .mb-ic { margin: 0 !important; background: none !important; box-shadow: none !important; }
  .msearch.on { box-shadow: var(--lg-rim), 0 0 0 2px var(--tint), var(--lg-sh) !important; }
  body.ld-on .msearch { display: none !important; }
  body.mbmin .mbar { left: 22% !important; right: calc(22% + 58px) !important; }
  body.mbmin .mbar .mb-l { opacity: 0; max-height: 0; }
  body.mbmin .mbar .mb-ic { transform: scale(.9); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }

  /* mappa: angoli concentrici con quelli del telefono */
  #app-luoghi .mapctl .gpsbtn.on { background: var(--tint) !important; color: #fff !important; }
  #app-luoghi .mapctl .chip.mchip.on { background: #1f9d55 !important; color: #fff !important; box-shadow: var(--lg-sh) !important; }

  /* foglio dell'elenco (stile Mappe di Apple): staccato dai bordi, angoli ampi, nessuna sfocatura che rallenta lo scorrimento */
  #app-luoghi .lpanel { left: 6px !important; right: 6px !important; width: auto !important; border-radius: var(--r-sheet) var(--r-sheet) 0 0 !important; background: var(--lg-solid) !important; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.05), 0 -12px 40px -18px rgba(0,0,0,.3) !important; border: 0 !important; }
  #app-luoghi .grab span { width: 36px !important; height: 5px !important; background: var(--fill-1) !important; }
  .pfilt .chip, .pfilt .cp-reset, .pfilt .mr-range select { background: var(--fill-3) !important; border: 0 !important; border-radius: 16px !important; color: var(--ink) !important; }
  .pfilt .chip.on { background: var(--tint) !important; color: #fff !important; }
  .pfilt .cp-reset { color: #e0352b !important; }
  #app-luoghi .item { border-radius: var(--r-in) !important; }
  #app-luoghi .item.sel { background: var(--tint-soft) !important; box-shadow: none !important; }
  #app-luoghi .gtitle { border-radius: 999px !important; }

  /* fogli dal basso: vetro spesso, staccati dai bordi, nascono dal pulsante toccato */
  .bsh-p { left: 8px !important; right: 8px !important; bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important; border-radius: var(--r-sheet) !important; opacity: 0; transform: translateY(24px) scale(.96); }
  .bsh-p.lg-morph { transform: scale(.12); }
  .bsh.on .bsh-p { opacity: 1; transform: none !important; }
  #side { left: 8px !important; right: 8px !important; bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important; border-radius: var(--r-sheet) !important; background: var(--lg-sheen), var(--lg-thick) !important; -webkit-backdrop-filter: var(--lg-blur-thick) !important; backdrop-filter: var(--lg-blur-thick) !important; box-shadow: var(--lg-rim), var(--lg-sh-lg) !important;
    opacity: 0; visibility: hidden !important; pointer-events: none !important; transform: translateY(30px) scale(.94) !important; }
  #side.lg-morph { transform: scale(.12) !important; }
  #side.open { opacity: 1; visibility: visible !important; pointer-events: auto !important; transform: none !important; }
  .panel { border-radius: var(--r-sheet) var(--r-sheet) 0 0 !important; }

  /* pagine intere (profilo, persone…): sfondo di sistema, bordo di scorrimento morbido sotto le sezioni */
  .udlg.prof { background: var(--page) !important; }
  .udlg.prof::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top, 0px) + 70px); z-index: 71; pointer-events: none;
    background: linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--page) 70%, transparent) 45%, transparent 100%); opacity: 0; transition: opacity .25s; }
  .udlg.prof.se-t::before { opacity: 1; }
  .udlg.prof .pf-card { margin-left: 12px !important; margin-right: 12px !important; }

  /* viaggi e tendenza: fogli come l'elenco dei luoghi */
  body[data-section="viaggi"] .vmain, body[data-section="viaggi"] .vside { border-radius: var(--r-sheet) var(--r-sheet) 0 0 !important; background: var(--lg-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: 0 -12px 40px -18px rgba(0,0,0,.3) !important; }
  .vmap, .tmapcol { border-radius: 40px !important; }
}
/* bordo di scorrimento morbido in cima agli elenchi: ombra sotto l'intestazione (non tocca l'elenco, che resta fluido) */


/* =================== COMPUTER =================== */
@media (min-width: 981px) {
  .hdr { border-radius: 999px !important; margin: 10px 14px 0 !important; padding-left: 18px !important; padding-right: 10px !important; }
  #app-luoghi .lpanel, .vside, .tside { background: var(--lg-sheen), var(--lg-thick) !important; -webkit-backdrop-filter: var(--lg-blur-thick) !important; backdrop-filter: var(--lg-blur-thick) !important; border: 0 !important; box-shadow: var(--lg-rim), var(--lg-sh) !important; border-radius: 28px !important; }
  .vmain { background: var(--card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-radius: 28px !important; }
  #app-luoghi .map, .vmap, .tmapcol { border-radius: 28px !important; }
  .sections:not(.tabbar) { background: var(--fill-3) !important; border-radius: 999px !important; padding: 3px !important; }
  .sections:not(.tabbar) .sec { border-radius: 999px !important; }
  .sections:not(.tabbar) .sec.on { background: var(--card) !important; box-shadow: 0 3px 10px -4px rgba(0,0,0,.2) !important; }
  .sections .sec.on::after { display: none !important; }
  .panel, .udlg-box { border-radius: 30px !important; }
}

/* =================== STAGIONI: l'aurora cambia con il periodo dell'anno =================== */
:root[data-season="primavera"] { --s1: #ffb3cf; --s2: #b8f0c8; --s3: #ffe08a; --s4: #c7b8ff; }
:root[data-season="estate"] { --s1: #ffc27a; --s2: #7fe3e0; --s3: #ff9e7a; --s4: #ffe27a; }
:root[data-season="autunno"] { --s1: #ffb07a; --s2: #d9a36b; --s3: #e8836b; --s4: #c9a0d8; }
:root[data-season="inverno"] { --s1: #a9c8ff; --s2: #c8d6ff; --s3: #d4c2ff; --s4: #a8e6ff; }
@media (min-width: 981px) {
  :root[data-season] body:not([data-section="viaggi"])::before { background: radial-gradient(900px 600px at 0% 0%, color-mix(in srgb, var(--s1) 55%, transparent), transparent 60%), radial-gradient(900px 700px at 100% 0%, color-mix(in srgb, var(--s4) 50%, transparent), transparent 60%), radial-gradient(1000px 700px at 50% 110%, color-mix(in srgb, var(--s3) 40%, transparent), transparent 60%), linear-gradient(180deg, #fbfaff, #fff8f4) !important; }
}
.pf-cov.glb::after { content: ""; position: absolute; inset: auto 0 0 0; height: 70px; pointer-events: none; background: linear-gradient(0deg, color-mix(in srgb, var(--s1, #ffb3cf) 30%, transparent), transparent); mix-blend-mode: soft-light; }

/* =================== ACCESSIBILITÀ =================== */
@media (prefers-reduced-transparency: reduce) {
  :root { --lg: rgba(250,250,252,.96); --lg-thick: rgba(250,250,252,.98); --lg-blur: none; --lg-blur-thick: none; }
}
@media (prefers-contrast: more) {
  :root { --lg: #fff; --lg-thick: #fff; --fill-2: rgba(0,0,0,.1); --lg-rim: inset 0 0 0 1.5px #000; --sep: #000; }
  .btn.ghost, .chip { box-shadow: inset 0 0 0 1.5px currentColor !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-press { scale: 1; }
  .bsh-p, #side, .mbar, .msearch { transition-duration: .01s !important; }
  .sk-c, .sk-b { animation: none; }
}

/* =================== RICORDI: passaporto, viaggi passati, "Rivivi il viaggio" =================== */
.stamp { display: block; width: 100%; height: auto; overflow: visible; }
/* pagine a tutto schermo (passaporto, viaggi passati) */
.rq { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: var(--page); opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .28s ease, transform .45s var(--spring); }
.rq.on { opacity: 1; transform: none; }
.pp-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 10px; }
.pp-bar b { font: 800 1.32rem/1.2 var(--font-d); letter-spacing: -.025em; }
.pp-sc { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(40px + env(safe-area-inset-bottom, 0px)); max-width: 760px; width: 100%; margin: 0 auto; }
/* copertina del passaporto */
.pp-cov { position: relative; overflow: hidden; border-radius: 26px; padding: 26px 22px 18px; color: #f3dfa2; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #4a1f3a 0%, #2a1023 60%, #1d0b18 100%); box-shadow: 0 24px 50px -28px rgba(42,16,35,.9), inset 0 1px 0 rgba(255,255,255,.12); }
.pp-cov::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background: repeating-radial-gradient(circle at 50% 120%, transparent 0 9px, rgba(243,223,162,.35) 9px 10px); }
.pp-emb { width: 74px; height: 74px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; box-shadow: inset 0 0 0 5px rgba(243,223,162,.15); }
.pp-t { font: 900 1.45rem/1 var(--font-d); letter-spacing: .32em; }
.pp-t2 { font-size: .64rem; letter-spacing: .3em; opacity: .75; margin-top: 6px; font-weight: 700; }
.pp-who { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; } .pp-who b { color: #fff; font-size: 1.05rem; } .pp-who small { opacity: .7; }
.pp-st { position: relative; display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.pp-st div { flex: 1; max-width: 110px; padding: 10px 6px; border-radius: 16px; background: rgba(243,223,162,.1); display: flex; flex-direction: column; }
.pp-st b { font: 900 1.35rem/1.1 var(--font-d); color: #fff; } .pp-st small { font-size: .66rem; letter-spacing: .04em; opacity: .8; }
.pp-add { width: 100%; justify-content: center; margin: 14px 0 0; height: 48px; font-size: 1rem !important; }
/* pagina con i timbri: carta con filigrana */
.pp-page { position: relative; margin-top: 16px; padding: 18px 12px 22px; border-radius: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 4px;
  background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.7), transparent 40%), repeating-linear-gradient(135deg, rgba(120,90,40,.035) 0 2px, transparent 2px 7px), #f7f0df; box-shadow: inset 0 0 0 1px rgba(120,90,40,.12), 0 14px 30px -24px rgba(60,40,10,.6); }
.pp-stamp { position: relative; border: 0; background: none; padding: 4px; display: flex; flex-direction: column; align-items: center; animation: pp-in .55s var(--spring) backwards; animation-delay: var(--d, 0ms); color: #5b4a2a; }
.pp-stamp .stamp { max-width: 150px; mix-blend-mode: multiply; }
.pp-cap { font-size: .66rem; font-weight: 700; opacity: .7; margin-top: -4px; }
@keyframes pp-in { from { opacity: 0; transform: scale(1.5) rotate(-6deg); } 60% { opacity: 1; transform: scale(.94); } to { transform: none; } }
.pp-empty { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; text-align: center; padding: 26px 12px; color: #5b4a2a; } .pp-empty span { font-size: .88rem; opacity: .8; }
/* viaggi passati */
.pe-sub { color: var(--ink-2); font-size: .92rem; margin: 0 2px 14px; line-height: 1.45; }
.pe-srch { display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 48px; border-radius: 999px; background: var(--fill-2); color: var(--ink-3); }
.pe-srch input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 1rem; color: var(--ink); }
.pe-srch:focus-within { background: var(--card); box-shadow: 0 0 0 2px var(--tint), 0 0 0 6px var(--tint-soft); }
.pe-sug { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.pe-hh { width: 100%; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 4px 2px 0; }
.pe-c { border: 0; background: var(--fill-2); color: var(--ink); border-radius: 999px; padding: 8px 13px; font-weight: 700; font-size: .86rem; }
.pe-c.on { background: var(--tint); color: #fff; }
.pe-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pe-empty { color: var(--ink-3); font-size: .9rem; padding: 10px 4px; }
.pe-r { background: var(--card); border-radius: var(--r-card); padding: 12px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.25); animation: au-pop .3s var(--spring); }
.pe-rh { display: flex; align-items: center; gap: 10px; } .pe-rh b { flex: 1; font-size: 1rem; } .pe-fl { font-size: 1.5rem; }
.pe-y { border: 0; background: var(--fill-2); border-radius: 999px; padding: 6px 10px; font-weight: 700; font-size: .82rem; color: var(--ink); }
.pe-x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--fill-2); color: var(--ink-2); font-size: 1.1rem; }
.pe-cities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.pe-ct { border: 0; background: var(--tint-soft); color: var(--tint); border-radius: 999px; padding: 6px 11px; font-weight: 700; font-size: .82rem; }
.pe-ci { flex: 1; min-width: 160px; border: 0; background: var(--fill-3); border-radius: 999px; padding: 9px 14px; font-size: .9rem; color: var(--ink); outline: none; }
.pe-ci:focus { box-shadow: 0 0 0 2px var(--tint); background: var(--card); }
.pe-show { margin: 16px 0 0; }
.pe-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--lg-sheen), var(--lg-thick); -webkit-backdrop-filter: var(--lg-blur-thick); backdrop-filter: var(--lg-blur-thick); box-shadow: var(--lg-rim); }
.pe-cnt { flex: 1; color: var(--ink-2); font-weight: 700; font-size: .9rem; } .pe-foot .btn { height: 46px; padding: 0 28px; font-size: 1rem; }
/* profilo: anteprima del passaporto, suggerimento sul globo, Paese toccato */
.pf-pass-w { padding: 0 16px; }
.pf-pass { width: 100%; display: flex; align-items: center; gap: 14px; margin: 12px 0 2px; padding: 12px 16px 12px 10px; border: 0; border-radius: var(--r-card); text-align: left; color: #f3dfa2;
  background: radial-gradient(120% 140% at 0% 0%, #4a1f3a, #22091b); box-shadow: 0 16px 34px -24px rgba(42,16,35,.9), inset 0 1px 0 rgba(255,255,255,.12); }
.pfp-st { position: relative; width: 104px; height: 64px; flex: none; }
.pfp-s { position: absolute; top: 0; width: 64px; height: 64px; left: calc(var(--i, 0) * 20px); filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); border-radius: 50%; background: #f7f0df; padding: 2px; }
.pfp-s.empty { opacity: .5; }
.pfp-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pfp-t b { color: #fff; font-size: 1rem; } .pfp-t small { opacity: .85; font-size: .78rem; }
.pfp-go { font-size: 1.6rem; opacity: .7; }
.glb-hint { position: absolute; right: 12px; z-index: 2; font-size: .66rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; animation: glbh 4s ease 3s forwards; }
@keyframes glbh { to { opacity: 0; } }
.glb-hint { top: 58px; bottom: auto !important; }
.udlg.prof .glb-hint { top: calc(env(safe-area-inset-top, 0px) + 56px); }
.ctry-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; }
.ctry-st .pfp-s { position: static; width: auto; height: auto; }
/* copertina del viaggio (foto della città) con profondità */
.vcover { position: relative; height: 170px; margin: -2px -2px 12px; border-radius: var(--r-card); overflow: hidden; background: linear-gradient(135deg, hsl(var(--h) 70% 62%), hsl(calc(var(--h) + 40) 70% 52%)); transform: translateZ(0); }
.vcover.none { height: 0; margin: 0; }
.vc-img { position: absolute; inset: -30px 0 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.08); transition: opacity .6s ease; will-change: transform; }
.vcover.ok .vc-img { opacity: 1; }
.vcover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.35)); pointer-events: none; }
.vc-cr { position: absolute; right: 10px; bottom: 8px; z-index: 1; font-size: .6rem; color: rgba(255,255,255,.8); font-weight: 600; }
@media (min-width: 981px) { .vcover { height: 220px; } }
.vtile.ph .vt-top { background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 45%), var(--ph) center / cover no-repeat !important; }
.vtile.ph .vt-cover { opacity: 0; }
/* invito dopo il ritorno */
.rc-invite { position: fixed; z-index: 300; left: 12px; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 16px; border-radius: 26px;
  background: var(--lg-sheen), var(--lg-thick); -webkit-backdrop-filter: var(--lg-blur-thick); backdrop-filter: var(--lg-blur-thick); box-shadow: var(--lg-rim), var(--lg-sh-lg); opacity: 0; transform: translateY(30px) scale(.9); transition: transform .5s var(--spring), opacity .25s; }
.rc-invite.on { opacity: 1; transform: none; }
.rci-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rci-t small { color: var(--ink-2); font-size: .78rem; }
.rc-btn.solid, .btn.rc-btn { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 60%), var(--au-grad) !important; }
/* la storia */
.rc { background: #000; align-items: center; justify-content: center; }
.rc-fr { position: relative; width: 100%; height: 100%; max-width: 480px; max-height: 100dvh; overflow: hidden; color: #fff; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
@media (min-width: 600px) { .rc-fr { height: min(92dvh, 860px); aspect-ratio: 9 / 16; width: auto; border-radius: 30px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); } }
.rc-bg { position: absolute; inset: -40px; background: radial-gradient(120% 80% at 30% 10%, hsl(var(--h) 80% 55%), hsl(calc(var(--h) + 50) 70% 22%) 70%); background-size: cover; background-position: center; animation: kb 22s ease-in-out infinite alternate; }
.rc-bg.ph { background-blend-mode: normal; }
.rc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 30%, hsl(var(--h) 60% 10% / .55) 62%, hsl(var(--h) 60% 8% / .92) 100%); }
@keyframes kb { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.18) translate(-2%, -2%); } }
.rc-prog { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px; right: 12px; display: flex; gap: 4px; }
.rc-prog i { flex: 1; height: 3px; border-radius: 99px; background: rgba(255,255,255,.35); overflow: hidden; }
.rc-prog i span { display: block; height: 100%; width: 0; background: #fff; border-radius: inherit; }
.rc-prog i.done span { width: 100% !important; }
.rc-x { position: absolute; z-index: 4; top: calc(env(safe-area-inset-top, 0px) + 22px); right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; color: #fff; font-size: 1.3rem; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4); }
.rc-stage { position: absolute; inset: 0; z-index: 2; display: flex; }
.rc-s { margin-top: auto; width: 100%; padding: 0 26px calc(56px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.rc-k { font-weight: 800; font-size: .95rem; letter-spacing: .02em; opacity: .9; animation: rc-up .6s var(--spring) both; }
.rc-city { font: 900 clamp(2.6rem, 13vw, 4.2rem)/.95 var(--font-d); letter-spacing: -.04em; margin: 0; animation: rc-up .7s var(--spring) .08s both; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.rc-city.sm { font-size: 2.4rem; }
.rc-fl { font-size: 3rem; line-height: 1; animation: rc-pop .8s var(--spring) .3s both; }
.rc-sub { font-weight: 600; opacity: .85; animation: rc-up .6s var(--spring) .2s both; }
.rc-pill { align-self: flex-start; margin-top: 6px; padding: 8px 14px; border-radius: 999px; font-weight: 800; background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: rc-up .6s var(--spring) .4s both; }
.rc-num { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 22px; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3); animation: rc-up .6s var(--spring) both; animation-delay: calc(var(--i) * 120ms + 150ms); }
.rc-ni { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.rc-num b { font: 900 2rem/1 var(--font-d); letter-spacing: -.03em; } .rc-num small { opacity: .8; font-weight: 600; }
.rc-map { width: 100%; height: 46vh; max-height: 380px; border-radius: 26px; background: rgba(0,0,0,.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.25); animation: rc-up .6s var(--spring) both; }
.rc-li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: rc-up .55s var(--spring) both; animation-delay: calc(var(--i) * 110ms + 120ms); }
.rc-li span { width: 36px; height: 36px; flex: none; display: grid; place-items: center; font-size: 1.2rem; border-radius: 12px; background: rgba(255,255,255,.18); }
.rc-li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-li small { opacity: .7; font-size: .75rem; }
.rc-stamp { width: 74%; max-width: 300px; align-self: center; padding: 10px; border-radius: 50%; background: #f7f0df; box-shadow: 0 20px 50px -20px rgba(0,0,0,.7); animation: rc-stamp .9s cubic-bezier(.2,1.6,.4,1) .25s both; }
@keyframes rc-stamp { 0% { transform: scale(2.2) rotate(18deg); opacity: 0; } 55% { transform: scale(.92) rotate(-4deg); opacity: 1; } 100% { transform: none; } }
.rc-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; animation: rc-up .6s var(--spring) .2s both; }
.rc-btn { height: 52px; border: 0; border-radius: 999px; font-weight: 800; font-size: 1rem; color: #fff; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35); }
.rc-btn.pri { background: #fff; color: #111; }
@keyframes rc-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rc-pop { from { opacity: 0; transform: scale(.3) rotate(-20deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rc-bg { animation: none; } .rc *, .pp-stamp { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* =================== PRESENTAZIONE (landing) · Liquid Glass =================== */
.landing { background: var(--page); }
.ld-nav { position: sticky; top: 0; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0 !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; }
.ld-nav .ld-wrap { max-width: 1080px; height: 56px; padding: 0 8px 0 16px !important; border-radius: 999px; background: var(--lg-sheen), var(--lg) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim), var(--lg-sh); }
.ld-btn { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 60%), var(--au-grad) !important; box-shadow: 0 12px 26px -12px rgba(123,77,240,.75), inset 0 1px 0 rgba(255,255,255,.3) !important; transition: scale .35s var(--spring), box-shadow .2s, transform .2s !important; }
.ld-btn.ghost { background: var(--fill-2) !important; color: var(--ink) !important; box-shadow: none !important; }
.ld-hero h1 { font-weight: 900 !important; letter-spacing: -.045em !important; }
.ld-eyebrow { background: var(--tint-soft) !important; color: var(--tint) !important; }
.ld-f, .ld-st, .ld-pc, .ld-demo { background: var(--card) !important; border: 0 !important; border-radius: 28px !important; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 40px -28px rgba(30,20,70,.4) !important; }
.ld-gt { display: grid !important; place-items: center; width: 50px !important; height: 50px !important; border-radius: 16px !important; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -10px var(--c); }
.ld-st b { background: var(--tint) !important; }
/* telefono finto con la nuova interfaccia */
.ld-screen { background: #e9eee4 !important; }
.ld-map .p { color: #fff !important; }
.ld-map .p::before { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 72%, #fff), var(--c)) !important; border: 2.5px solid #fff; }
.ld-map .p .glyph { width: 15px; height: 15px; position: relative; }
.ld-seg { position: absolute; z-index: 3; top: 12px; left: 10px; right: 10px; height: 34px; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--lg-sheen), rgba(255,255,255,.55); -webkit-backdrop-filter: blur(12px) saturate(1.8); backdrop-filter: blur(12px) saturate(1.8); box-shadow: var(--lg-rim), var(--lg-sh); }
.ld-seg span { flex: 1; display: grid; place-items: center; border-radius: 999px; font-size: .58rem; font-weight: 800; color: #3a3d46; white-space: nowrap; }
.ld-seg span.on { background: rgba(255,255,255,.95); color: #111; box-shadow: 0 2px 6px -2px rgba(0,0,0,.2); }
.ld-tab { position: absolute; z-index: 3; left: 10px; right: 58px; bottom: 12px; height: 44px; display: flex; padding: 3px; border-radius: 999px; background: var(--lg-sheen), rgba(255,255,255,.6); -webkit-backdrop-filter: blur(12px) saturate(1.8); backdrop-filter: blur(12px) saturate(1.8); box-shadow: var(--lg-rim), var(--lg-sh); }
.ld-tb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 999px; color: #1d1d1f; }
.ld-tb:last-child { background: rgba(120,120,128,.14); color: var(--tint); }
.ld-tb i { font-style: normal; font-size: .5rem; font-weight: 800; }
.ld-srch { position: absolute; z-index: 3; right: 10px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--lg-sheen), rgba(255,255,255,.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--lg-rim), var(--lg-sh); }
.ld-srch img { width: 24px; height: 24px; }
.ld-card { background: var(--lg-sheen), rgba(255,255,255,.78) !important; -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8); box-shadow: var(--lg-rim), var(--lg-sh) !important; border-radius: 20px !important; }
.ld-card.c2 { top: 56px !important; } .ld-card.c3 { bottom: 66px !important; } .ld-card.c1 { bottom: 34% !important; }
/* il tuo mondo: passaporto e storia */
.ld-world-in { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.ld-world-t p { color: var(--ink-2); font-size: 1.04rem; line-height: 1.6; }
.ld-pts { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ld-pts li { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.ld-pts li .glyph { width: 34px; height: 34px; padding: 8px; border-radius: 11px; color: #fff; background: var(--tint); flex: none; }
.ld-pass { position: relative; min-height: 360px; }
.ld-pp { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 18px; border-radius: 28px; background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.7), transparent 40%), repeating-linear-gradient(135deg, rgba(120,90,40,.035) 0 2px, transparent 2px 7px), #f7f0df; box-shadow: inset 0 0 0 1px rgba(120,90,40,.12), 0 30px 60px -36px rgba(60,40,10,.7); transform: rotate(-2deg); }
.ld-pp .stamp { mix-blend-mode: multiply; }
.ld-story { position: absolute; right: -6px; bottom: -26px; width: 168px; aspect-ratio: 9 / 16; border-radius: 24px; padding: 14px 12px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(10,20,60,.85)), radial-gradient(120% 80% at 30% 10%, #2f9be0, #1b2a7a 70%); box-shadow: 0 30px 60px -24px rgba(20,20,60,.7), inset 0 0 0 .5px rgba(255,255,255,.3); transform: rotate(5deg); }
.ld-sb { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 3px; } .ld-sb i { flex: 1; height: 2px; border-radius: 9px; background: rgba(255,255,255,.9); } .ld-sb i.h ~ i, .ld-sb i.h { background: rgba(255,255,255,.35); }
.ld-story small { font-size: .62rem; opacity: .85; font-weight: 700; } .ld-story > b { font: 900 1.3rem/1 var(--font-d); letter-spacing: -.03em; }
.ld-sn { display: flex; gap: 4px; margin-top: 6px; } .ld-sn span { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 5px 2px; border-radius: 10px; background: rgba(255,255,255,.16); font-size: .5rem; font-weight: 700; } .ld-sn b { font-size: .9rem; }
@media (max-width: 860px) {
  .ld-hero-in { text-align: left !important; }
  .ld-hero-t { text-align: left !important; } .ld-hero p, .ld-ctas, .ld-src { justify-content: flex-start !important; text-align: left !important; margin-left: 0 !important; }
  .ld-hero h1 { font-size: clamp(2.5rem, 12vw, 3.2rem) !important; }
  .ld-world-in { grid-template-columns: 1fr; }
  .ld-pass { margin: 10px 8px 40px; }
  .ld-story { width: 140px; right: -2px; }
}
.pe-srch input:focus, .pe-srch input:focus-visible, .pe-ci:focus-visible { box-shadow: none !important; outline: none !important; }
.pe-ci:focus-visible { box-shadow: 0 0 0 2px var(--tint) !important; }
/* stagione anche sul telefono: un velo di colore in cima alle pagine */
@media (max-width: 980px) {
  .udlg.prof .pf { background: radial-gradient(140% 260px at 50% 0%, color-mix(in srgb, var(--s1, #ffb3cf) 22%, transparent), transparent 70%) !important; }
}

/* luce al tocco (solo CSS): il controllo si illumina e si comprime un poco */
.btn:active, .chip:active, .mb-b:active, .msearch:active, .sec:active, .gs-chip:active, .gs-i:active, .t-chip:active, .t-mode:active, .vtab:active, .mtab:active, .ppl-tab:active, .sp-o:active, .pf-st.lk:active, .pf-list:active, .pf-trip:active, .catbtn:active, .tipo:active, .glb-s:active, .gpsbtn:active, .mapfab:active, .mapsw:active, .pf-mi:active, .vtile:active, .vc-a:active, .ld-btn:active, .pf-pass:active, .pe-c:active, .rc-btn:active, .pp-stamp:active { scale: .965; filter: brightness(1.08) saturate(1.1); }
/* campi di testo: colore sempre esplicito (su iPhone alcuni campi restavano neri al buio) */
input, textarea, select { color: var(--ink); -webkit-text-fill-color: currentColor; caret-color: var(--tint); }
input::placeholder, textarea::placeholder { color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); opacity: 1; }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--ink) !important; -webkit-box-shadow: 0 0 0 1000px var(--card) inset !important; transition: background-color 9999s; }
select option { color: var(--ink); background: var(--card); }
html.dark gmp-place-autocomplete, html.dark gmp-placeautocomplete { color-scheme: dark; }
/* presentazione: novità (bento) */
.ld-eyebrow.c { display: table; margin: 0 auto 10px; }
.ld-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ld-b { position: relative; overflow: hidden; padding: 20px; border-radius: 28px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 40px -28px rgba(30,20,70,.4); }
.ld-b .glyph { width: 44px; height: 44px; padding: 11px; border-radius: 14px; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); box-shadow: 0 8px 18px -10px var(--c); }
.ld-b h3 { margin: 14px 0 6px; font: 800 1.1rem/1.25 var(--font-d); letter-spacing: -.02em; } .ld-b p { margin: 0; color: var(--ink-2); line-height: 1.5; font-size: .93rem; }
.ld-b.big { grid-column: span 2; grid-row: span 1; background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 60%), var(--card); }
.ld-b.dark { background: radial-gradient(100% 100% at 100% 0%, #3b2a7a, #12131c); color: #fff; } .ld-b.dark p { color: rgba(255,255,255,.75); }
.ld-av { display: flex; align-items: center; margin-top: 14px; } .ld-av i { width: 32px; height: 32px; margin-right: -8px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff; border: 2px solid var(--card); background: var(--au-grad); }
.ld-av i:nth-child(2) { background: linear-gradient(135deg, #2f7cf6, #1f9d6b); } .ld-av i:nth-child(3) { background: linear-gradient(135deg, #ff8a1f, #e8412c); }
.ld-av span { margin-left: 16px; font-size: .8rem; font-weight: 700; color: var(--tint); animation: ldtype 1.6s ease-in-out infinite; }
@keyframes ldtype { 50% { opacity: .45; } }
@media (max-width: 860px) { .ld-bento { grid-template-columns: 1fr; } .ld-b.big { grid-column: auto; } }
/* profilo: ripartizione per categoria */
.pf-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 2px; }
.pf-sgt { align-items: flex-start !important; }
.pf-sgt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--k) 12%, transparent); }
.pf-sgt.c0 { --k: #e8412c; } .pf-sgt.c1 { --k: #7b4df0; } .pf-sgt.c2 { --k: #0e9f9a; }
.pf-sgi { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 1.1rem; background: var(--k); box-shadow: 0 6px 14px -8px var(--k); }
.pf-sgx { display: flex; flex-direction: column; min-width: 0; } .pf-sgx b { font: 900 1.25rem/1.05 var(--font-d); color: var(--k); letter-spacing: -.02em; } .pf-sgx small { color: var(--ink); font-size: .8rem; font-weight: 700; line-height: 1.2; margin-top: 2px; } .pf-sgx em { font-style: normal; color: var(--ink-3); font-size: .72rem; font-weight: 600; }
.pf-split2 { display: flex; gap: 3px; height: 8px; margin: 10px 0 12px; }
.pf-split2 i { flex: 1 1 0; border-radius: 99px; } .pf-split2 i.c0 { background: #e8412c; } .pf-split2 i.c1 { background: #7b4df0; } .pf-split2 i.c2 { background: #0e9f9a; }
/* passaporto: come funzionano i timbri, filtro per Paese */
.pp-how { margin-top: 14px; border-radius: 20px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.25); overflow: hidden; }
.pp-how summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.pp-how summary::-webkit-details-marker { display: none; }
.pp-how summary::before { content: "i"; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: italic 800 .8rem Georgia, serif; color: #fff; background: var(--tint); }
.pp-how summary::after { content: "›"; margin-left: auto; color: var(--ink-3); font-size: 1.3rem; transition: transform .25s; } .pp-how[open] summary::after { transform: rotate(90deg); }
.pp-hl { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 14px; }
.pp-hr { display: flex; gap: 12px; align-items: flex-start; } .pp-hr span:last-child { display: flex; flex-direction: column; gap: 2px; } .pp-hr b { font-size: .92rem; } .pp-hr small { color: var(--ink-2); font-size: .82rem; line-height: 1.4; }
.pp-hi { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; background: #1f9d55; }
.pp-hr.d .pp-hi { background: #a08a5c; }
.pp-hn { color: var(--ink-3); font-size: .76rem; padding-left: 40px; }
.pp-flt { display: flex; gap: 6px; overflow-x: auto; margin: 14px -16px 0; padding: 2px 16px; scrollbar-width: none; } .pp-flt::-webkit-scrollbar { display: none; }
.pp-fc { flex: none; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 12px; font-weight: 700; font-size: .86rem; background: var(--fill-2); color: var(--ink); }
.pp-fc i { font-style: normal; font-size: .72rem; padding: 1px 7px; border-radius: 99px; background: var(--fill-2); }
.pp-fc.on { background: var(--tint); color: #fff; } .pp-fc.on i { background: rgba(255,255,255,.25); }
.pp-ph { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 6px 6px; color: #5b4a2a; } .pp-pf { font-size: 2rem; } .pp-ph span:last-child { display: flex; flex-direction: column; } .pp-ph small { opacity: .75; font-weight: 600; }
.pp-stamp.dic .stamp { opacity: .78; }
.pp-stamp.ver .pp-cap { color: #1f7a45; opacity: 1; }
/* verifica dei timbri con la prenotazione */
.pp-vb { margin-top: 6px; border: 0; border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: .76rem; color: #fff; background: var(--tint); box-shadow: 0 6px 14px -8px var(--tint); }
.pp-hr.h .pp-hi { background: #2f7cf6; }
.vf-st { width: 170px; margin: 6px auto 0; padding: 8px; border-radius: 50%; background: #f7f0df; box-shadow: 0 16px 34px -20px rgba(60,40,10,.6); transition: transform .5s var(--spring); }
.vf-st.done { transform: scale(1.06) rotate(-3deg); }
.vf-h { text-align: center; margin: 14px 0 6px; font-size: 1.2rem; }
.vf-l { margin: 8px 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); font-size: .9rem; line-height: 1.45; }
.vf-n { margin: 0 0 10px; }
.vf-p { font-size: .8rem; color: var(--ink-3); line-height: 1.45; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--fill-3); }
.vf-out { min-height: 0; font-weight: 700; font-size: .92rem; border-radius: 14px; }
.vf-out:not(:empty) { padding: 12px 14px; }
.vf-out.wait { background: var(--tint-soft); color: var(--tint); display: flex; align-items: center; gap: 10px; }
.vf-out.ok { background: rgba(31,157,85,.12); color: #1a8a4a; }
.vf-out.ko { background: rgba(224,53,43,.1); color: #d0352b; }
.vf-sp { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: vfsp .8s linear infinite; flex: none; }
@keyframes vfsp { to { transform: rotate(360deg); } }
.vf .pe-foot { justify-content: flex-end; }
.pe-casa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-card); background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.25); }
.pe-ch { font-weight: 800; } .pe-casa select { margin-left: auto; max-width: 60%; } .pe-casa small { width: 100%; color: var(--ink-3); font-size: .78rem; }

/* telefono: ritocchi (cerchio della ricerca sempre tondo, foglio che si trascina al primo colpo, distanza sulla mappa) */
@media (max-width: 980px) {
  .msearch { width: 62px !important; height: 62px !important; min-width: 0 !important; aspect-ratio: 1 / 1; margin: 0 !important; padding: 0 !important; overflow: visible !important;
    transition: width .45s var(--spring), height .45s var(--spring), right .45s var(--spring), bottom .45s var(--spring), scale .35s var(--spring) !important; }
  .msearch .mb-ic { width: 36px !important; height: 36px !important; display: grid !important; place-items: center; transition: transform .45s var(--spring); }
  .msearch .mb-ic img { width: 32px !important; height: 32px !important; }
  body.mbmin .msearch { width: 54px !important; height: 54px !important; right: calc(22% - 6px) !important; }
  body.mbmin .msearch .mb-ic { transform: scale(.9); }
  body.mbmin .msearch .mb-ic img { width: 32px !important; height: 32px !important; }
  body.mbmin .mbar { height: 54px !important; }
  /* trascinamento del foglio: le zone di presa non fanno scorrere la pagina, così il gesto parte subito */
  #app-luoghi #lphead, #app-luoghi .lhead, #app-luoghi .lp-status, #app-luoghi .pfilt, #app-luoghi #grab, #vgrab, #vsgrab { touch-action: none !important; -webkit-user-select: none; user-select: none; }
  #app-luoghi #grab { min-height: 26px; }
  /* distanza: torna sulla mappa, come capsula di vetro accanto agli altri controlli */
  #app-luoghi .mapctl { flex-wrap: wrap !important; row-gap: 8px; }
  #app-luoghi .mapctl .mr-range { order: 3; display: inline-flex !important; }
  #app-luoghi .mapctl .mr-range[hidden] { display: none !important; }
  #app-luoghi .mapctl .mr-range select { height: 36px !important; padding: 0 26px 0 12px !important; font-size: .76rem !important; font-weight: 800; border-radius: 999px !important; border: 0 !important; color: var(--ink) !important;
    background-color: var(--lg) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim), var(--lg-sh) !important; }
}
/* importazione da Google Maps */
.imp-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-card); color: #fff; background: radial-gradient(120% 140% at 0% 0%, #34a853, #1a73e8 70%); box-shadow: 0 16px 34px -22px #1a73e8; }
.imp-hero .glyph { width: 50px; height: 50px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.22); flex: none; }
.imp-hero b { display: block; font-size: 1.05rem; } .imp-hero small { opacity: .9; font-size: .84rem; line-height: 1.35; }
.imp-steps { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.imp-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.25); font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.imp-steps b { color: var(--ink); }
.imp-n { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .82rem; color: #fff; background: var(--tint); }
.imp-in { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.imp-in input { flex: 1; min-width: 0; height: 48px; border: 1.5px solid transparent; border-radius: 999px; padding: 0 16px; background: var(--fill-2); font-size: .95rem; outline: none; }
.imp-in input:focus { border-color: var(--tint); background: var(--card); box-shadow: 0 0 0 4px var(--tint-soft); }
.imp-hd { display: flex; flex-direction: column; gap: 2px; margin: 2px 2px 10px; } .imp-hd b { font: 800 1.15rem/1.2 var(--font-d); } .imp-hd small { color: var(--ink-3); }
.imp-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; } .imp-bulk > span { font-weight: 700; color: var(--ink-2); font-size: .84rem; margin-right: 2px; }
.imp-pub { margin: 0 0 12px; }
.imp-list { display: flex; flex-direction: column; gap: 8px; }
.imp-r { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 18px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -20px rgba(0,0,0,.25); animation: rc-up .4s var(--spring) backwards; animation-delay: var(--d, 0ms); transition: opacity .2s; }
.imp-r.off { opacity: .55; }
.imp-ck { width: 26px; height: 26px; flex: none; margin-top: 1px; border-radius: 50%; border: 2px solid var(--fill-1); background: none; color: #fff; font-weight: 900; font-size: .85rem; display: grid; place-items: center; padding: 0; }
.imp-ck.on { background: var(--tint); border-color: var(--tint); }
.imp-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .imp-b > b { font-size: .95rem; } .imp-b > small { color: var(--ink-3); font-size: .78rem; } .imp-b > em { font-size: .8rem; color: var(--ink-2); }
.imp-dup { align-self: flex-start; margin-top: 4px; font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: var(--fill-2); color: var(--ink-2); }
.imp-ctl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.imp-tipo { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 4px; height: 34px; border-radius: 999px; background: var(--fill-2); max-width: 100%; }
.imp-ti { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--tint); flex: none; }
.imp-tipo select { border: 0; background: none; font-weight: 700; font-size: .8rem; color: var(--ink); max-width: 170px; outline: none; -webkit-appearance: none; appearance: none; padding-right: 4px; }
.imp-st { display: flex; background: var(--fill-3); border-radius: 999px; padding: 2px; }
.imp-st button { border: 0; background: none; border-radius: 999px; padding: 0 10px; height: 30px; font-weight: 700; font-size: .76rem; color: var(--ink-2); }
.imp-st button.on { background: var(--card); color: var(--ink); box-shadow: 0 2px 8px -3px rgba(0,0,0,.25); }
.imp-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 10px; } .imp-big { font-size: 3.4rem; animation: rc-pop .7s var(--spring) both; } .imp-done b { font: 900 1.4rem var(--font-d); } .imp-done small { color: var(--ink-2); } .imp-done .btn { margin-top: 10px; }
/* attività da link (GetYourGuide, Klook, TheFork…) */
.act-hero { background: radial-gradient(120% 140% at 0% 0%, #ff8a1f, #c445a8 75%) !important; box-shadow: 0 16px 34px -22px #c445a8 !important; }
.act-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-card); background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 30px -22px rgba(0,0,0,.35); }
.act-img { height: 170px; background: var(--fill-2) center / cover no-repeat; }
.act-cb { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.act-site { align-self: flex-start; font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--tint-soft); color: var(--tint); }
.act-ti { border: 0; resize: none; background: none; padding: 0; font: 800 1.15rem/1.25 var(--font-d); letter-spacing: -.02em; color: var(--ink); outline: none; box-shadow: none !important; -webkit-text-fill-color: var(--ink); }
.act-ti:focus { background: var(--fill-3); border-radius: 10px; }
.act-where, .act-price { color: var(--ink-2); font-size: .84rem; font-weight: 600; }
.act-h { font: 800 1rem var(--font-d); margin: 18px 2px 8px; }
.act-trips { display: flex; flex-wrap: wrap; gap: 6px; }
.act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .act-grid .fld { margin: 0; }
.act-hint { display: block; color: var(--ink-3); font-size: .78rem; margin: 6px 2px 0; line-height: 1.4; }
.act-st { display: inline-flex; }
.act-st button { height: 36px; padding: 0 16px; font-size: .84rem; }
.act-done { padding: 24px 10px 10px; }
.act-q { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-card); background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.25); }
.act-q > small { color: var(--ink-2); line-height: 1.45; font-size: .86rem; }
.act-q > .btn { height: 48px; justify-content: center; font-size: 1rem; }
.act-code { display: flex; gap: 8px; } .act-code input { flex: 1; min-width: 0; height: 40px; border: 0; border-radius: 999px; padding: 0 14px; background: var(--fill-2); font-size: .9rem; outline: none; }
.vlinkbtn { margin-left: 6px; }
/* suggerimenti chiudibili */
.lg-tip { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 12px; padding: 12px 40px 12px 12px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 12%, var(--card)), var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 18%, transparent); transition: opacity .25s, transform .25s; animation: rc-up .45s var(--spring) both; }
.lg-tip.out { opacity: 0; transform: scale(.96); }
.lg-tip-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; font-size: 1.1rem; background: var(--card); box-shadow: 0 4px 10px -6px rgba(0,0,0,.3); }
.lg-tip-t { font-size: .84rem; line-height: 1.45; color: var(--ink-2); } .lg-tip-t b { color: var(--ink); }
.lg-tip-a { display: block; margin-top: 8px; border: 0; border-radius: 999px; padding: 7px 12px; font-weight: 800; font-size: .8rem; color: #fff; background: var(--tint); }
.lg-tip-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--fill-2); color: var(--ink-2); font-size: 1rem; line-height: 1; display: grid; place-items: center; padding: 0; }
/* presentazione: dal link al viaggio */
.ld-links-in { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.ld-links-t p { color: var(--ink-2); font-size: 1.04rem; line-height: 1.6; }
.ld-logos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .ld-logos i { font-style: normal; font-weight: 800; font-size: .78rem; padding: 6px 11px; border-radius: 999px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 14px -10px rgba(0,0,0,.3); color: var(--ink-2); }
.ld-flow { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 30px; background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, #ff8a1f 22%, transparent), transparent 60%), radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, #c445a8 22%, transparent), transparent 60%), var(--card); box-shadow: 0 30px 60px -36px rgba(30,20,70,.5); }
.ld-fl { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--lg-sheen), var(--lg-thick); box-shadow: var(--lg-rim), var(--lg-sh); }
.ld-fl > span { width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-size: 1.2rem; border-radius: 13px; background: var(--tint-soft); }
.ld-fl div { display: flex; flex-direction: column; min-width: 0; } .ld-fl small { color: var(--ink-3); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-fl.s2 { margin-left: 26px; } .ld-fl.s3 { margin-left: 52px; } .ld-fl.s3 small { color: #1f9d55; font-weight: 700; }
.in .ld-fl { animation: rc-up .6s var(--spring) both; } .in .ld-fl.s2 { animation-delay: .25s; } .in .ld-fl.s3 { animation-delay: .5s; }
@media (max-width: 860px) { .ld-links-in { grid-template-columns: 1fr; } .ld-fl.s2 { margin-left: 14px; } .ld-fl.s3 { margin-left: 28px; } }

/* telefono: in cima niente più "fascia": la mappa arriva fino al bordo dello schermo e sotto l'ora
   c'è una sfumatura morbida dal colore della pagina al trasparente (come Mappe, Instagram, WhatsApp) */
@media (max-width: 980px) {
  #app-luoghi .mapcol { padding: 0 !important; }
  #app-luoghi .map { border-radius: 0 !important; box-shadow: none !important; }
  .sbfade { position: fixed; z-index: 71; left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top, 0px) + 78px); pointer-events: none;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--page) 92%, transparent) 0%,
      color-mix(in srgb, var(--page) 78%, transparent) calc(env(safe-area-inset-top, 0px) * .9),
      color-mix(in srgb, var(--page) 45%, transparent) calc(env(safe-area-inset-top, 0px) + 26px),
      color-mix(in srgb, var(--page) 14%, transparent) calc(env(safe-area-inset-top, 0px) + 54px),
      transparent 100%); }
  body.ld-on .sbfade { display: none; }
  .sections.tabbar { top: calc(env(safe-area-inset-top, 0px) + 6px) !important; }
}
@media (min-width: 981px) { .sbfade { display: none; } }

/* telefono: anche la mappa del viaggio arriva fino al bordo in alto, sotto la sfumatura */
@media (max-width: 980px) {
  body[data-section="viaggi"] .vapp, body[data-vcity="1"] .vapp { top: 0 !important; }
  body[data-section="viaggi"] .vmapcol, body[data-section="viaggi"] .vmap { border-radius: 0 !important; }
  body[data-section="viaggi"] .vmap .vgps, body[data-section="viaggi"] .vmap .vgmaps { top: calc(var(--hdrb, 60px) + 10px) !important; }
  body[data-section="viaggi"] .vmap #v-fit { top: calc(var(--hdrb, 60px) + 10px) !important; }
}

/* telefono: foglio Categorie — intestazione che non si sovrappone, pulsante "Mostra" che galleggia senza fascia */
@media (max-width: 980px) {
  #side { --sbg: color-mix(in srgb, var(--lg-solid) 94%, transparent); padding-top: 0 !important; padding-bottom: 0 !important; }
  #side .side-head { position: sticky !important; top: 0; z-index: 3; margin: 0 -20px 6px !important; padding: 16px 20px 12px !important;
    background: linear-gradient(180deg, var(--sbg) 0%, var(--sbg) 72%, transparent 100%) !important; border-radius: var(--r-sheet) var(--r-sheet) 0 0; }
  #side .side-done { position: sticky !important; bottom: 0 !important; z-index: 3; margin: 6px -20px 0 !important; padding: 26px 20px 16px !important;
    background: linear-gradient(0deg, var(--sbg) 0%, var(--sbg) 45%, transparent 100%) !important; border: 0 !important; box-shadow: none !important; border-radius: 0 0 var(--r-sheet) var(--r-sheet); }
  #side .side-done .btn { height: 50px !important; font-size: 1rem !important; box-shadow: 0 14px 30px -12px rgba(86,52,214,.8), inset 0 1px 0 rgba(255,255,255,.28) !important; }
}
/* Guida (cerca / chiedi): più chiara */
.gs-sub { margin: -2px 2px 12px; color: var(--ink-2); font-size: .86rem; line-height: 1.4; }
.gs-acts { display: grid; margin: 12px 0 2px; }
.gs-act { display: flex; align-items: center; gap: 10px; border: 0; background: var(--fill-3); text-align: left; color: var(--ink); }
.gs-act:first-child { background: var(--tint-soft); }
.gs-ai { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 1.05rem; font-weight: 900; background: var(--card); box-shadow: 0 4px 10px -6px rgba(0,0,0,.3); }
.gs-act:first-child .gs-ai { background: var(--tint); color: #fff; }
.gs-at { display: flex; flex-direction: column; min-width: 0; } .gs-at b { font-size: .88rem; } .gs-at small { color: var(--ink-3); font-size: .72rem; line-height: 1.3; }
.gs-tip { margin-top: 4px; background: var(--fill-3) !important; border-radius: 16px !important; padding: 12px !important; color: var(--ink) !important; }
.gs-hh { margin-top: 16px !important; }
/* Persone: più chiaro */
.ppl-sub { margin: 0 2px 12px; color: var(--ink-2); font-size: .86rem; line-height: 1.4; }
.ppl-desc { margin: 8px 4px 10px; color: var(--ink-3); font-size: .8rem; }
.ppl .udlg-in { display: flex !important; align-items: center; gap: 8px; height: 48px; padding: 0 16px !important; border-radius: 999px !important; background: var(--fill-2) !important; border: 1.5px solid transparent !important; }
.ppl .udlg-in:focus-within { border-color: var(--tint) !important; background: var(--card) !important; box-shadow: 0 0 0 4px var(--tint-soft) !important; }
.ppl .udlg-in input { flex: 1; min-width: 0; border: 0 !important; background: none !important; outline: none !important; box-shadow: none !important; font-size: 1rem; padding: 0 !important; height: 100%; }
.ppl-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.ppl-hw { display: flex; flex-direction: column; gap: 3px; padding: 12px 10px; border-radius: 16px; background: var(--fill-3); text-align: center; } .ppl-hw span { font-size: 1.3rem; } .ppl-hw b { font-size: .86rem; } .ppl-hw small { color: var(--ink-3); font-size: .72rem; line-height: 1.3; }
.ppl-note { display: block; margin: 10px 4px 0; color: var(--ink-3); font-size: .78rem; }
.ppl-me { display: flex !important; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 10px 12px !important; border: 0 !important; border-radius: 18px !important; background: var(--tint-soft) !important; text-align: left; color: var(--ink) !important; }
.ppl-mi { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tint); font-size: 1rem; }
.ppl-mt { flex: 1; display: flex; flex-direction: column; min-width: 0; } .ppl-mt b { font-size: .9rem; } .ppl-mt small { color: var(--ink-2); font-size: .76rem; } .ppl-mg { color: var(--ink-3); font-size: 1.4rem; }
.ppl-tab.on { background: var(--card) !important; }
html.dark .ppl-tab.on, html.dark .mtab.on, html.dark .adm-tab.on, html.dark .sp-o.on, html.dark .vtab.on { background: rgba(255,255,255,.16) !important; color: #fff !important; }
/* telefono: i pannelli (persone, impostazioni…) salgono dal basso come gli altri fogli */
@media (max-width: 980px) {
  .udlg:not(.prof):not(.onb) { display: flex !important; flex-direction: column; justify-content: flex-end; align-items: stretch; padding: 0 8px 8px !important; }
  .udlg:not(.prof):not(.onb) > .udlg-box { width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: var(--r-sheet) !important; max-height: calc(100dvh - 150px) !important; }
  /* "Vicino a me" ben visibile sulla mappa */
  #app-luoghi .mapctl .gpsbtn { width: auto !important; padding: 0 14px 0 12px !important; height: 40px !important; border-radius: 999px !important; gap: 6px; display: inline-flex !important; align-items: center; background: var(--tint) !important; color: #fff !important; box-shadow: 0 10px 22px -10px rgba(86,52,214,.8), inset 0 1px 0 rgba(255,255,255,.3) !important; }
  #app-luoghi .mapctl .gps-l { display: inline !important; font-weight: 800; font-size: .8rem; }
  #app-luoghi .mapctl .gpsbtn svg { width: 18px; height: 18px; }
}

/* 5 ottobre (35b): pannelli più leggibili e stabili */
.gs-acts { grid-template-columns: 1fr; gap: 6px; }
.gs-act { padding: 9px 12px; border-radius: 16px; }
.gs-at small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.udlg-box.ppl { background: var(--lg-solid, var(--card)) !important; }
@media (max-width: 760px) {
  .udlg-box.pplm { min-height: min(640px, calc(100dvh - 150px)); }
}
@media (max-width: 760px) { .udlg:has(> .cons) { z-index: 9600 !important; bottom: 0 !important; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; } }

/* 5 ottobre (36): comandi della mappa sul telefono in una griglia ordinata 2×2, tutti uguali */
@media (max-width: 760px) {
  body.mob #app-luoghi .mapctl { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; align-content: start; align-items: stretch; left: 14px !important; right: 14px !important; pointer-events: none; }
  body.mob #app-luoghi .mapctl > * { pointer-events: auto; margin: 0 !important; }
  body.mob #app-luoghi .mapctl .mbreak, body.mob #app-luoghi .mapctl .grow { display: none !important; }
  body.mob #app-luoghi .mapctl #sec-near { order: 1; display: block !important; }
  body.mob #app-luoghi .mapctl .mr-range { order: 2; display: flex !important; }
  body.mob #app-luoghi .mapctl .mr-range[hidden] { display: none !important; }
  body.mob #app-luoghi .mapctl .chip.mchip { order: 3; }
  body.mob #app-luoghi .mapctl .mapsw { order: 4; }
  body.mob #app-luoghi .mapctl .gpsbtn, body.mob #app-luoghi .mapctl .mr-range, body.mob #app-luoghi .mapctl .mapsw, body.mob #app-luoghi .mapctl .chip.mchip { width: 100% !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; border-radius: 999px !important; display: flex !important; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; font-size: .82rem !important; font-weight: 800; position: static !important; transform: none !important; }
  body.mob #app-luoghi .mapctl .mapsw, body.mob #app-luoghi .mapctl .chip.mchip, body.mob #app-luoghi .mapctl .gpsbtn { padding: 0 12px !important; }
  body.mob #app-luoghi .mapctl .mapsw .ms-l::after { font-size: .82rem; }
  body.mob #app-luoghi .mapctl .mr-range { padding: 0 !important; }
  body.mob #app-luoghi .mapctl .mr-range select { width: 100% !important; height: 40px !important; font-size: .82rem !important; text-align: center; text-align-last: center; padding: 0 26px 0 14px !important; }
  body.mob #app-luoghi .mapctl:has(.mr-range[hidden]) #sec-near { grid-column: 1 / -1; }
}

/* 5 ottobre (38): "Filtri", tipo di lista, ordine come chip, pulsante + centrale, nuova icona Persone */
#l-sort { display: none !important; }
.flab { flex: none; width: auto; align-self: stretch; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 0 2px 6px; }
#listcol .lhead { flex-wrap: nowrap; }
#listcol .lhead > div:first-child { flex: 1; min-width: 0; }
#listcol .lhead .spsw { flex: none; margin: 0 !important; display: inline-flex !important; grid-template-columns: none; gap: 2px; }
#listcol .lhead .spsw[hidden] { display: none !important; }
#listcol .lhead .sp-o { white-space: nowrap; padding: 6px 12px !important; font-size: .8rem !important; font-weight: 800; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ic-ppl { display: inline-block; vertical-align: -3px; --ppl-cut: var(--card, #fff); }
.ppl-tab .ic-ppl { vertical-align: -3px; }
#people .ic-ppl { vertical-align: middle; }
.mb-ppl .mb-ic { font-size: 0 !important; }
.mb-ppl .ic-ppl { --ppl-cut: transparent; }
.mb-ppl .ic-ppl circle[stroke], .mb-ppl .ic-ppl path[stroke] { stroke: rgba(255,255,255,.9); }
html.dark .mb-ppl .ic-ppl circle[stroke], html.dark .mb-ppl .ic-ppl path[stroke] { stroke: #2c2c30; }
/* il + al centro: un segnaposto colorato che sporge dalla barra */
.mb-add .mb-ic { overflow: visible; }
.mb-add .ic-add { transition: transform .35s var(--spring, ease); }
.mb-add:active .ic-add, .mb-add.on .ic-add { transform: translateY(-2px) scale(1.06); }
.mb-add .mb-l { font-weight: 800; }
.add-tic { display: inline-grid; place-items: center; width: 26px; height: 26px; }
.add-tic .ic-add { width: 20px; height: 25px; }
.add-acts .gs-act { padding: 12px 12px; }
.add-acts .gs-act .gs-car { margin-left: auto; color: var(--ink-3); font-size: 1.3rem; font-weight: 600; }
.add-acts .gs-act.main { background: var(--tint-soft); }
.add-acts .gs-act.main .gs-ai { background: var(--tint); }
.add-acts .gs-at small { white-space: normal; }
.pfilt .flab { display: none !important; }
.pflab { display: none; }
body.mob .pflab { display: block; margin: 2px 0 6px; padding: 0 18px; flex: none; }
body.mob .pfilt { display: flex !important; grid-template-columns: none !important; flex-wrap: nowrap !important; overflow-x: auto; }
body.mob .pfilt .chip { width: auto !important; white-space: nowrap !important; }
.prow-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.prow-3 > :only-child { grid-column: 1 / -1; justify-content: center; } /* un solo pulsante (es. Aggiunti di recente): tutta la larghezza */
.pfilt .prow-3 { display: contents !important; }
#chips > .flab { margin-top: 4px; }
body.mob .pfilt .chip { height: 38px !important; font-size: .72rem !important; border-radius: 999px !important; }
body.mob .pfilt { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
/* 5 ottobre (39): riga Filtri tutta dentro lo schermo, + dentro la barra */
body.mob .pfilt { -webkit-mask-image: none !important; mask-image: none !important; overflow: hidden !important; padding-right: 18px !important; gap: 5px !important; }
body.mob .pfilt .chip { flex: 1 1 auto !important; min-width: 0 !important; padding: 0 6px !important; overflow: hidden; text-overflow: ellipsis; justify-content: center; }
.mb-add .mb-ic { width: 28px !important; height: 30px !important; }
.mb-add .ic-add { width: 24px; height: 30px; margin-top: 0; filter: drop-shadow(0 3px 5px rgba(123,77,240,.4)); }
.mb-add .mb-l { color: inherit !important; }

/* 5 ottobre (40): telefono, posto scelto: l'elenco scende, la scheda sale dal basso, il segnaposto pulsa */
@media (max-width: 760px) {
  body.mob #app-luoghi .card { position: fixed !important; left: 10px !important; right: 10px !important; width: auto !important; bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; top: auto !important; z-index: 75 !important; max-height: min(58vh, calc(100dvh - 260px)) !important; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-sheet, 28px) !important; animation: none; transition: transform .2s ease; }
  body.mob #app-luoghi .card::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--fill-1, rgba(120,120,128,.3)); margin: -6px auto 8px; }
  body.mob #app-luoghi .card.card-in { animation: card-up .42s cubic-bezier(.2,.9,.25,1.12) both; }
  body.mob #app-luoghi .card.card-out { animation: card-down .22s ease-in both; }
  body.mob.placing #listcol { transition: transform .38s cubic-bezier(.3,.8,.3,1) !important; }
}
@keyframes card-up { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes card-down { to { transform: translateY(80%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.mob #app-luoghi .card.card-in, body.mob #app-luoghi .card.card-out { animation: none; } }
/* segnaposto scelto: più grande, salta e ha un'onda che pulsa alla base */
.gpin.sel { transform: scale(1.45) !important; z-index: 2; animation: pin-hop .55s cubic-bezier(.3,1.6,.5,1) both !important; }
.gpin.sel::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 22px; height: 8px; margin-left: -11px; border-radius: 50%; background: color-mix(in srgb, var(--c, #6a45e8) 55%, transparent); animation: pin-wave 1.6s ease-out infinite; pointer-events: none; }
@keyframes pin-hop { 0% { transform: scale(1); } 45% { transform: translateY(-14px) scale(1.5); } 100% { transform: scale(1.45); } }
@keyframes pin-wave { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gpin.sel, .gpin.sel::after { animation: none !important; } }
/* posto scelto: gli altri segnaposto e i gruppi si attenuano un po' così il protagonista si vede subito */
body.placing .gpin:not(.sel), body.placing .clu { opacity: .5; filter: saturate(.55); transition: opacity .3s, filter .3s; }
/* 6 ottobre: "Azzera filtri" sul telefono va sulla mappa, non nella riga dei filtri */
.mapreset { display: none; }
body.mob .pfilt .cp-reset { display: none !important; }
@media (max-width: 760px) {
  body.mob #app-luoghi .mapctl .mapreset:not([hidden]) { display: inline-flex !important; order: 5; grid-column: 1 / -1; justify-self: center; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: #e5484d; color: #fff; font-weight: 800; font-size: .84rem; box-shadow: 0 8px 20px -8px rgba(229,72,77,.75), inset 0 1px 0 rgba(255,255,255,.3); animation: card-up .35s cubic-bezier(.2,.9,.25,1.12) both; }
  body.mob #app-luoghi .mapctl .mapreset:active { transform: scale(.96); }
}

/* 6 ottobre: "Stai guardando" (categoria scelta) e posti doppi */
.catnow { display: none; }
body.mob .catnow { display: flex; align-items: center; gap: 6px; margin: 0 14px 8px; flex: none; }
.cn-b { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; padding: 8px 12px; border-radius: 16px; background: var(--fill-3); color: var(--ink); text-align: left; }
.cn-b.on { background: var(--tint-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tint) 45%, transparent); }
.cn-ic { font-size: 1.15rem; flex: none; }
.cn-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cn-t small { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cn-t b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-b.on .cn-t b { color: var(--tint); }
.cn-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #e5484d; color: #fff; font-size: 1.2rem; font-weight: 700; line-height: 1; }
.mb-cat { position: relative; }
.mb-cat.has::after { content: attr(data-n); position: absolute; top: 2px; left: 50%; margin-left: 8px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--tint); color: #fff; font-size: .66rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--card); }
.dupbar { display: flex; align-items: center; gap: 6px; margin: 8px 14px 4px; }
.db-b { flex: 1; display: flex; align-items: center; gap: 10px; border: 0; padding: 9px 12px; border-radius: 16px; background: color-mix(in srgb, #ffb547 18%, var(--card)); color: var(--ink); text-align: left; }
.db-b > span:first-child { font-size: 1.2rem; }
.db-t { display: flex; flex-direction: column; } .db-t b { font-size: .88rem; } .db-t small { font-size: .74rem; color: var(--ink-3); }
.db-x { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--fill-3); color: var(--ink-2); font-size: 1.1rem; }
.dup-b { overflow-y: auto; }
.dup-g { background: var(--fill-3); border-radius: 18px; padding: 8px; margin: 10px 0; }
.dup-r { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.dup-r input { width: 20px; height: 20px; accent-color: var(--tint); flex: none; }
.dup-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .dup-t b { font-size: .92rem; } .dup-t small { font-size: .76rem; color: var(--ink-3); }
.dup-t .dup-ex { color: var(--ink-2); }
.dup-a { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 8px 4px; }
.dup-g.done { opacity: 0; transform: scale(.96); transition: opacity .25s, transform .25s; }
.cn-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 6 ottobre: zona accanto a "Stai guardando" */
.cn-z { flex: none; max-width: 42%; display: flex; flex-direction: column; align-items: flex-start; gap: 0; border: 0; padding: 7px 12px; border-radius: 16px; background: var(--fill-3); color: var(--ink); text-align: left; min-width: 0; }
.cn-z small { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cn-z b { font-size: .86rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-z.on { background: var(--tint); color: #fff; } .cn-z.on small { color: rgba(255,255,255,.8); }
.zsh-p .geobar { display: flex !important; flex-direction: column; gap: 8px; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; }
.zsh-p .gf { display: flex !important; flex-direction: column; gap: 4px; padding: 10px 12px !important; border-radius: 16px; background: var(--fill-3); border: 0 !important; }
.zsh-p .gf > span { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.zsh-p .gf select { max-width: none !important; width: 100%; font-size: 1rem !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink); background-color: transparent; }
.zsh-a { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .zsh-a .btn { flex: 1; justify-content: center; }
/* chat dell'assistente con la tastiera aperta (iPhone) */
@media (max-width: 760px) {
  body.mob .ai.aiwin.kb { top: calc(var(--vvt, 0px) + 6px) !important; bottom: auto !important; height: calc(var(--vvh, 60vh) - 12px) !important; max-height: calc(var(--vvh, 60vh) - 12px) !important; transition: none; }
  body.mob .ai.aiwin.kb .ai-follow input { font-size: 16px; }
}
.aiwin .ai-follow input, #ask2 { font-size: 16px; }
@media (max-width: 760px) { body.mob input[type="text"], body.mob input[type="search"], body.mob input:not([type]), body.mob textarea { font-size: max(16px, 1em); } }

/* 6 ottobre: etichetta "AI" sulla guida (piccola, leggibile, meno invasiva dell'icona) */
.msearch::after, .hbub::after { content: "AI"; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); padding: 1px 6px 0; border-radius: 999px; font-size: 9px; line-height: 13px; font-weight: 900; letter-spacing: .08em; color: #fff; background: linear-gradient(135deg, #7b4df0, #c445a8); box-shadow: 0 0 0 1.5px var(--card, #fff), 0 2px 6px -2px rgba(123,77,240,.7); pointer-events: none; }
.msearch .mb-ic { transform: translateY(-4px); }
body.mbmin .msearch::after { bottom: 1px; font-size: 8px; line-height: 11px; padding: 0 4px; }
body.mbmin .msearch .mb-ic { transform: translateY(-3px); }
.mbar .mb-b { min-width: 0; overflow: visible; } .mbar .mb-l { white-space: nowrap; overflow: visible !important; text-overflow: clip !important; max-width: none !important; } .mbar .mb-ppl .mb-l { letter-spacing: -.03em; font-size: .92em; }

/* 6 ottobre: "i" informativa e storie */
.info-i { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font: 900 1.05rem/1 Georgia, "Times New Roman", serif; font-style: italic; background: linear-gradient(140deg, #8f6bff, #6a45e8 55%, #c445a8); box-shadow: 0 6px 16px -6px rgba(106,69,232,.75), inset 0 1px 0 rgba(255,255,255,.35); position: relative; }
.info-i span { transform: translateY(1px); }
.info-i.new::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #ffb547; animation: info-ring 1.6s ease-out infinite; pointer-events: none; }
.info-i.new::after { content: ""; position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: 0 0 0 2px var(--card, #fff); }
.info-i.new { animation: info-glow 1.6s ease-in-out infinite; }
@keyframes info-ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes info-glow { 0%, 100% { box-shadow: 0 6px 16px -6px rgba(106,69,232,.75), 0 0 0 0 rgba(255,181,71,.0); } 50% { box-shadow: 0 6px 18px -4px rgba(106,69,232,.9), 0 0 18px 4px rgba(255,181,71,.55); } }
@media (prefers-reduced-motion: reduce) { .info-i.new, .info-i.new::before { animation: none; } }
.info-ph { display: none !important; }
.info-pc { margin-right: 4px; }
@media (max-width: 760px) {
  .info-pc { display: none !important; }
  body.mob .info-ph { display: inline-grid !important; position: fixed; z-index: 82; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 14px; width: 40px; height: 40px; font-size: 1.15rem; }
  body.ld-on .info-ph, body.st-open .info-ph { display: none !important; }
  body.mob .sections.tabbar { right: 62px !important; }
  body.mob .sections.tabbar .sec { padding: 0 6px !important; gap: 4px !important; min-width: 0; white-space: nowrap; }
}
/* storie a schermo intero */
.st-ov { position: fixed; inset: 0; z-index: 9800; color: #fff; background: radial-gradient(120% 80% at 80% 0%, var(--g3, #c445a8) 0%, transparent 55%), radial-gradient(90% 70% at 0% 100%, var(--g2, #6a45e8) 0%, transparent 60%), var(--g1, #1b1446); transition: background .5s; display: flex; flex-direction: column; animation: st-in .32s cubic-bezier(.2,.9,.25,1.1) both; user-select: none; -webkit-user-select: none; touch-action: none; }
.st-ov.out { animation: st-out .25s ease-in both; }
@keyframes st-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes st-out { to { opacity: 0; transform: translateY(40px) scale(.97); } }
.st-bars { display: flex; gap: 4px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0; position: relative; z-index: 3; }
.st-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.st-bars i b { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }
.st-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0 16px; position: relative; z-index: 3; }
.st-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .9rem; opacity: .95; }
.st-brand img { width: 26px; height: 26px; }
.st-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 1.5rem; line-height: 1; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.st-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 26px calc(env(safe-area-inset-bottom, 0px) + 40px); position: relative; z-index: 3; pointer-events: none; }
.st-card { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.st-card > * { animation: st-up .5s cubic-bezier(.2,.9,.25,1.1) both; }
.st-card .st-k { animation-delay: .06s; } .st-card .st-t { animation-delay: .1s; } .st-card .st-p { animation-delay: .16s; }
@keyframes st-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.st-ic { width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 20px 40px -18px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); margin-bottom: 8px; }
.st-ic .glyph { color: #fff; stroke: #fff; animation: st-float 3.2s ease-in-out infinite; }
@keyframes st-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.st-k { font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.st-t { margin: 0; font-size: clamp(1.8rem, 7.5vw, 2.5rem); line-height: 1.08; font-weight: 900; letter-spacing: -.02em; text-wrap: balance; }
.st-p { margin: 0; font-size: 1.05rem; line-height: 1.45; opacity: .92; max-width: 40ch; }
.st-ui { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.st-ui span { padding: 8px 13px; border-radius: 999px; background: rgba(255,255,255,.95); color: #1b1446; font-weight: 800; font-size: .86rem; box-shadow: 0 10px 22px -12px rgba(0,0,0,.6); animation: st-up .45s cubic-bezier(.2,.9,.25,1.2) both; }
.st-act { pointer-events: auto; margin-top: 14px; border: 0; border-radius: 999px; padding: 13px 22px; font-weight: 900; font-size: 1rem; color: #1b1446; background: #fff; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); position: relative; z-index: 4; }
.st-nav { position: absolute; top: 90px; bottom: 0; border: 0; background: none; z-index: 2; padding: 0; -webkit-tap-highlight-color: transparent; }
.st-prev { left: 0; width: 32%; } .st-next { right: 0; width: 68%; }
.st-ov.paused .st-card { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .st-ov, .st-card > *, .st-ui span, .st-ic .glyph { animation: none !important; } }
@media (max-width: 760px) {
  body.mob .sections.tabbar .sec-l { display: none !important; }
  body.mob .sections.tabbar .sec { font-size: .86rem !important; }
}

.sec-s { display: none; }
@media (max-width: 760px) { body.mob .sections.tabbar .sec-s { display: inline !important; } }
@media (min-width: 761px) { .st-ov { top: 3vh; bottom: 3vh; left: calc(50% - 215px); right: auto; width: 430px; border-radius: 30px; overflow: hidden; box-shadow: 0 0 0 100vmax rgba(12,10,30,.62), 0 40px 80px -30px rgba(0,0,0,.7); } .st-bars { padding-top: 14px; } }
#app-luoghi .mapctl .gpsbtn.busy { animation: gps-busy 1s ease-in-out infinite; } @keyframes gps-busy { 50% { opacity: .55; } }
body.ovl .info-ph { opacity: 0 !important; pointer-events: none !important; transform: scale(.6); } .info-ph { transition: opacity .2s, transform .25s; }
.linkst.busy { color: var(--tint); font-weight: 700; } .linkst.busy::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: lk-spin .8s linear infinite; } @keyframes lk-spin { to { transform: rotate(360deg); } } .linkst .btn { margin-top: 6px; }

/* 6 ottobre: icona del social da cui viene il posto (riapre il post) */
.post-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; margin-left: 6px; vertical-align: -4px; flex: none; text-decoration: none; box-shadow: 0 2px 6px -2px rgba(0,0,0,.4); transition: transform .15s; }
.post-ic:active { transform: scale(.9); }
.post-ic svg { width: 14px; height: 14px; }
.post-ic.big { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 28px; padding: 0 11px 0 8px; border-radius: 999px; margin: 6px 0 0; color: #fff; font-weight: 800; font-size: .8rem; }
.post-ic.big svg { width: 15px; height: 15px; }
.soc-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.soc-tt { background: #111; box-shadow: -1.5px -1px 0 #25f4ee inset, 1.5px 1px 0 #fe2c55 inset, 0 2px 6px -2px rgba(0,0,0,.4); }
.soc-yt { background: #ff0033; } .soc-fb { background: #1877f2; } .soc-th { background: #101010; } .soc-pin { background: #e60023; } .soc-x { background: #000; }
html.dark .soc-tt, html.dark .soc-th, html.dark .soc-x { box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 2px 6px -2px rgba(0,0,0,.4); }
.i-name { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; }
.i-nm { min-width: 0; }
/* 6 ottobre: "Il tuo stile" con tutti i tipi, toccabili (al posto di "Le tue liste") */
button.pf-bar { width: 100%; border: 0; background: none; color: inherit; font: inherit; font-size: .85rem; text-align: left; padding: 6px 4px; margin: 0; border-radius: 12px; cursor: pointer; }
button.pf-bar:active { background: var(--fill-3); }
button.pf-bar .pf-bl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.pf-bar .pf-bb { background: var(--c, var(--tint)) !important; }
.pf-sub2 { display: block; margin: 12px 0 2px; }
/* "Il tuo stile": tessere categoria selezionabili */
button.pf-sgt { border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; opacity: .55; transition: opacity .2s, box-shadow .2s, transform .15s; }
button.pf-sgt.on { opacity: 1; box-shadow: inset 0 0 0 2px var(--k); }
button.pf-sgt:active { transform: scale(.97); }
.pf-bars.in > * { animation: st-up .35s cubic-bezier(.2,.9,.25,1.1) both; }
.pf-bars.in > *:nth-child(2) { animation-delay: .03s; } .pf-bars.in > *:nth-child(3) { animation-delay: .06s; } .pf-bars.in > *:nth-child(4) { animation-delay: .09s; } .pf-bars.in > *:nth-child(n+5) { animation-delay: .12s; }

/* 7 ottobre: icone "Da provare" / "Provato" nell'elenco (si toccano) e foglio di valutazione */
.stb { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: none; padding: 2px 2px 0; margin-left: 2px; color: var(--ink-3); cursor: pointer; -webkit-tap-highlight-color: transparent; align-self: flex-start; }
.stb svg { width: 30px; height: 30px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.18)); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.stb small { font-size: .6rem; font-weight: 800; white-space: nowrap; letter-spacing: .01em; }
.stb.is-p small { color: #d9822b; } .stb.is-v small { color: #159a5b; }
html.dark .stb.is-p small { color: #ffb547; } html.dark .stb.is-v small { color: #4fd98a; }
button.stb:active svg { transform: scale(.85); }
.item.just-v .stb svg { animation: stb-pop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes stb-pop { 0% { transform: scale(.4) rotate(-20deg); } 60% { transform: scale(1.25) rotate(6deg); } 100% { transform: none; } }
.i-top { align-items: flex-start !important; }
.rate-tic svg { width: 24px; height: 24px; }
.rate-name { font-size: 1.25rem; font-weight: 900; margin-top: 2px; }
.rate-sub { color: var(--ink-3); font-size: .86rem; margin-bottom: 10px; }
.rate-stars { display: flex; justify-content: center; gap: 6px; margin: 6px 0 2px; }
.rate-stars .rs { width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--fill-3); color: var(--ink-3); font-size: 1.7rem; line-height: 1; transition: transform .2s cubic-bezier(.3,1.6,.5,1), background .2s, color .2s; }
.rate-stars .rs.on { background: color-mix(in srgb, #ffb547 22%, transparent); color: #ffb000; transform: scale(1.06); }
.rate-stars .rs:active { transform: scale(.9); }
.rate-lab { text-align: center; font-weight: 800; color: var(--ink-2); font-size: .9rem; min-height: 1.3em; margin-bottom: 8px; }
.rate-f { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.rate-f > span { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.rate-f textarea, .rate-f input { width: 100%; box-sizing: border-box; border: 0; border-radius: 14px; background: var(--fill-3); color: var(--ink); -webkit-text-fill-color: var(--ink); padding: 10px 12px; font: inherit; font-size: 16px; resize: vertical; }
.rate-a { display: flex; gap: 8px; margin-top: 12px; } .rate-a .btn { flex: 1; justify-content: center; }
.rate-p { overflow-x: hidden; }
.rate-f { min-width: 0; width: 100%; }
.rate-f textarea { display: block; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; -webkit-appearance: none; appearance: none; line-height: 1.4; min-height: 64px; }
.rate-f textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--tint) !important; }

/* 22 ottobre: sezione Viaggi allineata a I tuoi luoghi */
/* comandi della mappa: capsule di vetro tutte uguali */
.vmap .vgps, .vmap .vgmaps, .vmap #v-fit { height: 40px !important; width: auto !important; padding: 0 14px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center; gap: 6px; font-weight: 800 !important; font-size: .82rem !important; text-decoration: none; border: 0; box-sizing: border-box; color: var(--ink) !important; background: var(--lg, rgba(255,255,255,.72)) !important; -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: var(--lg-sh, 0 8px 20px -10px rgba(0,0,0,.35)), inset 0 1px 0 rgba(255,255,255,.5) !important; }
.vmap .vgps { left: 12px !important; color: #fff !important; background: var(--tint) !important; }
.vmap .vgps.on { background: var(--tint) !important; box-shadow: 0 0 0 3px var(--tint-soft), var(--lg-sh) !important; }
.vmap .vgps .gps-l { display: inline !important; }
.vmap .vgps svg { width: 17px; height: 17px; }
.vmap #v-fit { right: 12px !important; left: auto !important; }
.vmap .vgmaps { top: 12px !important; bottom: auto !important; right: 96px !important; left: auto !important; }
@media (max-width: 980px) { .vmap .vgps { top: 10px; left: 10px !important; } .vmap .vgmaps { top: 10px !important; right: 92px !important; } .vmap #v-fit { top: 10px; } }
/* segnaposti come nei Tuoi Luoghi; quelli delle altre schede attenuati */
.gpin.vpin.dim { opacity: .45; filter: saturate(.6); }
.vmap.vsel .gpin.vpin:not(.sel) { opacity: .5; filter: saturate(.55); }
/* righe: nome con icona del social, stato a destra, azioni compatte con "⋯" */
.vitem.has-side { position: relative; padding-right: 58px; }
.vitem > .stb { position: absolute; top: 10px; right: 8px; }
.vi-name { display: flex; align-items: center; min-width: 0; }
.vi-acts .vi-mb { min-width: 40px; justify-content: center; font-weight: 900; letter-spacing: .05em; }
.vi-acts .vi-mb.on { background: var(--tint-soft) !important; color: var(--tint) !important; }
.vi-more { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding: 8px; border-radius: 14px; background: var(--fill-3); }
.vi-more[hidden] { display: none; }
.vcpin { background: var(--card, #fff) !important; color: var(--ink) !important; }
.vcpin b { color: var(--ink); }
.vi-acts { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 6px; align-items: center; }

/* 22 ottobre: itinerario AI con partenza, mezzi e costi */
.vprice { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; white-space: nowrap; vertical-align: 1px; }
.vprice.free { background: color-mix(in srgb, #1fa463 18%, transparent); color: #128a4f; }
.vprice.p1 { background: color-mix(in srgb, #2f7de0 15%, transparent); color: #2160b8; }
.vprice.p2 { background: color-mix(in srgb, #e0a020 18%, transparent); color: #a86d00; }
.vprice.p3 { background: color-mix(in srgb, #e5484d 16%, transparent); color: #c22f35; }
html.dark .vprice.free { color: #4fd98a; } html.dark .vprice.p1 { color: #7fb2ff; } html.dark .vprice.p2 { color: #ffc861; } html.dark .vprice.p3 { color: #ff8a8e; }
.vp-base, .vbase { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--tint-soft); margin-top: 8px; }
.vbase { margin: 10px 0 4px; flex-wrap: wrap; }
.vbase.hint { background: color-mix(in srgb, #ffb547 16%, var(--card)); }
.vp-bi, .vb-i { font-size: 1.4rem; flex: none; }
.vp-bt, .vb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vp-bt small, .vb-t small { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.vb-t > span { font-size: .84rem; color: var(--ink-2); }
.vb-a { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.vp-bf { display: flex; gap: 8px; margin-top: 8px; }
.vp-bf input { flex: 1; min-width: 0; border: 0; border-radius: 12px; background: var(--fill-3); color: var(--ink); -webkit-text-fill-color: var(--ink); padding: 0 12px; height: 40px; font-size: 16px; }
.vp-bmap { margin-top: 8px; }
.vp-bmsg { display: block; color: var(--ink-3); margin-top: 4px; }
.vp-note { display: block; color: var(--ink-3); font-size: .78rem; margin-top: 8px; }
.vd-mezzi { margin: 2px 0 8px; padding: 8px 12px; border-radius: 12px; background: var(--fill-3); font-size: .82rem; color: var(--ink-2); }
.vtl-go { display: flex; align-items: center; gap: 6px; margin: 0 0 2px 44px; padding: 3px 0; font-size: .76rem; font-weight: 700; color: var(--ink-3); border-left: 2px dashed color-mix(in srgb, var(--dc, var(--tint)) 50%, transparent); padding-left: 10px; }
.vbasepin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tint); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3); font-size: 16px; }
.vmap.picking { cursor: crosshair; box-shadow: inset 0 0 0 3px var(--tint) !important; }
.vavviso { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 10px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, #ffb547 18%, var(--card)); font-size: .8rem; color: var(--ink-2); line-height: 1.4; }
.vavviso .va-i { font-size: 1.1rem; flex: none; }
.vavviso b { display: block; color: var(--ink); font-size: .86rem; margin-bottom: 2px; }
.vp-warnmezzi { margin: -4px 0 6px; }

/* 22 ottobre: configurazione guidata con mini schermate (stile iPhone/Android) */
.ob-sl { position: relative; display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 6px; margin: 12px 0 4px; }
.ob-st { grid-column: 2; display: flex; justify-content: center; touch-action: pan-y; }
.ob-sa { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--fill-3); color: var(--ink); font-size: 1.3rem; line-height: 1; }
.ob-sa:disabled { opacity: .25; }
.ob-sd { grid-column: 1 / -1; display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.ob-sd i { width: 7px; height: 7px; border-radius: 50%; background: var(--fill-1, rgba(120,120,128,.35)); transition: width .25s, background .25s; }
.ob-sd i.on { width: 18px; border-radius: 4px; background: var(--tint); }
.ob-cap { grid-column: 1 / -1; text-align: center; font-size: .9rem; line-height: 1.4; color: var(--ink-2); margin-top: 6px; min-height: 2.8em; }
.ob-cap > b:first-child { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--tint); color: #fff; font-size: .72rem; margin-right: 4px; vertical-align: 1px; }
.m-phone { width: 168px; height: 300px; border-radius: 28px; padding: 7px; background: #111; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6), inset 0 0 0 2px #333; animation: st-up .35s cubic-bezier(.2,.9,.25,1.1) both; }
.m-scr { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: #f2f2f7; color: #111; font: 600 9.5px/1.25 -apple-system, system-ui, sans-serif; }
.m-page { position: absolute; inset: 0 0 34px; padding: 26px 12px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, #ece8ff, #fff); }
.m-page i { display: block; height: 10px; border-radius: 5px; background: #d9d4f5; } .m-page i.s { width: 60%; }
.m-page.map { background: repeating-linear-gradient(35deg, #e3ecd9 0 18px, #d5e3c7 18px 20px), #e3ecd9; inset: 0; }
.m-pin { position: absolute; left: 50%; top: 32%; font-size: 22px; transform: translateX(-50%); }
.m-safari { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: flex; justify-content: space-around; align-items: center; background: rgba(250,250,252,.96); border-top: .5px solid #ccc; font-size: 13px; color: #1f6feb; }
.m-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 70px; border-radius: 16px 16px 0 0; background: #fff; padding: 10px 8px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 -6px 18px rgba(0,0,0,.12); }
.m-sheet.low { top: auto; height: 62%; }
.m-row { padding: 7px 9px; border-radius: 9px; background: #f2f2f7; display: flex; align-items: center; gap: 5px; }
.m-row.small { justify-content: center; color: #1f6feb; background: none; }
.m-cap { font-size: 8px; color: #8a8a8e; letter-spacing: .04em; padding: 2px 4px 0; }
.m-plus { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: #34c759; color: #fff; font-size: 10px; }
.m-grab { margin-left: auto; color: #aaa; }
.m-apps, .m-grid { display: flex; justify-content: space-around; gap: 4px; padding: 2px 0 4px; }
.m-apps i, .m-grid i { width: 30px; height: 30px; border-radius: 9px; background: #eee; display: grid; place-items: center; font-style: normal; font-size: 14px; }
.m-grid i img { width: 26px; height: 26px; border-radius: 7px; }
.m-grid.lab span { width: 30px; font-size: 6.5px; text-align: center; color: #555; }
.m-dlg { position: absolute; left: 0; right: 0; top: 0; padding: 10px 8px; background: #fff; border-radius: 0 0 14px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.m-dh { display: flex; justify-content: space-between; color: #1f6feb; margin-bottom: 8px; } .m-dh b { color: #111; }
.m-app { display: flex; align-items: center; gap: 8px; } .m-app img { width: 34px; height: 34px; border-radius: 9px; }
.m-app.big { flex-direction: column; margin: 6px 0; } .m-app.big img { width: 46px; height: 46px; border-radius: 12px; }
.m-homeicons { position: absolute; left: 12px; right: 12px; bottom: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.m-homeicons i, .m-homeicons img { width: 100%; aspect-ratio: 1; border-radius: 9px; background: #d8d8de; }
.m-homeicons img.pop { animation: m-pop 1.6s ease-in-out infinite; }
@keyframes m-pop { 50% { transform: scale(1.12); } }
.m-sc { position: absolute; left: 10px; right: 10px; top: 60px; padding: 14px 10px; border-radius: 16px; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.m-sci { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, #ff6a4d, #c445a8); }
.m-sc small { color: #8a8a8e; } .m-btn { margin-top: 8px; padding: 7px 10px; border-radius: 9px; background: #1f6feb; color: #fff; }
.m-alert { position: absolute; left: 14px; right: 14px; top: 90px; border-radius: 14px; background: rgba(250,250,252,.98); box-shadow: 0 10px 26px rgba(0,0,0,.2); overflow: hidden; text-align: center; }
.m-alert > b { display: block; padding: 10px 8px; }
.m-ab { padding: 7px; border-top: .5px solid #ddd; color: #1f6feb; }
.m-chrome { position: absolute; left: 0; right: 0; top: 0; height: 32px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: .5px solid #ddd; }
.m-url { font-size: 8px; color: #555; background: #f1f3f4; padding: 4px 8px; border-radius: 10px; }
.m-chrome > span:last-child { font-size: 16px; padding: 0 4px; }
.m-menu { position: absolute; right: 6px; top: 30px; width: 110px; background: #fff; border-radius: 10px; padding: 5px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.m-menu .m-row { background: none; padding: 6px; }
.m-scr .hl { position: relative; color: #fff !important; background: var(--tint, #6a45e8) !important; border-radius: 9px; box-shadow: 0 0 0 3px rgba(106,69,232,.25); animation: m-hl 1.4s ease-in-out infinite; }
.m-safari .hl, .m-chrome .hl { padding: 2px 6px; }
.m-grid i.hl { border-radius: 9px; }
@keyframes m-hl { 50% { box-shadow: 0 0 0 7px rgba(106,69,232,.12); } }
.ob-qr { width: 180px; height: 180px; margin: 14px auto 6px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.4); }
.ob-qr svg { width: 100%; height: 100%; display: block; }
.ob-url { text-align: center; font-weight: 800; color: var(--tint); margin-bottom: 8px; }
.ob-warn { padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, #ffb547 18%, var(--card)); font-size: .84rem; margin: 6px 0; }
@media (prefers-reduced-motion: reduce) { .m-scr .hl, .m-homeicons img.pop, .m-phone { animation: none; } }
/* configurazione guidata sopra a tutto (anche alla barra in basso), pulsanti sempre visibili */
.udlg.onb { z-index: 9600 !important; bottom: 0 !important; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important; }
.udlg.onb .udlg-box.ob { display: flex; flex-direction: column; max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: hidden; }
.udlg.onb .ob-b { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.udlg.onb .udlg-acts { flex: none; padding-top: 10px; border-top: 1px solid var(--line, rgba(0,0,0,.06)); }

/* 22 ottobre: sezioni = goccia "I tuoi luoghi | I tuoi viaggi" + pallino 🔥 separato (si apre in "Di tendenza" quando è attivo) */
html body nav.sections, html body nav.sections.tabbar { display: flex !important; align-items: center !important; gap: 8px !important; background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; grid-template-columns: none !important; }
html body nav.sections .sec-pill { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 999px; background: var(--fill-3); }
html body nav.sections.tabbar .sec-pill { height: 48px; box-sizing: border-box; padding: 4px; background: var(--lg, rgba(255,255,255,.72)); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: var(--lg-sh, 0 10px 26px -12px rgba(0,0,0,.35)), inset 0 1px 0 rgba(255,255,255,.55); }
html body nav.sections .sec-pill .sec { min-width: 0; justify-content: center; border-radius: 999px !important; }
html body nav.sections .sec-pill .sec.on { background: var(--card) !important; color: var(--ink) !important; box-shadow: 0 3px 10px -4px rgba(0,0,0,.22) !important; }
html.dark body nav.sections .sec-pill .sec.on { background: rgba(255,255,255,.16) !important; color: #fff !important; }
/* il pallino del fuoco */
html body nav.sections .sec.sec-fire { flex: none; width: 40px; height: 40px; padding: 0 !important; gap: 0 !important; justify-content: center; border-radius: 999px !important; background: var(--fill-3) !important; box-shadow: none !important; overflow: hidden; white-space: nowrap; transition: width .35s cubic-bezier(.3,1.3,.5,1), background .25s, padding .25s; }
html body nav.sections.tabbar .sec.sec-fire { width: 48px; height: 48px; background: var(--lg, rgba(255,255,255,.72)) !important; -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: var(--lg-sh, 0 10px 26px -12px rgba(0,0,0,.35)), inset 0 1px 0 rgba(255,255,255,.55) !important; }
html body nav.sections .sec.sec-fire > span:first-child { font-size: 1.2rem !important; filter: none !important; }
html body nav.sections .sec.sec-fire .sec-l, html body nav.sections .sec.sec-fire .sec-s { display: none !important; }
html body nav.sections .sec.sec-fire.on { width: auto; padding: 0 14px 0 11px !important; gap: 6px !important; color: #fff !important; background: linear-gradient(135deg, #ff8a3d, #e8412c) !important; box-shadow: 0 8px 20px -8px rgba(232,65,44,.7) !important; }
html body nav.sections .sec.sec-fire.on .sec-l { display: inline !important; font-weight: 800; }
html body nav.sections .sec.sec-fire:not(.on):active { transform: scale(.92); }
html body nav.sections .sec.sec-fire::after { display: none !important; }
/* quando è attivo "Di tendenza" la goccia non ha nulla di selezionato: le due voci restano leggibili */
/* telefono: etichette intere se c'è spazio */
@media (max-width: 760px) {
  body.mob nav.sections.tabbar .sec-pill .sec .sec-l { display: inline !important; } body.mob nav.sections.tabbar .sec-pill .sec .sec-s { display: none !important; }
  body.mob nav.sections.tabbar .sec-pill .sec { font-size: .82rem !important; padding: 0 6px !important; }
  body.mob.trend-on nav.sections.tabbar .sec-pill .sec .sec-l { display: none !important; } body.mob.trend-on nav.sections.tabbar .sec-pill .sec .sec-s { display: inline !important; }
}
@media (max-width: 360px) { body.mob nav.sections.tabbar .sec-pill .sec .sec-l { display: none !important; } body.mob nav.sections.tabbar .sec-pill .sec .sec-s { display: inline !important; } }
html body .mr-nav nav.sections, html body #tnav-slot nav.sections, html body .vside-nav nav.sections, html body .vnav-slot nav.sections { width: 100% !important; align-self: stretch !important; }
body.trend-on nav.sections .sec-pill .sec .sec-l { display: none !important; } body.trend-on nav.sections .sec-pill .sec .sec-s { display: inline !important; }
html body nav.sections .sec-pill .sec { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app-luoghi .mr-nav nav.sections, #tnav-slot nav.sections, #vside-nav nav.sections, #vnav-slot nav.sections, body #sez-viaggi .vside-nav nav.sections { display: flex !important; grid-template-columns: none !important; background: none !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; width: 100% !important; gap: 8px !important; }
html.dark body nav.sections .sec.sec-fire.on, html body nav.sections.tabbar .sec.sec-fire.on, #app-luoghi nav.sections .sec.sec-fire.on, #tnav-slot nav.sections .sec.sec-fire.on { color: #fff !important; background: linear-gradient(135deg, #ff8a3d, #e8412c) !important; }
html.dark .sp-o { color: rgba(255,255,255,.72) !important; } html.dark .sp-o.on { color: #fff !important; }
.vside-nav, .vnav-slot { display: flex; flex-direction: column; } .vside-nav > nav.sections, .vnav-slot > nav.sections { order: 1; } .vside-nav > .spsw, .vnav-slot > .spsw { order: 2; margin: 8px 0 12px !important; }

/* ===== intestazione del computer: ricerca più compatta, "Esploratori" a goccia larga, "i" dopo Aggiungi ===== */
#people .ppl-l { display: none; }
@media (min-width: 981px) {
  html body .omni.zbar { flex: 1 1 340px; max-width: 500px; min-width: 0; }
  html body #people.btn.ghost { width: auto; height: 40px; padding: 0 15px 0 10px; gap: 7px; display: inline-flex; align-items: center; border-radius: 999px;
    background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(232,65,44,.10)) !important; box-shadow: inset 0 0 0 1px rgba(124,58,237,.18), 0 4px 12px -8px rgba(124,58,237,.6) !important; color: #3b2a6b !important; font-weight: 750; transition: background .2s, transform .15s; }
  html body #people.btn.ghost:hover { background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(232,65,44,.16)) !important; }
  html body #people.btn.ghost:active { transform: scale(.97); }
  #people .ppl-l { display: inline; font-size: .9rem; letter-spacing: -.01em; white-space: nowrap; }
  html body #admin.btn { width: 40px; height: 40px; border-radius: 50%; }
  .hdr-r .info-pc { margin: 0 2px 0 0; }
}
@media (min-width: 981px) { html.dark body #people.btn.ghost { background: linear-gradient(135deg, rgba(150,110,255,.24), rgba(255,110,90,.14)) !important; box-shadow: inset 0 0 0 1px rgba(170,140,255,.3) !important; color: #ece4ff !important; } }
.t-how { display: table; margin: 7px 0 0; padding: 3px 10px; border: 0; border-radius: 999px; background: rgba(232,65,44,.1); color: #c2410c; font-family: inherit; font-weight: 700; font-size: .78rem; line-height: 1.5; cursor: pointer; white-space: nowrap; }
.t-how:hover { background: rgba(232,65,44,.18); }
html.dark .t-how { background: rgba(255,138,61,.16); color: #ffb084; }

/* ===== 💶 Budget del viaggio ===== */
.vbud-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(15,157,119,.12); color: #0b7a5c; font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; white-space: nowrap; }
.vbud-chip:hover { background: rgba(15,157,119,.2); }
.vbud-chip.over { background: rgba(208,36,58,.12); color: #b4202f; }
.bg-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px 18px; padding: 18px; margin: 2px 0 12px; border-radius: 22px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, #19b88b 0%, #0f9d77 38%, #0b6f6a 100%); box-shadow: 0 18px 36px -22px rgba(11,111,106,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.bg-hero::after { content: ""; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); pointer-events: none; }
.bg-h-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bg-h-l > small { font-size: .78rem; font-weight: 650; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
.bg-big { font-size: 2.1rem; line-height: 1.1; letter-spacing: -.02em; font-weight: 800; }
.bg-bar { position: relative; display: flex; height: 9px; margin: 6px 0 2px; border-radius: 99px; background: rgba(255,255,255,.22); overflow: hidden; }
.bg-bar i { display: block; height: 100%; }
.bg-b1 { background: #fff; border-radius: 99px; transition: width .4s var(--ease, ease); }
.bg-b2 { background: repeating-linear-gradient(45deg, rgba(255,255,255,.65) 0 4px, rgba(255,255,255,.3) 4px 8px); }
.bg-bar.over .bg-b1 { background: #ffd36b; }
.bg-hero .bg-of { font-size: .8rem; opacity: .92; text-transform: none; letter-spacing: 0; font-weight: 600; }
.bg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.bg-st { display: flex; flex-direction: column; padding: 9px 11px; border-radius: 14px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); min-width: 0; }
.bg-st b { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-st small { font-size: .72rem; opacity: .85; }
.bg-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bg-hero .bg-acts .btn.solid { background: #fff !important; color: #0b6f5a !important; box-shadow: 0 8px 18px -10px rgba(0,0,0,.45) !important; }
.bg-hero .bg-acts .btn.ghost { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.bg-ro { font-weight: 650; opacity: .9; }
.bg-seg { display: flex; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 999px; background: var(--fill-3); }
.bg-sg { flex: 1; height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.bg-sg.on { background: var(--card); color: var(--ink); box-shadow: 0 2px 8px -3px rgba(0,0,0,.18); }
.bg-cbar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; margin: 2px 2px 8px; background: var(--fill-3); gap: 2px; }
.bg-cbar i { display: block; height: 100%; min-width: 4px; }
.bg-leg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.bg-lg { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border: 0; border-radius: 999px; background: var(--fill-3); color: var(--ink); font: inherit; font-size: .8rem; cursor: pointer; }
.bg-lg::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.bg-lg b { font-weight: 750; }
.bg-lg.on { background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--c); }
.bg-lg:disabled { cursor: default; }
.bg-day { margin: 0 0 12px; padding: 4px 4px 6px; border-radius: 18px; background: var(--card); box-shadow: var(--lg-sh); }
.bg-dh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 10px 6px; }
.bg-dh b { font-size: .86rem; }
.bg-dh span { font-size: .82rem; color: var(--ink-2); font-weight: 700; }
.bg-row { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bg-row:hover { background: var(--fill-3); }
.bg-row + .bg-row::before { content: ""; position: absolute; left: 56px; right: 10px; top: 0; height: 1px; background: var(--sep); }
.bg-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; font-size: 1.05rem; background: color-mix(in srgb, var(--c) 15%, transparent); }
.bg-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bg-t b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-t small { font-size: .76rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-amt { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.bg-amt b { font-size: .95rem; font-variant-numeric: tabular-nums; }
.bg-amt small { font-size: .72rem; color: var(--ink-3); }
.bg-amt .bg-pv { color: #b5651d; font-weight: 700; }
.bg-row.prev .bg-ic { background: transparent; outline: 1.5px dashed color-mix(in srgb, var(--c) 60%, transparent); outline-offset: -1.5px; }
.bg-row.prev .bg-amt b { color: var(--ink-2); }
.bg-okb { flex: none; padding: 5px 9px; border-radius: 999px; background: rgba(15,157,119,.12); color: #0b7a5c; font-size: .76rem; font-weight: 750; white-space: nowrap; }
.bg-okb:hover { background: rgba(15,157,119,.22); }
.bg-empty .bg-e-ic { font-size: 2rem; margin-bottom: 4px; }
.bg-empty b { display: block; color: var(--ink); margin-bottom: 4px; }
.bg-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.bg-empty > .btn { margin-top: 12px; }
.bg-all { margin: 0 0 12px; }
.bg-priv { margin: 4px 4px 0; font-size: .76rem; }
.bg-ppl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 12px; }
.bg-p { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--card); box-shadow: var(--lg-sh); min-width: 0; }
.bg-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: .74rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #e8412c); }
.bg-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bg-pt b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-pt small { font-size: .74rem; color: var(--ink-2); }
.bg-net { flex: none; font-weight: 800; font-size: .92rem; font-variant-numeric: tabular-nums; }
.bg-p.pos .bg-net { color: #0b8a63; } .bg-p.neg .bg-net { color: #c2322a; } .bg-p.zero .bg-net { color: var(--ink-3); font-weight: 650; }
.bg-settle { padding-bottom: 10px; }
.bg-settle > .hint { padding: 0 10px 4px; }
.bg-tx { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
.bg-tx-a { font-weight: 700; font-size: .9rem; }
.bg-tx-ar { color: var(--ink-3); font-weight: 800; }
.bg-tx-i { margin-left: auto; font-size: .95rem; font-variant-numeric: tabular-nums; color: #0b7a5c; }
.bg-tx.done { opacity: .75; }
.bg-tx.done .bg-tx-i { color: var(--ink-2); }
.bg-saldi { margin: 4px 6px 0; }
.bg-saldi summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--ink-2); padding: 6px 4px; }
.bg-sim { padding: 16px; border-radius: 22px; background: var(--card); box-shadow: var(--lg-sh); }
.bg-sim-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bg-sim-tot { display: flex; flex-direction: column; gap: 2px; }
.bg-sim-tot > small:first-child { font-size: .78rem; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.bg-sim-tot b { font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; background: linear-gradient(120deg, #0f9d77, #6a45e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bg-sim-tot .bg-of { font-size: .8rem; color: var(--ink-2); }
.bg-liv { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.bg-lv { flex: 1; min-width: 0; padding: 0 4px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 36px; border: 0; border-radius: 12px; background: var(--fill-3); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.bg-lv.on { background: rgba(15,157,119,.14); color: #0b7a5c; box-shadow: inset 0 0 0 1.5px rgba(15,157,119,.55); }
.bg-lv:disabled { cursor: default; opacity: .7; }
.bg-as { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.bg-f { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 14px; background: var(--fill-3); min-width: 0; }
.bg-f > span { font-size: .72rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-fi { display: flex; align-items: baseline; gap: 4px; }
.bg-fi input { width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.02rem; font-weight: 800; font-variant-numeric: tabular-nums; outline: none; }
.bg-fi input:focus { color: #0b7a5c; }
.bg-fi em { font-style: normal; font-weight: 700; color: var(--ink-3); font-size: .86rem; }
.bg-cmp { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.bg-cmp-h, .bg-cr summary { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px; align-items: center; gap: 6px; }
.bg-cmp-h { padding: 0 10px 2px; } .bg-cmp-h small { text-align: right; font-size: .7rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; }
.bg-cr summary { position: relative; list-style: none; cursor: pointer; padding: 9px 10px 13px; border-radius: 12px; }
.bg-cr summary::-webkit-details-marker { display: none; }
.bg-cr summary:hover { background: var(--fill-3); }
.bg-cr-l { font-size: .88rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-cr-s, .bg-cr-e { text-align: right; font-size: .88rem; font-variant-numeric: tabular-nums; }
.bg-cr-s { color: var(--ink-2); } .bg-cr-s.over { color: #c2322a; }
.bg-cr-bar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--c) 18%, transparent); overflow: hidden; }
.bg-cr-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.bg-cr-d { list-style: none; margin: 0 0 6px; padding: 0 10px 0 14px; }
.bg-cr-d li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: .8rem; color: var(--ink-2); border-bottom: 1px solid var(--sep); }
.bg-cr-d li:last-child { border-bottom: 0; }
.bg-cr-d b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bg-notes { padding: 8px 12px; border-radius: 14px; background: rgba(255,181,71,.12); margin-bottom: 12px; }
.bg-notes p { margin: 4px 0; font-size: .78rem; color: var(--ink-2); }
.bg-sim .bg-acts { display: flex; }
@media (max-width: 760px) {
  .bg-hero { grid-template-columns: 1fr; padding: 16px; }
  .bg-big { font-size: 1.9rem; }
  .bg-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .bg-st { padding: 7px 8px; } .bg-st b { font-size: .86rem; } .bg-st small { font-size: .66rem; }
  .bg-as { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bg-sg { font-size: .8rem; }
  .bg-cmp-h, .bg-cr summary { grid-template-columns: minmax(0, 1fr) 64px 64px; }
}

/* ===== permessi nei viaggi condivisi ===== */
.shtr { width: min(520px, calc(100vw - 24px)); }
.shtr-l { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; max-height: 46vh; overflow: auto; }
.shtr-e { padding: 14px; border-radius: 14px; background: var(--fill-3); color: var(--ink-2); font-size: .86rem; text-align: center; }
.shtr-r { padding: 10px 12px 12px; border-radius: 16px; background: var(--fill-3); }
.shtr-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.shtr-top .ppl-t { flex: 1; }
.shtr-alt { display: block; margin: 10px auto 0; border: 0; background: none; color: var(--tint); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.shtr-h { margin-top: 8px; font-size: .76rem; text-align: center; }
.perm-ed { display: flex; flex-direction: column; gap: 8px; }
.perm-pre { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--fill-2); }
.perm-p { flex: 1; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.perm-p.on { background: var(--card); color: var(--ink); box-shadow: 0 2px 6px -2px rgba(0,0,0,.2); }
.perm-tg { display: flex; flex-wrap: wrap; gap: 6px; }
.perm-t { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 8px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink-3); font: inherit; font-size: .79rem; font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1px var(--sep); transition: background .15s, color .15s; }
.perm-t .perm-ic { filter: grayscale(1); opacity: .55; }
.perm-t.on { background: rgba(15,157,119,.12); color: #0b7a5c; box-shadow: inset 0 0 0 1.5px rgba(15,157,119,.5); }
.perm-t.on .perm-ic { filter: none; opacity: 1; }
.perm-d { margin: -2px 0 10px 46px; }
@media (max-width: 520px) { .perm-d { margin-left: 0; } .perm-p { font-size: .76rem; } }
.perm-d summary { cursor: pointer; font-size: .78rem; font-weight: 700; color: var(--ink-2); padding: 2px 0 6px; }
.perm-d .perm-ed { padding: 8px; border-radius: 14px; background: var(--fill-3); }
.perm-h { margin-top: 6px; font-size: .76rem; }
html.dark .vbud-chip { background: rgba(60,210,160,.16); color: #7fe3c0; }
html.dark .bg-okb, html.dark .bg-lv.on, html.dark .perm-t.on { background: rgba(60,210,160,.16); color: #7fe3c0; }
html.dark .bg-amt .bg-pv { color: #ffb36b; }
html.dark .bg-p.pos .bg-net, html.dark .bg-tx-i { color: #5fe0b0; } html.dark .bg-p.neg .bg-net, html.dark .bg-cr-s.over { color: #ff8a80; }
html.dark .bg-sim-tot b { background: linear-gradient(120deg, #5fe0b0, #a98bff); -webkit-background-clip: text; background-clip: text; }
html.dark .bg-notes { background: rgba(255,181,71,.1); }

/* ===== 💶 Budget e 🧳 Valigia: sempre a portata (computer: in fondo al pannello; telefono: pannello in vetro sotto le sezioni) ===== */
.vdock[hidden] { display: none !important; }
.vdock { position: fixed; z-index: 70; display: flex; gap: 6px; padding: 6px; border-radius: 24px; -webkit-backdrop-filter: var(--lg-blur-thick); backdrop-filter: var(--lg-blur-thick); box-shadow: var(--lg-rim), 0 18px 40px -16px rgba(20,16,40,.45), 0 2px 6px rgba(0,0,0,.06); }
.vd-b { display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 16px 6px 6px; border: 0; border-radius: 18px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .2s, transform .15s; }
.vd-b:hover { background: var(--fill-3); }
.vd-b:active { transform: scale(.97); }
.vd-b.on { background: var(--card); box-shadow: 0 4px 14px -6px rgba(0,0,0,.28); }
.vd-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-size: 1.3rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 16px -8px var(--vsh); }
.vd-budget .vd-ic { background: linear-gradient(140deg, #3ddcaa, #12a57c 55%, #0b6f6a); --vsh: rgba(15,157,119,.9); }
.vd-valigia .vd-ic { background: linear-gradient(140deg, #ffd27a, #f4a646 50%, #d6701d); --vsh: rgba(214,112,29,.9); }
.vd-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.vd-t b { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
.vd-t small { font-size: .74rem; color: var(--ink-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 981px) {
  .vdock { transform: translateX(-50%); }
}
@media (max-width: 980px) {
  body.mob .vdock { top: calc(var(--hdrb, 60px) + 4px); left: 12px; right: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 22px; transition: opacity .2s, transform .25s; }
  body.mob .vd-b { padding: 5px 10px 5px 5px; gap: 8px; border-radius: 17px; }
  body.mob .vd-ic { width: 38px; height: 38px; border-radius: 13px; font-size: 1.15rem; }
  body.mob .vd-t b { font-size: .9rem; }
  body.mob .vd-t small { font-size: .7rem; }
  body.ovl .vdock, body.st-open .vdock, body[data-vlist="1"] .vdock { opacity: 0; pointer-events: none; transform: translateY(-8px); }
  body.vdock-on[data-section="viaggi"] .vmap .vgps, body.vdock-on[data-section="viaggi"] .vmap .vgmaps, body.vdock-on[data-section="viaggi"] .vmap #v-fit { top: calc(var(--hdrb, 60px) + var(--vdock-h, 60px) + 14px) !important; }
}
html.dark .vdock { background: rgba(30,30,38,.78); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12), 0 18px 40px -16px rgba(0,0,0,.7); }
html.dark .vd-b.on { background: rgba(255,255,255,.12); }
/* menu contestuale degli strumenti */
.vtm-p .gs-t { display: flex; align-items: center; gap: 10px; }
.vtm-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font-size: 1.1rem; }
.vtm-ic.vtm-budget { background: linear-gradient(140deg, #3ddcaa, #0f9d77); } .vtm-ic.vtm-valigia { background: linear-gradient(140deg, #ffd27a, #e08a2c); }
.vtm-tpl { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin: 4px 0 10px; border: 0; border-radius: 18px; background: linear-gradient(135deg, rgba(244,166,70,.16), rgba(214,112,29,.08)); box-shadow: inset 0 0 0 1px rgba(214,112,29,.22); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.vtm-tic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--card); font-size: 1.2rem; box-shadow: 0 4px 10px -6px rgba(0,0,0,.3); }
.vtm-go { flex: none; font-size: .82rem; font-weight: 800; color: #b55d12; }
.vtm-now { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 4px 0 10px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #12a57c, #0b6f6a); box-shadow: 0 12px 24px -16px rgba(11,111,106,.9); }
.vtm-now.vtm-valigia { background: linear-gradient(135deg, #f4a646, #c9611a); box-shadow: 0 12px 24px -16px rgba(201,97,26,.9); }
.vtm-nt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .vtm-nt small { font-size: .74rem; font-weight: 700; opacity: .9; } .vtm-nt b { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vtm-now .btn.solid { background: #fff !important; color: #0b6f5a !important; box-shadow: none !important; }
.vtm-now.vtm-valigia .btn.solid { color: #a8500f !important; }
.vtm-lab { margin: 12px 4px 6px; font-size: .74rem; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.vtm-l { display: flex; flex-direction: column; gap: 2px; }
.vtm-r { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 16px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.vtm-r:hover, .vtm-r.on { background: var(--fill-3); }
.vtm-cv { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-size: 1.25rem; background: hsl(var(--h, 220) 70% 92%); }
html.dark .vtm-cv { background: hsl(var(--h, 220) 35% 24%); }
.vtm-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vtm-tt b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vtm-tt small { font-size: .76rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vtm-m { flex: none; font-weight: 800; font-size: .9rem; color: #0b7a5c; font-variant-numeric: tabular-nums; }
.vtm-m.no { color: var(--ink-3); font-weight: 600; } .vtm-m.sh { color: var(--ink-2); font-size: .76rem; font-weight: 700; }
.vtm-ring { flex: none; position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(#f0a040 calc(var(--p) * 1%), var(--fill-2) 0); }
.vtm-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--card); }
.vtm-ring b { position: relative; font-size: .64rem; font-weight: 800; color: var(--ink-2); }
.vtm-ring.full { background: conic-gradient(#12a57c 100%, transparent 0); } .vtm-ring.full b { color: #0b7a5c; }
.vtm-chev { flex: none; color: var(--ink-3); font-size: 1.2rem; font-weight: 700; }
html.dark .vtm-m { color: #5fe0b0; } html.dark .vtm-go { color: #ffb46b; } html.dark .vtm-ring.full b { color: #5fe0b0; }
/* vista dello strumento dentro il viaggio */
.vtool-h { margin: 6px 0 12px; padding: 14px 16px 16px; border-radius: 24px; background: var(--card); box-shadow: var(--lg-sh); }
.vtool-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vtool-top .vback { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtool-sw { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--fill-3); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 750; cursor: pointer; }
.vtool-sw:hover { background: var(--fill-2); }
.vtool-row { display: flex; align-items: center; gap: 12px; }
.vtool-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; font-size: 1.6rem; }
.vt-budget .vtool-ic { background: linear-gradient(140deg, #3ddcaa, #12a57c 55%, #0b6f6a); box-shadow: 0 10px 20px -10px rgba(15,157,119,.9); }
.vt-valigia .vtool-ic { background: linear-gradient(140deg, #ffd27a, #f4a646 50%, #d6701d); box-shadow: 0 10px 20px -10px rgba(214,112,29,.9); }
.vtool-t { min-width: 0; display: flex; flex-direction: column; }
.vtool-t h1 { margin: 0; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; }
.vtool-t small { font-size: .84rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbadge.sh { background: rgba(106,69,232,.14); color: #5634d6; }
html.dark .vbadge.sh { background: rgba(160,130,255,.2); color: #cbb8ff; }
.vs-home { flex: none; }
/* linguette del viaggio: griglia ordinata (3 per riga, 6 in fila quando c'è spazio) */
@media (min-width: 981px) {
  #vmain { container-type: inline-size; container-name: vmain; }
  html body .vtabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  html body .vtabs .vtab { flex: none; min-width: 0; justify-content: center; padding: 8px 8px; gap: 6px; font-size: .86rem; white-space: nowrap; overflow: hidden; }
  html body .vtabs .vtab .vt-l { overflow: hidden; text-overflow: ellipsis; }
  @container vmain (min-width: 760px) { html body .vtabs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
}
/* ===== Di tendenza: Posti | Mete ===== */
.t-kind { display: flex; gap: 4px; padding: 4px; margin: 2px 0 12px; border-radius: 999px; background: var(--fill-3); }
.t-k { flex: 1; height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; transition: background .2s, color .2s; }
.t-k.on { background: var(--card); color: var(--ink); box-shadow: 0 3px 10px -4px rgba(0,0,0,.22); }
.tv-where { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tv-status { padding: 10px 12px; border-radius: 12px; background: var(--soft); color: var(--ink-2); font-size: .86rem; margin-bottom: 8px; }
.tv-list { display: flex; flex-direction: column; gap: 8px; }
.tv-flag { grid-area: i; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 1.45rem; background: var(--fill-3); }
.tv-st { gap: 4px; }
.tv-c { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.tv-c.v { background: rgba(31,164,99,.13); color: #13703f; }
.tv-c.s { background: rgba(244,166,70,.18); color: #8a4b0b; }
.tv-c.d { background: rgba(106,69,232,.12); color: #5634d6; }
.tvpin { display: flex; align-items: center; gap: 5px; padding: 3px 10px 3px 3px; border-radius: 99px; background: #fff; box-shadow: 0 4px 12px -4px rgba(0,0,0,.35); border: 2px solid #fff; font-size: .8rem; font-weight: 800; color: #12141a; white-space: nowrap; transition: transform .15s; }
.tvpin b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #12141a; color: #fff; font-size: .68rem; }
.tvpin.top b { background: linear-gradient(135deg, #ffb547, #e8412c); }
.tvpin.sel { transform: scale(1.18); border-color: #e8412c; }
html.dark .tv-c.v { background: rgba(60,210,140,.16); color: #7fe3b0; } html.dark .tv-c.s { background: rgba(255,180,90,.16); color: #ffc58a; } html.dark .tv-c.d { background: rgba(160,130,255,.18); color: #cbb8ff; }
html.dark .tvpin { background: #22232b; border-color: #22232b; color: #fff; } html.dark .tvpin b { background: #fff; color: #12141a; }
/* computer: niente scorrimento della pagina oltre lo schermo (la banda vuota in fondo) */
@media (min-width: 981px) { .trendsec { min-height: 0 !important; } }
.vdock { background: rgba(255,255,255,.9); }
/* fogli "dal basso" anche sul computer: finestra in vetro al centro (prima su computer non si vedevano) */
@media (min-width: 981px) {
  .bsh { position: fixed; inset: 0; z-index: 95; background: rgba(15,14,30,0); transition: background .25s; }
  .bsh.on { background: rgba(15,14,30,.22); }
  .bsh-p { position: absolute; inset: 0; margin: auto; width: min(460px, calc(100vw - 32px)); height: fit-content; max-height: min(80vh, 760px); overflow-y: auto; padding: 10px 18px 18px; border-radius: 28px; background: var(--card); box-shadow: var(--lg-sh-lg), inset 0 0 0 .5px rgba(0,0,0,.05); opacity: 0; transition: opacity .2s, scale .3s var(--spring, ease); scale: .96; }
  .bsh.on .bsh-p { opacity: 1; scale: 1; }
  .bsh-grab { display: none; }
  .bsh-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
  .bsh-h .x { flex: none; border: 0; background: var(--fill-3); width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; color: var(--ink-2); cursor: pointer; }
  .gs-t { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
  .gs-sub { margin: 0 0 10px; color: var(--ink-2); font-size: .88rem; }
  /* menu di Budget e Valigia: si apre sopra i due pulsanti in basso */
  #vtoolsh .bsh-p { inset: auto auto var(--vtm-b, 110px) var(--vtm-l, 16px); margin: 0; transform-origin: 50% 100%; }
  #vtoolsh.on { background: rgba(15,14,30,.12); }
}
html.dark .bsh-p { background: #1d1e25; }
.vtm-tpl .vtm-tt b { white-space: normal; }
@media (min-width: 981px) {
  #vnav-slot { padding: 12px 8px 4px; }
  .bsh .bsh-p { background: rgba(255,255,255,.95) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
  html.dark .bsh .bsh-p { background: rgba(29,30,37,.95) !important; }
}
/* modalità scura: pulsanti sopra la mappa ben leggibili (prima "Vicino a me" e i filtri erano quasi trasparenti) */
html.dark #app-luoghi .mapctl .gpsbtn:not(.on), html.dark #app-luoghi .mapctl .chip.mchip:not(.on), html.dark #app-luoghi .mapctl #f-dist, html.dark #app-luoghi .mapctl .mapsw, html.dark .vmap .mapfab, html.dark .vmap .vgmaps, html.dark .tmapcol .mapfab, html.dark #app-luoghi .mapctl .mapfab {
  background: rgba(28,30,40,.9) !important; color: #eef0f6 !important; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), 0 8px 20px -10px rgba(0,0,0,.7) !important; }
html.dark #app-luoghi .mapctl .gpsbtn:not(.on) .gps-l, html.dark #app-luoghi .mapctl .gpsbtn:not(.on) svg { color: #eef0f6 !important; }
/* telefono, viaggio condiviso: la barra della lista non copre Budget/Valigia (nel viaggio ci sono già "← I miei viaggi" e "👥 Persone e permessi") */
@media (max-width: 980px) { body.mob.vdock-on[data-section="viaggi"] #profbar { display: none !important; } }
/* "Segna come visto" → verde "✓ Visto" */
.btn.vseen { background: var(--card) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--sep), 0 2px 6px -4px rgba(0,0,0,.2) !important; }
.btn.vseen:hover { box-shadow: inset 0 0 0 1.5px #1fa463 !important; color: #13703f !important; }
.btn.vseen.on { background: linear-gradient(140deg, #34c77b, #1f9d5c) !important; color: #fff !important; box-shadow: 0 6px 14px -8px rgba(31,157,92,.9) !important; }
html.dark .btn.vseen:not(.on) { background: rgba(255,255,255,.08) !important; color: #eef0f6 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18) !important; }
/* menu Budget/Valigia: "Aggiungi" quando è vuoto, cestino accanto quando c'è qualcosa */
.vtm-act { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.vtm-add { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px; font-size: .82rem; font-weight: 800; white-space: nowrap; color: #fff; background: linear-gradient(140deg, #3ddcaa, #0f9d77); box-shadow: 0 6px 14px -8px rgba(15,157,119,.9); }
.vtm-del { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; min-width: 32px; padding: 0 8px; border: 0; border-radius: 999px; background: var(--fill-3); color: var(--ink-3); font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; transition: background .15s, color .15s; }
.vtm-del:hover { background: rgba(208,36,58,.12); color: #c2322a; }
.vtm-del.arm { background: #d93636; color: #fff; padding: 0 11px 0 9px; }
html.dark .vtm-del { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); } html.dark .vtm-del:hover { color: #ff8a80; } html.dark .vtm-del.arm { background: #e04848; color: #fff; }
.vtm-r.empty .vtm-tt small { color: var(--ink-3); }
/* tappa dell'itinerario: scelta dalle schede a colpo d'occhio */
.vpick { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; padding: 2px 2px 4px; margin-top: 2px; }
.vpk-g { display: flex; flex-direction: column; gap: 6px; }
.vpk-h { display: flex; align-items: center; gap: 6px; font-size: .8rem; }
.vpk-h b { font-weight: 800; } .vpk-h span { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; background: var(--fill-2); color: var(--ink-2); font-size: .7rem; font-weight: 800; display: inline-grid; place-items: center; }
.vpk-e { font-size: .78rem; color: var(--ink-3); padding: 2px 2px 0; }
.vpk-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.vpk-o { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border: 0; border-radius: 14px; background: var(--fill-3); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; transition: background .15s, box-shadow .15s; }
.vpk-o:hover { background: var(--fill-2); }
.vpk-o.on { background: rgba(106,69,232,.12); box-shadow: inset 0 0 0 2px var(--tint, #6a45e8); }
.vpk-i { flex: none; font-size: 1.1rem; }
.vpk-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.vpk-t b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpk-t small { font-size: .7rem; color: var(--ink-3); }
html.dark .vpk-o.on { background: rgba(160,130,255,.2); }
@media (max-width: 420px) { .vpk-l { grid-template-columns: 1fr; } }
/* posto visto: la scheda si attenua ma il pulsante verde resta brillante */
.vitem.done:has(.vseen.on) { opacity: 1; }
.vitem.done:has(.vseen.on) > *:not(.vi-b), .vitem.done:has(.vseen.on) .vi-b > *:not(.vi-acts) { opacity: .7; }
/* pannello stretto (finestre piccole / app sul computer): i due pulsanti si dividono lo spazio, senza sottotitolo */
@media (min-width: 981px) {
  .vdock.compact { display: grid; gap: 4px; padding: 5px; border-radius: 20px; }
  .vdock.compact .vd-b { width: 100%; justify-content: center; gap: 7px; padding: 5px 8px 5px 5px; border-radius: 15px; min-width: 0; }
  .vdock.compact .vd-ic { width: 34px; height: 34px; border-radius: 11px; font-size: 1.05rem; }
  .vdock.compact .vd-t b { font-size: .86rem; }
  .vdock.compact .vd-t small { font-size: .7rem; }
  .vdock.tiny .vd-t small { display: none; }
  #vmain.has-vdock, #vside.has-vdock { padding-bottom: 88px !important; }
}
.vdock .vd-t { flex: none; }
/* telefono: i Viaggi arrivano fino in fondo allo schermo (prima restava una banda vuota/nera sotto la barra, soprattutto nell'app su iPhone) */
@media (max-width: 980px) {
  html body[data-section="viaggi"] .vapp, html body[data-vcity="1"] .vapp { bottom: 0 !important; }
  html body[data-section="viaggi"] .vmapcol, html body[data-vcity="1"] .vmapcol { bottom: 0 !important; }
  html body[data-section="viaggi"]:not([data-vcity="1"]) .vside, html body[data-vcity="1"] .vmain { padding-bottom: calc(var(--sy, 0px) + 112px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* livelli: le pagine a tutto schermo (passaporto, viaggi passati, verifica) stanno sopra il profilo; gli avvisi sopra tutto */
@media (min-width: 761px) { .rq { z-index: 9550; } }
body .rq ~ .udlg, body .rq ~ .bsh { z-index: 9560 !important; }
.toast { z-index: 9900 !important; }
/* assistente di viaggio: il pulsante "Compila" in fondo non lascia vedere sotto le voci che scorrono */
.vp-go:not(.flat) { box-shadow: 0 -18px 18px 2px #fdfcfa, 0 12px 0 12px #fdfcfa, 0 10px 24px -10px rgba(123,77,240,.7) !important; }
html.dark .vp-go:not(.flat) { box-shadow: 0 -18px 18px 2px #16181d, 0 12px 0 12px #16181d, 0 10px 24px -10px rgba(123,77,240,.7) !important; }
/* telefono: la lista "I miei viaggi" a scomparsa parte sotto le sezioni (prima il titolo finiva sotto la barra in alto) */
@media (max-width: 980px) { html body[data-vcity="1"] .vside { padding-top: calc(var(--hdrb, 70px) + 14px) !important; } }
/* lista predefinita della valigia: sul telefono i pulsanti in fondo vanno a capo invece di uscire dallo schermo */
@media (max-width: 760px) {
  .panel.wide .p-foot { flex-wrap: wrap; gap: 8px; }
  .panel.wide .p-foot .grow { display: none; }
  .panel.wide .p-foot > .btn:first-child { flex: 1 1 100%; order: 3; }
  .panel.wide .p-foot > .btn:not(:first-child) { flex: 1 1 0; justify-content: center; }
}
.tv-where .t-chips { flex-wrap: wrap; overflow: visible; }
@media (min-width: 761px) { .udlg-box.pplm { min-height: min(560px, calc(100dvh - 140px)); } }
/* telefono: sfumatura sotto la barra in basso, così le righe che scorrono non si vedono "a pezzi" dietro e sotto la barra */
@media (max-width: 980px) {
  body.mob .mbar::after { content: ""; position: absolute; z-index: -1; left: -14px; right: -82px; bottom: calc(-10px - env(safe-area-inset-bottom, 0px)); height: calc(env(safe-area-inset-bottom, 0px) + 96px); pointer-events: none; border-radius: 0;
    background: linear-gradient(0deg, color-mix(in srgb, var(--page) 96%, transparent) 0%, color-mix(in srgb, var(--page) 78%, transparent) 45%, transparent 100%); }
}
@media (max-width: 980px) { body.mob .msearch { z-index: 81 !important; } }
/* finestre di modifica: fondo pieno (prima i colori sotto, es. il verde del budget, tingevano i campi) */
html body .sheet .panel { background: rgba(255,255,255,.97) !important; }
html.dark body .sheet .panel { background: rgba(26,27,34,.97) !important; }
/* lista predefinita della valigia: titolo e pulsanti fissi, scorre solo la lista */
.sheet .panel.wide { display: flex; flex-direction: column; overflow: hidden; }
.sheet .panel.wide > .vcheckgrid { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sheet .panel.wide > .p-head, .sheet .panel.wide > .hint, .sheet .panel.wide > .p-foot { flex: none; }

/* ===== barra in basso del telefono: si raccoglie in un pulsante tondo a destra scorrendo, e cambia nella sezione Viaggi ===== */
.mb-more, .mb-bud, .mb-val { display: none; }
@media (max-width: 980px) {
  body.mob .mbar .mb-b { transition: background-color .25s, color .25s, opacity .2s, flex-grow .45s var(--spring), scale .35s var(--spring) !important; }
  /* Viaggi: Budget · Valigia · Esploratori · Profilo (niente Categorie, Aggiungi e AI) */
  body.mob[data-section="viaggi"] .mbar .mb-cat, body.mob[data-section="viaggi"] .mbar .mb-add, body.mob[data-section="viaggi"] .msearch { display: none !important; }
  body.mob[data-section="viaggi"] .mbar .mb-bud, body.mob[data-section="viaggi"] .mbar .mb-val { display: flex; }
  body.mob[data-section="viaggi"] .mbar { right: 14px !important; }
  body.mob[data-section="viaggi"] .mbar::after { display: none; }
  .mbar .mb-bud { order: 1; } .mbar .mb-ppl { order: 3; } .mbar .mb-me { order: 4; } .mbar .mb-more { order: 0; }
  .mbar .mb-bud .mb-ic, .mbar .mb-val .mb-ic { display: grid !important; place-items: center; width: 30px !important; height: 30px !important; border-radius: 10px; font-size: 1.05rem !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 12px -6px var(--vsh); }
  .mbar .mb-bud .mb-ic { background: linear-gradient(140deg, #3ddcaa, #12a57c 55%, #0b6f6a); --vsh: rgba(15,157,119,.9); }
  .mbar .mb-val .mb-ic { background: linear-gradient(140deg, #ffd27a, #f4a646 50%, #d6701d); --vsh: rgba(214,112,29,.9); }
  /* raccolta: resta solo il pulsante tondo, accanto al cerchio AI (o in fondo a destra nei Viaggi) */
  body.mob.mbcol .mbar { left: calc(100% - 82px - 62px) !important; right: 82px !important; }
  body.mob.mbcol[data-section="viaggi"] .mbar { left: calc(100% - 14px - 62px) !important; right: 14px !important; }
  body.mob.mbcol .mbar > .mb-b:not(.mb-more) { flex: 0 0 0 !important; min-width: 0 !important; width: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; overflow: hidden !important; }
  body.mob.mbcol .mbar > .mb-more { display: grid; place-items: center; flex: 1 1 auto; color: var(--tint) !important; }
  body.mob.mbcol .mbar::after { opacity: 0; }
  body.mob .mbar::after { transition: opacity .3s; }
}
html.dark body.mob.mbcol .mbar > .mb-more { color: #c8b8ff !important; }

/* ===== adattamento automatico a ogni telefono (da 320 a 480px di larghezza: iPhone SE … Pro Max, Galaxy, Pixel, pieghevoli) =====
   misure "fluide": testi e spazi crescono e si riducono con la larghezza dello schermo invece di avere un valore fisso */
@media (max-width: 980px) {
  body.mob { --fl-xs: clamp(.56rem, 2.6vw, .7rem); --fl-s: clamp(.72rem, 3.2vw, .86rem); --fl-m: clamp(.84rem, 3.7vw, .98rem); --fl-gap: clamp(8px, 3vw, 14px); }
  /* barra in basso: scritte che stanno sempre nella loro casella */
  body.mob .mbar .mb-l { font-size: var(--fl-xs) !important; letter-spacing: -.01em; }
  body.mob .mbar { left: var(--fl-gap) !important; }
  body.mob:not([data-section="viaggi"]):not(.mbcol) .mbar { right: calc(var(--fl-gap) + 68px) !important; }
  body.mob .msearch { right: var(--fl-gap) !important; }
  /* filtri: una sola riga dentro lo schermo (Provati · Da provare · Voto · Recenti · ↕ ordine), come deciso il 5 ottobre: si stringono, non escono */
  body.mob .pfilt .chip { font-size: clamp(.62rem, 2.9vw, .74rem) !important; }
  /* "Stai guardando" e zona: si dividono lo spazio in modo proporzionale */
  body.mob .catnow .cn-b { flex: 1 1 58%; min-width: 0; }
  body.mob .catnow .cn-z { flex: 0 1 auto; min-width: 0; max-width: 42%; }
  body.mob .catnow .cn-t b, body.mob .catnow .cn-z b { font-size: var(--fl-m) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.mob #st { white-space: nowrap; }
  /* pulsanti piccoli: almeno 34px di altezza per il dito (linee guida Apple e Android) */
  body.mob .btn.sm { min-height: 34px; }
}
/* schermi molto stretti (Galaxy Fold chiuso, telefoni da 320-360px) */
@media (max-width: 370px) {
  body.mob .mbar .mb-ic { width: 26px !important; height: 26px !important; font-size: 1.15rem !important; }
  body.mob .mbar .mb-ic svg { width: 24px; height: 24px; }
  body.mob .sections.tabbar .sec { font-size: .76rem !important; }
}
/* telefono in orizzontale: barra in basso più bassa per lasciare spazio alla mappa */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 500px) {
  body.mob .mbar { height: 52px !important; } body.mob .msearch { width: 52px !important; height: 52px !important; }
  body.mob .mbar .mb-l { display: none; }
}
@media (max-width: 980px) {
  html body.mob[data-section="viaggi"] .mbar { right: var(--fl-gap) !important; }
  html body.mob.mbcol .mbar { left: calc(100% - var(--fl-gap) - 68px - 62px) !important; right: calc(var(--fl-gap) + 68px) !important; }
  html body.mob.mbcol[data-section="viaggi"] .mbar { left: calc(100% - var(--fl-gap) - 62px) !important; right: var(--fl-gap) !important; }
}
/* telefono in orizzontale: invito a girarlo (l'app installata resta comunque in verticale) */
#ruota { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #ruota { display: grid; place-items: center; position: fixed; inset: 0; z-index: 99990; padding: 24px; text-align: center; color: #fff; background: radial-gradient(120% 120% at 20% 0%, #6a45e8, #1b1446 70%); }
  #ruota b { display: block; font-size: 2.6rem; margin-bottom: 6px; } #ruota p { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; } #ruota small { opacity: .8; font-size: .86rem; max-width: 360px; display: block; }
}
/* budget: attività da registrare e importi in valuta locale */
.bg-sugg { margin: 0 0 12px; padding: 10px 12px 6px; border-radius: 18px; background: linear-gradient(135deg, rgba(139,63,217,.10), rgba(15,157,119,.08)); box-shadow: inset 0 0 0 1px rgba(139,63,217,.18); }
.bg-sg-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .bg-sg-h b { font-size: .9rem; } .bg-sg-h small { color: var(--ink-2); font-size: .78rem; }
.bg-sg-r { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--sep); }
.bg-sg-r:first-of-type { border-top: 0; }
.bg-sg-i { flex: none; font-variant-numeric: tabular-nums; }
.bg-amt .bg-oc { color: var(--ink-3); font-variant-numeric: tabular-nums; }
html.dark .bg-sugg { background: linear-gradient(135deg, rgba(160,110,255,.14), rgba(60,210,160,.08)); box-shadow: inset 0 0 0 1px rgba(170,140,255,.22); }
.sh-ren { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.sh-ren input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--fill-3); color: var(--ink); font: inherit; font-size: 16px; }

/* ===== telefono: sezione attiva ben visibile — la pillola scelta si allarga con il nome, l'altra resta solo icona ===== */
@media (max-width: 980px) {
  html body.mob nav.sections.tabbar .sec-pill { display: flex !important; grid-template-columns: none !important; gap: 4px !important; }
  html body.mob nav.sections.tabbar .sec-pill .sec { flex: 0 0 44px !important; min-width: 0; height: 100%; padding: 0 !important; gap: 6px !important; justify-content: center; }
  html body.mob nav.sections.tabbar .sec-pill .sec:not(.on) { background: transparent !important; box-shadow: none !important; }
  html body.mob nav.sections.tabbar .sec-pill .sec:not(.on) > span:first-child { font-size: 1.2rem; filter: saturate(.9); }
  html body.mob nav.sections.tabbar .sec-pill .sec:not(.on) .sec-l, html body.mob nav.sections.tabbar .sec-pill .sec:not(.on) .sec-s { display: none !important; }
  html body.mob nav.sections.tabbar .sec-pill .sec.on { flex: 1 1 auto !important; padding: 0 14px !important; font-size: .9rem !important; font-weight: 800;
    background: #fff !important; color: #12141a !important; box-shadow: 0 4px 14px -4px rgba(0,0,0,.28), inset 0 0 0 .5px rgba(0,0,0,.06) !important; }
  html body.mob nav.sections.tabbar .sec-pill .sec.on .sec-l { display: inline !important; } html body.mob nav.sections.tabbar .sec-pill .sec.on .sec-s { display: none !important; }
  html.dark body.mob nav.sections.tabbar .sec-pill .sec.on { background: rgba(255,255,255,.95) !important; color: #12141a !important; box-shadow: 0 4px 16px -4px rgba(0,0,0,.6) !important; }
  html.dark body.mob nav.sections.tabbar .sec-pill .sec:not(.on) { color: rgba(255,255,255,.85) !important; }
  /* in "Di tendenza" le due sezioni restano solo icone e si allarga il pallino 🔥 */
  html body.mob.trend-on nav.sections.tabbar .sec-pill { flex: 0 0 auto !important; }
}
@media (max-width: 360px) {
  html body.mob nav.sections.tabbar .sec-pill .sec.on .sec-l { display: none !important; } html body.mob nav.sections.tabbar .sec-pill .sec.on .sec-s { display: inline !important; }
}
/* viaggi: scelta del Paese */
.vs-paesi { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 10px -12px 2px; padding: 2px 12px 4px; }
.vs-paesi::-webkit-scrollbar { display: none; }
.vs-p { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--fill-3); color: var(--ink); font: inherit; font-size: .84rem; font-weight: 750; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.vs-p small { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: inline-grid; place-items: center; background: var(--fill-2); color: var(--ink-2); font-size: .7rem; font-weight: 800; }
.vs-p.on { background: var(--ink); color: var(--card); }
.vs-p.on small { background: rgba(255,255,255,.22); color: inherit; }
html.dark .vs-p.on { background: #fff; color: #12141a; } html.dark .vs-p.on small { background: rgba(0,0,0,.1); }
button.vs-country { display: block; width: calc(100% - 16px); text-align: left; border: 0; background: none; font-family: inherit; cursor: pointer; padding: 0; }
button.vs-country:hover { color: var(--ink); }
/* il pulsante "↗ Maps" compare solo dentro un viaggio (prima si vedeva anche nell'elenco e non faceva niente) */
.vmap .vgmaps[hidden], html body .vmap a.vgmaps[hidden] { display: none !important; }

/* ===== 🏅 Traguardi nel profilo ===== */
.pf-tg-w:empty { display: none; }
.pf-card.tg { margin: 12px 14px 0; }
.tg-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tg-h h3 { margin: 0; }
.tg-sfida { display: flex; align-items: center; gap: 12px; margin: 10px 0 12px; padding: 12px 14px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #7b4df0, #c445a8 60%, #ff6a4d); box-shadow: 0 12px 26px -16px rgba(123,77,240,.9); }
.tg-sfida.done { background: linear-gradient(135deg, #12a57c, #0b6f6a); box-shadow: 0 12px 26px -16px rgba(11,111,106,.9); }
.tg-si { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: rgba(255,255,255,.18); font-size: 1.5rem; }
.tg-st { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tg-st small { font-size: .74rem; font-weight: 700; opacity: .9; text-transform: uppercase; letter-spacing: .04em; }
.tg-st b { font-size: 1rem; }
.tg-st .tg-left { text-transform: none; letter-spacing: 0; font-weight: 600; }
.tg-bar { height: 7px; margin: 5px 0 2px; border-radius: 99px; background: rgba(255,255,255,.25); overflow: hidden; }
.tg-bar i { display: block; height: 100%; border-radius: 99px; background: #fff; transition: width .5s var(--ease, ease); }
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.tg-b { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px 10px; border: 0; border-radius: 18px; background: var(--fill-3); color: var(--ink); font: inherit; text-align: center; cursor: pointer; transition: transform .15s, box-shadow .2s; }
.tg-b:active { transform: scale(.96); }
.tg-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 1.45rem; background: conic-gradient(var(--tint, #6a45e8) calc(var(--p) * 1%), var(--fill-2) 0); position: relative; filter: grayscale(1); opacity: .55; }
.tg-ic::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--card); z-index: 0; }
.tg-b .tg-ic { isolation: isolate; } .tg-b .tg-ic { line-height: 1; }
.tg-b.on .tg-ic { filter: none; opacity: 1; background: radial-gradient(circle at 30% 25%, #fff8, transparent 60%), var(--tc); box-shadow: 0 6px 14px -6px var(--tc); }
.tg-b.on .tg-ic::before { inset: 3px; background: var(--card); }
.tg-ic { text-shadow: none; } .tg-ic { z-index: 0; }
.tg-b b { font-size: .76rem; line-height: 1.15; }
.tg-b small { font-size: .68rem; color: var(--ink-3); font-weight: 700; }
.tg-b.on small { color: var(--ink-2); }
.tg-b.sel { box-shadow: inset 0 0 0 2px var(--tint, #6a45e8); }
.tg-mese { width: 100%; margin-top: 12px; justify-content: center; }
.tg-e { position: relative; z-index: 1; }

/* ===== 🗳️ votazioni nelle liste condivise ===== */
.pb-poll { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--fill-2); font-size: 1.05rem; cursor: pointer; }
.pb-poll.new { background: linear-gradient(135deg, #7b4df0, #c445a8); box-shadow: 0 6px 14px -6px rgba(123,77,240,.9); }
.pb-poll i { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #ff5f57; color: #fff; font: 800 .66rem/17px var(--font); font-style: normal; box-shadow: 0 0 0 2px var(--card); }
.polls { width: min(520px, calc(100vw - 24px)); }
.poll { margin-top: 12px; padding: 12px; border-radius: 20px; background: var(--fill-3); }
.poll-h { display: flex; flex-direction: column; gap: 2px; margin: 0 2px 8px; } .poll-h b { font-size: 1.02rem; } .poll-h small { color: var(--ink-2); font-size: .78rem; }
.poll-o { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; margin-top: 6px; padding: 8px 10px; border: 0; border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; text-align: left; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px var(--sep); }
div.poll-o { cursor: default; }
.poll-bar { position: absolute; inset: 0 auto 0 0; background: rgba(123,77,240,.12); transition: width .45s var(--ease, ease); pointer-events: none; }
.poll-o.lead .poll-bar { background: linear-gradient(90deg, rgba(123,77,240,.2), rgba(196,69,168,.16)); }
.poll-o.on { box-shadow: inset 0 0 0 2px #7b4df0; }
.poll-ck { position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--sep); font-size: .8rem; font-weight: 900; color: #fff; }
.poll-o.on .poll-ck, .poll-pi.on .poll-ck { background: #7b4df0; box-shadow: none; }
div.poll-o .poll-ck { display: none; }
.poll-t { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.poll-t b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .poll-t small { font-size: .74rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poll-av { position: relative; display: flex; } .poll-av .av { width: 22px; height: 22px; margin-left: -6px; box-shadow: 0 0 0 2px var(--card); font-size: .6rem; }
.poll-n { position: relative; flex: none; min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.poll-ft { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 10px; }
.poll-win { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; padding: 12px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #12a57c, #0b6f6a); }
.poll-win > span { font-size: 1.6rem; } .poll-win > div { flex: 1; min-width: 120px; display: flex; flex-direction: column; } .poll-win small { opacity: .85; font-size: .74rem; font-weight: 700; } .poll-win b { font-size: 1.05rem; }
.poll-win .btn.solid { background: #fff !important; color: #0b6f5a !important; box-shadow: none !important; } .poll-win .btn.ghost { background: rgba(255,255,255,.2) !important; color: #fff !important; }
.poll.closed .poll-o { opacity: .85; } .poll-del { margin-top: 8px; font-size: .8rem; }
.poll-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.poll-q { width: 100%; box-sizing: border-box; height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--fill-3); color: var(--ink); font: inherit; font-size: 16px; }
.poll-q.big { height: 48px; font-size: 1.05rem; font-weight: 800; margin-bottom: 8px; }
.polls > .poll-q { margin-bottom: 8px; }
.poll-pl { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.poll-pi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--fill-3); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.poll-pi.on { background: rgba(123,77,240,.12); }
.poll-pg { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--c, #888); color: #fff; }
.poll-pg .glyph { width: 16px; height: 16px; }
html.dark .poll-o { background: rgba(255,255,255,.06); } html.dark .poll-bar { background: rgba(160,130,255,.18); }
/* ordine dell'elenco accanto al numero dei posti */
.lcount-r { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.lsortp { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 9px; border-radius: 999px; background: var(--fill-3); color: var(--ink-2); font-size: .78rem; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background .2s; }
.lsortp:hover { background: var(--fill-2); color: var(--ink); }
.lsortp::after { content: "▾"; font-size: .7rem; opacity: .7; }
.lsortp select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
html.dark .lsortp { background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); }

/* ===== voto di Google (discreto) e voto dell'esploratore ===== */
.gbadge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 4px; border-radius: 999px; background: var(--fill-3); color: var(--ink-2); font-size: .76rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.gbadge .g-g { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #fff; color: #4285f4; font: 900 .66rem/1 Arial, sans-serif; font-style: normal; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.gbadge b { color: var(--ink); font-weight: 800; }
.gbadge .g-st { color: #fbbc04; font-size: .8rem; }
.gbadge .g-n { color: var(--ink-3); font-weight: 600; }
.gbadge.sm { height: 20px; padding: 0 7px 0 3px; font-size: .7rem; } .gbadge.sm .g-g { width: 14px; height: 14px; font-size: .56rem; }
.cx-g { margin: 2px 0 8px; }
.cx-vote { display: inline-flex; flex-direction: column; gap: 1px; margin-right: 4px; }
.cx-vote small { font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
html.dark .gbadge { background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); } html.dark .gbadge b { color: #fff; }

/* ===== telefono, I tuoi luoghi: scorrendo l'elenco la parte sopra si compatta (solo icone), scorrendo in su torna intera ===== */
@media (max-width: 980px) {
  body.mob #app-luoghi .catnow, body.mob #app-luoghi .catnow .cn-b, body.mob #app-luoghi .catnow .cn-z, body.mob .pflab, body.mob #app-luoghi .pfilt, body.mob #app-luoghi .pfilt .chip, body.mob #app-luoghi .lhead, body.mob #app-luoghi .lhead .spsw {
    transition: padding .35s var(--spring, ease), margin .35s var(--spring, ease), height .35s var(--spring, ease), max-height .35s var(--spring, ease), max-width .35s var(--spring, ease), opacity .2s, font-size .3s !important; }
  body.mob .catnow small, body.mob .pfilt .chip .chl, body.mob .lsortp .lsp-t { transition: opacity .2s, max-width .35s var(--spring, ease), max-height .3s; }
  body.mob .catnow small { display: block; max-height: 16px; overflow: hidden; }
  body.mob .pflab { max-height: 20px; overflow: hidden; }
  body.mob .pfilt .chip .chl { display: inline-block; max-width: 120px; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
  body.mob #app-luoghi .lhead .spsw { max-width: 260px; overflow: hidden; }
  /* compatta */
  body.mob.lcomp[data-section="luoghi"] #app-luoghi .catnow { margin-bottom: 4px !important; }
  body.mob.lcomp[data-section="luoghi"] #app-luoghi .catnow small { max-height: 0; opacity: 0; }
  body.mob.lcomp[data-section="luoghi"] #app-luoghi .catnow .cn-b, body.mob.lcomp[data-section="luoghi"] #app-luoghi .catnow .cn-z { padding-top: 5px !important; padding-bottom: 5px !important; }
  body.mob.lcomp[data-section="luoghi"] .pflab { max-height: 0; margin: 0 !important; opacity: 0; }
  body.mob.lcomp[data-section="luoghi"] #app-luoghi .pfilt .chip { height: 32px !important; }
  body.mob.lcomp[data-section="luoghi"] #app-luoghi .pfilt .chip .chl { max-width: 0; opacity: 0; }
  body.mob.lcomp[data-section="luoghi"] #app-luoghi .pfilt .chip .chi { font-size: 1.05rem; }
  body.mob.lcomp[data-section="luoghi"] #app-luoghi .lhead { padding-top: 3px !important; padding-bottom: 4px !important; }
  body.mob.lcomp[data-section="luoghi"] #app-luoghi .lhead .spsw { max-width: 0; opacity: 0; padding: 0 !important; margin: 0 !important; }
  body.mob.lcomp[data-section="luoghi"] #app-luoghi .lcount-r { flex-wrap: nowrap; }
  body.mob.lcomp[data-section="luoghi"] #app-luoghi #lsub { display: none; }
}
/* Budget e Valigia dentro un viaggio: bandierina sull'icona e nome del viaggio sotto */
.mbar .mb-ic { position: relative; }
.mb-trip { position: absolute; right: -9px; top: -6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--card, #fff); font-size: .7rem; line-height: 1; box-shadow: 0 2px 6px -1px rgba(0,0,0,.35), 0 0 0 1.5px var(--card, #fff); }
.mbar .mb-b.intrip .mb-l { font-weight: 800; color: var(--ink) !important; max-width: 76px !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html.dark .mb-trip { background: #22232b; box-shadow: 0 2px 6px -1px rgba(0,0,0,.6), 0 0 0 1.5px #22232b; }
.vdock.intrip .vd-t small { color: var(--ink); font-weight: 700; }

/* ---------- profilo sul telefono: tasto «Indietro» fisso in alto, niente barra in basso sopra il profilo ---------- */
.pf-back { display: none; }
@media (max-width: 980px) {
  .udlg.prof .pf-back { display: inline-flex; align-items: center; gap: 2px; position: fixed; z-index: 80; left: 12px; top: calc(env(safe-area-inset-top, 0px) + 10px); height: 38px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; font: 800 .86rem/1 var(--font-b, system-ui); color: #fff; background: rgba(20,20,30,.55); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: 0 6px 18px -8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25); cursor: pointer; }
  .udlg.prof .pf-back:active { transform: scale(.95); }
  .udlg.prof .glb-st { left: auto !important; right: 58px !important; }
  body:has(.udlg.prof:not(.lg-out)) .mbar, body:has(.udlg.prof:not(.lg-out)) .mb-more, body:has(.udlg.prof:not(.lg-out)) .sections.tabbar, body:has(.udlg.prof:not(.lg-out)) .msearch, body:has(.udlg.prof:not(.lg-out)) .mb-guida { display: none !important; }
  .udlg.prof { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- traguardi: cosa fare per il prossimo livello + dettaglio ---------- */
.tg-intro { margin: 6px 2px 2px; font-size: .78rem; line-height: 1.35; color: var(--ink-2); }
.tg-how { display: block; margin-top: 4px; font-size: .74rem; line-height: 1.3; font-weight: 600; opacity: .92; }
.tg-b { justify-content: flex-start; }
.tg-b .tg-lv { font-size: .66rem; font-weight: 800; color: var(--ink-3); }
.tg-b.on .tg-lv { color: var(--tc); filter: saturate(1.2); }
.tg-b .tg-pr { display: block; width: 78%; height: 4px; border-radius: 99px; background: var(--fill-2); overflow: hidden; margin-top: 3px; }
.tg-b .tg-pr i { display: block; height: 100%; border-radius: inherit; background: var(--tint, #6a45e8); }
.tg-b .tg-nx { font-size: .64rem !important; line-height: 1.2; font-weight: 700; color: var(--ink-2) !important; text-align: center; }
.tg-pop { position: fixed; inset: 0; z-index: 140; display: grid; place-items: end center; background: rgba(10,10,20,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: tgfade .2s ease; }
@media (min-width: 761px) { .tg-pop { place-items: center; } }
@keyframes tgfade { from { opacity: 0; } }
.tg-pc { position: relative; width: min(440px, 100%); max-height: 86dvh; overflow-y: auto; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; background: var(--card, #fff); color: var(--ink); text-align: center; box-shadow: 0 -10px 40px -12px rgba(0,0,0,.35); animation: tgup .28s cubic-bezier(.2,.9,.3,1.2); }
@media (min-width: 761px) { .tg-pc { border-radius: 28px; } }
@keyframes tgup { from { transform: translateY(40px); opacity: .4; } }
.tg-pc .x { position: absolute; top: 12px; right: 12px; }
.tg-pi { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; font-size: 2.1rem; background: radial-gradient(circle at 30% 25%, #fff8, transparent 60%), var(--tc); box-shadow: 0 8px 22px -10px var(--tc); }
.tg-pi span { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--card, #fff); }
.tg-pc h3 { margin: 10px 0 2px; font-size: 1.25rem; }
.tg-pl { font-size: .8rem; font-weight: 800; color: var(--ink-2); }
.tg-pn { margin: 10px 0 6px; font-size: .9rem; }
.tg-pbar { height: 8px; border-radius: 99px; background: var(--fill-2); overflow: hidden; margin: 4px 8px; }
.tg-pbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--tint, #6a45e8), #ff6a4d); }
.tg-pg { margin: 8px 0 12px; font-size: .86rem; font-weight: 700; }
.tg-phow { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 16px; background: var(--fill-3); font-size: .84rem; line-height: 1.4; }
.tg-phow b { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.tg-plv { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; text-align: left; }
.tg-plr { display: grid; grid-template-columns: 12px auto 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--fill-3); font-size: .8rem; opacity: .75; }
.tg-plr.ok { opacity: 1; }
.tg-plr b { font-size: .78rem; }
.tg-plr i { font-style: normal; font-weight: 800; color: var(--ink-2); }
.tg-plr.ok i { color: #0f9d77; }
.tg-pd { width: 12px; height: 12px; border-radius: 50%; }

.tg-sfida .tg-how { text-transform: none !important; letter-spacing: 0 !important; }

/* ---------- viaggi sul telefono: copertina più bassa, più spazio a quello che serve ---------- */
@media (max-width: 760px) {
  body[data-vcity="1"] .vcover { height: 104px; margin-bottom: 8px; }
  body[data-vcity="1"] .vhero.city .vh-cover { width: 40px; height: 40px; font-size: 1.35rem; border-radius: 12px; }
  body[data-vcity="1"] .vhero.city h1 { font-size: 1.35rem; }
  body[data-vcity="1"] .vh-flag { font-size: 1.1rem; }
  body[data-vcity="1"] .vmain { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
}
@media (max-width: 760px) {
  body[data-vcity="1"] .vai-card { padding: 10px 12px !important; border-radius: 20px !important; }
  body[data-vcity="1"] .vai-card .vc-tx small { display: none; }
  body[data-vcity="1"] .vai-card .vc-ic { width: 34px !important; height: 34px !important; }
  body[data-vcity="1"] .vai-card .vc-acts { display: flex !important; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 8px !important; }
  body[data-vcity="1"] .vai-card .vc-acts::-webkit-scrollbar { display: none; }
  body[data-vcity="1"] .vai-card .vc-a { flex: none !important; width: auto !important; padding: 6px 12px !important; font-size: .76rem !important; white-space: nowrap; grid-column: auto !important; }
}

/* ---------- telefono, I tuoi luoghi: l'intestazione si compatta di colpo (l'elenco «sotto l'intestazione» del 23 ottobre è stato tolto il 24: sul telefono vero la barra della città restava ferma e i posti le passavano sopra) ---------- */
/* l'intestazione si compatta di colpo (una volta sola) invece che con un'animazione lunga mentre il dito scorre */
body.mob[data-section="luoghi"] #app-luoghi .catnow small, body.mob[data-section="luoghi"] .pflab, body.mob[data-section="luoghi"] #app-luoghi .pfilt .chip, body.mob[data-section="luoghi"] #app-luoghi .lhead { transition-property: opacity, background-color, color, transform !important; }

/* ---------- viaggio: barra compatta in alto mentre si scorre (nome + sezioni con icone) ---------- */
.vmini { box-sizing: border-box; position: sticky; top: 0; z-index: 8; height: 50px; margin: 0 -2px -52px; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 18px; background: var(--card, #fff); box-shadow: 0 10px 22px -16px rgba(0,0,0,.55); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; }
#vmain.vm-c .vmini { opacity: 1; pointer-events: auto; transform: none; }
.vm-b { flex: none; height: 36px; border: 0; border-radius: 999px; background: var(--fill-3); color: var(--ink); font-weight: 800; font-size: .82rem; cursor: pointer; }
.vm-back { width: 36px; font-size: 1.35rem; line-height: 1; padding: 0 0 2px; }
.vm-name { max-width: 34%; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-tabs { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.vm-tabs::-webkit-scrollbar { display: none; }
.vm-t { flex: 1 0 auto; min-width: 38px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 0 6px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font-size: 1.05rem; cursor: pointer; }
.vm-t small { font-size: .62rem; font-weight: 800; color: var(--ink-2); }
@media (max-width: 980px) { body[data-vcity="1"] .vmini { top: 24px; margin-left: -4px; margin-right: -4px; } }
/* ---------- movimento in stile iOS (ottobre 2026) ----------
   - sezioni: dissolvenza incrociata con View Transitions (vt() in glass.js); le barre hanno un nome e restano ferme
   - finestre (.udlg): entrano ed escono morbide; l'uscita la gestisce softRemove() in glass.js con la classe .lg-out
   - profilo sul telefono: entra da destra ed esce verso destra, come una pagina iOS */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; animation-timing-function: cubic-bezier(.25,.1,.25,1); }
.hdr { view-transition-name: vt-hdr; }
#mbar { view-transition-name: vt-mbar; }
.sections.tabbar { view-transition-name: vt-tabs; }
#info-ph { view-transition-name: vt-info; }
::view-transition-group(vt-hdr), ::view-transition-group(vt-mbar), ::view-transition-group(vt-tabs), ::view-transition-group(vt-info) { animation-duration: .3s; animation-timing-function: cubic-bezier(.32,.72,0,1); }
/* con le View Transitions la vecchia dissolvenza da trasparente non serve più (lasciava vedere il vuoto per un istante) */
html.has-vt #app-luoghi:not([hidden]), html.has-vt #sez-viaggi:not([hidden]), html.has-vt #sez-trend:not([hidden]) { animation: none; }
.udlg:not(.prof):not(.lg-out) { animation: lg-fade-in .2s ease both; }
.udlg.lg-out { pointer-events: none; animation: lg-fade-out .22s ease forwards; }
.udlg.lg-out .udlg-box { animation: lg-pop-out .22s ease forwards !important; }
@keyframes lg-fade-in { from { opacity: 0; } }
@keyframes lg-fade-out { to { opacity: 0; } }
@keyframes lg-pop-out { to { opacity: 0; transform: scale(.96); } }
@media (max-width: 980px) {
  .udlg.prof:not(.lg-out) > .pf { animation: lg-push .38s cubic-bezier(.32,.72,0,1); } /* sul contenuto, non sul contenitore che scorre (Safari a volte non lo ridisegnava) */
  .udlg.prof.lg-out { animation: lg-pop .32s cubic-bezier(.32,.72,0,1) forwards; box-shadow: -10px 0 30px -12px rgba(0,0,0,.25); }
  .udlg:not(.prof).lg-out .udlg-box { animation: lg-sheet-down .26s cubic-bezier(.32,.72,0,1) forwards !important; }
  @keyframes lg-push { from { transform: translate3d(100%,0,0); } to { transform: none; } }
  @keyframes lg-pop { to { transform: translate3d(100%,0,0); } }
  @keyframes lg-sheet-down { to { transform: translateY(40px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .udlg, .udlg.prof, .udlg.prof > .pf, .udlg.lg-out, .udlg.lg-out .udlg-box { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- senza connessione (ottobre 2026): pillola in alto e riquadro al posto della mappa (offline.js) */
.offpill { position: fixed; z-index: 9700; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px); transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(28,28,34,.86); color: #fff; font: 700 .76rem/1.2 var(--font-b, system-ui); letter-spacing: .01em; box-shadow: 0 8px 22px -10px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: none; white-space: nowrap; animation: lg-fade-in .3s ease both; }
.offpill::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #ffb547; vertical-align: 1px; }
@media (max-width: 980px) { .offpill { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); } }
.mapoff { box-sizing: border-box; width: 100%; height: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; background: var(--fill-3, #f1f0f5); color: var(--ink, #15171c); }
.mapoff b { font-size: 1.05rem; font-weight: 800; }
.mapoff small { max-width: 320px; color: var(--ink-2, #5b5d66); font-size: .84rem; line-height: 1.4; }
.mapoff .btn { margin-top: 4px; }

/* ---------- 🌙 «Stasera dove?» (ottobre 2026): tessera nella guida, pillola sulla mappa (computer), foglio con 3 proposte */
.sd-card { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 10px; padding: 12px 14px; border: 0; border-radius: var(--r-in, 16px); text-align: left; color: #fff; background: linear-gradient(135deg, #1f1b4d, #4b2fa8 55%, #c445a8); box-shadow: 0 12px 26px -16px rgba(75,47,168,.9); cursor: pointer; transition: transform .15s; }
.sd-card:active { transform: scale(.98); }
.sd-card .sd-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.16); font-size: 1.3rem; }
.sd-card .sd-t { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sd-card .sd-t b { font-size: 1rem; font-weight: 800; }
.sd-card .sd-t small { font-size: .78rem; opacity: .85; }
.sd-card .gs-car { color: #fff; opacity: .8; }
#app-luoghi .mapctl .chip.mchip.sd-chip, .chip.sd-chip { background: linear-gradient(135deg, #2a2266, #5b3bc4) !important; color: #fff !important; border: 0 !important; -webkit-text-fill-color: #fff; opacity: 1 !important; }
.sd-tic { font-size: 1.25rem; margin-right: 6px; }
.sd-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sd-r { display: grid; grid-template-columns: 44px 1fr; gap: 6px 12px; padding: 12px; border-radius: var(--r-in, 16px); background: var(--card, #fff); box-shadow: 0 10px 24px -20px rgba(30,20,70,.5); animation: sd-in .36s cubic-bezier(.2,.9,.25,1.1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes sd-in { from { opacity: 0; transform: translateY(10px); } }
.sd-pi { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c, #7b4df0); color: #fff; }
.sd-x { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sd-x b { font-size: .98rem; font-weight: 800; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-x small { color: var(--ink-2, #5b5d66); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sd-why { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--fill-3, #f1f0f5); font-size: .72rem; font-weight: 700; }
.obadge.unk { color: var(--ink-2, #5b5d66); background: var(--fill-3, #f1f0f5); }
.sd-acts { grid-column: 2; display: flex; gap: 8px; margin-top: 4px; }
.sd-foot { display: flex; justify-content: center; margin-top: 10px; }
.sd-foot:empty { display: none; }
.sd-empty { padding: 18px 8px; text-align: center; color: var(--ink-2, #5b5d66); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .sd-r { animation: none; } }

/* ---------- 📷 foto personali (ottobre 2026, foto.js): striscia di miniature con ＋ e visualizzatore a tutto schermo */
.fstrip { margin: 10px 0 4px; }
.fstrip .fs-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.fstrip .fs-h b { font-size: .84rem; font-weight: 800; }
.fstrip .fs-c { color: var(--ink-2, #5b5d66); font-size: .74rem; font-weight: 700; }
.fstrip .fs-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.fstrip .fs-row::-webkit-scrollbar { display: none; }
.fstrip .fs-t, .fstrip .fs-add { flex: none; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; padding: 0; border: 0; cursor: pointer; }
.fstrip .fs-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fstrip .fs-t:active, .fstrip .fs-add:active { transform: scale(.95); }
.fstrip .fs-t.busy { background: linear-gradient(90deg, var(--fill-3, #eee) 0%, var(--fill-2, #e2e2ea) 50%, var(--fill-3, #eee) 100%); background-size: 200% 100%; animation: sk 1.1s linear infinite; }
.fstrip .fs-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--fill-3, #f1f0f5); color: var(--tint, #6a45e8); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tint, #6a45e8) 35%, transparent); }
.fstrip .fs-add span { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.fstrip .fs-add small { font-size: .62rem; font-weight: 800; text-align: center; line-height: 1.1; padding: 0 4px; }
.fstrip .fs-hint { color: var(--ink-2, #5b5d66); font-size: .76rem; max-width: 200px; line-height: 1.3; }
.fstrip.ld .fs-row { opacity: .5; }
.vhero .fstrip.vfoto { margin-top: 12px; }
.udlg.fviewer { z-index: 9800 !important; background: rgba(0,0,0,.92) !important; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; bottom: 0 !important; }
.fv-box { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.fv-img { max-width: 100%; max-height: calc(100% - 90px - env(safe-area-inset-bottom, 0px)); object-fit: contain; border-radius: 6px; transition: filter .25s; }
.fv-img.lo { filter: blur(6px); }
.fv-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); }
.fv-n { flex: 1; color: rgba(255,255,255,.85); font-size: .8rem; font-weight: 700; }
.fv-bar .btn.ghost { background: rgba(255,255,255,.16) !important; color: #fff !important; border: 0 !important; }
.fv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.fv-nav.l { left: 12px; } .fv-nav.r { right: 12px; }
@media (prefers-reduced-motion: reduce) { .fstrip .fs-t.busy { animation: none; } }

/* ---------- niente zoom per doppio tocco (24 ottobre 2026) */
html, body { touch-action: manipulation; }
/* foto: finché non ce ne sono, solo la pillola «📷 Aggiungi foto» con il suggerimento accanto (la scheda resta corta sugli schermi piccoli) */
.fstrip.fs-empty { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
.fstrip.fs-empty .fs-h { display: none; }
.fstrip.fs-empty .fs-row { padding: 0; }
.fstrip.fs-empty .fs-add { width: auto; height: 34px; flex-direction: row; gap: 6px; padding: 0 14px 0 12px; border-radius: 999px; }
.fstrip.fs-empty .fs-add span { display: none; }
.fstrip.fs-empty .fs-add small::before { content: "📷 "; }
.fstrip.fs-empty .fs-add small { font-size: .78rem; padding: 0; white-space: nowrap; }
.fstrip.fs-empty .fs-hint { font-size: .74rem; }

/* ---------- telefono: il primo trascinamento del foglio (24 ottobre 2026) ----------
   Nelle zone da cui si trascina il foglio il movimento verticale è del foglio, non del browser
   (prima Safari a volte se lo prendeva lui, annullava il trascinamento e il pannello non saliva). Lo scorrimento orizzontale delle righe di chip resta. */
body.mob #lphead, body.mob #chips, body.mob #listcol .lhead, body.mob #listcol .lp-status, body.mob #catnow, body.mob .pflab, body.mob .pfilt, body.mob .grab { touch-action: pan-x; }
/* viaggi: finché il foglio non è tutto aperto, tutto il foglio è una presa; aperto del tutto torna a scorrere normalmente */
body.mob #vmain:not([data-snap="full"]), body.mob #vside:not([data-snap="full"]) { touch-action: pan-x; }


/* ---------- 💱 Valuta nella barra in basso dei viaggi (telefono) e foglio del convertitore (24 ottobre 2026) */
.mb-fx { display: none; }
@media (max-width: 980px) {
  body.mob[data-section="viaggi"] .mbar .mb-fx { display: flex; }
  .mbar .mb-fx { order: 2; } .mbar .mb-val { order: 2; }
  .mbar .mb-fx .mb-ic { display: grid !important; place-items: center; width: 30px !important; height: 30px !important; border-radius: 10px; font-size: 1.05rem !important; background: linear-gradient(140deg, #8fc8ff, #3a8af0 55%, #2456c4); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 12px -6px rgba(36,86,196,.9); }
  body.mob[data-section="viaggi"] .mbar .mb-b .mb-l { font-size: .66rem; }
  /* nel viaggio, sul telefono, la valuta sta nella barra in basso: niente doppione */
  body.mob .vfx-b, body.mob .vhero .fxbar { display: none !important; }
}
.vfx-p .gs-sub { margin-bottom: 10px; }
.vfx-tic { font-size: 1.25rem; margin-right: 6px; }
.vfx-row { display: flex; flex-direction: column; gap: 4px; }
.vfx-row small { font-size: .74rem; font-weight: 800; color: var(--ink-2, #5b5d66); text-transform: uppercase; letter-spacing: .04em; }
.vfx-in { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: var(--r-in, 16px); background: var(--fill-3, #f1f0f5); }
.vfx-in input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; font: 800 1.5rem/1.2 var(--font-b, system-ui); color: var(--ink); padding: 6px 0 !important; outline: none; }
.vfx-sel { flex: none; max-width: 46%; height: 40px; padding: 0 10px; border-radius: 12px; border: 0; background: var(--card, #fff); color: var(--ink); font-weight: 800; font-size: .86rem; }
.vfx-sw { align-self: center; display: grid; place-items: center; width: 36px; height: 36px; margin: 6px auto; border-radius: 50%; background: var(--fill-2, #e8e7ee); color: var(--ink); font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.vfx-sw:active { transform: scale(.92); }
.vfx-info { margin: 10px 2px 6px; color: var(--ink-2, #5b5d66); font-size: .8rem; font-weight: 700; }
.vfx-info.same { padding: 10px 12px; border-radius: 14px; background: rgba(52,199,89,.12); color: #146b4c; }
.vfx-tab { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.vfx-tr { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: var(--card, #fff); box-shadow: 0 6px 16px -14px rgba(0,0,0,.5); }
.vfx-tr b { font-size: .9rem; font-weight: 800; }
.vfx-tr span { font-size: .78rem; color: var(--ink-2, #5b5d66); font-weight: 600; }

/* ---------- 🗓️ itinerario sul telefono: fila dei giorni fissa sopra la mappa (24 ottobre 2026) */
.vdbar { display: none; }
@media (max-width: 980px) {
  .vdbar:not([hidden]) { position: absolute; z-index: 5; left: 12px; right: 12px; top: calc(var(--hdrb, 60px) + 58px); display: flex; gap: 6px; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: 20px; background: var(--lg-thick, rgba(255,255,255,.86)); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 10px 26px -14px rgba(0,0,0,.45); }
  .vdbar::-webkit-scrollbar { display: none; }
  .vdb-c { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; height: 46px; padding: 0 10px; border: 0; border-radius: 15px; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, transform .15s; }
  .vdb-c b { font-size: .92rem; font-weight: 800; line-height: 1.1; }
  .vdb-c small { font-size: .62rem; font-weight: 700; color: var(--ink-2, #5b5d66); white-space: nowrap; }
  .vdb-c[style*="--c"] b { color: var(--c); }
  .vdb-c.on { background: var(--c, var(--ink)); }
  .vdb-c.on b, .vdb-c.on small { color: #fff !important; }
  .vdb-c:active { transform: scale(.95); }
}
html.dark .vdbar:not([hidden]) { background: rgba(30,30,38,.82); }

/* ---------- viaggi sul telefono: pillola «‹ Viaggi» sempre visibile sulla mappa (24 ottobre 2026) */
.vmapback { display: none; }
@media (max-width: 980px) {
  .vmapback:not([hidden]) { display: inline-flex; align-items: center; position: absolute; z-index: 6; left: 12px; top: calc(var(--hdrb, 60px) + 10px); height: 40px; max-width: 132px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 .86rem/1 var(--font-b, system-ui); color: #fff; background: var(--ink, #1c1c1e); box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); cursor: pointer; }
  .vmapback:active { transform: scale(.95); }
  html.dark .vmapback:not([hidden]) { background: #f2f2f7; color: #111; }
  /* accanto alla pillola «Vicino a me» resta solo la freccia */
  body.vback-on[data-section="viaggi"] .vmap .vgps { left: calc(12px + var(--vbk-w, 132px) + 8px) !important; width: 40px !important; padding: 0 !important; justify-content: center; }
  body.vback-on[data-section="viaggi"] .vmap .vgps .gps-l { display: none !important; }
}

/* ---------- stati «selezionato» chiari ovunque (24 ottobre 2026): pieno e colorato, anche al buio ---------- */
html.dark .vchip.on { background: var(--tint, #7b4df0) !important; border-color: var(--tint, #7b4df0) !important; color: #fff !important; }
html.dark .vday-chip.on { background: var(--c) !important; border-color: var(--c) !important; color: #fff !important; }
html.dark .mtab.on, html.dark .ppl-tab.on, html.dark .adm-tab.on, html.dark .sp-o.on, html.dark .vtab.on, html.dark .mioseg button.on, html.dark .dest button.on, html.dark .t-mode.on, html.dark .bg-sg.on, html.dark .vp-tab.on, html.dark .t-k.on { background: #f2f2f7 !important; color: #111 !important; box-shadow: 0 4px 12px -6px rgba(0,0,0,.6) !important; }
html.dark .vtab.on .vt-n { background: rgba(0,0,0,.12) !important; color: #111 !important; }
.vm-t.on { background: var(--c) !important; box-shadow: 0 4px 10px -6px var(--c) !important; }
.vm-t.on small { color: #fff !important; }
.vday-chip.on { box-shadow: 0 6px 14px -8px var(--c); }
/* un piccolo segno al tocco su chip e schede (si vede subito che il tocco è arrivato) */
.vchip:active, .vday-chip:active, .vtab:active, .vm-t:active, .chip:active, .mtab:active, .ppl-tab:active, .sp-o:active, .vdb-c:active, .mioseg button:active { transform: scale(.95); filter: brightness(.94); }
html.dark .vp-rtab.on, html.dark .vs-p.on { background: var(--tint, #7b4df0) !important; color: #fff !important; border-color: transparent !important; }
.zs-i.on { background: rgba(31,111,235,.16) !important; box-shadow: inset 3px 0 0 #1f6feb; }
html.dark .zs-i.on { background: rgba(31,111,235,.26) !important; }
.bg-sg:active, .vp-tab:active, .t-k:active, .vp-rtab:active, .vs-p:active { transform: scale(.95); filter: brightness(.94); }


/* ---------- computer, coerente con il telefono (24 ottobre 2026) ---------- */
/* «💱 Valuta» nel riquadro Budget · Valigia: niente doppione dentro il viaggio */
body.vdock-pc .vfx-b, body.vdock-pc .vhero .fxbar { display: none !important; }
.vd-valuta .vd-ic { background: linear-gradient(140deg, #8fc8ff, #3a8af0 55%, #2456c4); --vsh: rgba(36,86,196,.9); }
@media (min-width: 981px) {
  .vdock.compact { grid-template-columns: repeat(3, 1fr); }
  /* giorni dell'itinerario sopra la mappa anche sul computer */
  .vdbar:not([hidden]) { position: absolute; z-index: 5; left: 12px; top: 64px; max-width: calc(100% - 24px); display: flex; gap: 6px; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: 20px; background: var(--lg-thick, rgba(255,255,255,.88)); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 10px 26px -14px rgba(0,0,0,.45); }
  .vdbar::-webkit-scrollbar { display: none; }
  .vdb-c { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 62px; height: 46px; padding: 0 12px; border: 0; border-radius: 15px; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, transform .15s; }
  .vdb-c:hover { background: var(--fill-3, rgba(0,0,0,.05)); }
  .vdb-c b { font-size: .92rem; font-weight: 800; line-height: 1.1; }
  .vdb-c small { font-size: .64rem; font-weight: 700; color: var(--ink-2, #5b5d66); white-space: nowrap; }
  .vdb-c[style*="--c"] b { color: var(--c); }
  .vdb-c.on { background: var(--c, var(--ink)); }
  .vdb-c.on b, .vdb-c.on small { color: #fff !important; }
}
/* «Tutti» (senza colore del giorno) selezionato al buio: chiaro con testo scuro, come le altre schede scelte */
html.dark .vdb-c.on:not([style*="--c"]) { background: #f2f2f7 !important; }
html.dark .vdb-c.on:not([style*="--c"]) b, html.dark .vdb-c.on:not([style*="--c"]) small { color: #111 !important; }

/* ==========================================================================
   MOVIMENTO, PASSO 1 (24 ottobre 2026) — solo telefono, solo le cose che Guido nota:
   intestazione della lista che si compatta, barra in basso che si raccoglie, pillola delle sezioni,
   cambio di scheda, pannello della lista. Curva dei fogli di iOS: parte decisa, frena dolce, niente rimbalzo.
   NON tocca profilo, finestre (.udlg), fogli (.bsh) né tempi in JS (il tentativo ml-v144 che li toccava è stato annullato).
   ========================================================================== */
:root { --mo-ease: cubic-bezier(.32,.72,0,1); --mo-soft: cubic-bezier(.25,.1,.25,1); }
@media (max-width: 980px) {
  /* 1. intestazione della lista: si compatta e si riapre con un movimento continuo (prima di colpo), senza rimbalzo */
  html body.mob #app-luoghi .catnow, html body.mob #app-luoghi .catnow .cn-b, html body.mob #app-luoghi .catnow .cn-z, html body.mob .pflab, html body.mob #app-luoghi .pfilt, html body.mob #app-luoghi .pfilt .chip, html body.mob #app-luoghi .lhead, html body.mob #app-luoghi .lhead .spsw {
    transition: padding .45s var(--mo-ease), margin .45s var(--mo-ease), height .45s var(--mo-ease), max-height .45s var(--mo-ease), max-width .45s var(--mo-ease), font-size .45s var(--mo-ease), opacity .35s var(--mo-soft), background-color .3s, color .3s !important; }
  /* (anche più specifico della regola «si compatta di colpo» del 23 ottobre, che altrimenti vince) */
  html body.mob[data-section="luoghi"] #app-luoghi .catnow small, html body.mob[data-section="luoghi"] .pflab, html body.mob[data-section="luoghi"] #app-luoghi .pfilt .chip, html body.mob[data-section="luoghi"] #app-luoghi .lhead {
    transition-property: padding, margin, height, max-height, max-width, font-size, opacity, background-color, color !important;
    transition-duration: .45s, .45s, .45s, .45s, .45s, .45s, .35s, .3s, .3s !important; transition-timing-function: var(--mo-ease) !important; }
  html body.mob .catnow small, html body.mob .pfilt .chip .chl, html body.mob .lsortp .lsp-t { transition: opacity .35s var(--mo-soft), max-width .45s var(--mo-ease), max-height .45s var(--mo-ease) !important; }
  /* 2. barra in basso che si raccoglie nel pulsante tondo e si riapre */
  html body.mob .mbar { transition: left .55s var(--mo-ease), right .55s var(--mo-ease), height .55s var(--mo-ease), bottom .55s var(--mo-ease) !important; }
  html body.mob .mbar .mb-b { transition: background-color .3s, color .3s, opacity .35s var(--mo-soft), flex-grow .55s var(--mo-ease), scale .35s var(--mo-ease) !important; }
  html body.mob .mbar .mb-ic { transition: transform .45s var(--mo-ease); }
  /* 3. pillola delle sezioni in alto (Luoghi / Viaggi): si allarga e si stringe morbida */
  html body.mob nav.sections.tabbar .sec-pill { transition: flex .5s var(--mo-ease) !important; }
  html body.mob nav.sections.tabbar .sec-pill .sec { transition: flex .5s var(--mo-ease), background-color .35s, color .35s, box-shadow .35s !important; }
  /* 4. cambio di scheda (dove non ci sono le View Transitions, cioè su iPhone): dissolvenza più lunga che parte già a metà, niente schermo vuoto */
  html:not(.has-vt) #app-luoghi:not([hidden]), html:not(.has-vt) #sez-viaggi:not([hidden]), html:not(.has-vt) #sez-trend:not([hidden]) { animation: mo-in .5s var(--mo-soft) both !important; }
  /* 5. pannello della lista e del viaggio che sale e scende */
  html body.mob #app-luoghi .lpanel { transition: transform .5s var(--mo-ease) !important; }
  html body.mob #vmain, html body.mob #vside { transition: transform .5s var(--mo-ease) !important; }
}
@keyframes mo-in { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html:not(.has-vt) #app-luoghi:not([hidden]), html:not(.has-vt) #sez-viaggi:not([hidden]), html:not(.has-vt) #sez-trend:not([hidden]) { animation: none !important; }
  html body.mob .mbar, html body.mob #app-luoghi .lpanel, html body.mob #vmain, html body.mob #vside { transition-duration: .01s !important; }
}

/* ==========================================================================
   MOVIMENTO, PASSO 2 (24 ottobre 2026) — solo telefono: tocco sui pulsanti e fogli dal basso.
   Tocco: il pulsante si abbassa subito e torna su piano, senza scatto e senza rimbalzo (prima chip, giorni e
   schede si comprimevano di colpo; gli altri con un piccolo rimbalzo). Le proprietà già animate restano tutte.
   Fogli (.bsh) e pannello dei filtri (#side): si aprono con la curva morbida, si chiudono rapidi entro i 260 ms
   del codice (prima la chiusura veniva tagliata a metà). NON tocca profilo, finestre (.udlg) né tempi in JS.
   ========================================================================== */
@media (max-width: 980px) {
  /* 1. tocco morbido */
  html body.mob :is(.btn, .chip, .gs-chip, .gs-i, .t-chip, .t-mode, .vtab, .mtab, .ppl-tab, .sp-o, .pf-st.lk, .pf-list, .pf-trip, .tipo, .glb-s, .gpsbtn, .mapfab, .mapsw, .pf-mi, .vtile, .vc-a, .vchip, .vday-chip, .vm-t, .bg-sg, .vp-tab, .t-k, .vp-rtab, .vs-p, .mioseg button, .sd-card, .vfx-sw) {
    transition: scale .45s var(--mo-ease), transform .45s var(--mo-ease), filter .4s var(--mo-soft), background-color .3s, color .3s, border-color .3s, box-shadow .3s, opacity .3s; }
  html body.mob :is(.item, .t-row, .shm-r) { transition: scale .45s var(--mo-ease), transform .45s var(--mo-ease), background .25s, box-shadow .25s; }
  html body.mob .catbtn { transition: scale .45s var(--mo-ease), transform .45s var(--mo-ease), filter .4s var(--mo-soft), background .25s, box-shadow .25s; }
  html body.mob :is(.x, .pf-x) { transition: transform .4s var(--mo-ease), scale .4s var(--mo-ease), background .2s !important; }
  /* chip dell'intestazione dei luoghi: restano le animazioni del passo 1 e in più il tocco */
  html body.mob[data-section="luoghi"] #app-luoghi .pfilt .chip {
    transition-property: padding, margin, height, max-height, max-width, font-size, opacity, background-color, color, scale, transform, filter !important;
    transition-duration: .45s, .45s, .45s, .45s, .45s, .45s, .35s, .3s, .3s, .45s, .45s, .4s !important; transition-timing-function: var(--mo-ease) !important; }
  /* 2. fogli dal basso: aprono morbidi (prima con un piccolo rimbalzo), chiudono rapidi e interi */
  .bsh-p { transition: transform .24s cubic-bezier(.4,0,1,1), opacity .2s ease-in !important; }
  .bsh.on .bsh-p { transition: transform .5s var(--mo-ease), opacity .3s var(--mo-soft) !important; }
  #side { transition: transform .28s cubic-bezier(.4,0,1,1), opacity .22s ease-in, visibility 0s .28s !important; }
  #side.open { transition: transform .5s var(--mo-ease), opacity .3s var(--mo-soft), visibility 0s !important; }
}
@media (prefers-reduced-motion: reduce) {
  .bsh-p, .bsh.on .bsh-p, #side, #side.open { transition-duration: .01s !important; }
}

/* ==========================================================================
   ✨ SUGGERISCI CON AI (25 ottobre 2026) — suggerisci.js, pagina .rq «sg-pg»: filtri, schede da tenere o scartare, riepilogo.
   Nomi con prefisso sg-. Selezionati pieni (colore dell'app o del tipo, testo bianco) anche al buio.
   ========================================================================== */
.sg-pg .pp-sc { max-width: 640px; }
.sg-spark { display: inline-block; }
.sg-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-card, 22px); color: #fff; background: radial-gradient(130% 150% at 0% 0%, #9b6bff, #7b4df0 45%, #ff5a7a 110%); box-shadow: 0 16px 34px -22px #7b4df0; }
.sg-hi { width: 50px; height: 50px; flex: none; display: grid; place-items: center; font-size: 1.6rem; border-radius: 16px; background: rgba(255,255,255,.22); }
.sg-hero b { display: block; font-size: 1.05rem; } .sg-hero small { opacity: .92; font-size: .84rem; line-height: 1.35; }
.sg-sec { margin-top: 20px; }
.sg-l { font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin: 0 2px 8px; }
.sg-seg { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--fill-3); }
.sg-seg button { flex: 1; min-width: 0; height: 40px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-weight: 700; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; transition: background-color .3s, color .3s, scale .45s var(--mo-ease, ease); }
.sg-seg button.on { background: var(--tint); color: #fff; box-shadow: 0 4px 12px -6px var(--tint); }
.sg-city { margin: 10px 0 0; }
.sg-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.sg-kind { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px; border: 0; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.3); text-align: left; transition: background-color .3s, color .3s, scale .45s var(--mo-ease, ease); }
.sg-kind b { font-size: .92rem; line-height: 1.15; }
.sg-ki { font-size: 1.5rem; }
.sg-kind.on { background: var(--tint); color: #fff; box-shadow: 0 10px 22px -12px var(--tint); }
.sg-tipi { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-t { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 4px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 700; font-size: .8rem; box-shadow: inset 0 0 0 1px var(--fill-2), 0 4px 12px -10px rgba(0,0,0,.4); transition: background-color .3s, color .3s, scale .45s var(--mo-ease, ease); }
.sg-t:first-child { padding: 0 14px; }
.sg-ti { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--c, var(--tint)); transition: background-color .3s; }
.sg-t.on { background: var(--c, var(--tint)); color: #fff; box-shadow: 0 6px 14px -8px var(--c, var(--tint)); }
.sg-t.on .sg-ti { background: rgba(255,255,255,.25); }
.sg-t:first-child.on { background: var(--tint); }
.sg-hint { display: block; margin-top: 8px; color: var(--ink-3); font-size: .76rem; line-height: 1.35; } .sg-hint.c { text-align: center; }
.sg-box { padding: 4px 14px; border-radius: 20px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.3); }
.sg-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.sg-row + .sg-row { border-top: 1px solid var(--fill-3); }
.sg-rl { width: 92px; flex: none; font-weight: 700; font-size: .8rem; color: var(--ink-2); }
.sg-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sg-c { height: 34px; font-size: .8rem; }
.sg-c.on, html.dark .sg-c.on { background: var(--tint) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 12px -6px var(--tint) !important; }
.sg-n .sg-c { min-width: 52px; justify-content: center; }
/* scelte che cambiano con i tipi scelti: un gruppo per tipo, con il suo colore */
.sg-og { margin-bottom: 12px; padding: 10px 12px 12px; border-radius: 18px; background: var(--card); box-shadow: inset 3px 0 0 var(--c, var(--tint)), 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.3); }
.sg-ogh { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 800; font-size: .86rem; color: var(--ink); }
.sg-ogh .sg-ti { width: 24px; height: 24px; }
.sg-ogg { margin: 4px 2px 8px; color: var(--ink-2); font-size: .8rem; }
.sg-bxn { margin: 0 0 10px; }
.sg-occ { margin-bottom: 10px; }
.sg-extra { margin: 0; }
.sg-note { margin-top: 16px; }
.sg-spark.big { font-size: 2.8rem; animation: sg-glow 1.6s var(--mo-soft, ease) infinite alternate; }
@keyframes sg-glow { from { transform: scale(.9) rotate(-8deg); opacity: .7; } to { transform: scale(1.08) rotate(8deg); opacity: 1; } }
/* schede */
.sg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 460px; margin: 4px auto 0; }
.sg-pos { font: 800 .95rem var(--font-d); color: var(--ink-2); white-space: nowrap; }
.sg-dots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.sg-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--fill-2); transition: width .45s var(--mo-ease, ease), background-color .3s; }
.sg-dots i.cur { width: 20px; background: var(--tint); } .sg-dots i.y { background: #34c759; } .sg-dots i.n { background: #ff3b30; opacity: .55; }
.sg-stack { display: grid; max-width: 460px; margin: 14px auto 0; }
.sg-stack > .sg-card { grid-area: 1 / 1; }
.sg-card { position: relative; overflow: hidden; border-radius: 28px; background: var(--card); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 22px 44px -26px rgba(20,20,50,.55); touch-action: pan-y; -webkit-user-select: none; user-select: none; transition: transform .45s var(--mo-ease, ease), opacity .3s; will-change: transform; }
.sg-card.drag { transition: none; cursor: grabbing; }
.sg-card.next { transform: translateY(14px) scale(.94); opacity: .6; pointer-events: none; }
.sg-card.next.up { transform: none; opacity: 1; }
.sg-ch { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; height: 118px; padding: 14px 16px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c, var(--tint)) 70%, #fff), var(--c, var(--tint)) 75%); }
.sg-cic { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; color: #fff; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.sg-ctipo { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 28px 0 12px; border-radius: 999px; background: rgba(0,0,0,.22); color: #fff; max-width: 60%; }
.sg-ctipo select { border: 0; background: none; color: #fff; -webkit-text-fill-color: #fff; font-weight: 800; font-size: .8rem; outline: none; -webkit-appearance: none; appearance: none; max-width: 100%; text-overflow: ellipsis; }
.sg-car { position: absolute; right: 11px; font-size: .7rem; pointer-events: none; }
.sg-cb { padding: 16px 18px 18px; }
.sg-cn { display: block; font: 800 1.32rem/1.2 var(--font-d); letter-spacing: -.02em; }
.sg-ca { display: block; margin-top: 4px; color: var(--ink-3); font-size: .8rem; line-height: 1.35; }
.sg-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sg-m { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--fill-3); color: var(--ink-2); font-weight: 700; font-size: .76rem; }
.sg-r { background: rgba(255,170,0,.16); color: #a35f00; } .sg-r.top { background: #f5a300; color: #fff; }
.sg-op { background: rgba(52,199,89,.14); color: #1e7e34; } .sg-cl { background: rgba(255,59,48,.12); color: #c5221f; }
html.dark .sg-r:not(.top) { color: #ffc34d; } html.dark .sg-op { color: #5fe08a; } html.dark .sg-cl { color: #ff8a80; }
.sg-why { display: flex; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--tint) 9%, transparent); color: var(--ink); font-size: .9rem; line-height: 1.4; }
.sg-maps { display: inline-block; margin-top: 12px; font-weight: 700; font-size: .84rem; color: var(--tint); text-decoration: none; }
.sg-stamp { position: absolute; top: 20px; padding: 4px 12px; border: 3px solid currentColor; border-radius: 12px; background: rgba(255,255,255,.92); font: 900 1.05rem var(--font-d); letter-spacing: .08em; pointer-events: none; opacity: 0; transition: opacity .2s; }
.sg-stamp.yes { left: 18px; color: #1fa64a; transform: rotate(-12deg); opacity: calc(var(--p, 0) * 1.6); }
.sg-stamp.no { right: 18px; color: #e5352b; transform: rotate(12deg); opacity: calc(var(--p, 0) * -1.6); }
.sg-b { display: grid; place-items: center; width: 66px; height: 66px; border: 0; border-radius: 50%; background: var(--card); font-size: 1.7rem; font-weight: 900; box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 14px 28px -16px rgba(20,20,50,.5); transition: scale .45s var(--mo-ease, ease), opacity .3s; }
.sg-b.no { color: #ff3b30; } .sg-b.yes { color: #fff; background: #34c759; box-shadow: 0 14px 28px -12px rgba(52,199,89,.8); }
.sg-b.un { width: 48px; height: 48px; font-size: 1.25rem; color: var(--ink-2); }
.sg-b:disabled { opacity: .35; }
.sg-b:active, .sg-t:active, .sg-kind:active, .sg-seg button:active { scale: .93; }
.sg-more { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.sg-more .btn { justify-content: center; height: 46px; }
/* caricamento a passi (25 ottobre): anello che gira, barra che avanza, tempo stimato, passi spuntati, consiglio */
.sg-load { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 440px; margin: 0 auto; padding: 26px 4px 10px; }
.sg-ring { position: relative; width: 96px; height: 96px; display: grid; place-items: center; margin-bottom: 4px; }
.sg-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 4px; background: conic-gradient(from 0deg, #7b4df0, #ff5a7a, #ffb547, #7b4df0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); animation: sg-spin 1.4s linear infinite; }
.sg-ring::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tint) 18%, transparent), transparent 70%); }
.sg-ring .sg-spark.big { position: relative; z-index: 1; }
@keyframes sg-spin { to { transform: rotate(360deg); } }
.sg-lt { font: 800 1.08rem/1.35 var(--font-d); min-height: 2.7em; display: flex; align-items: center; justify-content: center; }
.sg-eta { color: var(--ink-2); font-weight: 700; font-size: .84rem; min-height: 1.3em; }
.sg-bar { width: 100%; height: 8px; border-radius: 99px; background: var(--fill-2); overflow: hidden; }
.sg-bar i { display: block; height: 100%; width: 5%; border-radius: inherit; background: linear-gradient(90deg, #7b4df0, #ff5a7a); transition: width .4s var(--mo-soft, ease); background-size: 200% 100%; animation: sg-shine 1.6s linear infinite; }
@keyframes sg-shine { from { background-position: 0 0; } to { background-position: -200% 0; } }
.sg-steps { list-style: none; width: 100%; margin: 10px 0 0; padding: 6px 14px; border-radius: 20px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.3); text-align: left; }
.sg-steps li { display: flex; align-items: center; gap: 10px; padding: 9px 0; color: var(--ink-3); font-weight: 700; font-size: .88rem; transition: color .3s; }
.sg-steps li + li { border-top: 1px solid var(--fill-3); }
.sg-si { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--fill-3); font-size: .95rem; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s, background-color .3s; }
.sg-stt { flex: 1; }
.sg-sk { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: .75rem; font-weight: 900; color: #fff; }
.sg-steps li.now { color: var(--ink); } .sg-steps li.now .sg-si { filter: none; opacity: 1; background: color-mix(in srgb, var(--tint) 16%, transparent); }
.sg-steps li.now .sg-sk { border: 2.5px solid var(--fill-2); border-top-color: var(--tint); animation: sg-spin .8s linear infinite; }
.sg-steps li.ok { color: var(--ink-2); } .sg-steps li.ok .sg-si { filter: none; opacity: 1; } .sg-steps li.ok .sg-sk { background: #34c759; }
.sg-tip { margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--tint) 8%, transparent); color: var(--ink-2); font-size: .82rem; line-height: 1.4; }
/* foto di Google sulla scheda: tocca per la prossima; autore in basso (obbligatorio) */
.sg-ch.ph { position: relative; height: 210px; align-items: flex-start; justify-content: flex-end; background: #1c1c22; cursor: pointer; }
.sg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s var(--mo-soft, ease), transform .3s var(--mo-ease, ease); -webkit-user-drag: none; pointer-events: none; }
.sg-img.lo { opacity: .35; }
.sg-ch.ph::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60px; background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none; }
.sg-ch.ph .sg-ctipo { position: relative; z-index: 2; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sg-cred { position: absolute; z-index: 2; left: 14px; bottom: 10px; max-width: 60%; color: rgba(255,255,255,.92); font-size: .7rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-cred a { color: inherit; text-decoration: none; }
.sg-phn { position: absolute; z-index: 2; right: 12px; bottom: 9px; padding: 3px 9px; border-radius: 99px; background: rgba(0,0,0,.45); color: #fff; font-size: .72rem; font-weight: 800; }
/* frecce e suggerimento «scorri la foto» (la prima volta) */
.sg-pha { position: absolute; z-index: 2; top: 50%; width: 36px; height: 36px; margin-top: -18px; display: grid; place-items: center; padding: 0 0 2px; border: 0; border-radius: 50%; background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 1.4rem; font-weight: 700; line-height: 1; transition: scale .45s var(--mo-ease, ease), background-color .2s; }
.sg-pha.l { left: 8px; } .sg-pha.r { right: 8px; }
.sg-pha:active { scale: .88; background: rgba(0,0,0,.6); }
.sg-phtip { position: absolute; z-index: 2; left: 50%; bottom: 38px; transform: translateX(-50%); padding: 6px 12px; border-radius: 99px; background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: .76rem; font-weight: 800; white-space: nowrap; pointer-events: none; animation: sg-nudge 1.8s var(--mo-soft, ease) infinite; }
@keyframes sg-nudge { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(calc(-50% - 8px)); } }
.sg-phx { position: absolute; left: 14px; bottom: 10px; color: rgba(255,255,255,.9); font-size: .72rem; font-weight: 700; }
.sg-ch { position: relative; }
/* già provato / già visto */
.sg-tried { margin-top: 12px; border-radius: 16px; background: var(--fill-3); transition: background-color .3s; }
.sg-tried.on { background: color-mix(in srgb, #34c759 12%, transparent); padding-bottom: 12px; }
.sg-trb { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; color: var(--ink); text-align: left; }
.sg-trc { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 2px solid var(--fill-1, rgba(0,0,0,.2)); color: #fff; font-weight: 900; font-size: .85rem; transition: background-color .3s, border-color .3s; }
.sg-tried.on .sg-trc { background: #34c759; border-color: #34c759; }
.sg-trt { display: flex; flex-direction: column; min-width: 0; } .sg-trt b { font-size: .92rem; } .sg-trt small { color: var(--ink-3); font-size: .74rem; line-height: 1.3; }
.sg-stars { display: flex; align-items: center; gap: 2px; padding: 0 12px; }
.sg-stars .sg-rl { width: auto; margin-right: 8px; }
.sg-star { width: 38px; height: 38px; border: 0; background: none; padding: 0; font-size: 1.6rem; line-height: 1; color: var(--fill-1, rgba(0,0,0,.18)); transition: color .2s, scale .45s var(--mo-ease, ease); }
.sg-star.on { color: #ffb400; } .sg-star:active { scale: .85; }
.sg-rev { display: block; width: calc(100% - 24px); margin: 6px 12px 0; padding: 10px 12px; border: 1.5px solid transparent; border-radius: 14px; background: var(--card); font: inherit; font-size: .88rem; line-height: 1.4; resize: vertical; min-height: 64px; outline: none; }
.sg-rev:focus { border-color: var(--tint); box-shadow: 0 0 0 4px var(--tint-soft, rgba(123,77,240,.15)); }
.sg-tried .sg-hint { margin: 4px 14px 0; }
.sg-fot { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 0; }
.sg-ft { position: relative; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--fill-2); }
.sg-ft img { width: 100%; height: 100%; object-fit: cover; }
.sg-ftx { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; font-weight: 900; }
.sg-fadd { width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; border: 1.5px dashed var(--fill-1, rgba(0,0,0,.25)); border-radius: 14px; background: var(--card); color: var(--ink-2); }
.sg-fadd span { font-size: 1.3rem; line-height: 1; } .sg-fadd small { font-size: .6rem; font-weight: 800; }
/* nelle schede ✕ ↺ ✓ stanno nella barra in basso accanto a «Salva»: sempre a portata di dito, anche con la scheda lunga (foto, «Già provato» aperto, iPhone SE) */
.sg-facts { display: none; }
.pe-foot.sg-deck .sg-facts { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.pe-foot.sg-deck .pe-cnt { display: none; }
.pe-foot.sg-deck .btn { padding: 0 20px; }
.sg-facts .sg-b { width: 56px; height: 56px; font-size: 1.45rem; }
.sg-facts .sg-b.un { width: 42px; height: 42px; font-size: 1.1rem; }
.sg-rtr { align-self: flex-start; margin-top: 4px; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, #34c759 14%, transparent); color: #1e7e34; font-size: .74rem; font-weight: 800; }
html.dark .sg-rtr { color: #5fe08a; }
@media (max-height: 720px) { .sg-ch { height: 88px; padding: 12px 14px; } .sg-ch.ph { height: 150px; } .sg-ring { width: 80px; height: 80px; } .sg-cic { width: 52px; height: 52px; border-radius: 16px; } .sg-cb { padding: 12px 16px 14px; } .sg-cn { font-size: 1.18rem; } .sg-why { font-size: .85rem; margin-top: 10px; } }
@media (max-width: 380px) { .sg-rl { width: 76px; } .sg-seg button { font-size: .74rem; } .sg-facts { gap: 9px; } .sg-facts .sg-b { width: 52px; height: 52px; } .pe-foot.sg-deck .btn { padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) {
  .sg-spark.big, .sg-ring::before, .sg-bar i, .sg-steps li.now .sg-sk, .sg-phtip { animation: none; }
  .sg-card, .sg-dots i, .sg-b, .sg-t, .sg-kind, .sg-seg button { transition: none !important; }
}

/* ==========================================================================
   PAGINA DI BENVENUTO, 27 ottobre 2026 — punti di fiducia, prova delle schede «tieni o scarta», domande veloci (landing.js)
   ========================================================================== */
.ld-trust { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; color: var(--ink-2); font-size: .84rem; font-weight: 700; }
.ld-trust span { white-space: nowrap; }
.ld-sw { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ld-sw-stack { position: relative; display: grid; width: min(340px, 100%); min-height: 300px; }
.ld-sw-stack > * { grid-area: 1 / 1; }
.ld-sw-c { position: relative; overflow: hidden; border-radius: 28px; background: var(--card); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 26px 50px -28px rgba(30,20,70,.55); touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab; transition: transform .45s var(--mo-ease, ease), opacity .3s; }
.ld-sw-c.next { transform: translateY(14px) scale(.94); opacity: .6; pointer-events: none; }
.ld-sw-c.next.up { transform: none; opacity: 1; }
.ld-sw-h { position: relative; height: 150px; display: grid; place-items: center; color: #fff; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c) 65%, #fff), var(--c) 75%); }
.ld-sw-h svg { width: 64px; height: 64px; padding: 14px; border-radius: 22px; background: rgba(255,255,255,.22); }
.ld-sw-st { position: absolute; top: 16px; padding: 3px 10px; border: 3px solid currentColor; border-radius: 10px; background: rgba(255,255,255,.92); font: 900 .95rem var(--font-d); letter-spacing: .08em; }
.ld-sw-st.y { left: 16px; color: #1fa64a; transform: rotate(-12deg); opacity: calc(var(--p, 0) * 1.6); }
.ld-sw-st.n { right: 16px; color: #e5352b; transform: rotate(12deg); opacity: calc(var(--p, 0) * -1.6); }
.ld-sw-t { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; text-align: left; }
.ld-sw-t b { font: 800 1.2rem/1.2 var(--font-d); } .ld-sw-t small { color: var(--ink-2); font-weight: 700; }
.ld-sw-t p { margin: 6px 0 0; padding: 9px 11px; border-radius: 14px; background: color-mix(in srgb, var(--tint) 9%, transparent); color: var(--ink); font-size: .88rem; line-height: 1.4; }
.ld-sw-end { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 20px; border-radius: 28px; background: var(--card); text-align: center; box-shadow: 0 26px 50px -28px rgba(30,20,70,.45); }
.ld-sw-end b { font: 800 1.25rem var(--font-d); } .ld-sw-end small { color: var(--ink-2); margin-bottom: 6px; }
.ld-sw-bar { display: flex; align-items: center; justify-content: center; gap: 16px; width: min(340px, 100%); }
.ld-sw-n { flex: 1; text-align: center; color: var(--ink-2); font-weight: 700; font-size: .84rem; }
.ld-sw-b { width: 58px; height: 58px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--card); font-size: 1.5rem; font-weight: 900; cursor: pointer; box-shadow: 0 14px 28px -16px rgba(20,20,50,.5); transition: scale .45s var(--mo-ease, ease); }
.ld-sw-b.no { color: #ff3b30; } .ld-sw-b.yes { color: #fff; background: #34c759; box-shadow: 0 14px 28px -12px rgba(52,199,89,.8); }
.ld-sw-b:active { scale: .9; }
.ld-faq-l { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
.ld-faq details { border-radius: 20px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 30px -24px rgba(30,20,70,.4); }
.ld-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; font: 800 1rem var(--font-d); }
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--tint-soft); color: var(--tint); font-size: 1.2rem; transition: rotate .45s var(--mo-ease, ease); }
.ld-faq details[open] summary::after { rotate: 45deg; }
.ld-faq details p { margin: 0; padding: 0 18px 16px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 860px) { .ld-swipe .ld-try-t { text-align: center; } .ld-swipe .ld-h.l { text-align: center !important; margin-left: auto; margin-right: auto; } .ld-swipe .ld-pts { width: fit-content; margin: 16px auto 0; text-align: left; } .ld-trust { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .ld-sw-c, .ld-sw-b, .ld-faq summary::after { transition: none !important; } }

/* ==========================================================================
   TASTO «i», CENTRO INFORMAZIONI E AIUTO (27 ottobre 2026) — storie.js (ih-), aiuto.js (hp-)
   ========================================================================== */
/* la «i» si illumina in una schermata mai vista: anello azzurro che respira (le novità restano con l'anello arancione) */
.info-i { position: relative; }
.info-i.ctx:not(.new)::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #5ad1ff; animation: info-ring 1.8s ease-out infinite; pointer-events: none; }
.info-i.ctx:not(.new) { animation: ih-glow 1.8s ease-in-out infinite; }
@keyframes ih-glow { 0%, 100% { box-shadow: 0 6px 16px -6px rgba(106,69,232,.75), 0 0 0 0 rgba(90,209,255,0); } 50% { box-shadow: 0 6px 18px -4px rgba(106,69,232,.9), 0 0 18px 4px rgba(90,209,255,.55); } }
/* fumetto che invita a toccare la «i» */
.ih-tip { position: fixed; z-index: 9400; max-width: min(280px, calc(100vw - 24px)); padding: 9px 13px; border: 0; border-radius: 16px; background: #1d1b2e; color: #fff; font: 700 .84rem/1.3 var(--font); text-align: left; cursor: pointer; box-shadow: 0 14px 30px -12px rgba(20,10,60,.6); animation: ih-in .45s var(--mo-ease, ease) both; }
.ih-tip::before { content: ""; position: absolute; top: -6px; right: 14px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.ih-tip.out { opacity: 0; transform: translateY(-4px); transition: opacity .35s, transform .35s; }
@keyframes ih-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
/* centro informazioni */
.udlg-box.ih-box { width: min(440px, 100%); padding: 18px 16px 16px; gap: 8px; text-align: left; background: var(--lg-solid, var(--card)) !important; }
.ih-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 4px 6px; }
.ih-h b { display: block; font: 800 1.25rem/1.2 var(--font-d); } .ih-h small { color: var(--ink-3); font-size: .8rem; }
.ih-r { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: 18px; background: var(--fill-3); color: var(--ink); text-align: left; cursor: pointer; transition: background-color .3s, scale .45s var(--mo-ease, ease); }
.ih-r:active { scale: .98; }
.ih-r.ctx { background: linear-gradient(120deg, color-mix(in srgb, var(--tint) 16%, transparent), color-mix(in srgb, #5ad1ff 14%, transparent)); }
.ih-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(140deg, #8f6bff, #6a45e8 60%, #c445a8); }
.ih-r.ctx .ih-ic { background: linear-gradient(140deg, #5ad1ff, #2f7de0 60%, #6a45e8); }
.ih-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ih-t b { font-size: .95rem; } .ih-t small { color: var(--ink-3); font-size: .78rem; line-height: 1.3; }
.ih-badge { flex: none; padding: 3px 8px; border-radius: 99px; background: #ff5f57; color: #fff; font-size: .68rem; font-weight: 800; }
.ih-car { flex: none; color: var(--ink-3); font-size: 1.2rem; }
/* aiuto */
.udlg-box.hp-box { width: min(560px, 100%); height: min(86dvh, 760px); padding: 16px 16px 0; gap: 10px; text-align: left; background: var(--lg-solid, var(--card)) !important; overflow: hidden; }
.hp-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 4px; }
.hp-h b { display: block; font: 800 1.3rem/1.2 var(--font-d); } .hp-h small { color: var(--ink-3); font-size: .8rem; }
.hp-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--fill-3); }
.hp-tab { flex: 1; height: 38px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-weight: 800; font-size: .84rem; cursor: pointer; transition: background-color .3s, color .3s; }
.hp-tab.on { background: var(--tint); color: #fff; box-shadow: 0 4px 12px -6px var(--tint); }
.hp-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 4px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.hp-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--fill-2); }
.hp-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: .95rem; outline: none; }
.hp-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.hp-g { margin: 10px 4px 2px; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.hp-q { border-radius: 16px; background: var(--fill-3); }
.hp-q summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; list-style: none; cursor: pointer; font-weight: 800; font-size: .92rem; }
.hp-q summary::-webkit-details-marker { display: none; }
.hp-q summary::after { content: "+"; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--tint-soft); color: var(--tint); transition: rotate .45s var(--mo-ease, ease); }
.hp-q[open] summary::after { rotate: 45deg; }
.hp-a { padding: 0 14px 14px; } .hp-a p { margin: 0 0 10px; color: var(--ink-2); line-height: 1.5; font-size: .9rem; }
.hp-none { padding: 18px; border-radius: 16px; background: var(--fill-3); color: var(--ink-2); text-align: center; }
.hp-more { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--tint) 10%, transparent); font-weight: 700; font-size: .9rem; }
.hp-me { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--tint) 10%, transparent); }
.hp-av { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card); font-size: 1.5rem; }
.hp-me b { display: block; } .hp-me small { color: var(--ink-2); font-size: .84rem; line-height: 1.35; }
.hp-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.hp-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-k.on, html.dark .hp-k.on { background: var(--tint) !important; color: #fff !important; border-color: transparent !important; }
.hp-x { width: 100%; padding: 12px 14px; border: 1.5px solid transparent; border-radius: 16px; background: var(--fill-2); font: inherit; font-size: .95rem; line-height: 1.45; resize: vertical; min-height: 130px; outline: none; }
.hp-x:focus { border-color: var(--tint); background: var(--card); box-shadow: 0 0 0 4px var(--tint-soft); }
.hp-cnt { align-self: flex-end; margin-top: -6px; color: var(--ink-3); font-size: .72rem; }
.hp-info { color: var(--ink-3); font-size: .78rem; line-height: 1.4; }
.hp-acts { display: flex; flex-wrap: wrap; gap: 8px; } .hp-acts .btn { flex: 1; justify-content: center; height: 46px; }
.hp-p { color: var(--ink-2); }
.hp-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 10px; text-align: center; } .hp-big { font-size: 3rem; } .hp-done b { font: 800 1.2rem var(--font-d); } .hp-done small { color: var(--ink-2); } .hp-done .btn { margin-top: 10px; }
@media (max-width: 980px) { .udlg-box.hp-box { height: min(88dvh, 760px); } }
@media (prefers-reduced-motion: reduce) { .info-i.ctx, .info-i.ctx::before, .ih-tip { animation: none !important; } }

/* 🕐 ora del posto nella scheda del viaggio (27 ottobre 2026, viaggi.js clockChip) */
.vclock { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: color-mix(in srgb, #2f7de0 14%, transparent); color: var(--ink); font: 700 .76rem var(--font); white-space: nowrap; cursor: pointer; transition: scale .45s var(--mo-ease, ease); }
.vclock b { font-variant-numeric: tabular-nums; font-weight: 800; }
.vclock .vck-t { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.vclock:active { scale: .95; }
.vclock[hidden] { display: none; }

/* ==========================================================================
   🎉 SERATE «PROPONI AGLI AMICI» (27 ottobre 2026) — serate.js (sr-), scheda negli Esploratori, pallino inviti su Esploratori
   ========================================================================== */
.ppl-tabs { grid-template-columns: .9fr 1.25fr 1fr 1fr !important; }
.ppl-tab { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 3px !important; padding-right: 3px !important; font-size: .78rem !important; letter-spacing: -.01em; }
.ppl-n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 4px; padding: 0 4px; border-radius: 99px; background: #ff3b30; color: #fff; font-size: .66rem; font-weight: 800; vertical-align: 1px; }
.mb-b.sr-new { position: relative; }
.mb-b.sr-new::after { content: attr(data-n); position: absolute; top: 4px; right: calc(50% - 22px); min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 99px; background: #ff3b30; color: #fff; font: 800 .64rem/1 var(--font); box-shadow: 0 0 0 2px var(--card, #fff); }
html body .udlg-box.sr-box { text-align: left; background: var(--page, var(--card)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.udlg-box.sr-new, .udlg-box.sr-room { width: min(560px, 100%); height: min(88dvh, 820px); padding: 16px 16px 0; gap: 10px; overflow: hidden; }
.udlg-box.sr-pick, .udlg-box.sr-invite { width: min(520px, 100%); max-height: min(84dvh, 760px); padding: 16px; gap: 10px; overflow: hidden; }
.udlg-box.sr-dec { width: min(440px, 100%); padding: 18px 16px 16px; gap: 10px; }
.sr-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px; }
.sr-h b { display: block; font: 800 1.25rem/1.2 var(--font-d); } .sr-h small { color: var(--ink-3); font-size: .8rem; }
.sr-sc { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 2px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.sr-sec { margin-top: 16px; }
.sr-l { margin: 0 2px 8px; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.sr-hint { display: block; margin: 6px 2px; color: var(--ink-3); font-size: .78rem; line-height: 1.35; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-c { height: 34px; font-size: .82rem; }
.sr-c.on, html.dark .sr-c.on { background: var(--tint) !important; color: #fff !important; border-color: transparent !important; }
.sr-name { width: 100%; height: 48px; margin-bottom: 8px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 16px; background: var(--fill-2); font: 700 1rem var(--font); outline: none; }
.sr-name:focus { border-color: var(--tint); background: var(--card); box-shadow: 0 0 0 4px var(--tint-soft); }
.sr-emos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sr-emo { width: 42px; height: 42px; border: 0; border-radius: 14px; background: var(--fill-3); font-size: 1.3rem; cursor: pointer; transition: background-color .3s, scale .45s var(--mo-ease, ease); }
.sr-emo.on { background: var(--tint); box-shadow: 0 6px 14px -8px var(--tint); scale: 1.06; }
.sr-days { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.sr-days::-webkit-scrollbar { display: none; }
.sr-day { flex: none; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 0; border: 0; border-radius: 16px; background: var(--fill-3); color: var(--ink); cursor: pointer; transition: background-color .3s, color .3s, scale .45s var(--mo-ease, ease); }
.sr-day small { font-size: .66rem; font-weight: 700; color: var(--ink-3); text-transform: capitalize; } .sr-day b { font: 800 1.2rem var(--font-d); }
.sr-day.we { background: color-mix(in srgb, var(--tint) 8%, var(--fill-3)); }
.sr-day.on { background: var(--tint); color: #fff; box-shadow: 0 8px 16px -10px var(--tint); } .sr-day.on small { color: rgba(255,255,255,.85); }
.sr-day:active, .sr-emo:active, .sr-vote:active, .sr-date:active { scale: .95; }
.sr-in { margin: 0; }
.sr-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.sr-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 3px; border: 0; border-radius: 999px; background: var(--tint); color: #fff; font-weight: 700; font-size: .8rem; cursor: pointer; }
.sr-chip b { opacity: .8; }
.sr-res, .sr-pl { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sr-pl { overflow-y: auto; max-height: calc(min(84dvh, 760px) - 150px); }
.sr-pr, .sr-pp { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 14px; background: var(--fill-3); color: var(--ink); text-align: left; cursor: pointer; }
.sr-pr.on { background: color-mix(in srgb, var(--tint) 14%, transparent); }
.sr-pp.dup { opacity: .5; cursor: default; }
.sr-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .sr-pt b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; } .sr-pt small { color: var(--ink-3); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; }
.sr-pk { flex: none; color: var(--tint); font-weight: 800; font-size: .82rem; }
.sr-pi { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.sr-av { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; object-fit: cover; background: linear-gradient(140deg, #8f6bff, #c445a8); color: #fff; font-weight: 800; font-size: .9rem; box-shadow: 0 0 0 2px var(--card, #fff); }
.sr-av.sm { width: 24px; height: 24px; font-size: .7rem; }
.sr-free { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--tint) 8%, transparent); }
.sr-free small { width: 100%; color: var(--ink-2); font-weight: 700; }
.sr-free input { flex: 1; min-width: 160px; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--card); font: inherit; outline: none; }
.sr-props { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sr-mini { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--fill-3); font-weight: 700; font-size: .86rem; }
.sr-foot { display: flex; align-items: center; gap: 12px; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--lg-sheen), var(--lg-thick); box-shadow: var(--lg-rim); }
.sr-fi { flex: 1; color: var(--ink-2); font-weight: 700; font-size: .86rem; } .sr-foot .btn { height: 46px; padding: 0 22px; }
/* elenco nella scheda Serate */
.sr-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; color: #fff; background: radial-gradient(130% 150% at 0% 0%, #ff8a5c, #ff5a7a 45%, #7b4df0 110%); box-shadow: 0 14px 30px -20px #ff5a7a; }
.sr-hero > div { flex: 1; min-width: 180px; } .sr-hero b { display: block; font: 800 1.05rem var(--font-d); } .sr-hero small { opacity: .95; font-size: .82rem; line-height: 1.35; }
.sr-hi { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 15px; background: rgba(255,255,255,.22); font-size: 1.5rem; }
.sr-hero .btn { background: #fff !important; color: #c2185b !important; box-shadow: none !important; }
.sr-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sr-inv { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: color-mix(in srgb, #ff5a7a 10%, var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #ff5a7a 35%, transparent); }
.sr-it { flex: 1; min-width: 150px; display: flex; flex-direction: column; } .sr-it b { font-size: .95rem; } .sr-it small { color: var(--ink-2); font-size: .78rem; }
.sr-ib { display: flex; gap: 6px; }
.sr-em { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--fill-3); font-size: 1.3rem; }
.sr-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 18px; background: var(--fill-3); color: var(--ink); text-align: left; cursor: pointer; }
.sr-row.done { opacity: .85; }
.sr-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sr-rt b { font-size: .95rem; } .sr-rt small { color: var(--ink-3); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-avs { display: inline-flex; } .sr-avs > * + * { margin-left: -8px; }
.sr-how { display: flex; flex-direction: column; gap: 8px; }
.sr-step { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--fill-3); } .sr-step b { display: block; font-size: .92rem; } .sr-step small { color: var(--ink-2); font-size: .8rem; }
.sr-n { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: #fff; font-weight: 900; }
/* dentro la serata */
.sr-lead { margin-top: 4px; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, #f5a300 14%, transparent); font-weight: 800; font-size: .9rem; }
.sr-win { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; padding: 14px; border-radius: 20px; color: #fff; background: radial-gradient(130% 150% at 0% 0%, #3ccf7a, #1f9d6b 55%, #0f6e8a 120%); box-shadow: 0 14px 30px -20px #1f9d6b; }
.sr-wi { font-size: 1.8rem; } .sr-win > div:not(.sr-wb) { flex: 1; min-width: 150px; display: flex; flex-direction: column; } .sr-win small { opacity: .9; font-weight: 700; } .sr-win b { font: 800 1.2rem var(--font-d); } .sr-win span { font-weight: 700; font-size: .86rem; }
.sr-wb { display: flex; gap: 6px; flex-wrap: wrap; } .sr-win .btn.ghost { background: rgba(255,255,255,.2) !important; color: #fff !important; } .sr-win .btn.solid { background: #fff !important; color: #0f6e5a !important; box-shadow: none !important; }
.sr-people { display: flex; flex-wrap: wrap; gap: 10px; }
.sr-pc { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; border: 0; background: none; padding: 0; color: var(--ink); cursor: default; }
.sr-pc small { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; font-weight: 700; color: var(--ink-2); }
.sr-pc .sr-av { width: 44px; height: 44px; font-size: 1.05rem; }
.sr-pc.wait { opacity: .55; } .sr-pc.add { cursor: pointer; } .sr-pc.add .sr-av { background: var(--fill-2); color: var(--tint); box-shadow: inset 0 0 0 1.5px var(--tint); font-size: 1.3rem; }
.sr-date { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 6px; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--fill-3); color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; transition: background-color .3s, scale .45s var(--mo-ease, ease); }
.sr-date.on { background: color-mix(in srgb, var(--tint) 14%, var(--fill-3)); }
.sr-date.past { opacity: .5; }
.sr-dc { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 2px solid var(--fill-1, rgba(0,0,0,.2)); color: #fff; font-weight: 900; font-size: .8rem; }
.sr-date.on .sr-dc { background: var(--tint); border-color: var(--tint); }
.sr-dt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sr-dt b { font-size: .92rem; text-transform: capitalize; } .sr-dt small { color: var(--ink-3); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; } .sr-bar i { display: block; height: 100%; background: var(--tint); border-radius: 0 3px 3px 0; transition: width .45s var(--mo-ease, ease); }
.sr-prop { margin-bottom: 8px; padding: 12px; border-radius: 18px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.3); }
.sr-prop.first { box-shadow: inset 0 0 0 2px #f5a300, 0 8px 24px -18px rgba(0,0,0,.3); }
.sr-prop.won { box-shadow: inset 0 0 0 2px #1f9d6b, 0 8px 24px -18px rgba(0,0,0,.3); }
.sr-vbar { height: 6px; margin: 8px 0; border-radius: 99px; background: var(--fill-3); overflow: hidden; } .sr-vbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8a5c, #ff5a7a); transition: width .45s var(--mo-ease, ease); }
.sr-pf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-pf .sr-avs { flex: 1; min-width: 40px; }
.sr-map { font-weight: 700; font-size: .8rem; color: var(--tint); text-decoration: none; }
.sr-del { border: 0; background: none; color: var(--ink-3); font-weight: 700; font-size: .78rem; cursor: pointer; }
.sr-vote { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--fill-3); color: var(--ink); font-weight: 800; font-size: .86rem; cursor: pointer; transition: background-color .3s, color .3s, scale .45s var(--mo-ease, ease); }
.sr-vote.on { background: linear-gradient(120deg, #ff8a5c, #ff5a7a); color: #fff; box-shadow: 0 8px 16px -10px #ff5a7a; }
.sr-addp { width: 100%; justify-content: center; height: 44px; }
.sr-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .sr-acts .btn { flex: 1; justify-content: center; }
.btn.danger { color: #e5352b !important; }
@media (prefers-reduced-motion: reduce) { .sr-day, .sr-emo, .sr-vote, .sr-date, .sr-bar i, .sr-vbar i { transition: none !important; } }
/* 28 ottobre 2026: profilo che si apre subito. Se il profilo non è ancora in memoria si vede la sua sagoma (copertina + righe) invece della pagina vuota */
.pf-sk { padding: 18px 16px; }
.pf-cov-sk { animation: pf-skp 1.2s ease-in-out infinite alternate; }
@keyframes pf-skp { from { opacity: .75; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pf-cov-sk { animation: none !important; } }
/* 30 ottobre 2026: finestra del consenso con due dichiarazioni (maggiore età + informativa e termini) */
.cons-ck + .cons-ck { margin-top: 8px; }
/* finestra del consenso: fondo pieno (sopra la mappa il vetro la rendeva poco leggibile) */
html body .udlg-box.cons { background: var(--page, var(--card)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* pannello amministratore: con la scheda «Consensi» le schede sono 5; sul telefono scorrono di lato invece di uscire dal bordo */
@media (max-width: 980px) { .adm-tabs { overflow-x: auto; scrollbar-width: none; } .adm-tabs::-webkit-scrollbar { display: none; } .adm-tab { flex: 0 0 auto !important; white-space: nowrap; } }
/* 30 ottobre 2026: «Ho meno di 18 anni» sotto i pulsanti del consenso */
.cons-u18 { display: block; margin: 12px auto 0; font-size: .85rem; color: var(--ink-2); text-decoration: underline; background: none; border: 0; cursor: pointer; min-height: 34px; }
/* 30 ottobre 2026: età nel consenso (18+, 14-17 «account giovane», meno di 14) */
.cons-q { margin: 12px 0 6px; font-weight: 800; font-size: .92rem; }
.cons-age { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cons-ab { min-height: 42px; padding: 6px 8px; border-radius: 12px; border: 1.5px solid var(--line, rgba(0,0,0,.12)); background: var(--soft); color: var(--ink); font: 700 .84rem/1.2 var(--font-b, system-ui); cursor: pointer; }
.cons-ab.on { background: var(--ink); color: var(--page, #fff); border-color: var(--ink); }
.cons-ai { display: block; margin: 8px 0 4px; font-size: .82rem; color: var(--ink-2); line-height: 1.4; }
.cons-ai:empty { display: none; }
.cons-ab + .cons-ab { }
.cons-age + .cons-ai + .cons-ck { margin-top: 10px; }
/* 30 ottobre 2026: «Suggeriscimi posti», foto più grandi, ⤢ a tutto schermo e «Da ordinare» secondo l'AI */
.sg-ch.ph { height: clamp(230px, 36vh, 330px); }
@media (max-height: 720px) { .sg-ch.ph { height: 190px; } }
.sg-phfs { position: absolute; z-index: 3; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; font: 800 1.1rem/1 system-ui; color: #fff; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.sg-dish { margin: 8px 0 4px; }
.sg-dish small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3, var(--ink-2)); margin-bottom: 5px; }
.sg-dr { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-dc { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 11px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--c, var(--tint)) 16%, var(--card, #fff)); border: 1px solid color-mix(in srgb, var(--c, var(--tint)) 30%, transparent); }
.sg-maps { font-weight: 800; }
.sg-view { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.94); display: grid; place-items: center; touch-action: pan-y; animation: sg-vin .25s var(--mo-ease, ease); }
@keyframes sg-vin { from { opacity: 0; } to { opacity: 1; } }
.sg-vimg { max-width: 100vw; max-height: calc(100dvh - 120px); object-fit: contain; -webkit-user-drag: none; user-select: none; }
.sg-vcap { position: absolute; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); text-align: center; color: rgba(255,255,255,.85); font-size: .85rem; }
.sg-vx { position: absolute; right: 14px; top: calc(12px + env(safe-area-inset-top, 0px)); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 1.6rem; cursor: pointer; }
.sg-va { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 1.7rem; cursor: pointer; }
.sg-va.l { left: 10px; } .sg-va.r { right: 10px; }
@media (prefers-reduced-motion: reduce) { .sg-view { animation: none !important; } }
/* ===== 30 ottobre 2026: serate con il codice, chat, segnala, blocca, pannello amministratore ===== */
.sr-codein { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 8px 8px 8px 12px; border-radius: 16px; background: var(--soft); border: 1.5px dashed color-mix(in srgb, var(--tint) 40%, transparent); }
.sr-codein input { flex: 1; min-width: 0; height: 38px; border: 0; background: transparent; font: 800 1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); outline: none; }
.sr-codein input::placeholder { font: 600 .9rem/1 var(--font-b, system-ui); letter-spacing: 0; text-transform: none; color: var(--ink-3, var(--ink-2)); }
.sr-ck { font-size: 1.2rem; }
.sr-codeinfo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--tint) 10%, var(--card, #fff)); font-size: .88rem; }
.sr-codeinfo span { font-size: 1.3rem; }
.sr-big { display: block; width: 100%; margin: 6px 0 14px; padding: 18px 10px; border-radius: 20px; border: 2px dashed color-mix(in srgb, var(--tint) 55%, transparent); background: color-mix(in srgb, var(--tint) 8%, var(--card, #fff)); font: 900 clamp(1.7rem, 9vw, 2.4rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; color: var(--ink); cursor: copy; }
.sr-cacts { display: grid; gap: 8px; margin-bottom: 10px; } .sr-cacts .btn { justify-content: center; min-height: 44px; }
.sr-jc { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--soft); margin: 4px 0 10px; }
.sr-jem { font-size: 2rem; } .sr-jc b { display: block; font-size: 1.05rem; } .sr-jc small { color: var(--ink-2); }
.sr-join .btn.solid { width: 100%; justify-content: center; min-height: 46px; margin-top: 10px; }
.sr-cbox { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; margin: 0 0 12px; border-radius: 16px; background: color-mix(in srgb, var(--tint) 9%, var(--card, #fff)); border: 1.5px dashed color-mix(in srgb, var(--tint) 45%, transparent); }
.sr-cbox > div { flex: 1; min-width: 0; } .sr-cbox b { display: block; font: 900 1.05rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; } .sr-cbox small { color: var(--ink-2); font-size: .78rem; }
.sr-cbox.off { opacity: .7; border-style: solid; }
.sr-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; margin: 0 0 8px; border-radius: 999px; background: var(--fill-3, var(--soft)); }
.sr-tab { position: relative; min-height: 38px; border: 0; border-radius: 999px; background: transparent; font: 800 .88rem/1 var(--font-b, system-ui); color: var(--ink-2); cursor: pointer; }
.sr-tab.on { background: var(--card, #fff); color: var(--ink); box-shadow: 0 2px 8px -3px rgba(0,0,0,.25); }
.sr-tab .ppl-n { margin-left: 6px; }
.sr-chat { display: flex; flex-direction: column; gap: 8px; }
.sr-msgs { display: flex; flex-direction: column; gap: 6px; min-height: 200px; max-height: min(52vh, 460px); overflow-y: auto; padding: 4px 2px; -webkit-overflow-scrolling: touch; }
.sr-mday { align-self: center; margin: 6px 0 2px; padding: 3px 10px; border-radius: 999px; background: var(--soft); font-size: .72rem; font-weight: 700; color: var(--ink-2); }
.sr-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 88%; }
.sr-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.sr-bub { padding: 7px 11px 6px; border-radius: 16px 16px 16px 6px; background: var(--soft); font-size: .92rem; line-height: 1.35; word-break: break-word; }
.sr-msg.me .sr-bub { border-radius: 16px 16px 6px 16px; background: linear-gradient(120deg, #8a5cff, #ff5a7a); color: #fff; }
.sr-bub b { display: block; font-size: .72rem; color: var(--tint); margin-bottom: 1px; }
.sr-bub small { display: block; font-size: .66rem; opacity: .65; text-align: right; margin-top: 2px; }
.sr-msg.q .sr-bub { font-weight: 700; }
.sr-mx { white-space: pre-wrap; }
.sr-mm { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-3, var(--ink-2)); cursor: pointer; font-weight: 900; opacity: .6; }
.sr-mm:hover, .sr-mm:focus-visible { opacity: 1; background: var(--soft); }
.sr-quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .sr-quick::-webkit-scrollbar { display: none; }
.sr-quick .chip { flex: none; }
.sr-send { display: flex; gap: 8px; align-items: flex-end; }
.sr-send textarea { flex: 1; min-height: 42px; max-height: 110px; resize: none; padding: 10px 12px; border-radius: 16px; border: 1.5px solid var(--line, rgba(0,0,0,.12)); background: var(--card, #fff); color: var(--ink); font: 500 .95rem/1.35 var(--font-b, system-ui); }
.sr-send .btn { min-height: 42px; }
.sr-count { margin: 10px 0 0; padding: 10px 14px; border-radius: 14px; text-align: center; font-weight: 800; background: color-mix(in srgb, #ffb547 18%, var(--card, #fff)); }
.sr-pren { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 4px; padding: 10px 12px 10px 14px; border-radius: 14px; background: var(--soft); font-weight: 700; font-size: .9rem; }
.sr-mrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; margin: 0 0 8px; border-radius: 14px; border: 0; background: var(--soft); text-align: left; color: var(--ink); cursor: pointer; }
.sr-mrow b { display: block; } .sr-mrow small { color: var(--ink-2); } .sr-mi { font-size: 1.3rem; }
button.sr-pc { border: 0; background: transparent; cursor: pointer; padding: 0; color: inherit; font: inherit; }
/* segnala */
.sgn-box { max-width: 460px; background: var(--page, var(--card)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.sgn-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .sgn-h b { display: block; font-size: 1.1rem; } .sgn-h small { color: var(--ink-2); }
.sgn-sub { display: block; margin: 6px 0 10px; color: var(--ink-2); font-size: .82rem; }
.sgn-l { display: grid; gap: 6px; }
.sgn-m { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid transparent; background: var(--soft); color: var(--ink); text-align: left; font: 600 .9rem/1.25 var(--font-b, system-ui); cursor: pointer; }
.sgn-m.on { border-color: #e5352b; background: color-mix(in srgb, #e5352b 10%, var(--card, #fff)); }
.sgn-i { font-size: 1.15rem; width: 26px; text-align: center; }
.sgn-t { width: 100%; margin: 10px 0 6px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line, rgba(0,0,0,.12)); background: var(--card, #fff); color: var(--ink); font: 500 .92rem/1.4 var(--font-b, system-ui); resize: vertical; }
.sgn-b { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; margin: 4px 0 4px; } .sgn-b input { width: 18px; height: 18px; flex: none; margin-top: 1px; }
/* profilo: bloccato / privato e «⋯» */
.pf-blk { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--soft); font-weight: 700; font-size: .85rem; color: var(--ink-2); }
.pf-more { min-width: 40px; justify-content: center; font-weight: 900; }
/* pannello: cerca, filtri */
.adm-ub { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.adm-q { flex: 1 1 200px; min-width: 0; height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line, rgba(0,0,0,.12)); background: var(--card, #fff); color: var(--ink); font: 500 .92rem/1 var(--font-b, system-ui); }
.adm-so { height: 40px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--line, rgba(0,0,0,.12)); background: var(--card, #fff); color: var(--ink); font: 600 .85rem/1 var(--font-b, system-ui); }
.adm-fc { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
@media (max-width: 980px) { .adm-fc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .adm-fc::-webkit-scrollbar { display: none; } .adm-fc .chip { flex: none; } }
.fb-x { white-space: pre-line; }
html body .udlg-box.sgn-box { background: var(--page, var(--card)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; max-height: calc(100dvh - 32px); overflow-y: auto; }
.adm-chip { flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line, rgba(0,0,0,.12)); background: var(--card, #fff); color: var(--ink); font: 700 .82rem/1 var(--font-b, system-ui); cursor: pointer; white-space: nowrap; }
.adm-chip.on { background: var(--ink); color: var(--page, #fff); border-color: var(--ink); }
@media (max-width: 980px) { .adm-fc .adm-chip { flex: none; } }
.adm-fc, .adm-ub { flex-shrink: 0; } /* nel pannello (colonna flessibile che scorre) le righe scorrevoli si schiacciavano a zero */
/* 31 ottobre 2026: dalla quinta scheda dei suggerimenti le foto si caricano solo toccando (si pagano a una a una) */
.sg-phtap { position: relative; z-index: 2; align-self: center; margin: 0 auto; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(0,0,0,.45); color: #fff; font: 800 .88rem/1 var(--font-b, system-ui); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.feed-l { margin: 10px 2px 4px; font-size: .76rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); } /* 31 ottobre 2026: titoletti in ✨ Novità */
.sg-ch .sg-phtap { position: absolute; top: 12px; right: 12px; margin: 0; width: auto; height: auto; aspect-ratio: auto; white-space: nowrap; flex: none; border-radius: 999px !important; padding: 0 14px; min-height: 36px; font-size: .82rem; }
/* ===== 30 ottobre 2026: marchio PinTrotter sempre visibile ===== */
/* computer: lo slogan al posto di «creato da…», sempre visibile accanto al nome */
@media (min-width: 981px) {
  html body .logo .bb-slogan { display: block !important; font-size: .68rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-3, var(--ink-2)); white-space: nowrap; margin-top: 2px; }
}
/* telefono: striscia in alto con logo e slogan; barra delle sezioni, «i» e sfumatura scendono di --bbh */
.bb-bar { display: none; }
@media (max-width: 980px) {
  :root { --bbh: 30px; }
  body.mob .bb-bar { display: flex; align-items: center; justify-content: center; gap: 7px; position: fixed; z-index: 73; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 6px); height: 26px; pointer-events: none; color: var(--ink); }
  body.mob .bb-bar img { width: 20px; height: 24px; flex: none; filter: drop-shadow(0 2px 4px rgba(75,43,214,.25)); }
  body.mob .bb-bar b { font: 800 .98rem/1 var(--font-b, system-ui); letter-spacing: -.01em; background: linear-gradient(90deg, #4b2bd6, #c0459a); -webkit-background-clip: text; background-clip: text; color: transparent; }
  body.mob .bb-bar span { font: 600 .72rem/1 var(--font-b, system-ui); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  body.mob .bb-bar span::before { content: "·"; margin-right: 7px; color: var(--ink-3, var(--ink-2)); }
  html body.mob nav.sections.tabbar { top: calc(env(safe-area-inset-top, 0px) + 6px + var(--bbh)) !important; }
  html body.mob .info-ph { top: calc(env(safe-area-inset-top, 0px) + 12px + var(--bbh)) !important; }
  html body.mob .sbfade { height: calc(env(safe-area-inset-top, 0px) + 78px + var(--bbh)) !important; }
  body.ld-on .bb-bar, body:has(.udlg.prof:not(.lg-out)) .bb-bar, body.st-open .bb-bar { display: none !important; }
}
html.dark body.mob .bb-bar b { background: linear-gradient(90deg, #a98bff, #ff8fb0); -webkit-background-clip: text; background-clip: text; }
/* 31 ottobre 2026, viaggi come «I tuoi luoghi»: l'elenco scorre sempre col pollice (anche a foglio a metà);
   il foglio si trascina solo dalle zone in alto (barretta, titolo «I tuoi viaggi», intestazione e copertina del viaggio) */
body.mob #vmain:not([data-snap="full"]), body.mob #vside:not([data-snap="full"]) { touch-action: pan-y; }
body.mob .vs-head, body.mob .vh-top, body.mob .vcover, body.mob .vgrab { touch-action: pan-x; }

/* 1 novembre 2026, assistente di viaggio: la chat ha una zona di scorrimento propria (il campo per scrivere resta fermo in fondo,
   anche dopo tante domande), titoletti e corsivi dell'AI puliti, «–» riduce l'assistente a una bolla, ＋ aggiunge a un viaggio */
.vp-body.vp-chatb { overflow: hidden; padding-bottom: 0; }
.vp-chatb .vp-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 10px 16px 14px; }
.vp-chatb .vp-msgs > * { flex: none; }
.vp-chatb .vp-in { position: relative; bottom: auto; flex: none; margin: 0 -16px; padding: 10px 14px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vp-chatb .vp-in input { flex: 1 1 200px; min-width: 0; }
.vp-newc { flex: 1 0 100%; text-align: center; font-size: .78rem; font-weight: 700; color: var(--ink-3); padding: 2px 0 0; }
/* «.msg.ai» prendeva anche la regola del vecchio pannello «.ai» (altezza massima 62%): le risposte lunghe uscivano dal riquadro
   e finivano sopra le domande successive (era la «grafica che si rompe» con più domande) */
.msg.ai { max-height: none; }
.vp-msgs .msg.ai { overflow-wrap: anywhere; }
.vp-msgs .msg p.vp-h { margin: 10px 0 4px; font-family: var(--font-d); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.vp-msgs .msg p.vp-h:first-child { margin-top: 0; }
.vp-msgs .msg a { color: #6a45e8; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.vp-hook { white-space: nowrap; min-height: 24px; }
.vp-hook:disabled { opacity: 1; }
.vp-pick { margin: 2px 0 10px; padding: 10px 12px; border-radius: 16px; background: rgba(123,77,240,.08); border: 1px solid rgba(123,77,240,.18); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.vp-pk-t { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.vp-pk-r { display: flex; flex-wrap: wrap; gap: 6px; }
.vpanel .chip.vp-pk { min-height: 34px; }
.vpanel .chip.vp-pk.ok { background: #e3f5ea !important; color: #1f7a45; border-color: transparent; }
.vpanel .chip.vp-pknew { border-style: dashed; color: #6a45e8; }
.vp-head .vp-minb { font-size: 1.25rem; line-height: 1; margin-left: auto; }
.vp-head .vp-minb + .x { margin-left: 0; }
.vp-bub { position: fixed; z-index: 95; right: 24px; bottom: 26px; display: inline-flex; align-items: center; height: 46px; padding: 0 5px 0 0; border-radius: 999px;
  background: linear-gradient(120deg, #7b4df0, #ff5a7a); color: #fff; box-shadow: 0 14px 30px -10px rgba(123,77,240,.75), inset 0 1px 0 rgba(255,255,255,.35); animation: vpBubIn .3s cubic-bezier(.2,.85,.2,1); }
.vp-bub[hidden] { display: none; }
.vp-bo { display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 10px 0 14px; border: 0; background: none; color: inherit; font: 700 .9rem var(--font); cursor: pointer; white-space: nowrap; border-radius: 999px 0 0 999px; }
.vp-bx { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; font: 600 1.2rem/1 var(--font); cursor: pointer; display: grid; place-items: center; }
.vp-bx:hover { background: rgba(255,255,255,.34); }
.vp-bub .gico { width: 22px; height: 22px; }
.vp-bub .ab-dot { opacity: .35; animation: none; }
.vp-bub.vp-bbusy .ab-dot, .vp-bub.vp-bnew .ab-dot { opacity: 1; animation: abPulse 1.6s infinite; }
.vp-bo:active { transform: scale(.97); }
@keyframes vpBubIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
/* la bolla segue l'utente in tutta l'app; con l'impostazione «Solo nei Viaggi» si nasconde nelle altre sezioni */
body.vpb-viaggi:not([data-section="viaggi"]) .vp-bub { display: none !important; }
body.vp-on .vp-bub { display: none !important; }
/* tastiera aperta: la finestra occupa lo spazio visibile sopra la tastiera */
.vpanel.vp-kb { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100dvh); padding: 6px; align-items: stretch; }
.vpanel.vp-kb .vp-box { height: 100%; max-height: none; border-radius: 22px; }
@media (max-width: 980px) {
  .vp-bub { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); height: 44px; }
  .vp-bo { font-size: .86rem; }
  .vp-chatb .vp-in { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .vpanel.vp-kb .vp-in { padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .vp-bub, .vp-bub .ab-dot { animation: none !important; } }

/* 1 novembre 2026, VIAGGI CON PIÙ TAPPE (multidestinazione): fila delle tappe sotto la testata, finestra «Tappe del viaggio»,
   separatori delle tappe nell'itinerario, segnaposto numerati delle città sulla mappa */
.vbadge.mtb { background: linear-gradient(120deg, rgba(123,77,240,.16), rgba(255,90,122,.14)); color: #5b3fd0; }
.vbadge.mt { background: rgba(123,77,240,.1); color: #5b3fd0; }
.vt-b .vt-mt { display: block; font-size: .7rem; font-weight: 700; color: #5b3fd0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-bar { margin: 0 0 12px; padding: 12px 12px 10px; border-radius: 22px; background: linear-gradient(135deg, rgba(123,77,240,.09), rgba(255,90,122,.07)); border: 1px solid rgba(123,77,240,.16); }
.mt-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mt-ht { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mt-ht b { font-family: var(--font-d); font-size: .98rem; }
.mt-ht small { font-size: .76rem; color: var(--ink-2); font-weight: 600; }
.mt-row { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: 0 -2px; scroll-snap-type: x proximity; }
.mt-row::-webkit-scrollbar { display: none; }
.mt-all, .mt-t { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 58px; padding: 7px 12px; border-radius: 16px; border: 1.5px solid rgba(21,23,28,.08); background: var(--card, #fff); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.mt-all { align-items: center; padding: 7px 10px; }
.mt-all b { font-size: .84rem; } .mt-all small { font-size: .68rem; color: var(--ink-3); }
.mt-t { max-width: 180px; }
.mt-t:active, .mt-all:active { transform: scale(.97); }
.mt-tt { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.mt-tt b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-t small { font-size: .7rem; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.mt-t .mt-k { color: var(--ink-3); }
.mt-t.gita { border-style: dashed; }
.mt-n { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: hsl(var(--h, 260) 70% 52%); color: #fff; font-size: .74rem; font-weight: 800; }
.mt-fl { font-size: .9rem; }
.mt-all.on, .mt-t.on { background: #6a45e8; border-color: #6a45e8; color: #fff; }
.mt-t.on small, .mt-t.on .mt-k, .mt-all.on small { color: rgba(255,255,255,.85); }
.mt-t.on .mt-n { background: #fff; color: #6a45e8; }
.mt-go { flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 34px; padding: 2px; color: #6a45e8; text-decoration: none; border-radius: 10px; }
.mt-go .mt-ar { font-size: 1.1rem; font-weight: 800; line-height: 1; }
.mt-go small { font-size: .62rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
a.mt-go:hover { background: rgba(123,77,240,.1); }
.mt-warn { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: #7a5200; background: #fff4dc; border-radius: 14px; padding: 8px 10px; }
.mt-on { margin-top: 6px; font-size: .74rem; font-weight: 600; color: #5b3fd0; }
.vh-acts .mt-more { color: #5b3fd0; }
/* itinerario: separatore all'inizio di ogni tappa */
.mt-dsep { margin: 16px 0 8px; padding: 10px 12px; border-radius: 18px; background: linear-gradient(120deg, hsl(var(--h, 260) 80% 96%), rgba(255,255,255,0)); border-left: 4px solid hsl(var(--h, 260) 70% 52%); display: flex; flex-direction: column; gap: 6px; }
.mt-dsep.gita { border-left-style: dashed; }
.mt-dh { display: flex; align-items: center; gap: 10px; }
.mt-dh .mt-n { width: 28px; height: 28px; font-size: .86rem; }
.mt-dt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mt-dt b { font-family: var(--font-d); font-size: 1rem; }
.mt-dt small { font-size: .76rem; color: var(--ink-2); font-weight: 600; }
.mt-tr, .mt-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.mt-hint small { flex: 1 1 100%; font-weight: 500; color: var(--ink-3); }
.mt-hint b { color: var(--ink); }
.vd-tp { display: inline-block; margin-left: 6px; font-size: .7rem; font-weight: 700; color: #5b3fd0; }
/* finestra delle tappe */
.mt-dlg { z-index: 9400; }
.udlg-box.mt-ed { width: min(560px, 100%); max-height: min(88dvh, 760px); overflow-y: auto; overscroll-behavior: contain; text-align: left; gap: 12px; padding: 18px 18px 14px; }
.mt-eh { display: flex; align-items: center; gap: 10px; }
.mt-eh h3 { flex: 1; font-size: 1.15rem; }
.mt-ei { font-size: .84rem !important; }
.mt-list { display: flex; flex-direction: column; gap: 8px; }
.mt-empty { padding: 14px; border-radius: 14px; background: var(--fill-3, rgba(0,0,0,.04)); font-size: .86rem; color: var(--ink-2); text-align: center; }
.mt-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n t s" "n a a"; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 16px; background: var(--card, #fff); border: 1.5px solid rgba(21,23,28,.08); }
.mt-r.gita { border-style: dashed; }
.mt-r > .mt-n { grid-area: n; align-self: start; margin-top: 2px; }
.mt-rt { grid-area: t; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mt-rt b { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-rt small { font-size: .74rem; color: var(--ink-3); }
.mt-st { grid-area: s; display: flex; align-items: center; gap: 4px; }
.mt-gg { min-width: 62px; text-align: center; font-size: .84rem; font-weight: 700; }
.mt-sb, .mt-ib { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(21,23,28,.12); background: var(--surface, #fff); color: var(--ink); font: 700 1rem var(--font); cursor: pointer; display: grid; place-items: center; }
.mt-sb:disabled, .mt-ib:disabled { opacity: .35; cursor: default; }
.mt-ra { grid-area: a; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.mt-ib.del.arm { width: auto; padding: 0 10px; border-radius: 999px; background: #e5484d; border-color: #e5484d; color: #fff; font-size: .78rem; }
.mt-gita { height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px dashed rgba(123,77,240,.4); background: none; color: #5b3fd0; font: 700 .8rem var(--font); cursor: pointer; margin-right: auto; }
.mt-gita.on { background: #6a45e8; border: 1.5px solid #6a45e8; color: #fff; }
.mt-add { padding: 12px; border-radius: 16px; background: rgba(123,77,240,.07); display: flex; flex-direction: column; gap: 8px; }
.mt-al { font-weight: 800; font-size: .9rem; color: #5b3fd0; }
.mt-ast { font-size: .76rem; color: var(--ink-3); min-height: 1em; }
.mt-man { display: flex; gap: 6px; }
.mt-man input { flex: 1; min-width: 0; height: 38px; border: 1px solid rgba(21,23,28,.14); border-radius: 12px; padding: 0 12px; font: 15px var(--font); background: var(--surface, #fff); color: var(--ink); }
.mt-sum { font-size: .86rem; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mt-sum b { color: var(--ink); }
.mt-fit { flex: 1 1 100%; display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; font-weight: 600; color: #7a5200; }
.mt-ft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: sticky; bottom: -14px; margin: 0 -18px -14px; padding: 10px 18px 14px; background: var(--surface, #fff); border-top: 1px solid rgba(21,23,28,.06); }
.mt-ft .grow { flex: 1; }
.mt-one { color: #b4232a; }
/* assistente: scelta della tappa e riepilogo */
.mt-pk { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-pl { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.mt-plr { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.mt-plr small { color: var(--ink-3); font-weight: 600; }
/* mappa: segnaposto delle città */
.mt-pin { display: flex; align-items: center; gap: 6px; padding: 4px 11px 4px 4px; border-radius: 999px; background: #fff; color: #1c1530; font: 800 13px var(--font); white-space: nowrap; cursor: pointer; box-shadow: 0 6px 16px -4px rgba(40,20,90,.45), 0 0 0 2px hsl(var(--h, 260) 70% 52%); }
.mt-pin b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: hsl(var(--h, 260) 70% 52%); color: #fff; font-size: 12px; }
.mt-pin.gita { box-shadow: 0 6px 16px -4px rgba(40,20,90,.45), 0 0 0 2px hsl(var(--h, 260) 70% 52%), 0 0 0 4px #fff; }
.mt-pin.dim { opacity: .55; transform: scale(.9); }
@media (max-width: 980px) {
  .mt-t { max-width: 150px; padding: 6px 10px; min-height: 54px; }
  .mt-r { grid-template-areas: "n t t" "n s s" "n a a"; grid-template-columns: auto minmax(0, 1fr) auto; }
  .mt-st { justify-content: flex-start; }
  .udlg.mt-dlg { padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; align-items: end; }
  .udlg-box.mt-ed { width: 100%; max-height: 100%; border-radius: 24px; }
}

/* 1 novembre 2026 (sera): bolla della guida «intelligente» in tutta l'app — forma compatta, menu ⋯, suggerimenti per la schermata, impostazioni */
.vp-bt { white-space: nowrap; }
.vp-bub.vp-mini { padding: 0 4px 0 0; }
.vp-bub.vp-mini .vp-bo { padding: 0 6px 0 10px; gap: 6px; }
.vp-bub.vp-mini .gico { width: 26px; height: 26px; }
.vp-bx { font-size: 1.05rem; letter-spacing: .02em; }
.vp-menu { position: fixed; z-index: 9600; display: flex; flex-direction: column; padding: 6px; border-radius: 20px; background: var(--surface, #fff); box-shadow: 0 24px 60px -18px rgba(25,15,60,.55), 0 0 0 1px rgba(21,23,28,.06); animation: vpBubIn .2s cubic-bezier(.2,.85,.2,1); }
.vp-mi { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 14px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.vp-mi:hover, .vp-mi:focus-visible { background: rgba(123,77,240,.08); }
.vp-mic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(123,77,240,.1); color: #5b3fd0; font-size: .95rem; font-weight: 800; }
.vp-mit { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.vp-mit b { font-size: .9rem; } .vp-mit small { font-size: .74rem; color: var(--ink-3); }
.vp-head .vp-optb { font-size: 1.05rem; margin-left: auto; }
.vp-head .vp-optb + .vp-minb { margin-left: 0; }
.vp-ctxl { align-self: center; flex: none; max-width: 92%; padding: 3px 10px; border-radius: 999px; background: rgba(123,77,240,.08); color: #5b3fd0; font-size: .72rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-smart { flex: none; margin: 0 -16px; padding: 8px 16px 2px; border-top: 1px solid rgba(21,23,28,.06); }
.vp-sml { font-size: .72rem; font-weight: 700; color: var(--ink-3); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-smc { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.vp-smc::-webkit-scrollbar { display: none; }
.vp-smc .chip { flex: none; white-space: nowrap; min-height: 34px; }
.vpanel .vp-smc .chip.vp-act { background: linear-gradient(120deg, #7b4df0, #ff5a7a) !important; color: #fff; border-color: transparent; font-weight: 800; }
.vp-chatb .vp-smart + .vp-in { border-top: 0; }
.udlg.vp-bset { z-index: 9550; }
.udlg-box.vp-bsb { width: min(460px, 100%); text-align: left; gap: 12px; padding: 18px 18px 14px; }
.vp-bopts { display: flex; flex-direction: column; gap: 8px; }
.vp-bo2 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 16px; border: 2px solid rgba(21,23,28,.08); background: var(--card, #fff); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.vp-bo2 b { font-size: .92rem; } .vp-bo2 small { font-size: .76rem; color: var(--ink-3); }
.vp-bo2.on { border-color: #6a45e8; background: rgba(106,69,232,.1); }
.vp-btg { margin-top: 4px; }
.vp-bft { background: #fdfcfa; }
@media (max-width: 980px) {
  .udlg.vp-bset { padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; align-items: end; }
  .udlg-box.vp-bsb { width: 100%; max-height: 100%; overflow-y: auto; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) { .vp-menu { animation: none !important; } }
/* finestre «Tappe del viaggio» e «Bolla della guida»: fondo pieno (sopra la mappa il vetro lasciava leggere il testo sotto) */
.udlg-box.mt-ed, .udlg-box.vp-bsb { background: #fdfcfa !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.udlg.mt-dlg, .udlg.vp-bset { background: rgba(20,14,40,.32); }
/* con una finestra aperta la bolla della guida si nasconde (sul telefono le finestre stanno sotto la barra in basso) */
body:has(.udlg) .vp-bub { display: none !important; }
/* amministratore: modello che ha risposto e tempo della prima parola */
.vp-dbg { flex: none; margin-top: -4px; font-size: .68rem; font-weight: 600; color: var(--ink-3); }

/* 1 novembre 2026: dettatura vocale nella chat dei viaggi (🎤 accanto al campo; mentre ascolta diventa rosso e pulsa) */
.vp-mic { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(123,77,240,.25); background: rgba(123,77,240,.08); color: #5b3fd0; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.vp-mic:active { transform: scale(.94); }
.vp-mic.on { background: #e5484d; border-color: #e5484d; color: #fff; animation: vpMic 1.3s ease-out infinite; }
@keyframes vpMic { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.55); } 100% { box-shadow: 0 0 0 12px rgba(229,72,77,0); } }
.vp-in.vp-rec input { border-color: #e5484d !important; }
.vaibar .vb-mic { width: 38px; height: 38px; }
@media (prefers-reduced-motion: reduce) { .vp-mic.on { animation: none; } }

/* ===== 3 novembre 2026: bolla «Chiedi alla guida» in I tuoi luoghi, schermata d'inizio dell'assistente e modalità spiegate ===== */
.aibub .ab-l { pointer-events: none; }
.aibub.ab-launch .ab-dot { display: none; }
.aibub.ab-launch .gico { width: 22px; height: 22px; }
.aibub.ab-mini { width: 46px; height: 46px; padding: 0; justify-content: center; }
body:not([data-section="luoghi"]) .aibub.ab-launch, body.ovl .aibub.ab-launch, body:has(.udlg) .aibub.ab-launch, body.ld-on .aibub, body.vp-on .aibub, body:has(#card:not([hidden])) .aibub.ab-launch { display: none !important; }
@media (max-width: 980px) {
  /* telefono: a destra, sopra il foglio dei luoghi (così non copre l'elenco né la bolla dei viaggi, che sta più in basso) */
  .aibub { left: auto; right: 12px; transform: none; bottom: calc(86px + env(safe-area-inset-bottom, 0px) + var(--peek, 190px)); height: 44px; }
  .aibub.ab-mini { width: 44px; height: 44px; }
  .aiwin .ai-head strong { font-size: 1rem; }
}
/* riga della modalità sotto l'intestazione, durante la conversazione */
.aiw-st { padding: 7px 16px; font-size: .78rem; line-height: 1.35; color: var(--ink-2); background: rgba(123,77,240,.06); border-bottom: 1px solid rgba(21,23,28,.06); }
.aiw-st[hidden] { display: none; }
.aiw-st b { color: #5b3fd0; }
/* l'etichetta della modalità si legge anche sul telefono */
@media (max-width: 980px) { .aiwin .ai-head .aiweb #ai-web-l { display: inline; } }
/* schermata d'inizio */
.aiw-hi { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 4px; }
.aiw-t { font-size: 1.08rem; color: var(--ink); }
.aiw-s { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.45; }
.aiw-q { display: flex; flex-wrap: wrap; gap: 8px; }
.aiw-q .aiw-c { height: auto; min-height: 34px; padding: 7px 13px; white-space: normal; text-align: left; line-height: 1.3; cursor: pointer; }
.aiw-m { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px; border-radius: 18px; background: rgba(123,77,240,.05); border: 1px solid rgba(123,77,240,.12); }
.aiw-mh { font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #5b3fd0; }
.aiw-o { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1.5px solid rgba(21,23,28,.09); background: #fff; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; }
.aiw-o b { font-size: .92rem; }
.aiw-o small { font-size: .8rem; line-height: 1.4; color: var(--ink-2); }
.aiw-o.on { border-color: #7b4df0; background: rgba(123,77,240,.1); box-shadow: 0 0 0 1px #7b4df0 inset; }
.aiw-o.on b::after { content: " ✓"; color: #7b4df0; }
.aiw-n { margin: 0; font-size: .78rem; color: var(--ink-3, #8a8f98); line-height: 1.4; }
/* 🎤 nella riga per scrivere */
.ai-follow .aiw-mic { width: 40px; height: 40px; }
.ai-follow.vp-rec input { border-color: #e5484d !important; }
.sd-card.gs-chat { background: linear-gradient(120deg, #7b4df0, #ff5a7a); }

/* ===== 3 novembre 2026: «Gestisci il sito» — la barra delle schede non si schiaccia più, altezza fissa (niente salti cambiando scheda) ===== */
#msheet .mpanel { height: min(780px, calc(100dvh - 32px)); }
#msheet .mtabs { flex: none; margin: 0 0 14px; }
#msheet .mbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -22px; padding: 2px 22px 10px; }
#msheet .err, #msheet #m-prog { flex: none; }
#msheet .err:empty, #msheet #m-prog:empty { display: none; }
#msheet .p-foot { margin-top: 10px; }
#msheet .mpage > .hint:first-child { margin-top: 0; }
.mg-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; margin-bottom: 14px; border-radius: 18px; background: var(--fill-3, rgba(20,20,40,.05)); }
.mg-card h3 { margin: 0; font-size: 1rem; }
.mg-card .fld { margin: 0; }
.mg-sub { font-size: .82rem; line-height: 1.4; color: var(--ink-2); }
.mg-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .mg-opts { grid-template-columns: 1fr; } }
.m-cq { width: 100%; margin: 0 0 10px; padding: 10px 14px; border-radius: 999px; border: 1.5px solid transparent; background: var(--fill-3, rgba(20,20,40,.05)); font-size: 16px; color: var(--ink); }
#m-citta .mrow[hidden] { display: none; }
html.dark .m-b { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); color: #fff; }
html.dark .aiw-o { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
html.dark .aiw-o.on { background: rgba(123,77,240,.28); border-color: #9b7bff; box-shadow: 0 0 0 1px #9b7bff inset; }
html.dark .aiw-o small { color: rgba(255,255,255,.72); }
html.dark .aiw-st { background: rgba(123,77,240,.16); color: rgba(255,255,255,.8); }
html.dark .aiw-st b, html.dark .aiw-mh { color: #c4b2ff; }
html.dark .aiw-m { background: rgba(123,77,240,.1); border-color: rgba(155,123,255,.25); }

/* ===== 3 novembre 2026: Pannello › 📈 Mercato e ⚙️ Sito, striscia «avviso per tutti» ===== */
.mk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .mk-grid { grid-template-columns: 1fr; } }
.mk-h { margin-top: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.mk-tip { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.mk-tip b { color: var(--ink); }
.mk-hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 90px; padding-bottom: 16px; position: relative; }
.mk-hc { position: relative; height: 100%; display: flex; align-items: flex-end; }
.mk-hb { width: 100%; min-height: 2px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #7b4df0, #ff5a7a); }
.mk-hx { position: absolute; bottom: -16px; left: 0; font-size: .66rem; color: var(--ink-3); }
.mk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-lb { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--ink-2); }
.mk-ta { width: 100%; min-height: 58px; resize: vertical; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 14px; }
.mk-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.mk-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--fill-3, rgba(20,20,40,.05)); color: var(--ink); text-decoration: none; }
.mk-link:hover { background: rgba(123,77,240,.1); }
.mk-li { font-size: 1.3rem; }
.mk-lt { display: flex; flex-direction: column; min-width: 0; }
.mk-lt small { color: var(--ink-3); font-size: .76rem; }
.av-bar { position: fixed; z-index: 93; top: calc(var(--hdrb, 80px) + 8px); left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 24px)); display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-radius: 18px;
  background: linear-gradient(120deg, #1f1b4d, #4b2fa8); color: #fff; font-size: .9rem; line-height: 1.35; box-shadow: 0 16px 34px -18px rgba(40,30,80,.7); animation: aiIn .28s ease; }
.av-bar.av-nuovo { background: linear-gradient(120deg, #7b4df0, #ff5a7a); }
.av-bar.av-warn { background: linear-gradient(120deg, #8a4b00, #e5484d); }
.av-t { flex: 1; min-width: 0; }
.av-x { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 1.1rem; cursor: pointer; }
body.ovl .av-bar, body.ld-on .av-bar { display: none; }
@media (max-width: 980px) { .av-bar { left: 8px; right: 8px; width: auto; transform: none; animation: none; } }
@media (prefers-reduced-motion: reduce) { .av-bar { animation: none; } }
.mk-per { flex-wrap: wrap; }
.adm-card .mk-ta { flex: none; height: 64px; min-height: 0; }

/* ===== 3 novembre 2026 (richiesta di Guido): sul computer «Chiedi alla guida» in alto accanto a «Zona», al posto della barra di ricerca ===== */
.z-ask, .z-find { display: none; }
@media (min-width: 981px) {
  .omni.zbar #zform { display: none; }
  .omni.zbar { flex: 0 1 auto; width: auto; }
  .z-ask { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(120deg, #7b4df0, #ff5a7a); color: #fff; font: 700 .88rem var(--font); white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(123,77,240,.8); transition: transform .15s, filter .15s; }
  .z-ask[hidden] { display: none; }
  .z-ask:hover { filter: brightness(1.06); }
  .z-ask:active { transform: scale(.97); }
  .z-ask .gico { width: 20px; height: 20px; }
  .z-ask .ab-dot { display: none; }
  .z-ask.za-back .ab-dot { display: inline-block; }
  .z-ask.on { box-shadow: 0 0 0 3px rgba(123,77,240,.25), 0 8px 20px -10px rgba(123,77,240,.8); }
  .z-find { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(21,23,28,.05); cursor: pointer; font-size: 1rem; }
  .z-find:hover { background: rgba(21,23,28,.09); }
  .aibub { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .z-ask { transition: none; } }
@media (min-width: 981px) {
  html body .omni.zbar { flex: 0 0 auto; width: auto; max-width: none; }
  #gsh .gs-t img { width: 30px; height: 30px; flex: none; }
  #gsh .gs-t { display: flex; align-items: center; gap: 10px; }
}
@media (min-width: 981px) { #gsh .gs-in input { border: 0 !important; background: none !important; box-shadow: none !important; outline: none; } }

/* ===== 3 novembre 2026: Pannello › 📁 Documenti ===== */
.dc-intro { margin-bottom: 12px; }
.dc-list { display: flex; flex-direction: column; gap: 8px; }
.dc-r { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--fill-3, rgba(20,20,40,.05)); }
.dc-ic { flex: none; font-size: 1.4rem; }
.dc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-t small { color: var(--ink-3); font-size: .78rem; line-height: 1.35; }
.dc-bs { flex: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dc-up { display: grid; grid-template-columns: 1.4fr .8fr 1.4fr auto; gap: 8px; align-items: center; margin: 4px 0 6px; }
.dc-up .adm-sub { grid-column: 1 / -1; margin: 0; }
.dc-in { min-width: 0; }
.dc-old { margin: -2px 0 4px 48px; font-size: .82rem; color: var(--ink-2); }
.dc-old summary { cursor: pointer; }
.dc-old .link { display: block; margin: 4px 0; text-align: left; }
@media (max-width: 720px) { .dc-up { grid-template-columns: 1fr; } .dc-r { flex-wrap: wrap; } .dc-bs { width: 100%; justify-content: flex-start; padding-left: 36px; } }