/* ============================================================================
   COMMUNITY CLEANUP V1 — Desaturazione palette categoriale
   ============================================================================
   PROBLEMA RISOLTO:
   La sezione "Chi corre alla London Marathon" (scheda gara) accumulava 6
   colori categoriali simultanei (rosa Compagni + indigo Passo + teal Viaggio
   + amber Pettorali + indigo Procard Pro + amber Procard Travel) → caos
   cromatico per il visitor, paralisi visiva.

   STRATEGIA:
   Pattern Apple/Linear/Stripe 2026 — 1 accent color (rosa Rynq) per CTA
   primary + scala di grigi neutri per tutto il resto. La differenziazione
   categoriale (Compagni/Passo/Viaggio/Pettorali/Maestro/Shoe Guru/Race
   Travel) avviene via TIPOGRAFIA (label uppercase) + ICONA, non via
   colore.

   APPROCCIO:
   File caricato DOPO tutti gli altri CSS. Override puntuali, niente modifiche
   strutturali HTML/JS. Specificity boostata via raddoppio classe per battere
   le regole originali nell'index.

   AMBITO:
   Si applica SOLO alla scheda gara (.rq-runners + .rq-procards + .rq-rt-* +
   .rq-av-*). Non tocca:
     - Fold landing (Don't Start. Match. + sub V26)
     - AI panel
     - Pillars (Pacer/Compagno/Mentor)
     - Provocazione/Match preview/Gallery
     - Tab-bar, topbar, wizard, modali
   ============================================================================ */


/* ── 1. RUNNER BADGE: tutti pill outline grigi ─────────────────────────────
   Era: 4 colori categoriali (rosa/indigo/teal/amber) saturati.
   Ora: 1 stile uniforme grigio outline. Il visitor distingue le categorie
   leggendo il LABEL ("Compagni", "Passo", "Viaggio", "Pettorali"), non
   dal pigmento. Pattern Apple System Symbols. */
.rq-rcard .rq-rtype.rq-rt-ami,
.rq-rcard .rq-rtype.rq-rt-per,
.rq-rcard .rq-rtype.rq-rt-via,
.rq-rcard .rq-rtype.rq-rt-pet,
.rq-rtype.rq-rt-ami,
.rq-rtype.rq-rt-per,
.rq-rtype.rq-rt-via,
.rq-rtype.rq-rt-pet {
  background: transparent !important;
  border: 0.5px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.55) !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}


/* ── 2. AVATAR runner: tutti grigi neutri ─────────────────────────────────
   Era: 4 colori categoriali (P=rosa, I=indigo, T=teal, A=amber).
   Ora: stesso bg/color neutri. Iniziale del nome resta visibile (il
   visitor identifica la persona, non la categoria). */
.rq-rcard .rq-av.rq-av-p,
.rq-rcard .rq-av.rq-av-i,
.rq-rcard .rq-av.rq-av-t,
.rq-rcard .rq-av.rq-av-a,
.rq-av.rq-av-p,
.rq-av.rq-av-i,
.rq-av.rq-av-t,
.rq-av.rq-av-a {
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.55) !important;
}


/* ── 3. PROCARD Pro (Maestro/Shoe Guru/Mental Coach/Nutrizionista/Pacer):
       neutralizza indigo → grigio sottile ────────────────────────────────
   Era: bg rgba(99,102,241,.04) + border indigo + icona indigo + cat label
   indigo → 4 elementi indigo per card.
   Ora: stessa scala grigi del runner card (coerenza visiva). */
.rq-procard.rq-procard {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.rq-procard.rq-procard:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.18) !important;
  transform: translateX(2px) !important;
}
.rq-procard.rq-procard .rq-procard-icon {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.7) !important;
}
.rq-procard.rq-procard .rq-procard-cat {
  color: rgba(255,255,255,.55) !important;
  font-weight: 700 !important;
}


/* ── 4. PROCARD Travel (Race Travel): neutralizza amber → grigio ─────────
   Era: bg rgba(245,158,11,.04) + border amber + icona amber + cat label
   amber.
   Ora: stesso identico stile delle procard Pro. Differenziazione via
   label ("RACE TRAVEL") + icona, non via colore. */
.rq-procard.rq-procard-travel.rq-procard {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.rq-procard.rq-procard-travel.rq-procard:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.rq-procard.rq-procard-travel.rq-procard .rq-procard-icon {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.7) !important;
}
.rq-procard.rq-procard-travel.rq-procard .rq-procard-cat {
  color: rgba(255,255,255,.55) !important;
}


/* ── 5. ARIOSITÀ: aumento spacing tra macro-blocchi ─────────────────────
   Era: section-divider margin 18px = densità senza respiro.
   Ora: 28px sopra, 14px sotto = stacchi visivi più chiari tra
   "Runner" / "Pro per questa gara" / "Logistica". Pattern Apple Today
   at Apple — whitespace strategico tra sezioni concettuali. */
.rq-section-divider.rq-section-divider {
  margin: 28px 0 14px !important;
}

/* Mobile: meno aria ma comunque maggiore di prima */
@media (max-width: 768px) {
  .rq-section-divider.rq-section-divider {
    margin: 22px 0 12px !important;
  }
}


/* ── 6. SECTION DIVIDER LABEL: leggermente più presente ──────────────────
   Era: opacity .4 = label troppo nascosto.
   Ora: .52 = leggibile ma non grida. Gerarchia tipografica chiara. */
.rq-section-divider .rq-section-divider-lbl {
  color: rgba(255,255,255,.52) !important;
  letter-spacing: .16em !important;
}


/* ── 7. RUNNER CARDS: leggero tightening di gerarchia ───────────────────
   Aumento gap interno tra card runner per piccolo respiro. */
.rq-runners.rq-runners {
  gap: 10px !important;
}


/* ── 8. PROCARDS PRICE: peso visivo ridotto ──────────────────────────────
   Era: opacity .4 sul prezzo "da €60".
   Ora: .35 e font-weight 600 (vs 500) = leggermente più tracked
   tipograficamente, ma meno presente come "rumore". */
.rq-procard.rq-procard .rq-procard-price {
  color: rgba(255,255,255,.38) !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
  letter-spacing: .02em !important;
}


/* ── 9. CTA UNLOCK: rinforzo del pink come UNICO accent ──────────────────
   Ora che tutto il resto è neutralizzato, il CTA "Unisciti gratis"
   diventa l'unico punto colore. Pattern Apple "Buy" button — un
   solo accent in tutta l'area. */
.rq-cta-unlock .rq-btn-unlock {
  /* Lasciamo lo stile esistente del pink, non lo modifichiamo qui.
     Questa regola è solo segnaposto/documentazione strategica. */
}


