/* ======================= NEO FUTURE · EVENT APP ======================= */
:root{
  /* Colors */
  --bg-page:#f5f3ff;
  --surface:#ffffff;
  --surface-soft:#f9fafb;
  --ink:#0f172a;
  --muted:#6b7280;
  --line:rgba(148,163,184,.35);
  --accent:#ec4899;   /* pink */
  --accent-2:#6366f1; /* violet */

  /* Rhythm (8pt + aureo) */
  --phi:1.618;
  --u:8px;
  --gap-1: calc(var(--u) * 1);
  --gap-2: calc(var(--u) * 1.5);
  --gap-3: calc(var(--u) * 2);
  --gap-4: calc(var(--u) * 3);
  --gap-phi: calc(var(--gap-3) * var(--phi));

  /* Shape */
  --radius-xl:26px;
  --radius-lg:22px;
  --ring:0 0 0 2px rgba(129,140,248,.6);

  /* Container */
  --container-w:1180px;
  --container-pad: clamp(16px,3vw,28px);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; }
.card::before{ pointer-events:none; }

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 900px at 0% 0%, rgba(244,114,182,.30) 0, transparent 55%),
    radial-gradient(900px 900px at 100% 100%, rgba(96,165,250,.25) 0, transparent 52%),
    linear-gradient(180deg,#f9fafb,#eef2ff);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ======================= CONTAINER ======================= */
.page{
  max-width: var(--container-w);
  margin: calc(var(--gap-4) * 1.2) auto var(--gap-4);
  padding-inline:
    calc(var(--container-pad) + env(safe-area-inset-left,0px))
    calc(var(--container-pad) + env(safe-area-inset-right,0px));
}

.page > .ai-hero,
.page > .section,
.page > .gallery{
  margin-inline:auto;
  max-width:var(--container-w);
}

/* ======================= SEZIONE PRINCIPALE ======================= */
.section{
  position:relative;
  border-radius:32px;
  padding: var(--gap-4) var(--gap-phi) var(--gap-4);
  backdrop-filter:blur(24px) saturate(140%);
  background:
    radial-gradient(circle at 0 0, rgba(236,72,153,.06), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(96,165,250,.06), transparent 60%),
    var(--surface);
  border:1px solid rgba(148,163,184,.25);
  box-shadow:0 28px 80px rgba(15,23,42,.12);
  margin-block:0 var(--gap-4);
}
.section::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:1px solid rgba(255,255,255,.7);
  mix-blend-mode:soft-light;
  pointer-events:none;
}

/* ======================= HEADER ======================= */
.hdr,.g-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-2); flex-wrap:wrap;
  margin:0 0 var(--gap-3) !important;
}
.kicker{
  font:600 .78rem/1 Inter;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.h1{
  margin:0;
  font-weight:700;
  font-size:clamp(1.25rem,0.9rem + 1vw,1.6rem);
  letter-spacing:.02em;
}
.hdr-extra{
  font-size:.78rem; color:var(--muted);
  padding:6px 10px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.8);
}

/* --- etichetta piccola di sezione (AI / Community / Market) --- */
.section-label{
  font:700 .74rem/1 Inter;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}

/* ======================= MOSAICO A 4 BLOCCHI ======================= */

.mosaic{
  display:flex;
  flex-direction:column;
  gap:var(--gap-phi);
}

/* A: HERO + B: AI STACK */
.mosaic-top{
  display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(0,1.4fr);
  gap:var(--gap-phi);
  align-items:start;
}

/* B: AI stack (perf + equip) */
.ai-stack{
  display:flex;
  flex-direction:column;
  gap:var(--gap-2);
}
.ai-stack-inner{
  display:flex;
  flex-direction:column;
  gap:var(--gap-3);
}

/* C / D: righe community + marketplace */
.cluster{
  display:flex;
  flex-direction:column;
  gap:var(--gap-3);
}
.cluster-grid{
  display:grid;
  gap:var(--gap-3);
}
.cluster-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cluster-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* ======================= CARD BASE · 2026 ======================= */
.card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:20px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(148,163,184,.10);
  box-shadow:
    0 0 0 .5px rgba(148,163,184,.06),
    0 1px 2px rgba(15,23,42,.03),
    0 8px 24px rgba(15,23,42,.04);
  transition:
    transform .2s cubic-bezier(.22,1,.36,1),
    box-shadow .2s ease,
    border-color .2s ease;
}
.card[data-modal]{ cursor:pointer; }
.card::before{
  content:"";
  position:absolute;
  inset:-40%;
  opacity:.05;
  background:radial-gradient(circle at 0 0, rgba(236,72,153,.4) 0, transparent 55%);
  mix-blend-mode:soft-light;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 .5px rgba(148,163,184,.10),
    0 4px 8px rgba(15,23,42,.03),
    0 20px 48px rgba(15,23,42,.07);
  border-color:rgba(148,163,184,.18);
}
.card:focus-visible{ outline:0; box-shadow:var(--ring); }

.hero.card,.perf.card,.equip.card{ background:rgba(255,255,255,.98); }

/* ======================= HERO ======================= */
.hero{
  display:grid;
  grid-template-rows:auto 1fr;
}

/* immagine */
.hero .thumb{
  position:relative;
  isolation:isolate;
  border-bottom:1px solid rgba(148,163,184,.15);
  border-radius:24px 24px 0 0;
  overflow:hidden;
}
.hero .img{
  aspect-ratio:16/9;
  width:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform .6s cubic-bezier(.16,.84,.44,1);
}
.hero:hover .img{ transform:scale(1.06); }

/* HERO – CLUSTER BOOKMARK (stella + €) */
.hero .hero-flags{
  position:absolute;
  top:16px;
  right:16px;
  z-index:3;
  display:flex;
  flex-direction:row;
  gap:10px;
}

/* “icon button” per stella e € */
.hero .ov-main,
.hero .of-main{
  position:relative;
  width:40px;
  height:40px;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(255,255,255,.96);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(15,23,42,.18);
  color:#0f172a;
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background .14s ease,
    color .14s ease;
}
.hero .ov-main-icon,
.hero .of-main-icon{
  font-size:18px;
  line-height:1;
}
.hero .ov-main:hover,
.hero .of-main:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(15,23,42,.22);
}

/* € “spento” se non ci sono offerte */
.hero .of-main[data-has-offers="false"]{
  opacity:.55;
}
/* € “acceso” se ci sono offerte */
.hero .of-main[data-has-offers="true"]{
  border-color:rgba(248,113,113,.85);
  background:linear-gradient(135deg,#f97316,#fb7185);
  color:#f9fafb;
}

/* stellina piena se almeno un interesse è attivo */
.hero .ov-acts:has(.ov-fav[data-active="true"]) .ov-main{
  border-color:rgba(129,140,248,.9);
  background:linear-gradient(135deg,#6366f1,#ec4899);
  color:#f9fafb;
}

/* pannellini sotto ai bookmark */
.hero .ov-panel,
.hero .of-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  left:auto;
  display:flex;
  gap:6px;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(226,232,240,1);
  box-shadow:0 20px 50px rgba(15,23,42,.25);
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.hero .ov-acts:hover .ov-panel,
.hero .ov-acts:focus-within .ov-panel,
.hero .of-acts:hover .of-panel,
.hero .of-acts:focus-within .of-panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* ========== PILL STANDARD (interessi + offerte) ========== */
.ov-fav,
.of-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(226,232,240,1);
  background:rgba(249,250,251,.98);
  color:#0f172a;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:
    background .14s ease,
    color .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    transform .14s ease;
}
.ov-fav-icon,
.of-btn-icon{
  font-size:14px;
  line-height:1;
}
.of-btn-plus{
  font-size:13px;
  font-weight:700;
}

/* badge + / ✓ per interessi */
.ov-fav::after{
  content:"+";
  position:absolute;
  right:-6px;
  bottom:-6px;
  width:18px;
  height:18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  background:#ffffff;
  color:#6b7280;
  border:1px solid rgba(226,232,240,1);
  box-shadow:0 0 0 1px rgba(148,163,184,.25);
  transition:
    background .14s ease,
    color .14s ease,
    border-color .14s ease,
    transform .14s ease;
}

/* hover */
.ov-fav:hover,
.of-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 30px rgba(15,23,42,.16);
}

