/* ==========================================================
   bazzApp — "Le bazze di Bologna."
   Stile: gradiente del logo (verde acqua → salvia → arancio → corallo), Plus Jakarta Sans + Inter,
   icone a linea morbida (2px), card arrotondate, dark mode di default.
   Layout: mappa a tutto schermo + barra sospesa + foglio con le schede + ventaglio "Per chi cerchi".
   ========================================================== */

/* ---------- Token ---------- */
:root {
  /* brand */
  /* colori presi dal logo bazzApp */
  --teal: #06B6B0;
  --sage: #86B384;
  --orange: #EE8F50;
  --coral: #F35A54;
  --pink: #F35A54;
  --grad: linear-gradient(135deg, #06B6B0 0%, #45B9A1 30%, #E99456 68%, #F35A54 100%);
  --grad-soft: linear-gradient(135deg, rgba(6,182,176,.16) 0%, rgba(134,179,132,.12) 40%, rgba(238,143,80,.13) 70%, rgba(243,90,84,.16) 100%);

  /* funzionali */
  --ok: #22C55E;
  --danger: #EF4444;
  --hot: #F59E0B;
  --info: #3B82F6;

  /* forme */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-pill: 999px;

  --font-head: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --nav-h: 66px;
  --panel-w: 420px;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

:root[data-theme="dark"] {
  --accent: #2CC4BD;
  --accent-ring: rgba(44, 196, 189, .2);
  color-scheme: dark;
  --bg: #0E0F10;
  --card: #1B1D1F;
  --card-2: #24272A;
  --text: #FFFFFF;
  --text-2: #B3B8BC;
  --border: rgba(255, 255, 255, .08);
  --shadow: 0 6px 22px rgba(0, 0, 0, .35);
  --scrim: rgba(6, 7, 8, .6);
}
:root[data-theme="light"] {
  --accent: #08827D;
  --accent-ring: rgba(8, 130, 125, .16);
  color-scheme: light;
  --bg: #F6F1E7;
  --card: #FFFFFF;
  --card-2: #EFE9DD;
  --text: #1D1D1F;
  --text-2: #6E6A63;
  --border: #E6DFD1;
  --shadow: 0 6px 20px rgba(60, 45, 20, .10);
  --scrim: rgba(32, 32, 36, .35);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; color: var(--text); }
h1, h2, h3, h4 { font-family: var(--font-head); }
[hidden] { display: none !important; }

.ico {
  width: 22px; height: 22px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-sm { width: 16px; height: 16px; }

/* ---------- Splash ---------- */
.splash {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background:
    radial-gradient(90% 45% at 15% -5%, rgba(6,182,176,.30) 0%, rgba(6,182,176,0) 70%),
    radial-gradient(110% 55% at 85% 108%, rgba(243,90,84,.32) 0%, rgba(238,143,80,.10) 45%, rgba(243,90,84,0) 72%),
    #0B0B0C;
  color: #fff;
  transition: opacity .5s ease, visibility .5s ease;
}
.splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-logo { height: 120px; width: auto; filter: drop-shadow(0 10px 28px rgba(0,0,0,.35)); animation: splashPop .7s cubic-bezier(.2,.9,.3,1.2) both; }
.splash-title { margin-top: 18px; line-height: 0; color: #fff; }
.splash-title .wordmark { height: 46px; width: auto; display: block; }
.wordmark { fill: currentColor; stroke: none; overflow: visible; }
.splash-tag { font-size: .95rem; opacity: .85; }
.splash-bar { position: absolute; bottom: calc(48px + var(--safe-b)); width: 120px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.splash-bar span { display: block; height: 100%; width: 100%; background: #fff; border-radius: 4px; transform-origin: left; animation: splashBar 1.2s ease-out both; }
@keyframes splashPop { from { opacity: 0; transform: scale(.7) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes splashBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* blob con icona */
.cat-blob { --ink: #fff; position: relative; display: inline-block; width: 30px; height: 30px; flex-shrink: 0; color: var(--ink); }
.cat-blob::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(150deg, var(--c1, #999), var(--c2, #555));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M60 3C86 8 99 32 92 58C86 84 64 99 38 93C12 87 0 62 9 37C17 13 38 -2 60 3Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M60 3C86 8 99 32 92 58C86 84 64 99 38 93C12 87 0 62 9 37C17 13 38 -2 60 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cat-blob svg { position: absolute; left: 50%; top: 50%; width: 56%; height: 56%; transform: translate(-50%, -50%); color: inherit; fill: currentColor; }
.all-dot {
  width: 27px; height: 27px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--grad); color: #fff;
}
.all-dot .ico { width: 15px; height: 15px; }
.all-dot.neutral { background: var(--card-2); color: var(--text-2); }

/* ---------- Mappa a tutto schermo ---------- */
.app {
  position: fixed; inset: 0; overflow: hidden; overflow: clip; contain: paint;
  background: var(--bg);
}
#map { position: absolute; inset: 0; z-index: 1; background: var(--card-2); }

.map-empty {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 22;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 22px 26px; border-radius: var(--r-lg); box-shadow: var(--shadow);
  text-align: center; max-width: 270px;
}
.map-empty .emoji { font-size: 2rem; display: block; margin-bottom: 8px; }
.map-empty h4 { font-size: .98rem; margin-bottom: 4px; }
.map-empty p { font-size: .84rem; color: var(--text-2); line-height: 1.45; }
.map-empty button {
  margin-top: 14px; background: var(--grad); color: #fff; border: none;
  padding: 0 20px; height: 40px; border-radius: var(--r-pill); font-weight: 700; font-size: .86rem;
}

/* ---------- Barra sospesa: ricerca + tipi ---------- */
.float-top { position: absolute; top: calc(10px + var(--safe-t)); left: 10px; right: 10px; z-index: 20; pointer-events: none; }
.float-top > * { pointer-events: auto; }
.glass-search {
  display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 6px 0 9px; border-radius: 27px;
  background: color-mix(in srgb, var(--card) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.gs-logo { border: 0; background: none; padding: 0; display: flex; flex-shrink: 0; }
.gs-logo img { height: 36px; width: auto; }
.gs-menu {
  position: relative; width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 50%;
  background: var(--card-2); color: var(--text); display: flex; align-items: center; justify-content: center;
}
.gs-menu .ico { width: 21px; height: 21px; }
.gs-menu:active { transform: scale(.94); }
.gs-menu.logged::after {
  content: ''; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--card-2);
}
.gs-city {
  display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 0;
  font: 800 .88rem/1 var(--font-head); color: var(--accent); white-space: nowrap; flex-shrink: 0;
}
.gs-city .ico { width: 15px; height: 15px; }
.gs-city .ico-sm { width: 12px; height: 12px; opacity: .8; }
.gs-sep { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }
.gs-input { flex: 1; min-width: 0; color: var(--text-2); display: flex; align-items: center; gap: 6px; height: 100%; }
.gs-input .ico { width: 17px; height: 17px; }
.gs-input input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 16px; height: 100%; }
.gs-input input::placeholder { color: var(--text-2); opacity: .85; }
.gs-clear { width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--card-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.gs-clear .ico { width: 16px; height: 16px; }
@media (max-width: 350px) { .gs-city #cityName { display: none; } }

.float-filters { padding: 10px 10px 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; }
.float-filters::-webkit-scrollbar { display: none; }
.filter-btn {
  --c: var(--accent);
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--card) 94%, transparent); color: var(--text);
  padding: 0 15px 0 6px; height: 40px; border-radius: var(--r-pill);
  font-size: .88rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  transition: background .18s, color .18s, border-color .18s, transform .1s;
}
.filter-btn:active { transform: scale(.96); }
.filter-btn.active { color: #fff; background: var(--c); border-color: var(--c); box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 45%, transparent); }
.filter-all { --c: #06B6B0; padding-left: 15px; border-color: var(--border); }
.filter-all.active { background: var(--grad); border-color: transparent; }
.filter-btn.active:not(.filter-all) { background: linear-gradient(135deg, var(--c1), var(--c2)); border-color: var(--c2); }
.filter-disco { border-color: color-mix(in srgb, var(--text-2) 55%, transparent); }
.filter-disco.active { border-color: #6a6a78; }
.filter-btn.active .cat-blob::before { background: #fff; }
.filter-btn.active .cat-blob { color: var(--c2); }
.filter-disco .cat-blob::before { background: linear-gradient(150deg, #4A4A55, #17171C); }

/* ---------- Tasti rapidi sulla mappa ---------- */
.fab, .fab-tonight {
  position: absolute; z-index: 25;
  bottom: calc(var(--nav-h) + var(--safe-b) + var(--sh, 190px) + 26px);
  transition: bottom .42s cubic-bezier(.3, .8, .2, 1), opacity .2s, transform .12s;
}
.fab {
  right: 12px; width: 46px; height: 46px; border-radius: 50%; background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.fab .ico { width: 22px; height: 22px; }
.fab.on { background: var(--grad); color: #fff; border-color: transparent; }
.fab-tonight {
  left: 12px; height: 40px; padding: 0 14px 0 10px; border-radius: 20px; background: var(--grad); color: #fff; border: 0;
  display: inline-flex; align-items: center; gap: 6px; font: 800 .8rem var(--font-head); box-shadow: 0 6px 18px rgba(243, 90, 84, .38);
}
.fab-tonight .ico { width: 17px; height: 17px; }
.fab-tonight.on { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 6px 18px rgba(243, 90, 84, .38); }
.fab:active, .fab-tonight:active { transform: scale(.94); }
.app.sheet-open .fab, .app.sheet-open .fab-tonight { opacity: 0; pointer-events: none; }

/* ---------- Ventaglio "Per chi cerchi?" ---------- */
.side { position: absolute; top: var(--sy, 40%); transform: translateY(-50%); z-index: 26; width: 58px; height: 58px; pointer-events: none; }
.side.left { left: -27px; }
.side.right { right: -27px; }
.side.empty { display: none; }
.app.sheet-open .side { opacity: 0; pointer-events: none; transition: opacity .2s; }
.app.sheet-open .side * { pointer-events: none !important; }

.fan-main {
  position: absolute; left: 0; top: 0; width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid var(--c, #06B6B0); cursor: pointer; pointer-events: auto;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 9px 0 0;
  background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #06B6B0) 28%, transparent), 0 8px 22px rgba(0, 0, 0, .45);
  transition: transform .5s var(--ease-spring); z-index: 3;
}
.side.right .fan-main { justify-content: flex-start; padding: 0 0 0 9px; }
.fan-main .cat-blob, .fan-main .all-dot { width: 34px; height: 34px; }
.fan-main .all-dot .ico { width: 18px; height: 18px; }
.fan-main .fm-cur { display: flex; transition: transform .45s var(--ease-spring), opacity .2s; }
.fan-main .fm-x { position: absolute; display: flex; opacity: 0; transform: rotate(-90deg) scale(.4); transition: transform .45s var(--ease-spring), opacity .2s; }
.side.left .fan-main .fm-x { right: 17px; }
.side.right .fan-main .fm-x { left: 17px; }
.fan-main .fm-x .ico { width: 24px; height: 24px; }
.side.left.open .fan-main { transform: translateX(36px); }
.side.right.open .fan-main { transform: translateX(-36px); }
.side.open .fan-main .fm-cur { opacity: 0; transform: scale(.4); }
.side.open .fan-main .fm-x { opacity: 1; transform: none; }
.fan-main::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--c, #06B6B0) 60%, transparent);
  opacity: 0; animation: ring 3.2s ease-out infinite; pointer-events: none;
}
.side.open .fan-main::after { animation: none; }
@keyframes ring { 0% { transform: scale(.85); opacity: .9; } 60%, 100% { transform: scale(1.35); opacity: 0; } }

.sb {
  position: absolute; top: 4px; width: 50px; height: 50px; border-radius: 50%; padding: 0;
  border: 2px solid color-mix(in srgb, var(--text-2) 30%, transparent);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  transform: translate(0, 0) scale(.2); opacity: 0; pointer-events: none;
  transition: transform .6s var(--ease-spring) calc(var(--i, 0) * 55ms), opacity .2s ease calc(var(--i, 0) * 55ms), border-color .25s, box-shadow .25s;
}
.side.left .sb { left: 41px; }
.side.right .sb { right: 41px; }
.side.open .sb { transform: translate(calc(var(--dx) * var(--fs, 1)), calc(var(--dy) * var(--fs, 1))) scale(1); opacity: 1; pointer-events: auto; }
.app.fan-open .fab, .app.fan-open .fab-tonight { opacity: 0; pointer-events: none; }
.sb .cat-blob, .sb .all-dot { width: 32px; height: 32px; }
.sb .all-dot .ico { width: 17px; height: 17px; }
.sb.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), 0 6px 18px rgba(0, 0, 0, .4); }
.sb.bump { animation: bump .5s var(--ease-spring); }
@keyframes bump { 0% { scale: .8; } 100% { scale: 1; } }
.sb-label {
  position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  font: 800 .68rem var(--font-head); color: #fff; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .9);
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
:root[data-theme="light"] .sb-label { color: #1b1620; text-shadow: 0 1px 4px rgba(255, 255, 255, .95), 0 0 8px rgba(255, 255, 255, .95); }
.side.open .sb-label { opacity: 1; transition-delay: .3s; }

/* ---------- Foglio con le schede ---------- */
.bsheet {
  position: absolute; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); height: var(--sh, 190px); z-index: 30;
  background: var(--bg); border-radius: 26px 26px 0 0; padding: 0 14px;
  box-shadow: 0 -10px 34px rgba(0, 0, 0, .5); border-top: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: height .42s cubic-bezier(.3, .8, .2, 1);
}
.bsheet.dragging { transition: none; }
.bs-grip { flex: 0 0 auto; padding: 8px 0 6px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.sheet-handle { width: 42px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text-2) 45%, transparent); margin: 0 auto 9px; }
.bs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 4px; }
.bs-head h2 { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-head span { font-size: .78rem; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.bs-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0 16px; touch-action: pan-y; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bs-list::-webkit-scrollbar { display: none; }
.bs-empty { padding: 26px 10px; text-align: center; color: var(--text-2); }
.bs-empty .emoji { font-size: 2rem; display: block; margin-bottom: 8px; }
.bs-empty h4 { font-size: 1rem; color: var(--text); margin-bottom: 4px; }
.bs-empty p { font-size: .86rem; line-height: 1.45; }
.bs-empty button { margin-top: 14px; background: var(--grad); color: #fff; border: 0; padding: 0 20px; height: 42px; border-radius: var(--r-pill); font-weight: 700; font-size: .86rem; }

/* scheda piccola */
.mini { --c: var(--accent); display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 18px; background: var(--card); border: 1px solid var(--border); position: relative; cursor: pointer; flex-shrink: 0; }
.mini:active { transform: scale(.985); }
.mini.is-sel { border-color: color-mix(in srgb, var(--c) 60%, var(--border)); }
.mini-tile { width: 54px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mini-tile .cat-blob { width: 52px; height: 52px; filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--c) 35%, transparent)); }
.mini-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-right: 32px; }
.mini-top b { font-size: .95rem; font-weight: 700; display: block; line-height: 1.25; }
.mini-top small { font-size: .74rem; color: var(--text-2); display: block; line-height: 1.3; }
.mini-offer { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; }
.mini-offer .aud-chip { flex: 0 0 auto; height: 22px; }
.mini-offer > span:last-child { min-width: 0; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-more { font-size: .7rem; color: var(--text-2); font-weight: 600; line-height: 1.3; }
.mini .fav-btn { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; background: transparent; }
.mini .fav-btn .ico { width: 17px; height: 17px; }
.mini .fav-btn.on { background: var(--grad); }

/* tag di stato */
.vtag { display: inline-flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 800; letter-spacing: .02em; padding: 2px 8px; border-radius: var(--r-pill); vertical-align: 1px; margin-left: 6px; white-space: nowrap; }
.vtag.warn { background: color-mix(in srgb, var(--hot) 20%, transparent); color: var(--hot); }
.vtag.info { background: color-mix(in srgb, var(--info) 20%, transparent); color: var(--info); }
.vtag.hot { background: color-mix(in srgb, var(--orange) 20%, transparent); color: var(--orange); }

/* chip del pubblico */
.aud-chip {
  flex: 0 0 82px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px 0 4px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2));
}
.aud-chip .cat-blob { width: 17px; height: 17px; color: var(--c2); }
.aud-chip .cat-blob::before { background: #fff; }
.aud-chip .all-dot { width: 17px; height: 17px; background: #fff; color: #06B6B0; }
.aud-chip .all-dot .ico { width: 10px; height: 10px; }

/* preferiti */
.fav-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--card-2); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, color .15s, background .15s;
}
.fav-btn .ico { width: 19px; height: 19px; }
.fav-btn:active { transform: scale(.88); }
.fav-btn.on { color: #fff; background: var(--grad); }
.fav-btn.on .ico { fill: currentColor; }

/* ---------- Barra di navigazione ---------- */
.bottom-nav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 35;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  height: calc(var(--nav-h) + var(--safe-b)); padding: 6px max(8px, calc((100% - 520px) / 2)) var(--safe-b);
  background: var(--card); border-top: 1px solid var(--border);
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; height: 56px;
  color: var(--text-2); font-size: .68rem; font-weight: 600; position: relative;
}
.nav-item .ico { width: 23px; height: 23px; }
.nav-item.active { color: var(--accent); }
.nav-item.active::after { content: ''; position: absolute; top: -7px; width: 22px; height: 3px; border-radius: 3px; background: var(--grad); }
.nav-item:active .ico { transform: scale(.9); }
.nav-add { color: var(--text); }
.nav-add .nav-add-bubble {
  width: 54px; height: 54px; border-radius: 50%; margin-top: -26px;
  background: var(--grad); color: #fff; border: 4px solid var(--card);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(238, 143, 80, .45);
}
.nav-add .nav-add-bubble .ico { width: 25px; height: 25px; }
.nav-add:active .nav-add-bubble { transform: scale(.94); }
.nav-add.active::after { display: none; }

/* ---------- Avviso (toast) ---------- */
.toast {
  position: absolute; left: 50%; top: var(--toast-top, 120px); z-index: 70; max-width: calc(100% - 32px);
  transform: translate(-50%, -20px); opacity: 0; pointer-events: none;
  padding: 9px 16px; border-radius: 999px; background: #fff; color: #1b1620;
  font: 700 .8rem var(--font-body); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .35s var(--ease-spring), opacity .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Fogli modali: scheda locale e città ---------- */
.scrim { position: fixed; inset: 0; z-index: 2500; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.show { opacity: 1; pointer-events: auto; }
.vsheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  background: var(--bg); border-radius: 26px 26px 0 0; padding: 9px 16px calc(18px + var(--safe-b));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .55); border-top: 1px solid var(--border);
  transform: translateY(105%); visibility: hidden;
  transition: transform .38s cubic-bezier(.3, .8, .2, 1), visibility 0s linear .38s;
  overscroll-behavior: contain;
}
.vsheet.open { transform: none; visibility: visible; transition-delay: 0s; }
.vsheet .sheet-handle { margin-bottom: 12px; position: relative; }
.vsheet .sheet-handle::before { content: ''; position: absolute; inset: -14px -36px; }

.sheet-head { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; --c: var(--accent); }
.sheet-head .card-tile { width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sheet-head .card-tile .cat-blob { width: 62px; height: 62px; filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--c) 35%, transparent)); }
.sheet-head .sh-main { flex: 1; min-width: 0; }
.sheet-head h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.sheet-sub { font-size: .8rem; color: var(--text-2); display: flex; gap: 6px; align-items: flex-start; margin-top: 3px; line-height: 1.35; }
.sheet-sub .ico { width: 14px; height: 14px; margin-top: 1px; }
.vtags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.vtags .vtag { margin-left: 0; }

.vnote {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 9px 11px; border-radius: 14px;
  background: color-mix(in srgb, var(--hot) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--hot) 28%, transparent);
  font-size: .8rem; line-height: 1.4;
}
.vnote .ico { width: 16px; height: 16px; color: var(--hot); margin-top: 1px; }

.sheet-sec { margin: 14px 0 0; }
.sect-label { font: 700 .64rem/1 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--text-2); margin: 0 3px 6px; }
.offers { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 6px 0 0; padding: 0; }
.offer {
  --c: var(--accent);
  display: flex; gap: 9px; align-items: flex-start; padding: 8px 9px; border-radius: 14px;
  background: color-mix(in srgb, var(--c) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
}
.offer.match { border: 2px solid var(--c); padding: 7px 8px; background: color-mix(in srgb, var(--c) 16%, var(--card)); }
.offer-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
.offer-body b { font-size: .87rem; font-weight: 700; line-height: 1.3; }
.offer-body span { font-size: .75rem; color: var(--text-2); line-height: 1.35; }
.offer-body .offer-when { display: flex; align-items: flex-start; gap: 5px; color: var(--text); opacity: .85; font-weight: 600; }
.offer-body .offer-when .ico { width: 13px; height: 13px; margin-top: 1px; color: var(--c); }
.offer-body a { color: var(--info); font-size: .72rem; font-weight: 600; text-decoration: none; }

.verify { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-2); margin-top: 12px; line-height: 1.35; }
.verify::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.verify.warn::before { background: var(--hot); }
.venue-booking { display: flex; gap: 6px; align-items: flex-start; font-size: .8rem; color: var(--info); margin-top: 12px; line-height: 1.4; }
.venue-booking .ico { width: 14px; height: 14px; margin-top: 2px; }

.sheet-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn-main {
  flex: 1 1 140px; height: 46px; border: 0; border-radius: 14px; background: var(--grad); color: #fff; font: 800 .92rem var(--font-head);
  display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.btn-main .ico { width: 18px; height: 18px; }
.btn-ghost {
  height: 46px; padding: 0 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--border);
  font: 700 .86rem var(--font-body); color: var(--text); display: flex; align-items: center; gap: 7px; text-decoration: none;
}
.btn-ghost .ico { width: 18px; height: 18px; }
.btn-ghost.insta .ico { color: var(--pink); }
.btn-ghost.web .ico { color: var(--info); }
.report-link { display: block; width: 100%; margin-top: 14px; padding: 6px; background: none; border: 0; text-align: center; font-size: .78rem; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.report-form { margin-top: 8px; }
.report-form[hidden] { display: none; }
.report-form label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.report-form textarea { width: 100%; min-height: 76px; resize: vertical; padding: 10px 12px; font-size: 16px; background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; outline: none; }
.report-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.report-form .row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.report-form .row .btn-main { flex: 0 0 auto; height: 42px; padding: 0 22px; }
.report-msg { font-size: .8rem; }
.report-msg.ok { color: var(--ok); }
.report-msg.err { color: var(--danger); }

/* selettore città */
.city-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); margin-top: 8px; width: 100%; text-align: left; }
.city-row.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.city-row .city-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--grad-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.city-row b { display: block; font: 800 .98rem var(--font-head); }
.city-row small { color: var(--text-2); font-size: .76rem; }
.city-row .state { margin-left: auto; font: 700 .72rem var(--font-body); padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.city-soon { font-size: .82rem; color: var(--text-2); text-align: center; margin-top: 14px; }

/* ---------- Mappa: pin, popup, controlli ---------- */
.s-pin { background: none; border: none; }
.s-pin svg { display: block; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); transition: transform .15s; transform-origin: 50% 100%; }
.s-pin:hover svg { transform: scale(1.12); }
.pin-badge { position: absolute; right: -5px; top: -4px; width: 15px; height: 15px; border-radius: 50%; background: var(--b, #22A559); border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.35); }

.leaflet-container { font-family: var(--font-body); background: var(--card-2); }
.leaflet-bar { border: none !important; box-shadow: var(--shadow) !important; border-radius: 14px !important; overflow: hidden; }
.leaflet-bar a { background: var(--card); color: var(--text); border-bottom-color: var(--border); width: 38px; height: 38px; line-height: 38px; }
.leaflet-bar a:hover { background: var(--card-2); color: var(--text); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--card) 80%, transparent) !important; color: var(--text-2) !important; font-size: 10px; border-radius: 8px 0 0 0; }
.leaflet-control-attribution a { color: var(--text-2) !important; }
.leaflet-bottom { bottom: calc(var(--nav-h) + var(--safe-b) + var(--sh, 190px)); transition: bottom .42s cubic-bezier(.3, .8, .2, 1); }

.user-dot { background: none; border: none; }
.user-dot span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--info); border: 4px solid #fff; box-shadow: 0 0 0 0 rgba(59,130,246,.5), 0 2px 8px rgba(0,0,0,.35); animation: userPulse 2s infinite; }
@keyframes userPulse { 70% { box-shadow: 0 0 0 14px rgba(59,130,246,0), 0 2px 8px rgba(0,0,0,.35); } 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0), 0 2px 8px rgba(0,0,0,.35); } }

/* Mappa scura: tile OpenStreetMap standard scuriti con filtro (nessuna chiave API necessaria) */
:root[data-theme="dark"] .osm-tiles { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55); }

/* ---------- Menu laterale (account / segnala / admin) ---------- */
.overlay { position: fixed; inset: 0; background: var(--scrim); z-index: 1999; display: none; backdrop-filter: blur(2px); }
.overlay.show { display: block; }
.sidebar {
  position: fixed; top: 0; right: -380px; width: 330px; max-width: 90vw; height: 100%;
  background: var(--bg); color: var(--text); border-left: 1px solid var(--border);
  box-shadow: -10px 0 40px rgba(0, 0, 0, .35); z-index: 2000; transition: right .3s cubic-bezier(.3,.8,.3,1);
  padding: calc(18px + var(--safe-t)) 20px calc(24px + var(--safe-b)); overflow-y: auto;
}
.sidebar.open { right: 0; }
.sidebar-close {
  position: absolute; top: calc(10px + var(--safe-t)); right: 10px; width: 44px; height: 44px;
  background: none; border: none; color: var(--text-2); display: flex; align-items: center; justify-content: center;
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-right: 40px; }
.sidebar-logo { height: 40px; width: auto; }
.sidebar-brand-name { line-height: 0; color: var(--text); user-select: none; -webkit-user-select: none; cursor: default; }
.sidebar-brand-name .wordmark { height: 25px; width: auto; display: block; margin-bottom: 5px; }
.sidebar-brand-tag { font-size: .78rem; color: var(--text-2); }
.sidebar h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 12px; }
.sidebar label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-2); margin: 14px 0 6px; }
.sidebar input, .sidebar select {
  width: 100%; padding: 0 14px; min-height: 46px; font-size: 16px;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; outline: none; color: var(--text);
}
.sidebar input:focus, .sidebar select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.sidebar-btn {
  width: 100%; margin-top: 16px; height: 50px; border: none; border-radius: var(--r-pill);
  background: var(--grad); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  box-shadow: 0 8px 20px rgba(238, 143, 80, .28);
}
.sidebar-btn:active { transform: scale(.98); }
.sidebar-btn.secondary { background: var(--card); color: var(--text); border: 1.5px solid var(--border); box-shadow: none; margin-top: 10px; }
.sidebar-btn.with-ico { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sidebar-btn.with-ico .ico { width: 18px; height: 18px; color: var(--accent); }
.sidebar-note { font-size: .84rem; color: var(--text-2); margin-top: 18px; line-height: 1.7; }
.auth-msg { font-size: .82rem; margin-top: 8px; min-height: 1em; }
.auth-msg.error { color: var(--danger); }
.auth-msg.success { color: var(--ok); }
.owner-badge { font-size: .76rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 12px; padding: 7px 10px; margin: 6px 0 10px; line-height: 1.35; }
.owner-badge[hidden] { display: none; }
.account-hello { font-size: .95rem; color: var(--text); margin-bottom: 4px; word-break: break-word; }
.admin-stat { text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; margin-bottom: 14px; }
.admin-stat-num { display: block; font-family: var(--font-head); font-size: 2.1rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.admin-stat-label { font-size: .8rem; color: var(--text-2); }
.admin-subtitle { font-size: .85rem; color: var(--text-2); margin: 10px 0 6px; font-weight: 600; }
.admin-user-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.admin-user-row { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: .82rem; }
.admin-user-row:last-child { border-bottom: none; }
.admin-user-row .email { display: block; font-weight: 600; word-break: break-all; }
.admin-user-row .date { display: block; color: var(--text-2); font-size: .75rem; margin-top: 2px; }

/* impostazioni: lingua, tema, posizione dei tasti */
.settings-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.set-row { display: flex; flex-direction: column; gap: 6px; }
.set-row > span { font: 700 .64rem/1 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--text-2); }
.seg { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--card-2); }
.seg button { flex: 1; min-width: 0; height: 34px; padding: 0 8px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font: 700 .78rem var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg button.on { background: var(--grad); color: #fff; box-shadow: 0 3px 10px rgba(238, 143, 80, .3); }

/* ---------- Banner "Installa" ---------- */
.install-banner {
  position: fixed; left: 12px; right: 12px; top: calc(12px + var(--safe-t));
  background: var(--card-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 10px 34px 10px 12px;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); z-index: 3100;
}
.install-banner[hidden] { display: none; }
.install-banner-icon { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; }
.install-banner-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.install-banner-text strong { font-family: var(--font-head); font-size: .88rem; }
.install-banner-text span { font-size: .74rem; color: var(--text-2); line-height: 1.3; }
.install-banner-btn { background: var(--grad); color: #fff; border: none; height: 36px; padding: 0 16px; border-radius: var(--r-pill); font-size: .82rem; font-weight: 700; flex-shrink: 0; }
.install-banner-close { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; background: none; border: none; color: var(--text-2); display: flex; align-items: center; justify-content: center; z-index: 1; }
@media (min-width: 480px) { .install-banner { left: auto; width: 360px; } }

/* ---------- Colori: tipi di locale, pubblici ---------- */
.filter-spritz, .cat-spritz { --c: #FF7A1A; --c1: #FF9A3D; --c2: #F25F0A; }
.filter-birravino, .cat-birravino { --c: #F2A413; --c1: #FFC93C; --c2: #E8920C; }
.filter-aperitivo, .cat-aperitivo { --c: #C026D3; --c1: #D54BE6; --c2: #9E1AB0; }
.filter-live, .cat-live { --c: #4F46E5; --c1: #7A72F8; --c2: #3A30C4; }
.filter-promo, .cat-promo { --c: #14B8A6; --c1: #36D6C4; --c2: #0C9484; }
.filter-disco, .cat-disco { --c: #2B2B33; --c1: #4A4A55; --c2: #17171C; }
.filter-studenti, .cat-studenti, .aud-studenti { --c: #22A559; --c1: #3CC574; --c2: #168A45; }
.filter-donne, .cat-donne, .aud-donne { --c: #F43F5E; --c1: #FF6A82; --c2: #D71F45; }
.filter-comitiva, .cat-comitiva, .aud-comitiva { --c: #0EA5E9; --c1: #3CBDF5; --c2: #0B83BE; }
.aud-tutti { --c: #06B6B0; --c1: #06B6B0; --c2: #F35A54; }

/* ---------- Computer (>= 900px): pannello a sinistra, mappa a destra ---------- */
@media (min-width: 900px) {
  .bsheet {
    top: 0; right: auto; left: 0; width: var(--panel-w); height: auto; bottom: calc(var(--nav-h) + var(--safe-b));
    border-radius: 0; border-top: 0; border-right: 1px solid var(--border); box-shadow: 8px 0 30px rgba(0, 0, 0, .3);
    padding-top: 14px; transition: none;
  }
  .bs-grip { cursor: default; padding-top: 4px; }
  .bs-grip .sheet-handle { display: none; }
  .bs-head h2 { font-size: 1.15rem; }
  .bottom-nav { right: auto; width: var(--panel-w); padding-left: 8px; padding-right: 8px; border-right: 1px solid var(--border); }
  #map { left: var(--panel-w); }
  .float-top { left: calc(var(--panel-w) + 14px); right: auto; width: min(620px, calc(100% - var(--panel-w) - 90px)); }
  .fab-tonight { left: calc(var(--panel-w) + 14px); bottom: 26px; }
  .fab { bottom: 26px; }
  .side.left { display: none; }
  .leaflet-bottom { bottom: 0; }
  .toast { left: calc(50% + var(--panel-w) / 2); }
  .map-empty { left: calc(50% + var(--panel-w) / 2); }

  .vsheet {
    left: 50%; right: auto; bottom: auto; top: 50%; width: min(540px, 92vw); max-height: 86vh;
    border-radius: 26px; border: 1px solid var(--border);
    transform: translate(-50%, -46%) scale(.97); opacity: 0;
    transition: transform .3s cubic-bezier(.3, .8, .2, 1), opacity .25s, visibility 0s linear .3s;
  }
  .vsheet.open { transform: translate(-50%, -50%); opacity: 1; }
  .vsheet .sheet-handle { display: none; }
  .install-banner { left: auto; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}