/* ── 10. CTA UNLOCK BOTTOM — neutralizzo span colorati generati da app.js
   ────────────────────────────────────────────────────────────────────────
   PROBLEMA: rynqRenderRunners() in app.js sovrascrive .rq-cta-unlock con
   HTML inline contenente span colorati (#ec4899/#818cf8/#2dd4bf/#fbbf24)
   per il breakdown "7 Compagni · 7 Performance · 5 Viaggio · 3 Pettorali"
   = i 4 colori categoriali che il cleanup voleva eliminare.

   SOLUZIONE: override CSS che neutralizza i colori inline (forza grigio)
   E nasconde il "div con font-size:12px" che contiene il breakdown
   (= ridondante con i count già visibili sui cerchi highlights sopra).

   Il headline "N runner già attivi" e il CTA button restano visibili.
   Il CTA label personalizzato ("Scrivi a Chiara e agli altri 18 nascosti")
   è anche overridato a stato neutro: il pulsante è già rosa unique-accent
   perché è la CTA primary, ma il testo diventa generico "Unisciti gratis"
   per coerenza brand vs personalizzazione che genera rumore. */

/* Neutralizza tutti gli span color-categoriali generati da app.js dentro
   il rq-cta-unlock — colpiscono chiunque abbia inline color set. */
.rq-cta-unlock .rq-cta-text span[style*="color:#ec4899"],
.rq-cta-unlock .rq-cta-text span[style*="color:#818cf8"],
.rq-cta-unlock .rq-cta-text span[style*="color:#2dd4bf"],
.rq-cta-unlock .rq-cta-text span[style*="color:#fbbf24"],
.rq-cta-unlock .rq-cta-text span[style*="color: #ec4899"],
.rq-cta-unlock .rq-cta-text span[style*="color: #818cf8"],
.rq-cta-unlock .rq-cta-text span[style*="color: #2dd4bf"],
.rq-cta-unlock .rq-cta-text span[style*="color: #fbbf24"] {
  color: rgba(255,255,255,.55) !important;
  font-weight: 600 !important;
}

/* Il "headline" colorato rosa "19 runner già attivi" che app.js genera:
   neutralizziamo a bianco soft — il "19" perde il rosa sgargiante. */
.rq-cta-unlock .rq-cta-text > div > span[style*="color:#ec4899"],
.rq-cta-unlock .rq-cta-text > div > span[style*="color: #ec4899"] {
  color: rgba(255,255,255,.92) !important;
  font-size: inherit !important;
}

/* Nasconde il breakdown "7 Compagni · 7 Performance · 5 Viaggio · 3 Pettorali"
   = il div generato da bdHtml in app.js (riga 5326), riconoscibile per
   font-size:12px + margin-top:5px inline. Ridondante: i count sono già
   visibili sui cerchi highlights sopra. */
.rq-cta-unlock .rq-cta-text > div[style*="font-size:12px"][style*="margin-top:5px"],
.rq-cta-unlock .rq-cta-text > div[style*="font-size: 12px"][style*="margin-top: 5px"] {
  display: none !important;
}


/* ────────────────────────────────────────────────────────────────────────
   NOTE FUTURE (V2 se serve):
   - Riduzione runner inline visibili (3 + "vedi altri 16") = step B
   - Trasformazione procards in lista compatta = step C
   - Whitespace ulteriore tra sezione community e prediction panel
   ──────────────────────────────────────────────────────────────────────── */


/* ============================================================================
   MOBILE OVERFLOW FIX — V3 (post screenshot scrollabilità highlights)
   ============================================================================
   STORIA:
   V1: nessun fix, pagina sforava
   V2: body { overflow-x: clip } + max-width: 100vw — TROPPO AGGRESSIVO
       perché tagliava ANCHE lo strip degli highlights che è disegnato
       per scrollare orizzontalmente
   V3 (attuale): containment chirurgico SOLO sui macro-blocchi che
       sforano (la card previsione + il bottone CTA unlock), preserva
       scroll orizzontale degli highlights e in generale ovunque sia
       intenzionale. Niente più body { overflow-x: clip } globale.
   ============================================================================ */

/* Tempo grande "03:14:30" — clamp responsive per non sforare schermi piccoli.
   38px su 360px viewport è troppo, riduco progressivamente. */
#rq-final {
  font-size: clamp(28px, 8.5vw, 38px) !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tempo base "01:30:00" — stesso pattern (è leggermente più piccolo) */
#rq-base, #rq-base-display, [id^="rq-base"][style*="font"] {
  max-width: 100%;
}

/* Fix specifico: il container del tempo ha display:flex con monospace large.
   Aggiungo min-width:0 per permettere shrink correttamente. */
#rq-final,
[id="rq-final"] + *,
div:has(> #rq-final) {
  min-width: 0;
}

/* Card previsione: containment ma SOLO su questa card, non globale.
   max-width 100% (rispetta il parent), no max-width: 100vw che taglierebbe. */
