:root {
  --bg: #ffffff; --card: #ffffff; --line: #e4e7ec; --text: #16181d;
  --muted: #6b7280; --accent: #2f6bff; --accent-2: #0e9f6e; --danger: #e5484d;
  --warn: #b0790a; --nav-h: 64px; --ab-h: 54px;
  --shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 0;
}
/* pagine normali: spazio in alto per l'app bar fissa, in basso per il FAB */
#app { max-width: 720px; margin: 0 auto;
  padding: calc(var(--ab-h) + env(safe-area-inset-top) + 10px) 16px calc(88px + env(safe-area-inset-bottom)); }
/* home a schermo intero: il feed occupa tutto, app bar/FAB galleggiano sopra */
body.home { overflow: hidden; }
body.home #app { max-width: none; margin: 0; padding: 0; height: 100dvh; overflow: hidden; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.topbar h1 { font-size: 20px; margin: 0; }
.muted { color: var(--muted); font-size: 13px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
h2 { font-size: 18px; margin: 0 0 4px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 0; }
input, textarea {
  width: 100%; margin-top: 6px; padding: 12px; border-radius: 10px; border: 1px solid var(--line);
  background: #f7f8fa; color: var(--text); font-size: 16px; font-family: inherit;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); background: #fff; }
textarea { min-height: 90px; resize: vertical; }
button {
  padding: 13px 16px; border-radius: 11px; border: 0; cursor: pointer; width: 100%;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; margin-top: 14px;
}
button.secondary { background: #eef1f5; color: var(--text); }
button.ghost { background: #fff; border: 1px solid var(--line); color: var(--text); width: auto; }
button.danger { background: #fff; border: 1px solid var(--danger); color: var(--danger); }
button.ok { background: var(--accent-2); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.msg { font-size: 13px; margin-top: 12px; min-height: 18px; }
.msg.error { color: var(--danger); } .msg.ok { color: var(--accent-2); }
.hidden { display: none !important; }

/* --- Home hero --- */
.hero { background: linear-gradient(135deg, #2a3b6e 0%, #5b8cff 55%, #2dd4a7 130%);
  border-radius: 18px; padding: 20px 18px 22px; margin-bottom: 14px; color: #fff;
  box-shadow: 0 10px 30px -12px rgba(91,140,255,.6); }
.hero-top { display: flex; justify-content: space-between; align-items: center; }
.hero-top .logo { font-size: 30px; }
.hero-lb { width: auto; margin: 0; background: rgba(255,255,255,.18); padding: 8px 12px; border-radius: 999px; font-size: 16px; }
.hero h1 { margin: 8px 0 2px; font-size: 28px; }
.hero p { margin: 0; opacity: .92; font-size: 14px; line-height: 1.4; }
.hero-actions { display: flex; gap: 10px; margin-top: 14px; }
.hero-actions button { width: auto; margin: 0; background: #fff; color: #1b2336; font-weight: 700; }
.hero-actions button.ghost { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.45); }

/* --- Notifica sfida in home --- */
.ch-notif { display: flex; gap: 12px; background: #f4f0ff; border: 1px solid #dfd2ff;
  border-radius: 14px; padding: 12px; margin-bottom: 14px; box-shadow: var(--shadow); }
.ch-notif img { width: 74px; height: 74px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.ch-notif .ch-ic { width: 74px; height: 74px; display: flex; align-items: center; justify-content: center;
  font-size: 34px; background: #ece2ff; border-radius: 10px; flex: 0 0 auto; }
.ch-notif .ch-body { flex: 1; min-width: 0; }
.ch-notif .ch-tag { font-size: 11px; font-weight: 700; color: #6d3fe0; text-transform: uppercase; }
.ch-notif .ch-title { font-weight: 700; margin: 2px 0; }
.ch-ref { width: 100%; max-height: 200px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }

/* --- Countdown --- */
.cdown { color: var(--warn); font-weight: 700; font-size: 13px; }

/* --- Scelta tempo ordine --- */
.time-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.time-opt { width: auto; margin: 0; }
.time-opt.sel { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- Righe ordine --- */
.ordrow { cursor: pointer; }
.ord-head { display: flex; gap: 12px; align-items: center; }
.ord-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.ord-main { flex: 1; min-width: 0; }
.ord-title { font-weight: 600; font-size: 15px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ord-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ord-hero { width: 100%; max-height: 240px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }
.clickable { cursor: pointer; }
.runner-notif { background: #ecfdf5; border-color: #b7e6d2; }
.joblist { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px; margin: 8px 0; cursor: pointer; background: #fff; box-shadow: var(--shadow); }
.joblist .rimg { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.joblist .rmain { flex: 1; min-width: 0; }
.sort-chip { font-size: 13px; padding: 8px 10px; }
.sort-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- Mappa --- */
/* Confina lo stacking context di Leaflet (i suoi pane/controlli arrivano a z-index
   ~1000): con z-index:0 restano DENTRO il contenitore e non coprono la bottom-nav. */
.leaflet-container { z-index: 0; }

/* --- Pin etichettati sulla mappa (cifra + commissione) --- */
.leaflet-div-icon.jobpin-wrap { background: transparent; border: none; }
.jobpin { position: relative; background: #ffffff; border: 1px solid var(--accent);
  border-radius: 8px; padding: 3px 6px 2px; text-align: center; line-height: 1.05;
  box-shadow: 0 2px 6px rgba(16,24,40,.25); white-space: nowrap; color: var(--text); }
.jobpin b { font-size: 13px; display: block; }
.jobpin small { color: var(--accent-2); font-size: 11px; font-weight: 700; }
.jobpin::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--accent); border-bottom: 0; }

/* --- Select --- */
select { width: 100%; margin-top: 6px; padding: 12px; border-radius: 10px; border: 1px solid var(--line);
  background: #f7f8fa; color: var(--text); font-size: 16px; }

/* --- Bacheca: feed stile Instagram --- */
.feed { max-width: 480px; margin: 0 auto; }
.post { margin-bottom: 18px; border-radius: 16px; overflow: hidden; background: #000;
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.post.faded .post-media { opacity: .8; }
.post-media { position: relative; }
.post-media .gallery { border-radius: 0; }
.post-media .gallery img { aspect-ratio: 4 / 5; max-height: 74vh; border-radius: 0; border: 0; }
.post-media .gallery .empty { aspect-ratio: 4 / 5; border-radius: 0; background: #14171e; }
.heart-pop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 96px; color: #fff; opacity: 0; pointer-events: none; text-shadow: 0 3px 16px rgba(0,0,0,.5); }
.heart-pop.go { animation: heartpop .8s ease; }
@keyframes heartpop { 0%{opacity:0;transform:scale(.3)} 15%{opacity:.95;transform:scale(1)}
  30%{transform:scale(.9)} 45%{transform:scale(1)} 100%{opacity:0;transform:scale(1)} }
.post-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 16px 16px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.15) 70%, rgba(0,0,0,0)); pointer-events: none; }
.post-title { font-size: 20px; font-weight: 800; line-height: 1.2; }
.post-price { font-weight: 800; color: #7cf0c6; margin-top: 2px; font-size: 16px; }
.post-desc { margin-top: 6px; font-size: 14px; line-height: 1.4; opacity: .95;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-hint { margin-top: 8px; font-size: 11px; opacity: .8; }
.no-order2 { color: #ffb4b4; font-weight: 700; }
.post-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--card); }
.post-bar .like { margin: 0; }
.post-bar .stars.small { flex: 1; }
.stars.small .pstar { font-size: 21px; }
.pstar { color: #cfd4dc; cursor: pointer; line-height: 1; }
.pstar.on { color: var(--warn); }
.post-open { margin: 0; }

/* --- (legacy) tile masonry, non più usato --- */
.old-feed { columns: 2; column-gap: 12px; }
.tile {
  break-inside: avoid; margin-bottom: 12px; border-radius: 14px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); cursor: pointer; box-shadow: var(--shadow);
}
.tile .ph { width: 100%; display: block; background: #eceff3 center/cover no-repeat; }
.tile .ph img { width: 100%; display: block; }
.tile .ph.empty { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 30px; }
.tile .info { padding: 10px 12px; }
.tile .t { font-weight: 600; font-size: 14px; line-height: 1.3; }
.tile .p { color: var(--accent-2); font-weight: 700; margin-top: 2px; }
.tile .stats { color: var(--muted); font-size: 12px; margin-top: 6px; display: flex; gap: 10px; }
.tile.faded .ph { opacity: .55; }
.tile .no-order { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700;
  color: #92400e; background: #fef1dd; border: 1px solid #f6d9ac; padding: 2px 7px; border-radius: 999px; }

/* --- Dettaglio --- */
.gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; border-radius: 14px; }
.gallery::-webkit-scrollbar { display: none; }
.gallery img { flex: 0 0 100%; scroll-snap-align: center; width: 100%; aspect-ratio: 1;
  object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
.gallery .empty { flex: 0 0 100%; aspect-ratio: 16/10; border-radius: 14px; background: #eef1f5;
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 40px; }
.swipe-hint { text-align: center; color: var(--muted); font-size: 12px; margin-top: 6px; }
.detail .price { color: var(--accent-2); font-size: 26px; font-weight: 800; }
.detail .store { color: var(--muted); margin-top: 2px; }
.loc-lock { margin-top: 8px; padding: 10px 14px; border-radius: 12px; font-size: 14px;
  background: #fff7e8; border: 1px solid #f2dcae; color: #7a5410; }
.detail .desc { margin-top: 14px; line-height: 1.6; white-space: pre-wrap; }
.community { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.like { background: #f2f4f7; border: 1px solid var(--line); color: var(--text); width: auto;
  padding: 9px 14px; border-radius: 999px; font-size: 14px; margin: 0; }
.like.on { background: #ffe4ec; border-color: #ff8fab; color: #d6336c; }
.stars { display: inline-flex; gap: 2px; }
.star { font-size: 26px; color: #cfd4dc; cursor: pointer; line-height: 1; }
.star.on { color: var(--warn); }
.rmeta { font-size: 13px; color: var(--muted); }
.back { color: var(--accent); font-size: 14px; cursor: pointer; display: inline-block; margin-bottom: 10px; }
.mod-links { display: flex; gap: 16px; margin-top: 16px; }
.mod-link { width: auto; margin: 0; padding: 0; background: none; border: 0;
  color: var(--muted); font-size: 12.5px; text-decoration: underline; }

.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; align-items: center; }
.thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.thumb { position: relative; }
.thumb-x { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; padding: 0;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 12px; line-height: 1;
  margin: 0; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; }
.thumb-count { font-size: 13px; color: var(--muted); font-weight: 600; padding: 0 4px; }

/* --- Posizione in Segnala + indirizzo/navigazione runner --- */
.geo-box { margin-top: 14px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: #f7f8fa; }
.loc-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.loc-tab { width: auto; margin: 0; font-size: 13px; padding: 8px 10px; }
.loc-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.chk { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--text); font-size: 14px; cursor: pointer; }
.chk input { width: auto; margin: 0; }
.geo-status { margin-top: 8px; }
.geo-ok { color: var(--accent-2); font-weight: 600; font-size: 14px; }
.geo-ok .muted { font-weight: 400; margin-top: 2px; }
.addr-box { background: #f4f7ff; border: 1px solid #d9e2ff; border-radius: 12px; padding: 12px; margin-top: 10px; }
.addr-name { font-weight: 700; }
.maps-btn { display: inline-block; margin-top: 8px; padding: 9px 14px; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.badge { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; text-transform: uppercase; }
.banner { background: #eef4ff; border: 1px solid #cfe0ff; color: #1e40af; border-radius: 12px;
  padding: 12px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }

/* --- Classifica --- */
.lb-tab { width: auto; margin: 0; }
.lb-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.lb-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lb-chip { font-size: 12px; border: 1px solid var(--line); background: var(--card);
  border-radius: 999px; padding: 5px 12px; color: var(--muted); box-shadow: var(--shadow); }
.lb-chip b { color: var(--text); }
.mecard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px;
  border: 1.5px solid var(--accent); border-radius: 14px;
  background: linear-gradient(135deg, #eef4ff, #f7faff); box-shadow: var(--shadow); }
.mecard.muted-card { display: block; border-style: dashed; color: var(--muted); font-size: 14px; }
.mecard .me-pos { font-size: 22px; font-weight: 800; color: var(--accent); min-width: 44px; text-align: center; }
.mecard .me-main { flex: 1; min-width: 0; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 6px 0 16px; }
.pod { flex: 1; max-width: 130px; text-align: center; border: 1px solid var(--line); border-radius: 14px 14px 0 0;
  background: var(--card); padding: 12px 8px 0; box-shadow: var(--shadow); }
.pod-1 { padding-top: 20px; border-color: #e7c65a; background: linear-gradient(180deg, #fff9e6, var(--card)); }
.pod-2 { border-color: #c9cfd8; }
.pod-3 { border-color: #e0b48b; }
.pod-badge { font-size: 30px; line-height: 1.1; }
.pod-name { font-weight: 700; font-size: 13px; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-score { color: var(--accent-2); font-weight: 800; font-size: 14px; }
.pod-base { font-size: 24px; padding: 6px 0 8px; }
.pod-1 .pod-base { font-size: 30px; }
.rankrow { display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-bottom: 8px; box-shadow: var(--shadow); }
.rankrow .pos { font-size: 18px; width: 30px; text-align: center; font-weight: 700; color: var(--muted); }
.rankrow .rimg { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.rankrow .rmain { flex: 1; min-width: 0; }
.rankrow .rname { font-weight: 600; }
.rankrow .rscore { font-weight: 800; color: var(--accent-2); font-size: 18px; }

/* --- Livello profilo --- */
.level-card { display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #eef2ff, #f6f9ff); border-color: #d9e2ff; }
.lvl-badge { font-size: 40px; line-height: 1; }
.lvl-name { font-size: 20px; font-weight: 800; }

/* --- Sfide --- */
.chcard { cursor: pointer; }
.entry-img { width: 100%; border-radius: 12px; margin-bottom: 8px; object-fit: cover; max-height: 320px; }

/* --- Bottom nav --- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #ffffff; border-top: 1px solid var(--line); display: flex; z-index: 1500;
  box-shadow: 0 -1px 6px rgba(16,24,40,.05);
}
.nav button {
  flex: 1; background: none; border: 0; color: var(--muted); margin: 0; width: auto;
  display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; padding: 8px 0;
}
.nav button .ic { font-size: 21px; }
.nav button.active { color: var(--accent); }

.toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: #16181d; border: 1px solid #16181d; color: #fff; padding: 12px 18px;
  border-radius: 10px; font-size: 14px; z-index: 3200; box-shadow: 0 6px 20px rgba(16,24,40,.25); }

/* --- Offerte dei negozianti --- */
.offer-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  margin-top: 10px; background: #fbfcff; box-shadow: var(--shadow); }
.offer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.offer-total { margin-top: 8px; font-size: 15px; }
.offer-total b { color: var(--accent-2); font-size: 18px; }

/* --- Modal (pagamento, prova d'acquisto) --- */
/* z-index alto: deve stare SOPRA la mappa Leaflet (pane/controlli fino a ~1000). */
.modal-overlay { position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 3000;
  display: flex; align-items: flex-end; justify-content: center; padding: 0; }
@media (min-width: 560px) { .modal-overlay { align-items: center; padding: 16px; } }
.modal { width: 100%; max-width: 480px; margin: 0; max-height: 92vh; overflow-y: auto;
  border-radius: 18px 18px 0 0; }
@media (min-width: 560px) { .modal { border-radius: 16px; } }

/* --- Lightbox foto (zoom) --- */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 4000;
  display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.lb-img { max-width: 100%; max-height: 100%; transform-origin: center center; will-change: transform;
  cursor: grab; user-select: none; -webkit-user-drag: none; touch-action: none; }
.lb-close { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 14px; width: 42px !important;
  height: 42px; margin: 0; padding: 0; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff;
  font-size: 18px; z-index: 4001; }
.lb-hint { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.85); font-size: 12px; background: rgba(0,0,0,.45); padding: 6px 12px; border-radius: 999px;
  white-space: nowrap; }

/* --- Modalità storie (feed a schermo intero, tipo IG) --- */
.story { position: fixed; inset: 0; background: #000; z-index: 4000; }
.story-scroll { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; }
.story-scroll::-webkit-scrollbar { display: none; }
.story-slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.story-photos { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.story-photos::-webkit-scrollbar { display: none; }
.story-photos .sp { flex: 0 0 100%; height: 100%; scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center; background: #000; }
.story-photos .sp img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.story-photos .sp .empty { font-size: 90px; color: #333; }
.story-x { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 14px; width: 42px !important;
  height: 42px; margin: 0; padding: 0; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff;
  font-size: 18px; z-index: 4002; }
.story-dots { position: absolute; top: calc(var(--ab-h) + env(safe-area-inset-top) + 42px); left: 0; right: 0;
  display: flex; gap: 6px; justify-content: center; z-index: 3; pointer-events: none; }
.story-dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.4); }
.story-dots i.on { background: #fff; }
.story-cap { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; pointer-events: none;
  padding: 100px 18px calc(26px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.2) 62%, rgba(0,0,0,0)); }
.story-scout { font-size: 12px; opacity: .92; margin-bottom: 3px; }
.story-scout b { font-weight: 700; }
.story-title { font-size: 24px; font-weight: 800; line-height: 1.15; }
.story-price { font-weight: 800; color: #7cf0c6; margin-top: 3px; font-size: 18px; }
.story-desc { margin-top: 8px; font-size: 15px; line-height: 1.45; opacity: .96;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.story-controls { display: flex; align-items: center; justify-content: flex-start;
  gap: 10px; row-gap: 8px; margin-top: 6px; padding-right: 84px; pointer-events: auto;
  flex-wrap: wrap; }  /* se non c'è spazio, «Apri» scende di riga e non finisce sotto il FAB */
.story-like { width: auto; margin: 0; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
  color: #fff; border-radius: 999px; padding: 9px 15px; font-size: 15px; white-space: nowrap; }
.story-like.on { background: #ffe4ec; border-color: #ff8fab; color: #d6336c; }
.story-int { width: auto; margin: 0; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
  color: #fff; border-radius: 999px; padding: 9px 13px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.story-int.on { background: #e0f2fe; border-color: #7cc4fa; color: #0b5cad; }
.story-int span { background: rgba(255,255,255,.24); border-radius: 999px; padding: 1px 7px;
  font-size: 12px; font-weight: 800; margin-left: 2px; }
.story-int.on span { background: rgba(11,92,173,.14); }
.like.int { font-weight: 700; }
.like.int.on { background: #e0f2fe; border-color: #7cc4fa; color: #0b5cad; }
.like.int span { background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 7px; font-size: 12px; font-weight: 800; margin-left: 2px; }
.like.int.on span { background: rgba(11,92,173,.1); border-color: #7cc4fa; }
.story-stars { display: flex; gap: 4px; margin: 4px 0 2px; pointer-events: auto; }
.story-stars .pstar { font-size: 30px; }
.story-open { width: auto; margin: 0; background: #fff; color: #16181d; border-radius: 999px;
  padding: 9px 15px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.story-hint { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: rgba(255,255,255,.9); font-size: 13px; background: rgba(0,0,0,.4); padding: 8px 14px; border-radius: 999px;
  z-index: 4001; pointer-events: none; animation: storyhint 3s ease forwards; }
@keyframes storyhint { 0%,55%{opacity:1} 100%{opacity:0} }

/* home a schermo intero: contenitore del feed scrollabile */
.homefeed { height: 100dvh; }
.story-empty { height: 100%; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--muted); font-size: 15px; line-height: 1.6; padding: 40px; }

/* --- App bar fissa: menu ☰ (sx) + logo ShopCrowd (sx) --- */
.appbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1500;
  height: calc(var(--ab-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 8px;
  display: flex; align-items: center; gap: 6px;
  background: #fff; border-bottom: 1px solid var(--line); }
/* sopra la foto (home): trasparente con sfumatura per la leggibilità */
.appbar.over { background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
  border-bottom: 0; color: #fff; }
.ab-icon { width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 12px;
  background: none; color: var(--text); font-size: 22px; line-height: 1; }
.ab-logo { width: auto; margin: 0; padding: 6px 8px; background: none; color: var(--text);
  font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.ab-logo b { font-weight: 800; }
.ab-bell { margin-left: auto; position: relative; font-size: 20px; }
.bell-n { position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px;
  border-radius: 999px; background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  border: 2px solid #fff; box-sizing: border-box; }
.bell-n.hidden { display: none; }
.appbar.over .bell-n { border-color: transparent; }
.appbar.over .ab-icon, .appbar.over .ab-logo { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); }

/* --- FAB Segnala (sempre visibile, come "componi" nelle app di posta) --- */
.fab { position: fixed; right: 18px; bottom: calc(22px + env(safe-area-inset-bottom));
  width: 58px; height: 58px; margin: 0; padding: 0; border-radius: 50%; z-index: 1600;
  background: var(--accent); color: #fff; font-size: 25px; line-height: 1;
  box-shadow: 0 8px 22px -6px rgba(47,107,255,.7), 0 2px 6px rgba(16,24,40,.2); }

/* --- Notifiche discrete in cima alla foto (sfide / incarichi) --- */
.story-notifs { position: fixed; left: 0; right: 0; z-index: 1400;
  top: calc(var(--ab-h) + env(safe-area-inset-top) + 4px);
  display: flex; gap: 8px; padding: 0 12px; pointer-events: none; }
/* due slot affiancati (metà e metà); se ce n'è uno solo occupa tutta la riga */
.snotif { pointer-events: auto; flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; width: auto; margin: 0; max-width: none;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(20,20,25,.5); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; overflow: hidden; }
.snotif span { overflow: hidden; text-overflow: ellipsis; }
.snotif--run { border-color: rgba(124,240,198,.5); }
.snotif--info { background: rgba(46,64,110,.6); }
.snotif--off { border-color: rgba(255,196,232,.55); background: rgba(96,38,80,.55); }

/* --- Notifiche (lista) --- */
.notif { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0; cursor: pointer; }
.notif--new { border-left: 4px solid var(--accent); }
.notif-ico { font-size: 22px; line-height: 1.2; }
.notif-main { flex: 1; min-width: 0; }
.notif-title { font-weight: 700; font-size: 14.5px; }
.notif-body { color: var(--muted); font-size: 13px; margin-top: 2px; line-height: 1.45; }
.notif-time { color: var(--muted); font-size: 11.5px; margin-top: 4px; }

/* --- Proposte ricevute --- */
.offer-rc { margin: 10px 0; cursor: pointer; }

/* --- Portafoglio --- */
.wallet-head { text-align: center; }
.wallet-total { font-size: 34px; font-weight: 800; color: var(--accent-2); margin: 2px 0; }
.wrow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.wrow:last-child { border-bottom: 0; }
.wmain { min-width: 0; }
.wlabel { font-weight: 600; font-size: 14px; }
.wamount { font-weight: 800; color: var(--accent-2); white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* --- Drawer (menu laterale) --- */
.drawer-scrim { position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 3100;
  opacity: 0; transition: opacity .22s ease; }
.drawer-scrim.show { opacity: 1; }
.drawer-scrim.hidden { display: none; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(80vw, 320px); z-index: 3200;
  background: #fff; box-shadow: 6px 0 24px rgba(16,24,40,.2); display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .22s ease; }
.drawer.open { transform: none; }
.drawer.hidden { display: none; }
.drawer-head { padding: calc(20px + env(safe-area-inset-top)) 18px 16px;
  background: linear-gradient(135deg, #2a3b6e 0%, #5b8cff 100%); color: #fff; }
.drawer-logo { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.drawer-user { margin-top: 6px; font-size: 14px; opacity: .95; }
.drawer-user span { display: block; font-size: 12px; opacity: .8; margin-top: 1px; }
.drawer-nav { display: flex; flex-direction: column; flex: 1; padding: 8px 0 calc(12px + env(safe-area-inset-bottom)); overflow-y: auto; }
.draw-item { display: flex; align-items: center; width: 100%; margin: 0; text-align: left;
  background: none; border: 0; border-radius: 0; padding: 14px 18px; font-size: 16px; font-weight: 600; color: var(--text); }
.draw-item.active { color: var(--accent); background: #eef4ff; }
.draw-logout { margin-top: auto; color: var(--danger); border-top: 1px solid var(--line); }

/* --- Bacheca negoziante: card lead con foto a tutto sfondo --- */
.lead-card { position: relative; border-radius: 16px; overflow: hidden; margin: 12px 0;
  aspect-ratio: 4/3; cursor: pointer; background: linear-gradient(135deg, #2b2f3a, #16181d);
  box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.lead-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lead-bg.gone { display: none; }
.lead-shade { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.28) 48%, rgba(0,0,0,.12) 100%); }
.lead-top { position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; gap: 8px; flex-wrap: wrap; }
.lead-chip { background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 700;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lead-chip--ok { background: rgba(18,128,92,.78); border-color: rgba(146,232,198,.55); }
.lead-info { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff; }
.lead-title { font-size: 20px; font-weight: 800; line-height: 1.15;
  text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.lead-meta { font-size: 13.5px; opacity: .95; margin-top: 3px; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.lead-meta b { color: #7cf0c6; }
.lead-open { width: auto; margin: 10px 0 0; background: #fff; color: #16181d;
  border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 800; }

/* --- Auth (centrato) --- */
.auth-wrap { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }
.brand { text-align: center; margin-bottom: 18px; }
.brand .logo { display: flex; justify-content: center; }
.brand h1 { margin: 6px 0 0; font-size: 26px; }

/* --- Selettore negozio (Segnala) --- */
.store-drop { border: 1px solid var(--line); border-radius: 12px; background: var(--card, #fff);
  margin-top: -6px; overflow: hidden; box-shadow: 0 8px 20px rgba(16,24,40,.1); }
.store-drop.hidden { display: none; }
.store-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; margin: 0; padding: 10px 14px; background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line); text-align: left; color: var(--text); font-size: 14px; }
.store-opt:last-child { border-bottom: 0; }
.store-opt span { color: var(--muted); font-size: 12px; }
.store-opt--add { color: var(--accent); font-weight: 700; }
.store-pick { margin-top: -4px; }
.store-pick.hidden { display: none; }
.store-chip { display: inline-flex; align-items: center; gap: 6px; background: #eef7f1;
  border: 1px solid #bfe3cf; color: #14532d; border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.store-chip button { width: auto; margin: 0 0 0 4px; padding: 0 4px; background: none;
  border: 0; color: inherit; font-size: 14px; }

/* --- Proposta prepagata --- */
.prop-box { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 14px;
  background: #eef4ff; border: 1px solid #c9dbff; }
.counter-box { margin-top: 10px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px;
  background: #fff7e8; border: 1px solid #f2dcae; }
.oknote { padding: 10px 14px; border-radius: 12px; font-size: 14px;
  background: #eef7f1; border: 1px solid #bfe3cf; }