/* palette interessi: solo l’icona */
.ov-fav[data-role="social"] .ov-fav-icon{ color:#ec4899; }
.ov-fav[data-role="chrono"] .ov-fav-icon{ color:#6366f1; }
.ov-fav[data-role="travel"] .ov-fav-icon{ color:#10b981; }

/* stato attivo interessi */
.ov-fav[data-active="true"]{
  background:linear-gradient(135deg,#6366f1,#ec4899);
  color:#f9fafb;
  border-color:transparent;
}
.ov-fav[data-active="true"] .ov-fav-icon{ color:#f9fafb; }
.ov-fav[data-active="true"]::after{
  content:"✓";
  background:#f9fafb;
  color:#6366f1;
}

/* palette offerte: leggero accento */
.of-btn[data-type="bibs"]{
  background:rgba(254,226,226,.9);
  border-color:rgba(248,113,113,.9);
}
.of-btn[data-type="stay"]{
  background:rgba(220,252,231,.9);
  border-color:rgba(34,197,94,.9);
}

/* === HERO BODY === */
.hero .body{
  padding: var(--gap-3) var(--gap-4) var(--gap-3);
}
.title{
  margin:0 0 6px;
  font-weight:800;
  font-size:clamp(1.55rem,1.1rem + 1.25vw,2.1rem);
}
.place{
  color:var(--muted);
  font-weight:500;
  font-size:.96rem;
}
.chips{
  display:flex;
  gap:var(--gap-2);
  flex-wrap:wrap;
  margin-top:var(--gap-2);
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1.1;
  padding:6px 12px;
  border-radius:999px;
  white-space:nowrap;
  background:#f3f4ff;
  border:1px solid rgba(199,210,254,1);
  font-weight:600;
  font-size:.83rem;
  color:#111827;
}
.chip.pb{
  background:#dcfce7;
  border-color:#22c55e;
}

.cta-row{
  margin-top:var(--gap-3);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:
    radial-gradient(circle at 0 0, rgba(244,114,182,.6), transparent 55%),
    linear-gradient(120deg, var(--accent), var(--accent-2));
  color:#f9fafb;
  border:0;
  border-radius:999px;
  padding:10px 18px;
  font-weight:700;
  font-size:.92rem;
  box-shadow:0 18px 40px rgba(236,72,153,.45);
  transition:transform .12s ease, box-shadow .12s ease;
}
.cta:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 52px rgba(219,39,119,.55);
}
.cta:focus-visible{ outline:0; box-shadow:var(--ring); }
.cta.alt{
  background:#ffffff;
  border:1px solid rgba(209,213,219,1);
  color:#111827;
  box-shadow:none;
}

/* ======================= PERFORMANCE (B) ======================= */
.perf{
  padding:var(--gap-3);
  display:grid;
  align-items:center;
}
.perf-wrap{
  width:100%;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:var(--gap-3);
  align-items:center;
  min-width:0;
}
.gauge{
  position:relative;
  width:56px;
  height:190px;
  border-radius:20px;
  background:linear-gradient(180deg,#f9fafb,#e5e7eb);
  border:1px solid rgba(209,213,219,1);
  overflow:hidden;
}
.gauge .fill{
  --val:.84;
  position:absolute;
  left:4px;
  right:4px;
  bottom:4px;
  border-radius:999px;
  height:calc(var(--val)*(100% - 8px));
  background:linear-gradient(180deg,#22c55e,#22d3ee);
  box-shadow:0 0 30px rgba(34,197,94,.4);
  transition:height .9s cubic-bezier(.2,.8,.2,1);
}
.g-numbers{
  position:absolute;
  right:5px;
  top:10px;
  bottom:10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#9ca3af;
  font:600 .68rem/1 Inter;
  pointer-events:none;
}
.score{ font-weight:800; font-size:2rem; line-height:1; }
.score-tag{
  margin-top:2px;
  color:#16a34a;
  font-weight:700;
  font-size:.88rem;
  letter-spacing:.02em;
}
.legend{
  color:#6b7280;
  font-weight:500;
  font-size:.85rem;
  margin-top:6px;
  line-height:1.35;
}
.more{
  margin-top:8px;
  font-weight:700;
  font-size:.86rem;
  color:var(--accent-2);
}

/* ======================= EQUIPMENT (B) ======================= */
.equip{ display:block; }
.equip .inner{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:var(--gap-3);
  padding:var(--gap-3);
  min-width:0;
}
.equip .art{
  width:92px;
  height:92px;
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(circle at 0 0, rgba(248,250,252,.9), transparent 60%),
    linear-gradient(145deg,#f9fafb,#e5e7eb);
  box-shadow:0 12px 30px rgba(15,23,42,.18);
  border:1px solid rgba(209,213,219,1);
}
.equip .art img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.equip .name{
  font-weight:700;
  font-size:.96rem;
}
.ok{
  color:#16a34a;
  font-weight:700;
  margin-left:.25rem;
  font-size:.8rem;
}
.equip .why{
  color:#6b7280;
  margin-top:4px;
  font-size:.86rem;
}
.btn-row{
  display:flex;
  gap:var(--gap-2);
  margin-top:10px;
  flex-wrap:wrap;
}
.btn{
  background:#ffffff;
  border:1px solid rgba(209,213,219,1);
  color:#111827;
  border-radius:999px;
  padding:7px 12px;
  font-weight:600;
  font-size:.83rem;
  line-height:1.1;
}
.btn:focus-visible{ outline:0; box-shadow:var(--ring); }

/* ======================= TRIBE / COMMUNITY (C) · 2026 ======================= */
.tribe{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px 18px 16px;
}
.tribe .left{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  width:100%;
}
.tag{
  display:inline-flex;
  gap:5px;
  align-items:center;
  padding:4px 10px;
  line-height:1.1;
  border-radius:999px;
  background:rgba(249,250,251,.7);
  border:1px solid rgba(148,163,184,.18);
  font-weight:600;
  font-size:.72rem;
  color:rgba(15,23,42,.48);
}
.ava-stack{ display:flex; align-items:center; }
.ava{
  width:34px;
  height:34px;
  border-radius:50%;
  overflow:hidden;
  margin-left:-7px;
  border:2.5px solid #ffffff;
  box-shadow:0 2px 8px rgba(15,23,42,.08);
  transition:transform .14s cubic-bezier(.22,1,.36,1);
}
.ava:first-child{ margin-left:0; }
.ava img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.count{
  font-weight:650;
  white-space:nowrap;
  font-size:.74rem;
  color:rgba(15,23,42,.38);
}

/* ======================= MARKETPLACE (D) · 2026 ======================= */
.bar{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:130px;
  padding:24px 16px;
  text-align:center;
}
.bar h4{
  margin:0;
  font-size:.82rem;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#0f172a;
}
.ghost{
  padding:4px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  color:rgba(15,23,42,.42);
  background:rgba(249,250,251,.65);
  font-weight:600;
  font-size:.72rem;
}
.stat{
  font-weight:850;
  white-space:nowrap;
  font-size:1.5rem;
  letter-spacing:-.04em;
  line-height:1;
  color:#0f172a;
}

/* ======================= MODAL ======================= */
.modal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background:
    radial-gradient(circle at 10% 0%, rgba(236,72,153,.25), transparent 55%),
    rgba(15,23,42,.35);
  z-index:50;
  padding: var(--gap-3);
}
.modal[open]{ display:grid; }
.dialog{
  width:min(780px,96vw);
  max-height:88vh;
  overflow:auto;
  background:#ffffff;
  border-radius:24px;
  border:1px solid rgba(209,213,219,1);
  box-shadow:0 32px 90px rgba(15,23,42,.40);
}
.d-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid rgba(229,231,235,1);
  position:sticky;
  top:0;
  background:#ffffff;
}
.d-title{ font-weight:700; font-size:.98rem; }
.d-body{
  padding: 10px 16px 16px;
  font-size:.94rem;
  line-height:1.55;
  color:var(--ink);
}
.d-close{
  margin-left:auto;
  background:#f9fafb;
  border:1px solid rgba(209,213,219,1);
  border-radius:999px;
  padding:7px 12px;
  font-weight:600;
  font-size:.84rem;
  color:#111827;
}

/* ======================= LISTE OFFERTE / FRIEND ======================= */
.offer-list, .friend-list{
  padding: 4px 0 14px;
}

/* ── Offer card (invariato) ── */
.offer-card{ margin:10px 12px; padding:12px; border-radius:18px; background:#f9fafb; border:1px solid rgba(226,232,240,1); }
.offer-owner-controls{ margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.offer-owner-btn{ border-radius:999px; border:1px solid rgba(209,213,219,1); padding:4px 8px; font-size:.7rem; font-weight:600; background:#fff; color:#111827; cursor:pointer; line-height:1.1; }
.offer-owner-btn.offer-delete{ border-color:rgba(248,113,113,.9); color:#b91c1c; }
.offer-card__head{ display:flex; gap:10px; align-items:center; }
.offer-card__img{ width:48px; height:48px; border-radius:14px; object-fit:cover; border:1px solid rgba(209,213,219,1); }
.offer-card__title{ margin:0; font-size:1rem; font-weight:700; }
.offer-card__meta{ color:#6b7280; font-size:.82rem; display:flex; gap:8px; flex-wrap:wrap; }
.pm-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap; }

/* ── Friend card ── */
.fc-card{
  position: relative;
  margin: 0;
  padding: 16px 16px 14px 22px;
  background: #fafafa;
  border-bottom: 1px solid rgba(0,0,0,.07);
  overflow: hidden;
}
@media (prefers-color-scheme: dark){
  .fc-card{ background:#1c1c1e; border-color:rgba(255,255,255,.07); }
}
.fc-card::before{
  content:''; position:absolute; left:0; top:14px; bottom:14px;
  width:3px; border-radius:2px;
}
.fc-accent--chrono::before{ background:#6366f1; }
.fc-accent--social::before{ background:#f43f5e; }
.fc-accent--travel::before{ background:#059669; }

/* Head */
.fc-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.fc-avatar{
  width:46px; height:46px; border-radius:50%;
  object-fit:cover; flex-shrink:0;
  border:1.5px solid rgba(0,0,0,.08);
  cursor:pointer;
  transition: opacity .15s;
}
.fc-avatar:hover{ opacity:.85; }
.fc-avatar-initials{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600;
  background:#ede9fe; color:#6366f1;
  cursor:pointer;
  transition: opacity .15s;
}
.fc-avatar-initials:hover{ opacity:.8; }
.fc-accent--social .fc-avatar-initials{ background:#fce7f3; color:#f43f5e; }
.fc-accent--travel .fc-avatar-initials{ background:#d1fae5; color:#059669; }
@media (prefers-color-scheme: dark){
  .fc-avatar-initials{ background:#312e81; color:#a5b4fc; }
  .fc-accent--social .fc-avatar-initials{ background:#4c0519; color:#fda4af; }
  .fc-accent--travel .fc-avatar-initials{ background:#064e3b; color:#6ee7b7; }
}
.fc-info{ flex:1; min-width:0; }
.fc-name-row{ display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.fc-name{
  font-size:15px; font-weight:600; color:#111827;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer;
}
.fc-name:hover{ text-decoration:underline; text-underline-offset:2px; }
@media (prefers-color-scheme: dark){ .fc-name{ color:#f9fafb; } }

/* Interessi */
.fc-interests-row{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.fc-interest-pill{ font-size:11px; font-weight:400; color:#9ca3af; white-space:nowrap; }
.fc-interest-pill+.fc-interest-pill::before{ content:'·'; margin-right:5px; color:#d1d5db; }
.fc-pill--current{ font-weight:600; }
.fc-accent--chrono .fc-pill--current{ color:#6366f1; }
.fc-accent--social .fc-pill--current{ color:#f43f5e; }
.fc-accent--travel .fc-pill--current{ color:#059669; }

/* Pill tempo */
.fc-time-row{
  display:flex; align-items:baseline; gap:8px;
  background:rgba(99,102,241,.05); border-radius:10px;
  padding:8px 12px; margin-bottom:10px;
}
@media (prefers-color-scheme: dark){ .fc-time-row{ background:rgba(99,102,241,.1); } }
.fc-time-label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#6366f1; flex-shrink:0; }
.fc-time-value{ font-family:'DM Mono','Roboto Mono','Courier New',monospace; font-size:20px; font-weight:600; color:#111827; letter-spacing:.3px; flex:1; }
@media (prefers-color-scheme: dark){ .fc-time-value{ color:#f9fafb; } }
.fc-cta-badge{ font-size:10px; font-weight:500; color:#6b7280; white-space:nowrap; flex-shrink:0; align-self:center; }
.fc-cta--match{ color:#059669; font-weight:600; }
.fc-cta--faster{ color:#6366f1; }
.fc-cta--slower{ color:#f43f5e; }
.fc-cta--close{ color:#6b7280; }

/* CTA statica */
.fc-static-cta{ font-size:12px; color:#9ca3af; margin-bottom:10px; }

/* Messaggio */
.fc-card .mr-user-note,
.fc-card .fc-message{
  display:block; font-size:13.5px; font-weight:500; font-style:normal;
  color:#374151; line-height:1.5;
  border-left:3px solid rgba(99,102,241,.3);
  padding:7px 10px; margin-bottom:12px; margin-top:0;
  border-radius:0 6px 6px 0;
  background:rgba(99,102,241,.04);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fc-accent--social .mr-user-note,.fc-accent--social .fc-message{ border-color:rgba(244,63,94,.3); background:rgba(244,63,94,.04); }
.fc-accent--travel .mr-user-note,.fc-accent--travel .fc-message{ border-color:rgba(5,150,105,.3); background:rgba(5,150,105,.04); }
@media (prefers-color-scheme: dark){
  .fc-card .mr-user-note,.fc-card .fc-message{ color:#d1d5db; background:rgba(99,102,241,.06); border-color:rgba(99,102,241,.3); }
}

/* Azioni */
.fc-actions{ display:flex; align-items:center; gap:8px; }
.fc-chat-btn{ flex:1; font-size:14px; padding:10px 16px; border-radius:12px; font-weight:500; text-align:center; }
/* "Riprendi chat" — stesso gradiente di Scrivi, leggermente trasparente */
.fc-chat-btn--cont{
  background: linear-gradient(120deg, var(--accent), var(--accent-2)) !important;
  color: #f9fafb !important;
  border: 0 !important;
  opacity: 0.82;
}
.fc-chat-btn--cont:hover{ opacity:1; }
.fc-like-btn{ width:38px; height:38px; display:inline-grid; place-items:center; border-radius:12px; font-size:16px; flex-shrink:0; }
.fc-like-btn[aria-pressed="true"],.fc-like-btn.active{ color:#f43f5e; border-color:rgba(244,63,94,.3); background:rgba(244,63,94,.06); }
.fc-like-count{ font-size:13px; font-weight:600; min-width:14px; flex-shrink:0; color:#6b7280; }

/* Self-actions iniettate da ensureSelfActions */
.fc-card .mr-self-actions-v2{ display:flex; flex-direction:row !important; flex-wrap:wrap; gap:8px; margin:12px 0 0; align-items:center; }
.fc-card .mr-self-btn-v2{ border-radius:12px !important; padding:10px 16px !important; min-height:40px !important; font-size:14px !important; font-weight:500 !important; white-space:normal !important; }
.fc-card .mr-self-edit-v2.mr-cta-write{ background:linear-gradient(120deg,var(--accent),var(--accent-2)) !important; color:#f9fafb !important; border:0 !important; box-shadow:none !important; transform:none !important; flex:1; border-radius:12px !important; }
.fc-card .mr-self-edit-v2.mr-cta-write:hover{ transform:none !important; }
.fc-card .mr-self-edit-v2:not(.mr-cta-write){ background:#f3f4f6 !important; color:#374151 !important; border:0.5px solid rgba(0,0,0,.08) !important; }
.fc-card .mr-self-del-v2{ background:transparent !important; color:#9ca3af !important; border:0.5px solid rgba(0,0,0,.06) !important; font-size:13px !important; padding:8px 12px !important; }
.fc-card .mr-self-remove-interest-v2{ width:100%; text-align:center; font-size:12px !important; color:#9ca3af !important; padding:4px !important; }
.fc-card:has(.mr-self-actions-v2) .fc-actions{ display:none; }

/* Bottoni generici */
.pm-btn{ background:#ffffff; border:1px solid rgba(209,213,219,1); color:#111827; border-radius:10px; padding:6px 10px; cursor:pointer; font-weight:600; font-size:.82rem; }
.pm-btn--pri{ background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:#f9fafb; border:0; }
.pm-heart{ width:34px; height:34px; display:inline-grid; place-items:center; }
.pm-heart.active{ outline:2px solid rgba(129,140,248,.8); background:rgba(238,242,255,1); }
.pm-fav-count,.fr-fav{ min-width:18px; text-align:center; color:var(--accent-2); font-weight:700; font-size:.86rem; }
.rm-empty{ padding:16px; text-align:center; color:#6b7280; }
.list-caption{ padding:10px 14px; color:#4b5563; border-bottom:1px solid rgba(229,231,235,1); }

/* ======================= STATUS BAR ======================= */
#statusBar{
  max-width: var(--container-w);
  margin: -8px auto var(--gap-3);
  padding:8px 12px;
  border-radius:12px;
  background:#eef2ff;
  border:1px solid rgba(199,210,254,1);
  color:#111827;
  font:600 13px/1.3 Inter;
  display:none;
}
#statusBar.error{
  display:block;
  border-color:#fca5a5;
  color:#7f1d1d;
  background:#fef2f2;
}
#statusBar.warn{
  display:block;
  border-color:#fbbf24;
  color:#92400e;
  background:#fffbeb;
}

/* ======================= GALLERY ======================= */
.gallery{
  max-width: var(--container-w);
  margin: 0 auto var(--gap-4);
}
.g-head{ margin: 0 0 var(--gap-3) !important; }
.g-aux{
  font-size:.78rem;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.9);
}
.g-row{
  display:grid;
  gap:var(--gap-3);
  grid-auto-flow:column;
  grid-auto-columns:minmax(260px, 1fr);
  overflow-x:auto;
  padding-bottom:10px;
  scroll-snap-type:x mandatory;
  scrollbar-gutter: stable both-edges;
}
.g-card{
  scroll-snap-align:start;
  cursor:pointer;
  user-select:none;
  display:grid;
  grid-template-rows:140px auto;
  border-radius:20px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid rgba(226,232,240,1);
  box-shadow:0 16px 36px rgba(15,23,42,.10);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.g-card:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 44px rgba(15,23,42,.16);
  border-color:rgba(129,140,248,.7);
}
.g-img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-bottom:1px solid rgba(226,232,240,1);
}
.g-body{ padding:10px 12px 12px; }
.g-title{
  margin:0 0 2px;
  font-weight:800;
  font-size:1rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.g-meta{
  color:#6b7280;
  font-size:.82rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.g-chip{
  display:inline-block;
  margin-top:6px;
  font-size:.72rem;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(209,213,219,1);
  color:#4b5563;
}

/* ======================= AI HERO ======================= */
.ai-hero{ margin: var(--gap-3) auto var(--gap-4); }
.ai-hero-inner{
  border-radius:32px;
  padding: var(--gap-4);
  backdrop-filter: blur(28px) saturate(150%);
  background:
    radial-gradient(circle at 0 0, rgba(236,72,153,.16), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(96,165,250,.18), transparent 60%),
    #ffffff;
  border:1px solid rgba(221,231,251,1);
  box-shadow: 0 26px 68px rgba(15,23,42,.16);
}
.ai-hero-title{
  font-size: clamp(1.06rem, .9rem + .4vw, 1.28rem);
  font-weight:800;
  margin:0 0 6px;
}
.ai-hero-sub{
  font-size:.92rem;
  color:var(--muted);
  margin:0 0 12px;
}
.ai-hero-form{
  display:flex;
  gap:10px;
  align-items:center;
  margin:0 0 10px;
  flex-wrap:wrap;
}
.ai-hero-input{
  flex:1;
  min-width:240px;
  padding:13px 16px;
  border-radius:999px;
  border:1px solid rgba(209,213,219,1);
  background:#f9fafb;
  color:#111827;
  font-size:.96rem;
}
.ai-hero-input::placeholder{ color:#9ca3af; }
.ai-hero-btn{
  border-radius:999px;
  padding:11px 18px;
  border:0;
  font-size:.92rem;
  font-weight:700;
  background:
    radial-gradient(circle at 0 0, rgba(244,114,182,.6), transparent 55%),
    linear-gradient(120deg, var(--accent), var(--accent-2));
  color:#f9fafb;
  box-shadow:0 16px 34px rgba(236,72,153,.45);
  cursor:pointer;
  white-space:nowrap;
}
.ai-hero-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}
.ai-hero-suggestion{
  border-radius:999px;
  padding:7px 12px;
  border:1px dashed rgba(209,213,219,1);
  background:#f9fafb;
  color:#4b5563;
  font-size:.8rem;
  cursor:pointer;
  white-space:nowrap;
}
.ai-hero-suggestion span{ opacity:.9; }
.ai-hero-results{
  border-top:1px solid rgba(226,232,240,1);
  margin-top:10px;
  padding-top:8px;
  display:grid;
  gap:8px;
}
.ai-hero-results .offer-card{ margin:0; }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 960px){
  .mosaic-top{
    grid-template-columns:1fr;
  }
  .cluster-grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .page{ margin: var(--gap-4) auto calc(var(--gap-4) * 1.2); }
  .ai-hero-inner{ padding: var(--gap-3); }
  .hero .body{ padding: var(--gap-3); }
  .title{ font-size: clamp(1.28rem, 1rem + 3vw, 1.6rem); }
  .g-numbers{ display:none; }
  .hero .hero-flags{
    top:10px;
    right:10px;
    gap:8px;
  }
  .cluster-grid-3,
  .cluster-grid-2{
    grid-template-columns:1fr;
  }
}

/* ======================= ACCESSIBILITÀ ======================= */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* Reset titoli */
h1,h2,h3,h4,h5,h6{
  font:inherit;
  margin:0;
}

/* Avatar "TU" negli stack */
.ava.you{
  width:30px;
  height:30px;
  border-radius:50%;
  background: linear-gradient(135deg,#22d3ee,#6366f1);
  display:grid;
  place-items:center;
  color:#0b1120;
  font:700 .68rem/1 Inter;
  border:2px solid #ffffff;
  box-shadow:0 4px 14px rgba(15,23,42,.18);
}

/* ======================= SHOE COMPARISON MODAL ======================= */

.shoe-modal{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Righe header: scarpa consigliata / tua scarpa */
.shoe-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-radius:999px;
  background:#f9fafb;
  border:1px solid rgba(226,232,240,1);
  font-size:.86rem;
}
.shoe-row-label{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
  color:#9ca3af;
}
.shoe-row-name{
  font-weight:600;
  color:#111827;
  text-align:right;
}
.shoe-row--highlight{
  background:
    radial-gradient(circle at 0 0, rgba(244,114,182,.18), transparent 55%),
    #ffffff;
  border-color:rgba(244,114,182,.6);
}

/* Sezioni principali */
.shoe-efficiency,
.shoe-flow{
  border-radius:20px;
  background:#f9fafb;
  border:1px solid rgba(226,232,240,1);
  padding:16px 18px 14px;
}

.shoe-section-head{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:10px;
}
.shoe-section-title{
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#4b5563;
}
.shoe-section-sub{
  font-size:.8rem;
  color:#9ca3af;
}

/* === Barra efficienza scarpa === */
.shoe-bar-wrapper{
  margin-top:6px;
}
.shoe-bar-track{
  position:relative;
  height:14px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(209,213,219,1);
  padding-inline:10px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.shoe-bar-gradient{
  position:absolute;
  inset:3px 12px;
  border-radius:999px;
  background:linear-gradient(90deg,#f97373,#facc15,#22c55e);
  opacity:.9;
}
.shoe-bar-thumb{
  position:absolute;
  top:50%;
  left:var(--shoe-pos,50%);
  transform:translate(-50%,-50%);
  width:28px;
  height:28px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 6px 16px rgba(15,23,42,.22);
  border:1px solid rgba(209,213,219,1);
  display:grid;
  place-items:center;
}
.shoe-thumb-icon{
  font-size:15px;
}

/* etichette Sconsigliata / Accettabile / Ideale */
.shoe-bar-labels{
  display:flex;
  justify-content:space-between;
  font-size:.72rem;
  font-weight:600;
  color:#9ca3af;
  text-transform:uppercase;
  margin:8px 3px 0;
}

/* legenda scarpe */
.shoe-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:12px;
  font-size:.8rem;
}
.shoe-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
}
.shoe-dot{
  width:8px;
  height:8px;
  border-radius:999px;
}
.shoe-dot--user{
  background:#0ea5e9;
}
.shoe-dot--rec{
  background:#ec4899;
}

/* sintesi (Δ s/km ecc.) */
.shoe-summary{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:4px 8px;
  align-items:baseline;
  font-size:.82rem;
}
.shoe-summary-main{
  font-weight:800;
  font-size:.96rem;
  color:#111827;
}
.shoe-summary-extra{
  color:#6b7280;
}

/* === Flow previsione tempo === */

.shoe-flow-steps{
  margin-top:4px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.shoe-step{
  flex:1 1 90px;
  min-width:0;
  border-radius:14px;
  background:#ffffff;
  border:1px solid rgba(226,232,240,1);
  padding:8px 10px 9px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.shoe-step-head{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  color:#6b7280;
}
.shoe-step-num{
  width:18px;
  height:18px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:.7rem;
  font-weight:700;
  background:#eef2ff;
  color:#4f46e5;
}
.shoe-step-label{
  font-weight:600;
}
.shoe-step-time{
  font-weight:700;
  font-size:.9rem;
  color:#111827;
}
.shoe-step-delta{
  font-size:.78rem;
  color:#6b7280;
}

/* legenda flow */
.shoe-flow-legend{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  font-size:.74rem;
  color:#6b7280;
}
.shoe-flow-legend-item{
  display:flex;
  align-items:center;
  gap:4px;
}
.shoe-flow-dot{
  width:8px;
  height:8px;
  border-radius:999px;
}
.shoe-flow-dot--base{ background:#818cf8; }
.shoe-flow-dot--elev{ background:#f97316; }
.shoe-flow-dot--meteo{ background:#22c55e; }
.shoe-flow-dot--shoe{ background:#ec4899; }
.shoe-flow-dot--final{ background:#0ea5e9; }

/* CTA finale (es. Vedi laps) */
.shoe-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}
.shoe-cta{
  border-radius:999px;
  border:1px solid rgba(209,213,219,1);
  background:#ffffff;
  padding:8px 14px;
  font-size:.82rem;
  font-weight:600;
  color:#111827;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.12);
}
.shoe-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(15,23,42,.16);
}

/* mobile */
@media (max-width:640px){
  .shoe-flow-steps{
    flex-direction:column;
  }
}

/* ======================= TOPBAR / ACCOUNT ======================= */
.topbar{
  max-width: var(--container-w);
  margin: 10px auto 0;
  padding:
    0
    calc(var(--container-pad) + env(safe-area-inset-right,0px));
  padding-left: calc(var(--container-pad) + env(safe-area-inset-left,0px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-2);
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand{
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--muted);
}
.env-pill{
  font-size:.72rem;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.9);
  color:#4b5563;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:8px;
}
.topbar-btn{
  border-radius:999px;
  border:1px solid rgba(209,213,219,1);
  padding:6px 12px;
  font-size:.82rem;
  font-weight:600;
  background:#ffffff;
  color:#111827;
  cursor:pointer;
}
.topbar-btn--primary{
  background:
    radial-gradient(circle at 0 0, rgba(244,114,182,.6), transparent 55%),
    linear-gradient(120deg, var(--accent), var(--accent-2));
  border:0;
  color:#f9fafb;
  box-shadow:0 10px 26px rgba(236,72,153,.4);
}
.topbar-btn--ghost{
  background:transparent;
  border-color:transparent;
  color:#6b7280;
  padding-inline:6px;
}
.user-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(209,213,219,.8);
}
.user-chip-avatar{
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:.78rem;
  font-weight:700;
  background:linear-gradient(135deg,#22d3ee,#6366f1);
  color:#0b1120;
}
.user-chip-name{
  font-size:.82rem;
  font-weight:600;
}

/* ======================= NOTIFICHE ======================= */
.topbar-notif-btn{
  position:relative;
  border-radius:999px;
  border:1px solid rgba(209,213,219,1);
  padding:6px 10px;
  font-size:.9rem;
  background:#ffffff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.topbar-notif-icon{
  font-size:1rem;
}
.topbar-notif-dot{
  position:absolute;
  top:4px;
  right:4px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ef4444;
}

/* Sidebar notifiche */
.notif-sidebar{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
  z-index:60;
}
.notif-sidebar[aria-hidden="true"]{
  visibility:hidden;
}
.notif-sidebar[aria-hidden="false"]{
  visibility:visible;
  pointer-events:auto;
}
.notif-overlay{
  flex:1;
  background:rgba(15,23,42,.35);
}
.notif-panel{
  width:min(380px, 100vw);
  max-width:380px;
  background:#ffffff;
  border-left:1px solid rgba(209,213,219,1);
  box-shadow:-20px 0 60px rgba(15,23,42,.35);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .18s ease-out;
}
.notif-sidebar[aria-hidden="false"] .notif-panel{
  transform:translateX(0);
}
.notif-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  border-bottom:1px solid rgba(229,231,235,1);
}
.notif-title{
  font-size:.95rem;
  font-weight:700;
}
.notif-close{
  border-radius:999px;
  border:1px solid rgba(209,213,219,1);
  padding:4px 10px;
  font-size:.8rem;
  background:#f9fafb;
  cursor:pointer;
}
.notif-list{
  padding:8px 0 10px;
  margin:0;
  list-style:none;
  overflow-y:auto;
  max-height:calc(100vh - 50px);
}
.notif-item{
  padding:10px 14px;
  border-bottom:1px solid rgba(243,244,246,1);
  font-size:.86rem;
  cursor:pointer;
}
.notif-item.unread{
  background:#eef2ff;
}
.notif-item-title{
  font-weight:600;
  margin-bottom:2px;
}
.notif-item-meta{
  font-size:.76rem;
  color:#6b7280;
}
.notif-empty{
  padding:16px;
  font-size:.86rem;
  color:#6b7280;
}


/* mobile */
@media (max-width:640px){
  .topbar{
    flex-wrap:wrap;
    row-gap:6px;
    padding-inline:
      calc(var(--container-pad) + env(safe-area-inset-left,0px))
      calc(var(--container-pad) + env(safe-area-inset-right,0px));
  }
  .env-pill{
    display:none;
  }
}

/* ======================= AUTH MODAL (LOGIN / REGISTER) ======================= */
.auth-block{
  max-width:380px;
}
.auth-title{
  font-weight:700;
  font-size:1rem;
  margin:0 0 4px;
}
.auth-sub{
  font-size:.86rem;
  color:var(--muted);
  margin:0 0 10px;
}
.auth-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.auth-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:.8rem;
}
.auth-field label{
  font-weight:600;
  color:var(--muted);
}
.auth-input{
  border-radius:999px;
  border:1px solid rgba(209,213,219,1);
  padding:8px 12px;
  font-size:.9rem;
  background:#f9fafb;
}
.auth-submit{
  margin-top:4px;
  border-radius:999px;
  border:0;
  padding:9px 14px;
  font-size:.9rem;
  font-weight:700;
  background:
    radial-gradient(circle at 0 0, rgba(244,114,182,.6), transparent 55%),
    linear-gradient(120deg, var(--accent), var(--accent-2));
  color:#f9fafb;
  cursor:pointer;
}
.auth-switch{
  margin-top:2px;
  border:0;
  background:none;
  color:var(--accent-2);
  font-size:.8rem;
  font-weight:600;
  text-decoration:underline;
  cursor:pointer;
  padding:4px 0;
  align-self:flex-start;
}
.form-error{
  margin-top:4px;
  font-size:.8rem;
  color:#b91c1c;
}



/* ============================
   TOPBAR — layout base
   ============================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  height: 56px;
  background: rgba(15, 23, 42, 0.94); /* slate-900 */
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.35); /* slate-400/60 */
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Brand + pill ambiente */

.topbar .brand {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #e5e7eb; /* slate-200 */
}

.env-pill {
  font-size: 0.70rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  color: #9ca3af;           /* gray-400 */
  background: rgba(15, 23, 42, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

/* ============================
   Campanella notifiche
   ============================ */

.bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: radial-gradient(circle at 0 0, rgba(248,250,252,0.09), transparent),
              rgba(15, 23, 42, 0.96);
  color: #e5e7eb;
  cursor: pointer;
  padding: 0;
  transition:
    background-color 0.12s ease-out,
    border-color 0.12s ease-out,
    transform 0.08s ease-out,
    box-shadow 0.12s ease-out;
}

.bell-btn:hover {
  border-color: rgba(250, 250, 250, 0.55);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.3),
              0 12px 30px rgba(15, 23, 42, 0.9);
  transform: translateY(-1px);
}

.bell-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.9);
}

/* Stato "aperto" (sidebar notifiche visibile) */
.bell-btn[aria-expanded="true"] {
  border-color: rgba(129, 230, 217, 0.9);       /* teal highlight */
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.7);
  background: radial-gradient(circle at 0 0, rgba(34,211,238,0.2), transparent),
              rgba(15, 23, 42, 0.98);
  color: #f9fafb;
}

/* Icona campanella */
.bell-btn .fa-solid {
  font-size: 0.98rem;
}

/* Badge numerico notifiche */
#bellBadge {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: radial-gradient(circle at 0 0, #f97316, #ea580c);
  color: #fef2f2;
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.95),
    0 6px 18px rgba(248, 113, 113, 0.45);
}

/* Puntino solo presenza notifiche (quando non vuoi mostrare il numero) */
#bellBadge[data-dot="true"] {
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding: 0;
}

/* ============================
   User bar (login / avatar)
   ============================ */

#userBar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Bottoni login / registrati */

.topbar-auth-btn {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  font-size: 0.76rem;
  font-weight: 500;
  padding: 0.30rem 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  transition:
    background-color 0.12s ease-out,
    border-color 0.12s ease-out,
    box-shadow 0.12s ease-out,
    transform 0.08s ease-out;
}

.topbar-auth-btn.primary {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: rgba(22, 163, 74, 0.95);
  color: #022c22;
}

.topbar-auth-btn:hover {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.8);
  transform: translateY(-0.5px);
}

.topbar-auth-btn.primary:hover {
  filter: brightness(1.05);
}

/* Pill utente loggato (avatar + nome) */

.user-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem 0.25rem 0.30rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: radial-gradient(circle at 0 0, rgba(148,163,184,0.35), rgba(30,64,175,0.5));
  color: #e5e7eb;
  cursor: pointer;
  min-height: 34px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.85);
  transition:
    box-shadow 0.12s ease-out,
    transform 0.08s ease-out,
    border-color 0.12s ease-out;
}

.user-pill:hover {
  border-color: rgba(248, 250, 252, 0.8);
  transform: translateY(-1px);
}

.user-pill-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  background: #020617;
  flex-shrink: 0;
}

.user-pill-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-pill-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 160px;
}

.user-pill-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f9fafb;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.user-pill-meta {
  font-size: 0.68rem;
  color: #9ca3af;
}

.user-pill-chevron {
  font-size: 0.65rem;
  opacity: 0.8;
}

/* ============================
   User menu dropdown
   ============================ */

.user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 220px;
  background: rgba(15, 23, 42, 0.98);
  border-radius: 0.75rem;
  border: 1px solid rgba(51, 65, 85, 0.9);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(15, 23, 42, 1);
  padding: 0.3rem;
  list-style: none;
  margin: 0;
  z-index: 50;
}

.user-menu[hidden] {
  display: none;
}

.user-menu-item {
  border-radius: 0.55rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.78rem;
  color: #e5e7eb;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  white-space: nowrap;
}

.user-menu-item span.user-menu-icon {
  font-size: 0.9rem;
}

.user-menu-item:hover {
  background: radial-gradient(circle at 0 0, rgba(59,130,246,0.25), rgba(15,23,42,0.98));
}

.user-menu-item.user-menu-danger {
  color: #fecaca;
}

.user-menu-item.user-menu-danger:hover {
  background: radial-gradient(circle at 0 0, rgba(248,113,113,0.2), rgba(15,23,42,0.98));
}

/* Separatore (es. tra info e logout) */
.user-menu-separator {
  height: 1px;
  margin: 0.25rem 0.2rem;
  background: linear-gradient(to right, transparent, rgba(51, 65, 85, 0.9), transparent);
}

/* ============================
   Accessibilità — focus
   ============================ */

.topbar button:focus-visible,
.topbar [role="button"]:focus-visible {
  outline: 2px solid #38bdf8;         /* sky-400 */
  outline-offset: 2px;
}


/* ============================
   TOPBAR — layout base
   ============================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  height: 56px;
  background: rgba(15, 23, 42, 0.96); /* sfondo scuro */
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar .brand {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #e5e7eb;
}

.env-pill {
  font-size: 0.70rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: #9ca3af;
  background: rgba(15, 23, 42, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

/* ============================
   Campanella notifiche
   ============================ */

.bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background:
    radial-gradient(circle at 0 0, rgba(248, 250, 252, 0.09), transparent),
    rgba(15, 23, 42, 0.98);
  color: #e5e7eb;
  cursor: pointer;
  padding: 0;
  transition:
    background-color 0.12s ease-out,
    border-color 0.12s ease-out,
    transform 0.08s ease-out,
    box-shadow 0.12s ease-out;
}

.bell-btn .fa-solid {
  font-size: 0.95rem;
}

.bell-btn:hover {
  border-color: rgba(248, 250, 252, 0.72);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35),
              0 10px 26px rgba(15, 23, 42, 0.95);
  transform: translateY(-1px);
}

.bell-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.9);
}

/* stato “aperto”: aria-expanded="true" quando sidebar notifiche è visibile */
.bell-btn[aria-expanded="true"] {
  border-color: rgba(45, 212, 191, 0.95);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.7);
  background:
    radial-gradient(circle at 0 0, rgba(45, 212, 191, 0.22), transparent),
    rgba(15, 23, 42, 0.98);
  color: #f9fafb;
}

/* Badge conteggio notifiche */
#bellBadge {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: radial-gradient(circle at 0 0, #f97316, #ea580c);
  color: #fef2f2;
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.95),
    0 6px 18px rgba(248, 113, 113, 0.45);
}

/* Variante “dot” (se vuoi solo il pallino) */
#bellBadge[data-dot="true"] {
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding: 0;
}

/* ============================
   UserBar — area utente
   ============================ */

#userBar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Bottoni di login / registrazione base (se topbar1.js crea <button> semplici) */

#userBar button {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  font-size: 0.76rem;
  font-weight: 500;
  padding: 0.32rem 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  transition:
    background-color 0.12s ease-out,
    border-color 0.12s ease-out,
    box-shadow 0.12s ease-out,
    transform 0.08s ease-out;
}

#userBar button:hover {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.85);
  transform: translateY(-0.5px);
}

/* Se il JS mette una classe .primary per il bottone “Registrati” o simile */
#userBar .primary {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: rgba(22, 163, 74, 0.98);
  color: #022c22;
}

#userBar .primary:hover {
  filter: brightness(1.06);
}

/* ============================
   Pill utente loggato (se la usi)
   ============================ */

.user-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem 0.25rem 0.30rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.85);
  background: radial-gradient(circle at 0 0, rgba(148, 163, 184, 0.3), rgba(30, 64, 175, 0.5));
  color: #e5e7eb;
  cursor: pointer;
  min-height: 34px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.9);
  transition:
    box-shadow 0.12s ease-out,
    transform 0.08s ease-out,
    border-color 0.12s ease-out;
}

.user-pill:hover {
  border-color: rgba(248, 250, 252, 0.85);
  transform: translateY(-1px);
}

.user-pill-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  background: #020617;
  flex-shrink: 0;
}

.user-pill-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-pill-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 150px;
}

.user-pill-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f9fafb;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.user-pill-meta {
  font-size: 0.68rem;
  color: #9ca3af;
}

.user-pill-chevron {
  font-size: 0.65rem;
  opacity: 0.85;
}

/* ============================
   Focus accessibile
   ============================ */

.topbar button:focus-visible,
.topbar [role="button"]:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}
/* ======================= NOTIFICHE — SIDEBAR NUOVA ======================= */

.notif-sidebar{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(380px, 100vw);
  z-index:60;
  background:
    radial-gradient(circle at 0 0, rgba(236,72,153,.10), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(96,165,250,.12), transparent 60%),
    var(--surface);
  border-left:1px solid rgba(148,163,184,.45);
  box-shadow:-26px 0 70px rgba(15,23,42,.45);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  opacity:0;
  pointer-events:none;
  transition:
    transform .22s cubic-bezier(.16,.84,.44,1),
    opacity .16s ease-out;
}

/* stato aperto: usiamo sia .open che aria-hidden="false" */
.notif-sidebar.open,
.notif-sidebar[aria-hidden="false"]{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}

/* header in alto: titolo + “segna tutte come lette” */
.nt-header{
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 14px;
  background:
    linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.94));
  border-bottom:1px solid rgba(226,232,240,1);
}
.nt-header h3{
  margin:0;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#111827;
}

/* bottone piccolo riutilizzabile */
.mini-btn{
  border-radius:999px;
  border:1px solid rgba(209,213,219,1);
  padding:6px 10px;
  font-size:.78rem;
  font-weight:600;
  background:#ffffff;
  color:#111827;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:
    background-color .12s ease-out,
    box-shadow .12s ease-out,
    transform .08s ease-out,
    border-color .12s ease-out;
}
.mini-btn:hover{
  background:#f9fafb;
  box-shadow:0 8px 20px rgba(15,23,42,.10);
  transform:translateY(-1px);
}
.g-card{
  scroll-snap-align:start;
  cursor:pointer;
  user-select:none;
  display:grid;
  grid-template-rows:140px auto;
  border-radius:20px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid rgba(226,232,240,1);
  box-shadow:0 16px 36px rgba(15,23,42,.10);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;

  /* 👇 fondamentale per far funzionare l'ellipsis */
  min-width: 0;
}

.g-body{
  padding:10px 12px 12px;
  min-width: 0; /* per sicurezza */
}


/* tabs Tutte / Like / Chat */
.nt-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px 6px;
  border-bottom:1px solid rgba(226,232,240,1);
  overflow-x:auto;
}
.nt-tabs .tab{
  border-radius:999px;
  border:1px solid rgba(209,213,219,1);
  padding:6px 10px;
  font-size:.8rem;
  font-weight:600;
  background:#f9fafb;
  color:#4b5563;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  transition:
    background .14s ease-out,
    color .14s ease-out,
    border-color .14s ease-out,
    box-shadow .14s ease-out;
}
.nt-tabs .tab[data-active="true"]{
  background:
    radial-gradient(circle at 0 0, rgba(244,114,182,.5), transparent 55%),
    linear-gradient(120deg, var(--accent), var(--accent-2));
  border-color:transparent;
  color:#f9fafb;
  box-shadow:0 12px 28px rgba(236,72,153,.4);
}

/* numerini nei tab */
.nt-badge{
  min-width:18px;
  height:18px;
  border-radius:999px;
  padding:0 6px;
  font-size:.72rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.08);
  color:inherit;
}
.nt-tabs .tab[data-active="true"] .nt-badge{
  background:rgba(15,23,42,.18);
}

/* lista notifiche */
.nt-list{
  flex:1;
  padding:8px 10px 10px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* stato “vuoto” */
.nt-empty{
  padding:14px 14px 16px;
  font-size:.86rem;
  color:var(--muted);
  text-align:center;
}

/* singola notifica */
.nt-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:flex-start;
  padding:9px 10px;
  border-radius:18px;
  background:var(--surface-soft);
  border:1px solid rgba(226,232,240,1);
  cursor:pointer;
  transition:
    background .12s ease-out,
    box-shadow .14s ease-out,
    border-color .14s ease-out,
    transform .08s ease-out;
}
.nt-item:hover{
  background:#ffffff;
  box-shadow:0 12px 28px rgba(15,23,42,.12);
  transform:translateY(-1px);
}
.nt-item.unread{
  background:#eef2ff;
  border-color:rgba(129,140,248,.85);
  box-shadow:0 14px 32px rgba(129,140,248,.28);
}

/* avatar a sinistra */
.nt-avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  object-fit:cover;
  flex-shrink:0;
  border:1px solid rgba(209,213,219,1);
  box-shadow:0 6px 18px rgba(15,23,42,.22);
  background:
    radial-gradient(circle at 0 0, rgba(248,250,252,.95), transparent 60%),
    linear-gradient(145deg,#e5e7eb,#f9fafb);
}

/* testo notifica */
.nt-text{
  font-size:.86rem;
  font-weight:500;
  color:var(--ink);
}
.nt-sub{
  margin-top:2px;
  font-size:.76rem;
  color:var(--muted);
}

/* colonna destra: icona / badge */
.nt-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.nt-icon{
  width:26px;
  height:26px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#f9fafb;
  border:1px solid rgba(226,232,240,1);
  color:#f97373;
  font-size:.8rem;
}
.nt-item.unread .nt-icon{
  background:rgba(238,242,255,1);
  border-color:rgba(129,140,248,.85);
  color:#6366f1;
}

/* CTA "Avvia una conversazione" dentro la notifica */
.nt-cta{
  margin-top:6px;
}

/* bottone “Carica altre” in fondo */
.nt-load{
  margin:4px auto 10px;
  border-radius:999px;
  border:1px solid rgba(209,213,219,1);
  padding:7px 14px;
  font-size:.8rem;
  font-weight:600;
  background:#ffffff;
  color:#111827;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:
    background-color .12s ease-out,
    box-shadow .12s ease-out,
    transform .08s ease-out;
}
.nt-load:hover:not(:disabled){
  background:#f9fafb;
  box-shadow:0 10px 26px rgba(15,23,42,.14);
  transform:translateY(-1px);
}
.nt-load:disabled{
  opacity:.6;
  cursor:default;
  box-shadow:none;
}

/* mobile: sidebar a tutta larghezza */
@media (max-width:640px){
  .notif-sidebar{
    width:100vw;
    border-radius:0;
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
}

.g-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 6px 0 2px;

  /* taglio titolo su una sola riga */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
const s = document.createElement('style');
s.textContent = `
.g-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
}
.g-title{
  margin: 0 0 2px;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: block;
}
.g-meta{
  font-size: .82rem;
  color: #6b7280;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.g-chip{
  display:inline-block;
  max-width:100%;
  white-space: normal;
}
.g-highlights{
  margin-top: 2px;
  font-size: .8rem;
  line-height: 1.35;
  color: #4b5563;
  max-width:100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display:block;
  word-break: break-word;
}
`;
document.head.appendChild(s);


    .auth-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
  
    .auth-input-wrap .auth-input {
      width: 100%;
      padding-right: 2.5rem; /* spazio per l’icona */
    }
  
    .auth-toggle-pw {
      position: absolute;
      right: 0.75rem;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0.9rem;
      color: #6b7280;
    }
  
    .auth-toggle-pw[aria-pressed="true"] {
      color: #111827;
    }

    .g-thumb {
  position: relative;
  overflow: hidden;
}

/* pillola scura sull'immagine */
.g-rating {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(6px);
}

/* UNA sola stella che si riempie da sinistra a destra */
.g-rating-star {
  font-size: 13px;
  line-height: 1;
  display: inline-block;
  background: linear-gradient(
    90deg,
    #facc15 var(--rating-pct, 0%),
    #4b5563 var(--rating-pct, 0%)
  );
  -webkit-background-clip: text;
  color: transparent;
}

/* numerino tipo 4.7 */
.g-rating-num {
  font-size: 11px;
  color: #e5e7eb;
  opacity: 0.9;
}

.g-highlights{
  margin-top: 4px;
  font-size: .72rem;
  color: #4b5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* TITOLO: 1 riga, tagliato con … dopo ~26 caratteri */
.g-body .g-title{
  display:block;
  margin: 0 0 2px;
  font-weight:800;
  font-size:1rem;
  line-height:1.25;

  /* ellipsis */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* limite “a caratteri” per forzare i puntini */
  max-width: 26ch;
}

/* VIBES: sempre tutto visibile */
.g-body .g-highlights{
  margin-top: 2px;
  font-size: .78rem;
  line-height: 1.35;
  color: #4b5563;
  max-width: 100%;
  display: block;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
}

/* ===================================================================
   INDEX INLINE MIGRATION (moved from <style> in indexbeta2b.html)
   - Wizard 4 tempi + scarpe
   - Super suggerimento AI (chip “special”)
   - Futuristic loader (run-loader)
   - Fix: Laps table (modal chiaro) + scrollbar invisibili
   =================================================================== */

/* -----------------------------------------------
   Widget 4 tempi + wizard (overlay full-screen)
   ----------------------------------------------- */
#wizOverlay.overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at top,
    rgba(15,23,42,0.88),
    rgba(15,23,42,1));
  backdrop-filter:blur(10px);
  z-index:9999;
}
#wizOverlay.overlay.active{ display:flex; }

/* Card centrale (vibe run-loader) */
#wizOverlay .wiz{
  background:linear-gradient(135deg,rgba(15,23,42,0.96),rgba(17,24,39,0.98));
  border-radius:18px;
  border:1px solid rgba(96,165,250,0.35);
  padding:18px 20px 16px;
  width:min(480px, 100% - 32px);
  box-shadow:0 24px 60px rgba(15,23,42,0.9);
  color:#e5e7eb;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
#wizOverlay .wiz h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:600;
}
#wizOverlay .wiz p{
  margin:0 0 10px;
  font-size:13px;
  color:#cbd5f5;
}
#wizOverlay .wiz .wiz-limit-note{
  margin:0 0 12px;
  font-size:11px;
  color:#fed7aa;
}
#wizOverlay .wiz .wiz-limit-note strong{
  font-weight:600;
  color:#fed7aa;
}

/* campi wizard + chrono */
.chrono-card .field,
#wizOverlay .field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}

.chrono-card label,
#wizOverlay label{
  font-size:12px;
  color:var(--muted,#9ca3af);
}

.chrono-card .row-split,
#wizOverlay .row-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.chrono-card input[type="text"],
#wizOverlay input[type="text"]{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono","Courier New",monospace;
}

#wizOverlay .wiz .btn-row{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* progress bar / tools nel widget inline */
.chrono-card .progress{
  height:8px;
  background:#0f1320;
  border:1px solid #263154;
  border-radius:8px;
  overflow:hidden;
}
.chrono-card .progress > i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#00c4b3,#3c59ff);
  transition:width .25s ease-out;
}
.chrono-card .mini{
  font-size:12px;
  color:var(--muted,#9ca3af);
}
.chrono-card .tools{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.chrono-card .tools .btn{
  font-size:13px;
  padding:6px 10px;
}
.chrono-card .chrono-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.chrono-card .chrono-header h3{ margin:0; }
.chrono-card .chrono-panel{ margin-top:10px; }
#chronoPanel[hidden]{ display:none; }

/* =====================================================
   AI HERO — chip di ricerca + elementi “diamante”
   ===================================================== */

.ai-hero .ai-hero-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

/* chip base (override look di default) */
.ai-hero .ai-hero-suggestion{
  border-radius:999px;
  padding:7px 14px;
  border:1px solid rgba(148,163,184,0.40);
  background:rgba(255,255,255,0.90);
  font-size:13px;
  color:#0f172a;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
  transition:
    background 0.12s ease-out,
    box-shadow 0.12s ease-out,
    transform 0.08s ease-out,
    border-color 0.12s ease-out;
}
.ai-hero .ai-hero-suggestion span{ display:inline-block; }
.ai-hero .ai-hero-suggestion:hover{
  background:#ffffff;
  box-shadow:0 4px 10px rgba(15,23,42,0.10);
  transform:translateY(-1px);
}

/* chip speciali (simulazione + offerte) */
.ai-hero .ai-hero-suggestion--special{
  border-color:rgba(129,140,248,0.70);
  background:rgba(255,255,255,0.96);
}

/* simulazione = chip principale, più largo */
.ai-hero .ai-hero-suggestion--main{
  flex:1 1 100%;
  border-radius:16px;
  padding:10px 18px;
  white-space:normal;
}

/* layout interno comune ai chip speciali */
.ai-hero .ai-hero-suggestion__shell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

/* diamante */
.ai-hero .ai-hero-suggestion__icon{
  display:flex;
  align-items:center;
  justify-content:center;
}
.ai-hero .ai-hero-suggestion__icon svg{
  width:18px;
  height:18px;
  color:#6366f1;
  opacity:0.95;
}

/* testo simulazione */
.ai-hero .ai-hero-suggestion__body{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.ai-hero .ai-hero-suggestion__title{
  font-size:0.90rem;
  font-weight:600;
  text-align:center;
}
.ai-hero .ai-hero-suggestion__meta{
  font-size:0.78rem;
  opacity:0.80;
  text-align:center;
}
/* testo offerte pettorali/alloggi */
.ai-hero .ai-hero-suggestion__label{
  font-size:0.82rem;
  text-align:center;
}

/* micro-titolo sopra i chip (stile coerente, “invisibile ma premium”) */
.ai-hero-suggestions-title{
  margin: 10px 0 4px;
  padding-left: 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(15, 23, 42, 0.45);
}

/* accessibilità */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =====================================================
   FUTURISTIC RACE LOADER
   ===================================================== */

.run-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(14px);
  background:radial-gradient(circle at top,
    rgba(15,23,42,0.40) 0,
    rgba(15,23,42,0.92) 45%,
    rgba(15,23,42,1) 100%);
}
.run-loader.active{ display:flex; }

.run-loader-inner{
  max-width:480px;
  width:calc(100% - 32px);
  padding:18px 20px 16px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(15,23,42,0.96),rgba(17,24,39,0.98));
  box-shadow:0 18px 45px rgba(15,23,42,0.90);
  border:1px solid rgba(96,165,250,0.35);
  color:#e5e7eb;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.run-loader-title{
  font-size:0.95rem;
  font-weight:600;
  margin-bottom:4px;
}

/* NB: il testo deve continuare a “scriversi” senza far apparire scrollbar */
.run-loader-text{
  font-size:0.82rem;
  line-height:1.5;
  margin-bottom:14px;
  max-height:150px;
  overflow-y:auto;
  white-space:pre-line;
  scrollbar-width:none;            /* Firefox */
}
.run-loader-text::-webkit-scrollbar{ display:none; } /* Chrome/Safari/Edge */

.run-loader-text p{ margin:4px 0; }

.run-loader-km{
  margin-top:4px;
  font-size:0.78rem;
  opacity:0.90;
}
.run-loader-km strong{ color:#bbf7d0; }
.run-loader-text strong{ color:#a5b4fc; }

.run-loader-progress{
  position:relative;
  width:100%;
  height:6px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(15,23,42,1);
}
.run-loader-bar{
  width:100%;
  height:100%;
  transform-origin:left;
  transform:scaleX(0);
  background:linear-gradient(90deg,#22c55e,#a855f7,#f97316);
  transition:transform 0.4s cubic-bezier(0.22,0.61,0.36,1);
}
.run-loader-progress::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
    60deg,
    rgba(248,250,252,0.05),
    rgba(248,250,252,0.05) 10px,
    transparent 10px,
    transparent 20px
  );
  opacity:0.35;
  animation:runStripe 0.8s linear infinite;
  pointer-events:none;
}
@keyframes runStripe{
  from{ transform:translateX(0); }
  to  { transform:translateX(-40px); }
}

/* =====================================================
   MICRO-FIX SPAZIATURA OFFERTE HERO (€ → pettorale/alloggio)
   ===================================================== */
.hero-flags .of-panel{ gap:4px; }
.hero-flags .of-panel .of-btn{ margin:0; }

/* =====================================================
   LAPS PANEL (dentro modal “dialog” chiaro)
   - prima era scuro con testo bianco → qui diventa leggibile
   ===================================================== */
.dialog .laps-panel{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,0.10);
  color: rgba(15,23,42,0.92);
}

.dialog .laps-head{ margin-bottom: 10px; }

.dialog .laps-title{
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
}

.dialog .laps-sub{
  margin: 0;
  font-size: 0.84rem;
  color: rgba(15,23,42,0.62);
}

/* wrapper scrollabile (se serve) — scrollbar invisibile */
.dialog .laps-table-wrapper{
  margin-top: 10px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  background: rgba(15,23,42,0.03);
  scrollbar-width: none;           /* Firefox */
}
.dialog .laps-table-wrapper::-webkit-scrollbar{ display:none; }

.dialog .laps-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  color: rgba(15,23,42,0.90);
}

.dialog .laps-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(15,23,42,0.72);
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(15,23,42,0.10);
  backdrop-filter: blur(8px);
}

.dialog .laps-table tbody td{
  padding: 9px 12px;
  color: rgba(15,23,42,0.86);
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

/* righe alternate + hover */
.dialog .laps-table tbody tr:nth-child(2n){
  background: rgba(255,255,255,0.50);
}
.dialog .laps-table tbody tr:hover{
  background: rgba(99,102,241,0.06);
}

/* colonne compatte */
.dialog .laps-table th:first-child,
.dialog .laps-table td:first-child{
  width: 56px;
  white-space: nowrap;
}
.dialog .laps-table th:last-child,
.dialog .laps-table td:last-child{
  width: 80px;
  white-space: nowrap;
}

/* =========================================================
   FIX — Catena previsione (modal Analisi performance / m-speed)
   Il box usa background scuro inline: serve testo chiaro + strong leggibili.
   Aggiungi class="perf-chain" al div esterno della catena (vedi patch JS).
   ========================================================= */
.dialog .perf-chain{
  color: rgba(226,232,240,0.96);
}
.dialog .perf-chain strong{
  color: #ffffff;
}
.dialog .perf-chain em{
  color: rgba(226,232,240,0.92);
}
.dialog .perf-chain a{
  color: rgba(165,180,252,0.95);
}
/* ---- Allineamento (stile laps, righe coerenti) ---- */

.shoe-step{
  display: grid;
  grid-template-rows:
    clamp(14px, 1.2vw, 16px)   /* header */
    clamp(22px, 1.8vw, 26px)   /* time */
    clamp(18px, 1.5vw, 20px);  /* delta */
  gap: 6px;
  align-content: stretch;
  min-width: 0;
}

.shoe-step-head{ min-width: 0; }
.shoe-step-label{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shoe-step-time{ white-space: nowrap; line-height: 1.1; }
.shoe-step-delta{ justify-self: start; align-self: end; }
.shoe-step-delta:empty{ display: none; } /* il baseDelta vuoto non “sporca” */

/* ---- Colore “in base al gap” (NO arancione: neutro grigio) ---- */
/* Richiede: inline --gap = +/- secondi */

.shoe-step-delta{
  --gap: 0;        /* viene sovrascritto inline */
  --max-gap: 90;   /* regola: a +/-90s sei al “massimo” */
  --dead: .10;     /* 10% zona neutra (grigio) */

  /* normalizza magnitude 0..1 */
  --abs: max(var(--gap), calc(var(--gap) * -1));
  --m: clamp(0, calc(var(--abs) / var(--max-gap)), 1);

  /* separa positivo/negativo (così NON mischi rosso+verde => niente “coke”) */
  --pos: clamp(0, calc(var(--gap) / var(--max-gap)), 1);
  --neg: clamp(0, calc((var(--gap) / var(--max-gap)) * -1), 1);

  /* colore target: o rosso o verde (mai blend tra i due) */
  --target: color-mix(in srgb,
    #ff3b30 calc(var(--pos) * 100%),
    #34c759 calc(var(--neg) * 100%)
  );

  /* sotto soglia -> grigio; sopra -> entra gradualmente il target */
  --on: clamp(0, calc((var(--m) - var(--dead)) / (1 - var(--dead))), 1);
  --tone: color-mix(in srgb, rgba(120,120,128,.70) calc((1 - var(--on)) * 100%), var(--target) calc(var(--on) * 100%));

  /* pill con un minimo di “depth” (stile IG ma soft) */
  color: color-mix(in srgb, var(--tone) 88%, #000);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tone) 14%, transparent),
    color-mix(in srgb, var(--tone) 6%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent);
  box-shadow:
    0 1px 0 rgba(0,0,0,.06),
    inset 0 0 0 1px color-mix(in srgb, var(--tone) 10%, transparent);

  padding: 2px 8px;
  border-radius: 999px;
  width: fit-content;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark){
  .shoe-step-delta{
    color: color-mix(in srgb, var(--tone) 92%, #fff);
    border-color: color-mix(in srgb, var(--tone) 34%, transparent);
    box-shadow:
      0 1px 0 rgba(0,0,0,.26),
      inset 0 0 0 1px color-mix(in srgb, var(--tone) 14%, transparent);
  }
}



/* =========================
   Shoe efficiency — clean (no white halo)
   ========================= */

.shoe-modal{
  /* neutrali */
  --shoe-bg: rgba(255,255,255,.92);
  --shoe-sub: rgba(60,60,67,.68);

  /* dot utente + marker grafico (neutri) */
  --user-dot: rgba(120,120,128,.60);
  --thumb: rgba(120,120,128,.72);

  /* “consigliata” (verde soft) */
  --good: rgba(52,199,89,.92);
  --good-bg: rgba(52,199,89,.08);
  --good-bd: rgba(52,199,89,.26);
}

@media (prefers-color-scheme: dark){
  .shoe-modal{
    --shoe-bg: rgba(28,28,30,.92);
    --shoe-sub: rgba(235,235,245,.64);

    --user-dot: rgba(235,235,245,.55);
    --thumb: rgba(235,235,245,.62);

    --good-bg: rgba(52,199,89,.10);
    --good-bd: rgba(52,199,89,.30);
  }
}

/* (1) Nascondi la voce "consigliata" in legenda */
@supports selector(.x:has(.y)){
  .shoe-modal .shoe-legend-item:has(.shoe-dot--rec){ display:none !important; }
}
@supports not selector(.x:has(.y)){
  .shoe-modal .shoe-legend .shoe-legend-item:nth-child(2){ display:none !important; }
}

/* (2) Niente scarpetta 👟 */
.shoe-modal .shoe-thumb-icon{ display:none !important; }

/* Dot legenda utente (neutro) + rec coerente (anche se nascosto) */
.shoe-modal .shoe-dot--user{ background: var(--user-dot) !important; }
.shoe-modal .shoe-dot--rec{ background: var(--good) !important; }

/* (3) Puntino sul grafico: moderno, “pulsante”, NO ring bianco */
.shoe-modal .shoe-bar-thumb{ --thumb-color: var(--thumb) !important; }

.shoe-modal .shoe-bar-thumb::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background: var(--thumb-color);

  /* fallback pulito (senza bianco) */
  border: 1px solid rgba(0,0,0,.16);
  box-shadow:
    0 0 0 4px rgba(120,120,128,.12),  /* halo morbido neutro */
    0 2px 10px rgba(0,0,0,.12),       /* depth */
    inset 0 1px 0 rgba(255,255,255,.22); /* micro “pulsante” */
}

@supports (color: color-mix(in srgb, black, white)){
  .shoe-modal .shoe-bar-thumb::before{
    border-color: color-mix(in srgb, var(--thumb-color) 45%, rgba(0,0,0,.22));
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--thumb-color) 18%, transparent),
      0 2px 10px rgba(0,0,0,.12),
      inset 0 1px 0 color-mix(in srgb, var(--thumb-color) 18%, rgba(255,255,255,.35));
  }
}

@media (prefers-color-scheme: dark){
  .shoe-modal .shoe-bar-thumb::before{
    border-color: rgba(255,255,255,.18);
    box-shadow:
      0 0 0 4px rgba(235,235,245,.12),
      0 10px 20px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.12);
  }
  @supports (color: color-mix(in srgb, black, white)){
    .shoe-modal .shoe-bar-thumb::before{
      border-color: color-mix(in srgb, var(--thumb-color) 50%, rgba(255,255,255,.22));
      box-shadow:
        0 0 0 4px color-mix(in srgb, var(--thumb-color) 18%, transparent),
        0 10px 20px rgba(0,0,0,.45),
        inset 0 1px 0 color-mix(in srgb, var(--thumb-color) 14%, rgba(255,255,255,.22));
    }
  }
}

/* (4) "Scarpa consigliata" verde soft (non rosso) */
.shoe-modal .shoe-row--highlight{
  border-color: var(--good-bd) !important;
  background: var(--good-bg) !important;
}
.shoe-modal .shoe-row--highlight .shoe-row-label{
  color: var(--good) !important;
}
/* ===== Marker sul grafico: pulito + pulse reale (NO box/halo bianco) ===== */

.shoe-modal .shoe-bar-thumb{
  /* elimina qualsiasi box/rettangolo “di default” */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  border-radius: 999px;
  overflow: visible;
  isolation: isolate;

  /* colore marker (neutro) */
  --thumb-color: rgba(120,120,128,.72);
}

/* puntino */
.shoe-modal .shoe-bar-thumb::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:999px;
  transform:translate(-50%,-50%);

  background: var(--thumb-color);

  /* look “pulsante” moderno: micro depth, niente bianco */
  border: 1px solid rgba(0,0,0,.18);
  box-shadow:
    0 2px 8px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* pulse reale: ring che si espande e svanisce */
.shoe-modal .shoe-bar-thumb::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  border-radius:999px;
  transform:translate(-50%,-50%) scale(.85);

  border: 2px solid rgba(120,120,128,.35);
  opacity: 0;

  animation: shoeThumbPulse 1.45s cubic-bezier(.2,.9,.2,1) infinite;
  pointer-events:none;
}

@supports (color: color-mix(in srgb, black, white)){
  .shoe-modal .shoe-bar-thumb::before{
    border-color: color-mix(in srgb, var(--thumb-color) 45%, rgba(0,0,0,.22));
  }
  .shoe-modal .shoe-bar-thumb::after{
    border-color: color-mix(in srgb, var(--thumb-color) 45%, transparent);
  }
}

@keyframes shoeThumbPulse{
  0%   { transform:translate(-50%,-50%) scale(.85); opacity:.55; }
  60%  { transform:translate(-50%,-50%) scale(2.05); opacity:0; }
  100% { transform:translate(-50%,-50%) scale(2.05); opacity:0; }
}

@media (prefers-color-scheme: dark){
  .shoe-modal .shoe-bar-thumb{
    --thumb-color: rgba(235,235,245,.62);
  }
  .shoe-modal .shoe-bar-thumb::before{
    border-color: rgba(255,255,255,.18);
    box-shadow:
      0 10px 18px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.10);
  }
  .shoe-modal .shoe-bar-thumb::after{
    border-color: rgba(235,235,245,.28);
  }
}

/* rispetta chi preferisce niente animazioni */
@media (prefers-reduced-motion: reduce){
  .shoe-modal .shoe-bar-thumb::after{ animation: none; opacity: 0; }
}
/* Pulse un po' più ampia */
@keyframes shoeThumbPulse{
  0%   { transform:translate(-50%,-50%) scale(.85); opacity:.55; }
  60%  { transform:translate(-50%,-50%) scale(2.55); opacity:0; }
  100% { transform:translate(-50%,-50%) scale(2.55); opacity:0; }
}