.rq-pred-panels,
.rq-pred-card {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* CTA UNLOCK BUTTON — il bottone "Scrivi a Chiara e agli altri 18 nascosti →"
   ha copy lunga generata da app.js. Su mobile va a wrappare invece di
   ellipsis cattivo (taglia il numero / nome). Pattern Apple iOS Mail:
   bottone cresce in altezza piuttosto che truncare info importanti. */
.rq-cta-unlock .rq-btn-unlock {
  white-space: normal !important;
  text-overflow: unset !important;
  overflow: visible !important;
  line-height: 1.3 !important;
  padding: 11px 16px !important;
  text-align: center;
  word-break: normal;
}

/* Mobile: il blocco rq-cta-unlock va in colonna (testo sopra, bottone sotto)
   per dare più spazio al bottone con la copy completa */
@media (max-width: 600px) {
  /* Card previsione tempo: padding ridotto */
  .rq-pred-card {
    padding: 14px 12px !important;
  }

  /* Tempo finale: taglio progressivo */
  #rq-final {
    font-size: clamp(26px, 8vw, 34px) !important;
    letter-spacing: -.04em !important;
  }

  /* Bottone CTA: padding e font ridotto + box layout per gestire copy lunga */
  .rq-cta-unlock .rq-btn-unlock {
    font-size: 12px !important;
    padding: 10px 14px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Container CTA: assicura che il bottone non sforerà */
  .rq-cta-unlock {
    flex-wrap: wrap !important;
  }
  .rq-cta-unlock .rq-cta-text {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
}

@media (max-width: 380px) {
  #rq-final {
    font-size: clamp(24px, 7.5vw, 30px) !important;
  }
  .rq-pred-card {
    padding: 12px 10px !important;
  }
  .rq-cta-unlock .rq-btn-unlock {
    font-size: 11.5px !important;
    padding: 10px 12px !important;
  }
}


/* ============================================================================
   FIX OVERFLOW V4 — chirurgico sul parent del componente highlights
   ============================================================================
   PROBLEMA SCREENSHOT 12:53:
   Lo strip degli highlights espande il suo parent (.rq-match-inner > div)
   perché il parent NON ha min-width: 0. Quando lo strip ha ~9 cerchi
   (5 attivi + 4 coming), la sua content-width è > viewport, il parent
   espande con lui, la pagina sfora.

   FIX: min-width: 0 sui parent diretti del componente.
   Pattern Apple: ogni grid/flex container che contiene componenti
   "internal-scrollable" deve avere min-width: 0.
   ============================================================================ */

/* I figli del grid .rq-match-inner sui quali sta il rq-highlights */
.rq-match-inner > div {
  min-width: 0;
  max-width: 100%;
}

/* La sezione .rq-match stessa: containment per essere sicuri */
.rq-match {
  max-width: 100%;
  overflow: hidden;
}
.rq-match-inner {
  min-width: 0;
  max-width: 100%;
}


/* ============================================================================
   UX C2 — INDICATORE LIVE + SCROLL-TO-TOP al cambio evento
   ============================================================================
   Quando l'utente clicca una card del mosaico sotto, la scheda gara
   sopra (.rq-match) si aggiorna. Pattern UX 2026:
   1. Card del mosaico CORRENTE ha indicator "live" (chip rosa pulsante
      "Visualizzato")
   2. Al click: smooth scroll verso .rq-match + flash di highlight
      sulla scheda così l'utente VEDE che è cambiata
   3. Indicator "live" si sposta sulla nuova card

   La logica è in <script> sotto, ma gli stili sono qui.
   ============================================================================ */

/* Indicator "Visualizzato" sulla card mosaico attualmente nella scheda gara */
.rq-gcard.rq-currently-shown,
.mosaic [data-event-id].rq-currently-shown,
.card.hero.rq-currently-shown {
  position: relative;
}
.rq-gcard.rq-currently-shown::before,
.mosaic [data-event-id].rq-currently-shown::before,
.card.hero.rq-currently-shown::before {
  content: "Visualizzato sopra ↑";
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  padding: 5px 11px 5px 9px;
  background: rgba(236, 72, 153, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(236,72,153,.35), 0 0 0 0.5px rgba(255,255,255,.2);
  animation: rq-shown-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes rq-shown-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: .88; }
}

/* Quando una card NON è quella mostrata, hover comunica "vedi questa sopra" */
.rq-gcard:not(.rq-currently-shown),
.mosaic [data-event-id]:not(.rq-currently-shown):not(.rq-gcard) {
  position: relative;
}
.rq-gcard:not(.rq-currently-shown):not(.rq-gcard-locked):hover::after,
.mosaic [data-event-id]:not(.rq-currently-shown):not(.rq-gcard):hover::after {
  content: "Vedi sopra ↑";
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  padding: 4px 10px;
  background: rgba(15, 23, 42, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.95);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 999px;
  border: 0.5px solid rgba(255,255,255,.2);
  pointer-events: none;
  white-space: nowrap;
  animation: rq-hint-fade .2s ease-out;
}
@keyframes rq-hint-fade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Solo la prima card (la "free/explore") mostra l'hint e il pointer.
   Le altre sono gated (rq-gcard senza .rq-gcard-free) — niente hint. */
.rq-gcard.rq-gcard-free:not(.rq-currently-shown) {
  cursor: pointer;
}

/* Mobile: niente hover hint, solo l'indicator "Visualizzato" rimane */
@media (max-width: 768px) {
  .rq-gcard:not(.rq-currently-shown):hover::after,
  .mosaic [data-event-id]:not(.rq-currently-shown):hover::after {
    display: none;
  }
  /* Indicator più compatto su mobile */
  .rq-gcard.rq-currently-shown::before,
  .mosaic [data-event-id].rq-currently-shown::before,
  .card.hero.rq-currently-shown::before {
    font-size: 9.5px;
    padding: 4px 9px 4px 8px;
    top: 6px;
    left: 6px;
  }
}

/* Flash animation quando la scheda gara si aggiorna */
.rq-match.rq-match-flashing {
  animation: rq-match-flash .9s ease-out;
}
@keyframes rq-match-flash {
  0% {
    box-shadow: inset 0 0 0 0 rgba(236,72,153, 0);
    background: var(--rq-dark, #0a0a0a);
  }
  20% {
    box-shadow: inset 0 0 0 2px rgba(236,72,153, .6);
    background: linear-gradient(180deg, rgba(236,72,153,.06) 0%, var(--rq-dark, #0a0a0a) 100%);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(236,72,153, 0);
    background: var(--rq-dark, #0a0a0a);
  }
}

/* "Sticky tip" che appare brevemente sopra la .rq-match dopo un cambio
   per dire all'utente cosa è successo. Pattern Linear. */
.rq-match-switch-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 10px 18px;
  background: rgba(15, 23, 42, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  border-radius: 999px;
  border: 0.5px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  pointer-events: none;
  opacity: 0;
  animation: rq-toast 2.6s ease-out;
}
.rq-match-switch-toast .rq-toast-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ec4899;
  margin-right: 8px;
  vertical-align: middle;
  animation: rq-pulse 1.4s ease-in-out infinite;
}
@keyframes rq-toast {
  0% { opacity: 0; transform: translate(-50%, -8px); }
  10%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}

@media (max-width: 768px) {
  .rq-match-switch-toast {
    top: 70px;
    font-size: 12px;
    padding: 9px 14px;
    max-width: calc(100vw - 32px);
  }
}


/* ============================================================================
   RQ-EVENT-SWITCHER — Mobile event switcher orizzontale (≤ 768px)
   ============================================================================
   Sostituisce su mobile la rq-ev-pill statica con un carosello orizzontale
   di card. Active = grande, altri = compatti, scrollabili. Pattern iOS
   Tab Switcher.

   STATI CARD:
   - .rq-evsw-active     (grande, attiva, con metadata completi, anello rosa)
   - .rq-evsw-explorable (compatta, tap = swap istantaneo, cursor pointer)
   - .rq-evsw-locked     (compatta + lock icon, tap = wizard registrazione)

   ARCHITECTURE:
   - Container .rq-evsw: scroll orizzontale, hidden su desktop (≥ 769px)
   - Active card: flex 1 1 75%, padding completo
   - Compact card: flex 0 0 auto, max-width 60%, padding ridotto
   - Smooth scroll snap per UX 2026 nativa
   ============================================================================ */

/* Default desktop: switcher nascosto. Su desktop si vede il mosaico. */
.rq-evsw {
  display: none;
}

/* Mobile: switcher attivo, ev-pill nascosto (info è già nella active card) */
@media (max-width: 768px) {
  .rq-ev-pill {
    display: none !important;
  }

  .rq-evsw {
    display: flex;
    gap: 10px;
    padding: 4px 16px 12px 0;
    margin: 0 -16px 18px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Min-height per evitare jump di layout durante render */
    min-height: 96px;
  }
  .rq-evsw::-webkit-scrollbar { display: none; }

  /* Card di base */
  .rq-evsw-card {
    flex-shrink: 0;
    border-radius: 14px;
    padding: 14px 16px;
    background: rgba(255,255,255,.04);
    border: 0.5px solid rgba(255,255,255,.10);
    box-sizing: border-box;
    transition:
      background .28s cubic-bezier(.22,1,.36,1),
      border-color .28s cubic-bezier(.22,1,.36,1),
      transform .28s cubic-bezier(.22,1,.36,1),
      max-width .35s cubic-bezier(.22,1,.36,1),
      opacity .25s ease-out;
    scroll-snap-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    min-width: 0;
  }

  /* CARD ATTIVA: grande, anello rosa, metadata completi */
  .rq-evsw-card.rq-evsw-active {
    flex: 1 1 70%;
    max-width: 75%;
    background: rgba(255,255,255,.06);
    border-color: rgba(236,72,153,.50);
    box-shadow:
      0 0 0 1px rgba(236,72,153,.32),
      0 4px 18px rgba(236,72,153,.12);
    cursor: default;
  }
  .rq-evsw-card.rq-evsw-active .rq-evsw-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.015em;
    line-height: 1.25;
    margin-bottom: 6px;
    /* Permetti wrap del nome lungo (es. "Mezza Maratona Dell'Alpe di Siusi") */
    word-break: break-word;
  }
  .rq-evsw-card.rq-evsw-active .rq-evsw-meta {
    display: block;
    font-size: 11.5px;
    color: rgba(255,255,255,.50);
    font-weight: 500;
    letter-spacing: -.005em;
    line-height: 1.3;
  }

  /* CARD ESPLORABILE / LOCKED: compatta, solo nome */
  .rq-evsw-card.rq-evsw-explorable,
  .rq-evsw-card.rq-evsw-locked {
    flex: 0 0 auto;
    max-width: 55%;
    padding: 14px 14px;
    background: rgba(255,255,255,.025);
    opacity: .82;
  }
  .rq-evsw-card.rq-evsw-explorable:hover,
  .rq-evsw-card.rq-evsw-explorable:active {
    background: rgba(255,255,255,.05);
    opacity: 1;
    transform: translateX(-1px);
  }
  .rq-evsw-card.rq-evsw-explorable .rq-evsw-name,
  .rq-evsw-card.rq-evsw-locked .rq-evsw-name {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.70);
    letter-spacing: -.005em;
    line-height: 1.3;
    word-break: break-word;
    /* Truncation a 2 righe per nomi lunghi */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rq-evsw-card.rq-evsw-explorable .rq-evsw-meta,
  .rq-evsw-card.rq-evsw-locked .rq-evsw-meta {
    display: none; /* compatte non hanno metadata, solo nome */
  }
  .rq-evsw-card.rq-evsw-explorable .rq-evsw-hint,
  .rq-evsw-card.rq-evsw-locked .rq-evsw-hint {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(255,255,255,.32);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 6px;
  }

  /* CARD LOCKED: lock icon piccolo + label "Registrati" */
  .rq-evsw-card.rq-evsw-locked {
    opacity: .58;
  }
  .rq-evsw-card.rq-evsw-locked .rq-evsw-name {
    color: rgba(255,255,255,.55);
  }
  .rq-evsw-card.rq-evsw-locked .rq-evsw-hint {
    color: rgba(255,255,255,.42);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .rq-evsw-card.rq-evsw-locked .rq-evsw-hint::before {
    content: "🔒";
    font-size: 9px;
    margin-right: 1px;
  }

  /* Hint nascosto sull'attiva (non serve "vedi" su quella già attiva) */
  .rq-evsw-card.rq-evsw-active .rq-evsw-hint {
    display: none;
  }

  /* Animazione swap quando l'utente cambia card */
  .rq-evsw.rq-evsw-swapping .rq-evsw-card {
    transition-duration: .25s;
  }
}

/* Schermi molto piccoli (≤ 380px): card un po' più strette */
@media (max-width: 380px) {
  .rq-evsw-card.rq-evsw-active {
    max-width: 78%;
    padding: 12px 14px;
  }
  .rq-evsw-card.rq-evsw-explorable,
  .rq-evsw-card.rq-evsw-locked {
    max-width: 60%;
    padding: 12px 12px;
  }
  .rq-evsw-card.rq-evsw-active .rq-evsw-name {
    font-size: 13.5px;
  }
}


/* ============================================================================
   THEME SPLIT V1 — Community LIGHT + Dati tecnici DARK
   ============================================================================
   STRATEGIA:
   La sezione .rq-match contiene 2 sotto-zone semantiche distinte:
   1. COMMUNITY (chi corre, peers, social) → light, calda, umana
      Contiene: kicker, title, sub, switcher, ev-pill, highlights,
      runners, cta-unlock
   2. DATI TECNICI (previsione, altimetria, meteo) → dark, professional
      Contiene: .rq-pred-panels (colonna destra del grid)

   Su desktop sono 2 colonne grid affiancate (community sx, dati dx).
   Su mobile sono stacked verticalmente (community sopra, dati sotto).

   APPROCCIO CSS:
   - Background della section .rq-match resta dark (involucro)
   - Il PRIMO grid-child (community area) prende background light isolato
     con padding interno e border-radius, dando l'effetto "isola light"
     dentro il contesto dark
   - I dati tecnici (.rq-pred-panels) restano col loro stile dark
   - Texts della community area passano da bianco a nero/grigi scuri
   - Bordi/dividers della community passano da bianco-trasparenti a
     nero-trasparenti
   - Highlights component (data-rq-highlights) ha override per i colori
     (label, count, panel bg) per essere leggibile su light

   DESIGN TOKENS COMMUNITY LIGHT:
   - Background: #fafaf7 (avorio caldo, non bianco freddo)
   - Border: rgba(15, 23, 42, .08) (slate scuro a basso alpha)
   - Text primary: #0f172a (slate-950)
   - Text secondary: rgba(15, 23, 42, .60)
   - Text tertiary: rgba(15, 23, 42, .40)
   - Accent rosa Rynq: invariato #ec4899 (lavora bene su entrambi)
   ============================================================================ */

/* ── 1. COMMUNITY AREA: wrapper light isolato ────────────────────────── */
/* Il primo figlio del grid è la community. Lo trasformo in "isola light"
   con padding/border-radius interni. Su mobile riempie tutto il viewport. */
.rq-match-inner > div:first-child {
  background: #fafaf7;
  color: #0f172a;
  padding: 28px 28px 24px;
  border-radius: 18px;
  /* Su desktop, isolato dal contesto dark con leggera shadow di lift.
     Su mobile niente shadow (sarebbe invisibile sul nero del .rq-match) */
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}

@media (max-width: 768px) {
  .rq-match-inner > div:first-child {
    padding: 22px 18px 20px;
    border-radius: 14px;
    /* Margin negativo per andare edge-to-edge ma con safe areas */
    margin: 0 -4px;
  }
}

/* ── 2. TYPOGRAPHY OVERRIDE per community area ──────────────────────── */

/* Kicker "Community in tempo reale" — passa da bianco-soft a slate-soft */
.rq-match-inner > div:first-child .rq-match-kicker {
  color: rgba(15, 23, 42, .42) !important;
}

/* Live chip verde: il bg rimane verde (semantico), va bene su light */
.rq-match-inner > div:first-child .rq-match-kicker span[style*="34d399"] {
  /* No override — verde funziona bene su light */
}

/* Title gara "Chi corre alla London Marathon" */
.rq-match-inner > div:first-child .rq-match-title,
.rq-match-inner > div:first-child #rq-match-title {
  color: #0f172a !important;
}

/* Sub gara "Non correrai tra sconosciuti..." */
.rq-match-inner > div:first-child .rq-match-sub {
  color: rgba(15, 23, 42, .55) !important;
}

/* ev-pill (desktop): pill con nome gara + meta */
.rq-match-inner > div:first-child .rq-ev-pill {
  background: rgba(15, 23, 42, .04) !important;
  border-color: rgba(15, 23, 42, .08) !important;
}
.rq-match-inner > div:first-child .rq-ev-pname,
.rq-match-inner > div:first-child #rq-ev-name {
  color: #0f172a !important;
}
.rq-match-inner > div:first-child .rq-ev-pmeta,
.rq-match-inner > div:first-child #rq-ev-meta {
  color: rgba(15, 23, 42, .50) !important;
}
.rq-match-inner > div:first-child .rq-ev-pdot {
  background: rgba(15, 23, 42, .25) !important;
}

/* ── 3. EVENT SWITCHER MOBILE su sfondo light ───────────────────────── */
@media (max-width: 768px) {
  /* Card di base (esplorabile/locked) */
  .rq-match-inner > div:first-child .rq-evsw-card {
    background: rgba(15, 23, 42, .04) !important;
    border-color: rgba(15, 23, 42, .10) !important;
  }
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-explorable:hover,
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-explorable:active {
    background: rgba(15, 23, 42, .07) !important;
  }
  /* Card attiva: anello rosa rimane (è semantica), bg leggermente più scuro */
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-active {
    background: rgba(15, 23, 42, .06) !important;
    border-color: rgba(236, 72, 153, .50) !important;
  }
  /* Testi nelle card */
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-active .rq-evsw-name {
    color: #0f172a !important;
  }
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-active .rq-evsw-meta {
    color: rgba(15, 23, 42, .50) !important;
  }
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-explorable .rq-evsw-name,
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-locked .rq-evsw-name {
    color: rgba(15, 23, 42, .65) !important;
  }
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-explorable .rq-evsw-hint,
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-locked .rq-evsw-hint {
    color: rgba(15, 23, 42, .35) !important;
  }
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-locked .rq-evsw-hint {
    color: rgba(15, 23, 42, .42) !important;
  }
}

/* ── 4. HIGHLIGHTS COMPONENT su sfondo light ─────────────────────────── */
/* Il componente data-rq-highlights ha CSS variables per i colori interni.
   Override scoped quando è dentro la community light area. */

.rq-match-inner > div:first-child [data-rq-highlights] {
  /* Cerchi degli highlights */
  --rq-hl-circle-bg: rgba(15, 23, 42, .05);
  --rq-hl-circle-bg-hover: rgba(15, 23, 42, .08);
  --rq-hl-circle-border: rgba(15, 23, 42, .10);
  --rq-hl-icon-color: rgba(15, 23, 42, .65);
  /* Label "Amici / Pacer / Viaggio / Pettorali / Alloggi" */
  --rq-hl-label-color: rgba(15, 23, 42, .72);
  --rq-hl-label-color-active: #0f172a;
  /* Count "(7)" sotto i label */
  --rq-hl-count-color: rgba(15, 23, 42, .42);
  /* Anello attivo rosa: invariato (semantico) */
  /* Pannello expand */
  --rq-hl-panel-bg: rgba(15, 23, 42, .04);
  --rq-hl-panel-border: rgba(15, 23, 42, .10);
}

/* Pannello expand interno: testi e item */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-panel-title {
  color: #0f172a !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-panel-desc,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-panel-foot {
  color: rgba(15, 23, 42, .55) !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-panel-close {
  color: rgba(15, 23, 42, .55) !important;
  background: rgba(15, 23, 42, .06) !important;
  border-color: rgba(15, 23, 42, .10) !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-panel-close:hover {
  background: rgba(15, 23, 42, .10) !important;
  color: #0f172a !important;
}

/* Item nei pannelli (utenti / offerte) */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item {
  background: rgba(15, 23, 42, .04) !important;
  border-color: rgba(15, 23, 42, .08) !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item:hover {
  background: rgba(15, 23, 42, .06) !important;
  border-color: rgba(15, 23, 42, .14) !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item-name {
  color: #0f172a !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item-msg {
  color: rgba(15, 23, 42, .50) !important;
}
/* Avatar fallback (iniziali) — bg più scuro su light */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item-ava-fallback {
  background: rgba(15, 23, 42, .08) !important;
  color: rgba(15, 23, 42, .60) !important;
}
/* Action button "Scrivi" / "Contatta" */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item-action {
  background: transparent !important;
  border-color: rgba(15, 23, 42, .20) !important;
  color: rgba(15, 23, 42, .65) !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item-action:hover {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #fff !important;
}

/* Tempo "⏱ 02:58:22" nei pacer: stile più presente su light */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item-msg.rq-hl-item-msg-time {
  color: rgba(15, 23, 42, .82) !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item-msg .rq-hl-time-icon {
  opacity: .55;
}

/* ── 5. RUNNERS / RUNNER CARDS (vecchio blocco se ancora visibile) ──── */
.rq-match-inner > div:first-child .rq-rcard,
.rq-match-inner > div:first-child .rq-runners {
  /* I runner cards potrebbero non essere più visibili (sostituiti da
     highlights), ma se app.js li renderizza li allineo al theme */
}
.rq-match-inner > div:first-child .rq-rname {
  color: #0f172a !important;
}
.rq-match-inner > div:first-child .rq-rtype {
  color: rgba(15, 23, 42, .55) !important;
  border-color: rgba(15, 23, 42, .15) !important;
}
.rq-match-inner > div:first-child .rq-av {
  background: rgba(15, 23, 42, .08) !important;
  color: rgba(15, 23, 42, .60) !important;
}

/* ── 6. SECTION DIVIDER nei vari runner blocks ──────────────────────── */
.rq-match-inner > div:first-child .rq-section-divider {
  border-top-color: rgba(15, 23, 42, .08) !important;
}
.rq-match-inner > div:first-child .rq-section-divider-lbl {
  color: rgba(15, 23, 42, .42) !important;
}

/* ── 7. CTA UNLOCK su sfondo light ──────────────────────────────────── */
.rq-match-inner > div:first-child .rq-cta-unlock {
  background: rgba(15, 23, 42, .04) !important;
  border-color: rgba(15, 23, 42, .10) !important;
}
.rq-match-inner > div:first-child .rq-cta-unlock .rq-cta-text {
  color: rgba(15, 23, 42, .82) !important;
}
/* Override degli span colorati neutri di app.js (community-cleanup li ha già
   neutralizzati; qui li adatto al theme light) */
.rq-match-inner > div:first-child .rq-cta-unlock .rq-cta-text span,
.rq-match-inner > div:first-child .rq-cta-unlock .rq-cta-text span[style*="color"] {
  color: rgba(15, 23, 42, .65) !important;
}
.rq-match-inner > div:first-child .rq-cta-unlock .rq-cta-text > div > span[style*="color:#ec4899"],
.rq-match-inner > div:first-child .rq-cta-unlock .rq-cta-text > div > span[style*="color: #ec4899"] {
  color: #0f172a !important;
}
/* Bottone CTA primario rosa: rimane invariato (è il punto di accent) */
.rq-match-inner > div:first-child .rq-cta-unlock .rq-btn-unlock {
  /* Mantiene lo stile originale (rosa Rynq) — single accent point */
}

/* ── 8. SAFETY: dati tecnici .rq-pred-panels resta DARK ─────────────── */
/* Esplicito reset per assicurarsi che il pannello previsioni (che è il
   secondo grid-child) NON erediti i colori community light. Lo stile
   originale dark è già nel CSS principale; qui solo guard. */
.rq-match-inner > .rq-pred-panels {
  background: transparent;
  color: #fff;
}


/* ============================================================================
   THEME LIGHT FIXES V2 — Bug visivi + upgrade premium
   ============================================================================
   Da screenshot post-deploy V1:
   1. Highlights "PRO" coming (Race Expert, Mental, Nutrizione, Scarpe)
      → testi bianchi su bianco, invisibili
   2. "Vedi tutti i 7 →" footer pannello → bianco invisibile
   3. CTA unlock testi generati da app.js → opacity bianca rimane
   4. Look generale "neutro" → upgrade premium con shadow + texture
   ============================================================================ */

/* ── BUG 1: Highlights "PRO" coming su light ─────────────────────────── */
/* I 4 cerchi placeholder "PRESTO" sotto Race Expert/Mental/etc */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-coming,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-coming .rq-hl-circle,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-coming .rq-hl-icon,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-coming svg {
  color: rgba(15, 23, 42, .35) !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-coming .rq-hl-circle {
  background: rgba(15, 23, 42, .03) !important;
  border-color: rgba(15, 23, 42, .08) !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-coming .rq-hl-circle svg {
  stroke: rgba(15, 23, 42, .35) !important;
  fill: none !important;
}
/* Label "Race Expert / Mental / Nutrizione / Scarpe" */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-coming .rq-hl-label {
  color: rgba(15, 23, 42, .50) !important;
}
/* Mini-tag "PRESTO" sotto */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-coming .rq-hl-count,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-coming .rq-hl-presto,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-coming small {
  color: rgba(15, 23, 42, .35) !important;
  letter-spacing: .08em;
}

/* ── BUG 2: Footer pannello "Vedi tutti i 7 →" ───────────────────────── */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-panel-foot,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-panel-foot * {
  color: rgba(15, 23, 42, .55) !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-panel-foot a {
  color: rgba(15, 23, 42, .72) !important;
  text-decoration: none;
  font-weight: 600;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-panel-foot a:hover {
  color: #0f172a !important;
}

/* ── BUG 3: CTA UNLOCK testi generati da app.js ──────────────────────── */
/* app.js genera span/div con style="color:#XXX" inline. Override forte. */
.rq-match-inner > div:first-child .rq-cta-unlock,
.rq-match-inner > div:first-child .rq-cta-unlock * {
  color: rgba(15, 23, 42, .72) !important;
}

/* "19" runner number e altri numeri rosa: passano a slate-bold */
.rq-match-inner > div:first-child .rq-cta-unlock .rq-cta-text > div > span[style*="color:#ec4899"],
.rq-match-inner > div:first-child .rq-cta-unlock .rq-cta-text > div > span[style*="color: #ec4899"],
.rq-match-inner > div:first-child .rq-cta-unlock strong,
.rq-match-inner > div:first-child .rq-cta-unlock b {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: inherit !important;
}

/* "Registrati per scrivere..." sub-text in basso */
.rq-match-inner > div:first-child .rq-cta-unlock .rq-cta-text > div:last-child,
.rq-match-inner > div:first-child .rq-cta-unlock .rq-cta-text small {
  color: rgba(15, 23, 42, .50) !important;
}

/* Bottone CTA "Scrivi a Chiara e agli altri 18 nascosti →" rimane invariato
   (è scuro/rosa - già OK su light) — ma garantisco il color del testo */
.rq-match-inner > div:first-child .rq-cta-unlock .rq-btn-unlock {
  color: #fff !important; /* il bottone è scuro sul light, testo bianco */
}
.rq-match-inner > div:first-child .rq-cta-unlock .rq-btn-unlock * {
  color: #fff !important;
}


/* ============================================================================
   PREMIUM UPGRADE — Eleva l'aspetto della community light
   ============================================================================ */

/* ── 1. Background con micro-texture sottile ─────────────────────────── */
/* Avorio caldo + gradiente quasi impercettibile per evitare "piatto".
   Pattern Apple white-paper, Linear settings. */
.rq-match-inner > div:first-child {
  background:
    radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(236, 72, 153, .025), transparent 70%),
    linear-gradient(180deg, #fafaf7 0%, #f7f5ef 100%);
  /* Border definito ma sottile (vs no-border attuale) */
  border: 0.5px solid rgba(15, 23, 42, .08);
  /* Shadow di lifting più presente: dà tridimensionalità */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 4px 24px rgba(15, 23, 42, .06),
    0 1px 3px rgba(15, 23, 42, .04);
}

@media (max-width: 768px) {
  .rq-match-inner > div:first-child {
    /* Su mobile shadow più sottile (su nero del .rq-match si vede poco) */
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .8) inset,
      0 8px 32px rgba(0, 0, 0, .25);
  }
}

/* ── 2. Highlights cerchi: leggera shadow per lifting ────────────────── */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-circle {
  background: #fff !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 0 0 0.5px rgba(15, 23, 42, .06);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1),
              box-shadow .22s cubic-bezier(.22, 1, .36, 1);
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl:hover .rq-hl-circle,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl:focus-visible .rq-hl-circle {
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(15, 23, 42, .08),
    0 0 0 0.5px rgba(15, 23, 42, .10);
}
/* Active: anello rosa più definito */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"] .rq-hl-circle {
  box-shadow:
    0 0 0 1.5px var(--rq-pink, #ec4899),
    0 6px 16px rgba(236, 72, 153, .18);
}

/* ── 3. Pannello expand: bg bianco puro vs avorio = più leggibile ───── */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-panel {
  background: #fff !important;
  border: 0.5px solid rgba(15, 23, 42, .08) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .03),
    0 4px 16px rgba(15, 23, 42, .04);
}

/* ── 4. Item runners: card più definita ──────────────────────────────── */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item {
  background: #fafaf7 !important;
  border: 0.5px solid rgba(15, 23, 42, .06) !important;
  transition: all .18s cubic-bezier(.22, 1, .36, 1);
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item:hover {
  background: #fff !important;
  border-color: rgba(15, 23, 42, .14) !important;
  transform: translateX(1px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 4px 12px rgba(15, 23, 42, .04);
}

/* ── 5. Avatar item: ring + lift premium ─────────────────────────────── */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item-ava {
  box-shadow:
    0 0 0 0.5px rgba(15, 23, 42, .08),
    0 2px 4px rgba(15, 23, 42, .06);
  transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item:hover .rq-hl-item-ava {
  transform: scale(1.03);
}

/* ── 6. Tempo nei pacer: tipografia premium con tabular nums ─────────── */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item-msg.rq-hl-item-msg-time {
  /* Forte sul tempo (slate-900 vs precedente .82) */
  color: #0f172a !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item-msg.rq-hl-item-msg-time .rq-hl-time-icon {
  color: var(--rq-pink, #ec4899) !important;
  opacity: .7 !important;
  font-weight: 400 !important;
}

/* Messaggio testuale in italic: più sobrio (vs il tempo bold) */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item-msg:not(.rq-hl-item-msg-time) {
  color: rgba(15, 23, 42, .42) !important;
}

/* ── 7. Action button "Scrivi": più premium ──────────────────────────── */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item-action {
  background: #fff !important;
  border: 0.5px solid rgba(15, 23, 42, .14) !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  transition: all .18s cubic-bezier(.22, 1, .36, 1);
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-item-action:hover {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #fff !important;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, .15),
    0 1px 3px rgba(15, 23, 42, .08);
  transform: translateY(-0.5px);
}

/* ── 8. Title gara: typography più presente ──────────────────────────── */
.rq-match-inner > div:first-child .rq-match-title,
.rq-match-inner > div:first-child #rq-match-title {
  letter-spacing: -.025em;
  font-weight: 700;
}

/* ── 9. Kicker LIVE: chip più definito su light ──────────────────────── */
.rq-match-inner > div:first-child .rq-match-kicker span[style*="34d399"] {
  /* Override del background semi-trasparente verde con uno più solid */
  background: rgba(52, 211, 153, .10) !important;
  border-color: rgba(52, 211, 153, .35) !important;
}

/* ── 10. Event switcher cards: shadow + lift ─────────────────────────── */
@media (max-width: 768px) {
  .rq-match-inner > div:first-child .rq-evsw-card {
    background: #fff !important;
    border: 0.5px solid rgba(15, 23, 42, .08) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  }
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-active {
    background: #fff !important;
    border-color: rgba(236, 72, 153, .50) !important;
    box-shadow:
      0 0 0 1px rgba(236, 72, 153, .32),
      0 4px 16px rgba(236, 72, 153, .10),
      0 1px 3px rgba(15, 23, 42, .04);
  }
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-explorable {
    background: #fafaf7 !important;
  }
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-explorable:hover,
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-explorable:active {
    background: #fff !important;
    box-shadow:
      0 4px 12px rgba(15, 23, 42, .06),
      0 1px 3px rgba(15, 23, 42, .04);
  }
  .rq-match-inner > div:first-child .rq-evsw-card.rq-evsw-locked {
    background: rgba(15, 23, 42, .03) !important;
    opacity: .55;
  }
}

/* ── 11. ev-pill desktop: pill più definito ──────────────────────────── */
.rq-match-inner > div:first-child .rq-ev-pill {
  background: #fff !important;
  border: 0.5px solid rgba(15, 23, 42, .10) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

/* ── 12. CTA unlock: card più presente ───────────────────────────────── */
.rq-match-inner > div:first-child .rq-cta-unlock {
  background: #fff !important;
  border: 0.5px solid rgba(15, 23, 42, .10) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .03),
    0 4px 12px rgba(15, 23, 42, .04);
}

/* Bottone CTA primario: rosa Rynq, ma più premium */
.rq-match-inner > div:first-child .rq-cta-unlock .rq-btn-unlock {
  background: #0f172a !important; /* slate-900: scuro elegante vs rosa generico */
  border: 0.5px solid #0f172a !important;
  box-shadow:
    0 4px 14px rgba(15, 23, 42, .15),
    0 1px 3px rgba(15, 23, 42, .08);
  transition: all .2s cubic-bezier(.22, 1, .36, 1);
}
.rq-match-inner > div:first-child .rq-cta-unlock .rq-btn-unlock:hover {
  background: #1e293b !important;
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px rgba(15, 23, 42, .22),
    0 2px 6px rgba(15, 23, 42, .10);
}


/* ============================================================================
   THEME LIGHT V3 — Fix icona attiva + colori categoriali + switcher mobile
   ============================================================================
   3 task da screenshot post-V2:
   1. Icona attiva BIANCA su sfondo BIANCO → invisibile
   2. Switcher eventi mobile non visibile (ricreato premium)
   3. Highlight attivo: colore CATEGORIALE (rosa/indigo/emerald/amber)
      Solo 1 alla volta = nessun caos cromatico

   COLORI CATEGORIALI:
   - Amici     → #ec4899 (rosa Rynq, community core)
   - Pacer     → #6366f1 (indigo, brand "passo")
   - Viaggio   → #34d399 (emerald, "ospitalità" da AI chat)
   - Pettorali → #f59e0b (amber, marketplace)
   - Alloggi   → #f59e0b (amber, marketplace)
   - Coming    → #f59e0b (amber, servizi pro futuri)
   ============================================================================ */

/* ── 1. ICONA ATTIVA → colore della categoria (non più bianca) ───────── */

/* Default: icona attiva slate-900 (fallback se la categoria non matcha) */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"] .rq-hl-circle {
  background: #fff !important;
  /* L'icona dentro deve diventare visibile: sostituisce il bianco */
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"] .rq-hl-circle svg,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"] .rq-hl-icon {
  color: #0f172a !important;
  stroke: #0f172a !important;
}

/* AMICI attivo → rosa */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="amici"] .rq-hl-circle {
  box-shadow:
    0 0 0 1.5px #ec4899,
    0 6px 20px rgba(236, 72, 153, .22),
    0 1px 3px rgba(15, 23, 42, .04);
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="amici"] .rq-hl-circle svg,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="amici"] .rq-hl-icon {
  color: #ec4899 !important;
  stroke: #ec4899 !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="amici"] .rq-hl-label {
  color: #0f172a !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="amici"] .rq-hl-count {
  color: #ec4899 !important;
}

/* PACER attivo → indigo */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="pacer"] .rq-hl-circle {
  box-shadow:
    0 0 0 1.5px #6366f1,
    0 6px 20px rgba(99, 102, 241, .22),
    0 1px 3px rgba(15, 23, 42, .04);
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="pacer"] .rq-hl-circle svg,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="pacer"] .rq-hl-icon {
  color: #6366f1 !important;
  stroke: #6366f1 !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="pacer"] .rq-hl-label {
  color: #0f172a !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="pacer"] .rq-hl-count {
  color: #6366f1 !important;
}

/* VIAGGIO attivo → emerald */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="viaggio"] .rq-hl-circle {
  box-shadow:
    0 0 0 1.5px #10b981,
    0 6px 20px rgba(52, 211, 153, .22),
    0 1px 3px rgba(15, 23, 42, .04);
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="viaggio"] .rq-hl-circle svg,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="viaggio"] .rq-hl-icon {
  color: #10b981 !important;
  stroke: #10b981 !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="viaggio"] .rq-hl-label {
  color: #0f172a !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="viaggio"] .rq-hl-count {
  color: #10b981 !important;
}

/* PETTORALI attivo → teal (coerenza con Pillars "Occasioni" peer-to-peer)
   NOTA STRATEGICA: Pettorali e Alloggi sono peer-to-peer (scambi tra
   runner), NON servizi pro. Pertanto usano il colore brand "Occasioni"
   (rq-pc-via teal #0d9488) della 4ª card Pillars. Solo i veri servizi
   pro futuri (Race Expert/Mental/Nutrizione/Scarpe) restano amber. */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="pettorali"] .rq-hl-circle {
  box-shadow:
    0 0 0 1.5px #0d9488,
    0 6px 20px rgba(13, 148, 136, .22),
    0 1px 3px rgba(15, 23, 42, .04);
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="pettorali"] .rq-hl-circle svg,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="pettorali"] .rq-hl-icon {
  color: #0d9488 !important;
  stroke: #0d9488 !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="pettorali"] .rq-hl-label {
  color: #0f172a !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="pettorali"] .rq-hl-count {
  color: #0d9488 !important;
}

/* ALLOGGI attivo → teal (peer-to-peer, coerente con Pillars Occasioni) */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="alloggi"] .rq-hl-circle {
  box-shadow:
    0 0 0 1.5px #0d9488,
    0 6px 20px rgba(13, 148, 136, .22),
    0 1px 3px rgba(15, 23, 42, .04);
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="alloggi"] .rq-hl-circle svg,
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="alloggi"] .rq-hl-icon {
  color: #0d9488 !important;
  stroke: #0d9488 !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="alloggi"] .rq-hl-label {
  color: #0f172a !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl[aria-expanded="true"][data-id="alloggi"] .rq-hl-count {
  color: #0d9488 !important;
}

/* COMING (Race Expert / Mental / Nutrizione / Scarpe) attivo → amber */
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-coming[aria-expanded="true"] .rq-hl-circle {
  box-shadow:
    0 0 0 1.5px #f59e0b,
    0 6px 20px rgba(245, 158, 11, .22) !important;
}
.rq-match-inner > div:first-child [data-rq-highlights] .rq-hl-coming[aria-expanded="true"] .rq-hl-circle svg {
  color: #f59e0b !important;
  stroke: #f59e0b !important;
}


/* ── 2. SWITCHER EVENTI MOBILE — RICREATO PREMIUM ───────────────────── */
/* Esteso a max-width 1024px (incluso tablet) per non saltare casi
   browser desktop ridimensionato. */

/* Override: hide ev-pill anche fino a 1024px, switcher visibile fino lì */
@media (max-width: 1024px) {
  .rq-ev-pill {
    display: none !important;
  }

  .rq-evsw {
    display: flex !important;
    gap: 10px;
    padding: 4px 16px 14px 0;
    margin: 0 -16px 18px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-height: 88px;
  }
  .rq-evsw::-webkit-scrollbar { display: none; }

  /* Card eventi: stile premium light */
  .rq-evsw-card {
    flex-shrink: 0;
    border-radius: 14px;
    padding: 12px 14px;
    background: #fff;
    border: 0.5px solid rgba(15, 23, 42, .08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    box-sizing: border-box;
    transition:
      background .28s cubic-bezier(.22,1,.36,1),
      border-color .28s cubic-bezier(.22,1,.36,1),
      transform .22s cubic-bezier(.22,1,.36,1),
      box-shadow .22s cubic-bezier(.22,1,.36,1),
      max-width .35s cubic-bezier(.22,1,.36,1),
      opacity .25s ease-out;
    scroll-snap-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    min-width: 0;
  }

  /* CARD ATTIVA (gara visualizzata sopra): grande + anello rosa */
  .rq-evsw-card.rq-evsw-active {
    flex: 1 1 70%;
    max-width: 75%;
    background: #fff;
    border-color: rgba(236, 72, 153, .50);
    box-shadow:
      0 0 0 1px rgba(236, 72, 153, .32),
      0 4px 16px rgba(236, 72, 153, .12),
      0 1px 3px rgba(15, 23, 42, .04);
    cursor: default;
  }
  .rq-evsw-card.rq-evsw-active .rq-evsw-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -.015em;
    line-height: 1.25;
    margin-bottom: 5px;
    word-break: break-word;
  }
  .rq-evsw-card.rq-evsw-active .rq-evsw-meta {
    display: block;
    font-size: 11px;
    color: rgba(15, 23, 42, .50);
    font-weight: 500;
    letter-spacing: -.005em;
    line-height: 1.3;
  }

  /* CARD ESPLORABILI: compatte, tap = swap */
  .rq-evsw-card.rq-evsw-explorable {
    flex: 0 0 auto;
    max-width: 55%;
    background: #fafaf7;
    opacity: .95;
  }
  .rq-evsw-card.rq-evsw-explorable:hover,
  .rq-evsw-card.rq-evsw-explorable:active {
    background: #fff;
    border-color: rgba(15, 23, 42, .14);
    transform: translateY(-1px);
    box-shadow:
      0 4px 12px rgba(15, 23, 42, .06),
      0 1px 3px rgba(15, 23, 42, .04);
    opacity: 1;
  }

  /* CARD LOCKED: lock icon + opacity bassa */
  .rq-evsw-card.rq-evsw-locked {
    flex: 0 0 auto;
    max-width: 55%;
    background: rgba(15, 23, 42, .03);
    opacity: .55;
    cursor: pointer;
  }
  .rq-evsw-card.rq-evsw-locked:hover {
    opacity: .75;
  }

  /* Nomi card non-attive */
  .rq-evsw-card.rq-evsw-explorable .rq-evsw-name,
  .rq-evsw-card.rq-evsw-locked .rq-evsw-name {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(15, 23, 42, .65);
    letter-spacing: -.005em;
    line-height: 1.3;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rq-evsw-card.rq-evsw-locked .rq-evsw-name {
    color: rgba(15, 23, 42, .55);
  }

  /* Meta nascoste su card compatte */
  .rq-evsw-card.rq-evsw-explorable .rq-evsw-meta,
  .rq-evsw-card.rq-evsw-locked .rq-evsw-meta {
    display: none;
  }

  /* Hint sotto il nome */
  .rq-evsw-card.rq-evsw-explorable .rq-evsw-hint,
  .rq-evsw-card.rq-evsw-locked .rq-evsw-hint {
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: rgba(15, 23, 42, .35);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 5px;
  }
  .rq-evsw-card.rq-evsw-locked .rq-evsw-hint {
    color: rgba(15, 23, 42, .42);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .rq-evsw-card.rq-evsw-locked .rq-evsw-hint::before {
    content: "🔒";
    font-size: 9px;
    margin-right: 1px;
  }

  /* Active card non mostra hint (è già attiva, niente "vedi") */
  .rq-evsw-card.rq-evsw-active .rq-evsw-hint {
    display: none;
  }
}

/* Schermi molto piccoli (≤ 380px) */
@media (max-width: 380px) {
  .rq-evsw-card.rq-evsw-active {
    max-width: 78%;
    padding: 11px 13px;
  }
  .rq-evsw-card.rq-evsw-explorable,
  .rq-evsw-card.rq-evsw-locked {
    max-width: 60%;
    padding: 11px 12px;
  }
  .rq-evsw-card.rq-evsw-active .rq-evsw-name {
    font-size: 13.5px;
  }
}