/* profile-v2.css — Profilo V2 (docs/context/PROFILE.md, scratchpad/decisions/profilo.md).
   Attivo SOLO sotto body.profile-v2-active (account.page.js/user.page.js lo
   aggiungono quando somto.profileStyle === "v2"). Il profilo classico non è
   toccato da nessuna regola qui dentro: tutti i selettori sono scoped.

   Le card classiche (.profile-hero-card/.user-profile-card,
   #profileWatchSummary, .profile-content-card) restano gli stessi elementi
   popolati da account.page.js/user.page.js — qui le fondiamo visivamente in
   UN foglio unico (niente più bordi/ombre individuali, un solo radius in
   alto e uno in basso) e restiliamo i loro contenuti (stats, azioni) coi
   token --profile-ink e --profile-fill già definiti in account.css.

   ATTENZIONE: dentro un commento CSS mai scrivere asterisco seguito da slash
   (per esempio in un glob dei nomi dei token): chiude il commento e il testo che segue
   diventa un selettore invalido che butta via la regola successiva. Era il
   motivo per cui la regola del gap qui sotto non si applicava mai (e lo stesso
   difetto c'e' ancora in profile-tabs.css e profile-community.css). */

/* ── Tono: scuro di default, chiaro come scelta (docs/drafts/PROFILO_V2_WEB_TEMA_E_CARD.md) ─────
   I token --profile-* stanno scopati su body.profile-v2-active, MAI su :root:
   :root (account.css) resta il chiaro "paper" per onboarding, selettore
   copertina e profilo classico, che non devono cambiare. Il tono e' scelto da
   html[data-profile-tone] (js/utils/profileTone.js + script nel <head> di
   account.html/user.html, per non lampeggiare); assente = scuro. Modal,
   Libreria, selettore copertina e wizard "Modifica profilo" sono figli del
   body, quindi ereditano. --profile-surface e' la superficie OPACA (hero,
   fogli, modal: sotto c'e' la copertina o la pagina), --profile-card-bg il
   vetro delle sezioni. */
body.profile-v2-active {
  color-scheme: dark;
  --profile-gap: 12px;
  --profile-card-bg: rgba(255, 255, 255, 0.06);
  --profile-surface: #15151C;
  --profile-card-border: rgba(255, 255, 255, 0.09);
  --profile-card-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  --profile-ink: #F5F5F5;
  --profile-ink-soft: #A8A8A8;
  --profile-ink-muted: rgba(255, 255, 255, 0.56);
  --profile-fill: rgba(255, 255, 255, 0.06);
  --profile-fill-soft: rgba(255, 255, 255, 0.04);
  --profile-handle: #A8A8A8;
  --profile-link: #FF5C93;
  --profile-title-warm: #FFB300;
  --profile-warm: #F77737;
  --profile-cyan: #00D9FF;
  --profile-line: rgba(255, 255, 255, 0.09);
  --profile-hover: rgba(255, 255, 255, 0.06);
  --profile-tool-bg: rgba(255, 255, 255, 0.08);
  --profile-tool-hover: rgba(255, 255, 255, 0.14);
  --profile-shimmer-a: rgba(255, 255, 255, 0.05);
  --profile-shimmer-b: rgba(255, 255, 255, 0.11);
  --profile-focus: #FF5C93;
  --profile-danger: #FF7A95;
  --profile-field-focus: #1E1E27;
}
html[data-profile-tone="light"] body.profile-v2-active {
  color-scheme: light;
  --profile-card-bg: #FCFBF6;
  --profile-surface: #FCFBF6;
  --profile-card-border: rgba(0, 0, 0, 0.07);
  --profile-card-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  --profile-ink: #131826;
  --profile-ink-soft: #4B5563;
  --profile-ink-muted: #6B7280;
  --profile-fill: #EFF1F5;
  --profile-fill-soft: #F5F7FA;
  --profile-handle: #5F6777;
  --profile-link: #C2185B;
  --profile-title-warm: #B45309;
  --profile-warm: #A8480F;
  --profile-cyan: #00677E;
  --profile-line: rgba(0, 0, 0, 0.08);
  --profile-hover: rgba(0, 0, 0, 0.035);
  --profile-tool-bg: rgba(0, 0, 0, 0.06);
  --profile-tool-hover: rgba(0, 0, 0, 0.1);
  --profile-shimmer-a: rgba(0, 0, 0, 0.06);
  --profile-shimmer-b: rgba(0, 0, 0, 0.12);
  --profile-focus: #C2185B;
  --profile-danger: #C4122F;
  --profile-field-focus: #fff;
}

/* Vuoto fra le card: 12px, 16px dai bordi. Il selettore usa la classe del
   BODY (.account-page/.user-page sono sul body, non antenati di .page: la
   vecchia regola "body.profile-v2-active .account-page .page { gap: 0 }" non
   si applicava mai e lasciava 14px di nero fra rettangoli). */
body.profile-v2-active.account-page .page,
body.profile-v2-active.user-page .page {
  gap: var(--profile-gap);
  --container-padding: 16px;
}

/* ── Copertina ─────────────────────────────────────────────────────────
   Opzione C approvata da Paolo (fascia d'ambiente): sotto i 600px la
   copertina 16:9 nitida parte subito sotto l'header fisso (che resta
   invariato, niente stato compatto); dietro barra di stato e pillola c'e'
   la STESSA immagine, capovolta e sfocata, cosi' l'header sembra poggiare
   sulla copertina invece di galleggiarci sopra. Su desktop resta la card
   di sempre, solo con aspect-ratio invece di un'altezza fissa (il foglio
   non bleeda mai sotto l'header li'). */
.profile-v2-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 22px 22px 0 0;
  background-color: var(--profile-fill);
  /* il foglio "sale sopra" la copertina di 34px, vuoto del gap compreso */
  margin-bottom: calc(-34px - var(--profile-gap));
}
.profile-v2-cover.is-gradient {
  background-image: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary) 55%, var(--brand-warm));
}
.profile-v2-cover-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-image: var(--profile-cover-url, none);
  -webkit-mask-image: linear-gradient(transparent 0, #000 20px);
  mask-image: linear-gradient(transparent 0, #000 20px);
}
/* Sfumatura in basso, solo per leggibilita' della pill sopra un'immagine chiara. */
.profile-v2-cover-img::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.22));
}
.profile-v2-cover.is-gradient .profile-v2-cover-img { background-image: none; }
.profile-v2-cover.is-gradient .profile-v2-cover-img::after { display: none; }

/* Pill "Cambia copertina": in basso a destra dell'immagine nitida, 12px
   sopra il bordo del foglio (margin-bottom negativo) — mai appiccicata al
   bordo ne' sopra l'avatar, che sta in basso a SINISTRA a cavallo del
   bordo. */
.profile-v2-cover-pill {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: calc(34px + 12px);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  background: rgba(10, 10, 10, 0.74);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  color: #fff;
  font-size: 0.78rem;
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.profile-v2-cover-pill svg { width: 15px; height: 15px; flex: none; }
.profile-v2-cover-pill:active { transform: scale(0.96); }

/* ── Mobile (<600px): fascia d'ambiente dietro header/barra di stato ──── */
@media (max-width: 599.98px) {
  body.profile-v2-active .profile-v2-cover {
    aspect-ratio: auto;
    margin: calc(-1 * (var(--safe-top) + 4.45rem)) calc(-1 * var(--container-padding)) calc(-28px - var(--profile-gap));
    padding-top: calc(var(--safe-top) + 4.45rem);
    border-radius: 0;
  }
  /* La copertina (margine negativo, posizionata per i suoi pseudo-elementi)
     passa sopra la riga Indietro/Account di user.html e ne blocca i tocchi:
     l'header sta sopra, l'aspetto non cambia. */
  body.profile-v2-active.user-page .page-header {
    position: relative;
    z-index: 2;
  }
  body.profile-v2-active .profile-v2-cover-img {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  /* Fascia 0..header: stessa immagine capovolta e sfocata (per non fare
     una seconda richiesta di rete, e' un secondo elemento con lo stesso
     --profile-cover-url, non l'::img nitida ribaltata via transform). */
  body.profile-v2-active .profile-v2-cover::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: calc(var(--safe-top) + 4.45rem);
    background-image: var(--profile-cover-url, none);
    background-size: cover;
    background-position: center;
    transform: scaleY(-1);
    filter: blur(24px) saturate(1.15) brightness(0.85);
    z-index: 0;
  }
  body.profile-v2-active .profile-v2-cover::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: calc(var(--safe-top) + 4.45rem);
    background: linear-gradient(rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.10));
    z-index: 0;
  }
  /* Niente immagine da sfocare: il gradiente brand (sul contenitore) resta
     pieno e uniforme dietro barra di stato + pillola. */
  body.profile-v2-active .profile-v2-cover.is-gradient::before,
  body.profile-v2-active .profile-v2-cover.is-gradient::after {
    display: none;
  }
}

/* ── Card ──────────────────────────────────────────────────────────────
   Stessa geometria in scuro e chiaro: radius 22, bordo 1px, ombra di card,
   padding 16, 12px di vuoto fra l'una e l'altra (gap di .page). Hero e foglio
   Libreria sono OPACHI (--profile-surface), le altre sezioni vetro. Nessuna
   card dentro una card: l'Attivita' usa righe a filetto (piu' sotto). */
body.profile-v2-active .profile-hero-card,
body.profile-v2-active .user-profile-card,
body.profile-v2-active #profileWatchSummary,
body.profile-v2-active .profile-content-card,
body.profile-v2-active .profile-v2-section,
body.profile-v2-active .profile-v2-library-btn {
  box-sizing: border-box;
  border: 1px solid var(--profile-card-border);
  border-radius: 22px;
  box-shadow: var(--profile-card-shadow);
  margin: 0 !important;
}
body.profile-v2-active #profileWatchSummary,
body.profile-v2-active .profile-content-card,
body.profile-v2-active .profile-v2-section,
body.profile-v2-active .profile-v2-library-btn {
  background: var(--profile-card-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
body.profile-v2-active .profile-hero-card,
body.profile-v2-active .user-profile-card {
  position: relative;
  z-index: 1;
  background: var(--profile-surface);
}
body.profile-v2-active .profile-v2-section,
body.profile-v2-active .profile-v2-library-btn,
body.profile-v2-active #profileWatchSummary {
  padding: 16px;
}

/* ── Identità: avatar a cavallo del bordo, poi nome/handle/bio IMPILATI
   sotto (mockup C, stessa gerarchia di iOS) — non più una riga orizzontale
   avatar+nome, che sulla larghezza mobile (avatar 84px + i due tasti
   assoluti in alto a destra) faceva andare a capo handle+data e spingeva
   il nome sopra il bordo della copertina. ── */
/* La classe del body e' messa da uno script all'inizio del <body> (primo
   paint nel tono giusto, niente lampo di carta chiara): fino a quando la
   copertina non e' inserita (profileV2.js) l'identita' resta nel suo posto,
   poi l'avatar sale a cavallo del bordo. */
body.profile-v2-active .profile-v2-cover + .profile-hero-card,
body.profile-v2-active .profile-v2-cover + .user-profile-card {
  padding-top: 0;
}
body.profile-v2-active .profile-hero-identity {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-right: 0;
  min-height: 0;
}
body.profile-v2-active .profile-v2-cover + .profile-hero-card .profile-hero-identity,
body.profile-v2-active .profile-v2-cover + .user-profile-card .profile-hero-identity {
  margin-top: -44px;
}
body.profile-v2-active .profile-hero-avatar {
  width: 84px;
  height: 84px;
  border: 3px solid var(--profile-surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
body.profile-v2-active .profile-hero-avatar-inner {
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
}
body.profile-v2-active .profile-hero-meta {
  margin-top: 0.6rem;
  width: 100%;
}
/* Nome: resta una riga sola (fitProfileName la rimpicciolisce, qui solo il
   margine per non finire sotto i tasti assoluti in alto a destra). */
body.profile-v2-active .profile-hero-name {
  padding-right: 4.6rem;
  box-sizing: border-box;
}
/* Handle (+ "· su Somto da <mese>" nello stesso nodo testo, vedi
   profileV2.js/user.page.js): una riga sola con ellissi, mai a capo. */
body.profile-v2-active .profile-hero-handle {
  display: block;
  margin: 0.2rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.profile-v2-bio {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--profile-ink-soft);
  line-height: 1.4;
}
button.profile-v2-bio-empty {
  appearance: none;
  border: 1px dashed var(--profile-card-border);
  border-radius: 999px;
  background: none;
  margin-top: 0.4rem;
  padding: 0.3rem 0.7rem;
  color: var(--profile-ink-muted);
  font-size: 0.82rem;
  cursor: pointer;
  align-self: flex-start;
}

body.profile-v2-active .profile-hero-stats {
  margin-top: 0.9rem;
  background: var(--profile-fill);
  border-radius: 18px;
  padding: 0.55rem 0.2rem;
}
body.profile-v2-active .profile-hero-stat {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}
body.profile-v2-active .profile-hero-stat.is-tappable,
body.profile-v2-active button.profile-hero-stat {
  cursor: pointer;
}
body.profile-v2-active .profile-hero-stat-value {
  color: var(--profile-ink);
}
body.profile-v2-active .profile-hero-stat-label {
  color: var(--profile-ink-muted);
}

/* ── Sezioni: titoletto in maiuscoletto ───────────────────── */
.profile-v2-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--profile-ink-muted);
  margin-bottom: 0.6rem;
}
.profile-v2-label-action {
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--weight-semibold);
  font-size: 0.78rem;
  color: var(--profile-link);
}

/* ── Affinità ──────────────────────────────────────────── */
.profile-v2-affinity {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.profile-v2-affinity-number {
  font-family: var(--font-display, inherit);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  flex: none;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile-v2-affinity-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.profile-v2-affinity-copy b { color: var(--profile-ink); font-size: 0.94rem; }
.profile-v2-affinity-copy span { color: var(--profile-ink-muted); font-size: 0.8rem; }
.profile-v2-affinity-stack {
  display: flex;
  margin-top: 0.4rem;
}
.profile-v2-affinity-poster {
  width: 30px;
  height: 44px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--profile-fill);
  border: 2px solid var(--profile-surface);
  margin-left: -10px;
}
.profile-v2-affinity-poster:first-child { margin-left: 0; }

/* ── Gusti (frase editoriale) ──────────────────────────── */
.profile-v2-taste-sentence {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--profile-ink);
}
/* I generi in rosa (--profile-link, sopra 4,5:1 in entrambi i toni), come nel
   mockup; peso e corpo restano quelli della frase. */
.profile-v2-taste-sentence em {
  font-style: normal;
  color: var(--profile-link);
}

/* ── Sta/Stai guardando ────────────────────────────────── */
.profile-v2-watching-row {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  margin: 0 -16px;
  padding: 0 16px 0.2rem;
  scrollbar-width: none;
}
.profile-v2-watching-row::-webkit-scrollbar { display: none; }
.profile-v2-watching-card {
  flex: 0 0 auto;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.profile-v2-watching-image {
  width: 220px;
  height: 124px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-color: var(--profile-fill);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.5rem 0.6rem;
  color: #fff;
}
.profile-v2-watching-image::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.65));
}
.profile-v2-watching-name, .profile-v2-watching-episode {
  position: relative;
  font-size: 0.84rem;
  font-weight: var(--weight-bold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-v2-watching-episode {
  font-style: normal;
  font-weight: var(--weight-medium);
  opacity: 0.9;
  font-size: 0.74rem;
}
.profile-v2-watching-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--profile-fill);
  overflow: hidden;
}
.profile-v2-watching-progress i {
  display: block;
  height: 100%;
  background: var(--brand-primary);
}

/* ── Condividi statistiche (accanto al titolo "Tempo di visione") ── */
.profile-v2-share-stats {
  appearance: none;
  border: 1.5px solid var(--profile-card-border);
  background: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--profile-ink);
  margin-left: auto;
  cursor: pointer;
}
.profile-v2-share-stats svg { width: 15px; height: 15px; }

/* ── Attività (compatta) ──────────────────────────────── */
/* Righe a filetto dentro la card, non card annidate (UI reviewer: nessuna card
   dentro una card). L'overlay "Tutta" resta una lista di card: li' sono su un
   foglio proprio, non dentro un'altra card. */
body.profile-v2-active .profile-v2-activity-preview.profile-community-list { gap: 0; padding: 0; }
.profile-v2-activity-preview .profile-community-card {
  padding: 0.75rem 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.profile-v2-activity-preview .profile-community-card + .profile-community-card {
  border-top: 1px solid var(--profile-line);
}
.profile-v2-activity-preview .profile-community-card:first-child { padding-top: 0.15rem; }
.profile-v2-activity-preview .profile-community-card:last-child { padding-bottom: 0.15rem; }

/* ── Tasto Libreria ───────────────────────────────────── */
.profile-v2-library-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 0.94rem;
  font-weight: var(--weight-bold);
  color: var(--profile-ink);
  cursor: pointer;
}
.profile-v2-library-btn svg { width: 18px; height: 18px; color: var(--profile-ink-muted); }

/* ── Liste ────────────────────────────────────────────── */
.profile-v2-lists-row {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.profile-v2-lists-row::-webkit-scrollbar { display: none; }
.profile-v2-list-tile {
  flex: 0 0 auto;
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--profile-ink);
}
.profile-v2-list-cover {
  height: 74px;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-auto-flow: column;
  background: var(--profile-fill);
}
.profile-v2-list-cell {
  background-size: cover;
  background-position: center;
  background-color: var(--profile-fill);
}
.profile-v2-list-name {
  font-size: 0.82rem;
  font-weight: var(--weight-semibold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-v2-list-visibility {
  font-size: 0.7rem;
  color: var(--profile-ink-muted);
}

/* ── Libreria: bottom sheet mezza altezza / a tutto schermo ────────────
   Riusa .profile-content-card com'è (tab Visti/filtri/paginazione
   invariati): maniglia fissa + scroller sono un reparent DOM (profileV2.js),
   mai una riscrittura. L'overlay Attività resta un semplice fullscreen
   (.profile-v2-overlay piu' sotto), fuori da questo punto. */
body.profile-v2-overlay-lock { overflow: hidden; }

.profile-v2-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.5);
}
.profile-v2-sheet-backdrop[hidden] { display: none; }

body.profile-v2-active .profile-content-card.profile-v2-library-card {
  display: none;
}
body.profile-v2-active .profile-content-card.profile-v2-library-card.profile-v2-overlay-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  margin: 0 !important;
  border: 0;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.35) !important;
  background: var(--profile-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 22px 22px 0 0;
  padding: 0;
  padding-bottom: var(--safe-bottom, 0px);
  overflow: hidden;
  transition: height var(--transition-smooth);
}
body.profile-v2-active .profile-content-card.profile-v2-library-card.profile-v2-overlay-open.is-dragging {
  transition: none;
}
body.profile-v2-active .profile-content-card.profile-v2-library-card.profile-v2-overlay-open.profile-v2-sheet-half {
  height: 60vh;
  height: 60dvh;
}
body.profile-v2-active .profile-content-card.profile-v2-library-card.profile-v2-overlay-open.profile-v2-sheet-full {
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  padding-top: var(--safe-top, 0px);
}

.profile-v2-sheet-grab-row {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.1rem 0.3rem;
  touch-action: none;
  cursor: grab;
}
.profile-v2-sheet-grab {
  width: 2.4rem;
  height: 4px;
  border-radius: 2px;
  background: var(--profile-card-border);
}
.profile-v2-sheet-close {
  position: absolute;
  right: 0.7rem;
  top: 0.3rem;
  appearance: none;
  border: 0;
  background: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--profile-ink-muted);
  cursor: pointer;
}
.profile-v2-sheet-close svg { width: 16px; height: 16px; }
.profile-v2-sheet-close:hover { background: var(--profile-fill); color: var(--profile-ink); }

/* .profile-tabs {display:flex} (account.css) e la regola nativa
   [hidden]{display:none} hanno la stessa specificita': l'ultima caricata
   vince, quindi senza questa riga la tab bar classica restava visibile
   anche con l'attributo hidden impostato (ensureLibraryOverlay). */
body.profile-v2-active .profile-content-card .profile-tabs[hidden] {
  display: none !important;
}

.profile-v2-sheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 1.1rem 1.4rem;
}
/* A meta' altezza lo scroll nativo e' disattivato: qualunque trascinamento
   sul contenuto lo espande a tutto schermo (attachSheetDrag in profileV2.js),
   zero conflitto fra gesto e scroll. */
body.profile-v2-active .profile-content-card.profile-v2-library-card.profile-v2-sheet-half .profile-v2-sheet-scroll {
  overflow-y: hidden;
  touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
  body.profile-v2-active .profile-content-card.profile-v2-library-card.profile-v2-overlay-open,
  .profile-v2-sheet-backdrop {
    transition-duration: 0.01ms !important;
  }
}

/* Desktop largo: pannello centrato alto quanto serve, niente maniglia
   trascinabile ne' stati mezzo/pieno (spec §3). */
@media (min-width: 860px) {
  body.profile-v2-active .profile-content-card.profile-v2-library-card.profile-v2-overlay-open {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, calc(100vw - 3rem));
    height: auto !important;
    max-height: 85vh;
    border-radius: 22px;
  }
  body.profile-v2-active .profile-content-card.profile-v2-library-card.profile-v2-overlay-open .profile-v2-sheet-scroll {
    overflow-y: auto !important;
    touch-action: auto;
    max-height: calc(85vh - 2.4rem);
  }
  .profile-v2-sheet-grab-row { cursor: default; }
  .profile-v2-sheet-grab { display: none; }
}

.profile-v2-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  background: var(--profile-surface);
  padding: calc(var(--safe-top, 0px) + 0.8rem) 1.1rem 2rem;
}
.profile-v2-overlay-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}
.profile-v2-overlay-back {
  appearance: none;
  border: 0;
  background: none;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--profile-ink);
  cursor: pointer;
  flex: none;
}
.profile-v2-overlay-back svg { width: 20px; height: 20px; }
.profile-v2-overlay-title {
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--profile-ink);
}

/* categoryStrip spostato dentro l'overlay Libreria: solo margine, i colori
   restano quelli di account.css (gia' su token paper). */
.profile-v2-library-card #categoryStrip {
  margin-bottom: 0.8rem;
}

@media (max-width: 420px) {
  .profile-v2-watching-card, .profile-v2-watching-image { width: 180px; }
  .profile-v2-watching-image { height: 100px; }
}

/* ── Colori che account.css/profile-*.css avevano fissi (chiaro) ─────────────
   Solo sotto body.profile-v2-active: il classico non e' toccato. Seguono i
   token del tono, quindi valgono per scuro e chiaro. */
body.profile-v2-active .profile-hero-handle,
body.profile-v2-active .profile-hero-stat-label {
  color: var(--profile-handle);
}
body.profile-v2-active .profile-hero-tool {
  background: var(--profile-tool-bg);
  color: var(--profile-ink);
}
body.profile-v2-active .profile-hero-tool:hover { background: var(--profile-tool-hover); }
body.profile-v2-active .profile-hero-stat:hover { background: var(--profile-hover); }
body.profile-v2-active .profile-hero-stat-divider,
body.profile-v2-active .profile-category-divider {
  background: var(--profile-line);
}
body.profile-v2-active .profile-hero-avatar-edit { border-color: var(--profile-surface); }
body.profile-v2-active .profile-watchtime-title { color: var(--profile-title-warm); }
body.profile-v2-active .profile-watchtime-badge-sub { color: var(--profile-ink-muted); }
body.profile-v2-active .profile-watchtime-divider { color: var(--profile-ink-soft); opacity: 0.8; }
body.profile-v2-active .profile-import-cta { color: var(--profile-ink); }
body.profile-v2-active .profile-import-cta-icon { color: var(--profile-link); }
body.profile-v2-active .profile-tabs { border-bottom-color: var(--profile-line); }
body.profile-v2-active .profile-tab { color: var(--profile-ink-muted); }
body.profile-v2-active .profile-tab.active { color: var(--profile-ink); }
body.profile-v2-active .profile-search { border-color: var(--profile-card-border); }
body.profile-v2-active .activity-section + .activity-section { border-top-color: var(--profile-line); }
body.profile-v2-active .page-btn {
  background: var(--profile-fill);
  border-color: var(--profile-card-border);
  color: var(--profile-ink);
}
body.profile-v2-active .stat-loading,
body.profile-v2-active .profile-watchtime-badge.stat-loading,
body.profile-v2-active .profile-category-strip.is-loading .profile-category-count,
body.profile-v2-active .skeleton-block,
body.profile-v2-active .skeleton-line {
  background: linear-gradient(90deg, var(--profile-shimmer-a) 0%, var(--profile-shimmer-b) 50%, var(--profile-shimmer-a) 100%);
  background-size: 200% 100%;
}
/* Rosa dei link e delle chip: #E91E63 non arriva a 4,5:1 ne' sul chiaro (4,2)
   ne' sullo scuro (3,6). */
body.profile-v2-active .profile-community-typechip.type-review,
body.profile-v2-active .profile-community-rating,
body.profile-v2-active .profile-community-toggle {
  color: var(--profile-link);
}
body.profile-v2-active .profile-community-typechip.type-emotion { color: var(--profile-warm); }
body.profile-v2-active .profile-community-typechip.type-post { color: var(--profile-cyan); }
/* Focus: anello visibile sia sul chiaro sia sullo scuro. */
body.profile-v2-active :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--profile-focus);
  outline-offset: 2px;
}

/* Lista Attivita' (overlay "Tutta"): la regola base sta in
   profile-community.css ma un commento mal chiuso la butta via (vedi nota in
   testa); qui il V2 se la dichiara, il classico resta com'e'. Lo stato vuoto
   [hidden] perde contro display:flex di .profile-empty (account.css): nel V2 no. */
body.profile-v2-active .profile-community-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.7rem 0;
}
body.profile-v2-active .profile-empty[hidden] { display: none; }

/* Etichette lunghe (el, fr) a 320px: le colonne possono restringersi e
   l'etichetta va in ellissi, invece di allargare la pagina in orizzontale. */
body.profile-v2-active .profile-hero-stats { gap: 0.25rem; }
body.profile-v2-active .profile-hero-stat { min-width: 0; }
body.profile-v2-active .profile-hero-stat-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 359.98px) {
  body.profile-v2-active .profile-hero-stat-label { font-size: 0.64rem; letter-spacing: 0; }
}

/* Tasti tondi 36px con area di tocco di almeno 44px (estesa con un pseudo-
   elemento, senza ingrandire il disegno). */
body.profile-v2-active .profile-hero-tools { gap: 8px; }
body.profile-v2-active .profile-hero-tool,
body.profile-v2-active .profile-v2-share-stats,
body.profile-v2-active .profile-v2-overlay-back {
  position: relative;
  width: 36px;
  height: 36px;
}
body.profile-v2-active .profile-v2-sheet-close {
  width: 36px;
  height: 36px;
  top: 0.15rem;
}
body.profile-v2-active .profile-hero-tool::after,
body.profile-v2-active .profile-v2-share-stats::after,
body.profile-v2-active .profile-v2-sheet-close::after,
body.profile-v2-active .profile-v2-overlay-back::after,
body.profile-v2-active .profile-v2-cover-pill::after {
  content: "";
  position: absolute;
  inset: -4px;
}
body.profile-v2-active .profile-v2-cover-pill { min-height: 36px; }
/* Anche la pill nell'anteprima del wizard "Modifica profilo": su copertina
   bianca il testo bianco deve restare a 4,5:1. */
body.profile-v2-active .onboarding-identity-cover-pill { background: rgba(10, 10, 10, 0.74); }
/* Wizard "Modifica profilo": sfumatura del piede e contatore della bio nel
   colore del foglio (in onboarding.css restano quelli della carta chiara). */
body.profile-v2-active .onboarding-modal.onboarding-modal-identity .onboarding-wizard-footer {
  background: linear-gradient(180deg, color-mix(in srgb, var(--profile-surface) 0%, transparent), color-mix(in srgb, var(--profile-surface) 98%, transparent) 35%);
}
body.profile-v2-active .onboarding-modal-identity .onboarding-field-bio .char-counter {
  background: color-mix(in srgb, var(--profile-surface) 88%, transparent);
}
body.profile-v2-active .profile-hero-tool svg { width: 1rem; height: 1rem; }

/* ── Fogli del profilo (menu ⋯, follower/seguiti): stesso tono del profilo ──
   Prima erano sempre scuri (token globali): sul chiaro stonavano con la
   Libreria e il selettore copertina, che sono carta. */
body.profile-v2-active .social-modal .modal-content {
  background: var(--profile-surface);
  color: var(--profile-ink);
  border-color: var(--profile-card-border);
}
body.profile-v2-active .social-modal .modal-header h2 { color: var(--profile-ink); }
body.profile-v2-active .social-modal .modal-header .btn {
  background: var(--profile-fill);
  border: 1px solid var(--profile-card-border);
  color: var(--profile-ink);
}
body.profile-v2-active .friends-search input {
  background: var(--profile-fill);
  border-color: var(--profile-card-border);
  color: var(--profile-ink);
}
body.profile-v2-active .friends-search input::placeholder { color: var(--profile-ink-muted); }
body.profile-v2-active .friend-item { color: var(--profile-ink); }
body.profile-v2-active .friend-item:hover { background: var(--profile-hover); }
body.profile-v2-active .social-modal .hint,
body.profile-v2-active .social-modal .list-item-subtitle { color: var(--profile-ink-muted); }
body.profile-v2-active .social-modal .list-item-title { color: var(--profile-ink); }
body.profile-v2-active .social-list-item {
  background: var(--profile-fill);
  border-color: var(--profile-card-border);
}
body.profile-v2-active .profile-menu-action {
  background: var(--profile-fill);
  border-color: var(--profile-card-border);
  color: var(--profile-ink);
}
body.profile-v2-active .profile-menu-action:hover { background: var(--profile-hover); }
body.profile-v2-active .profile-menu-action.is-danger {
  background: rgba(255, 23, 68, 0.12);
  border-color: rgba(255, 23, 68, 0.26);
  color: var(--profile-danger);
}
body.profile-v2-active .profile-menu-check { color: var(--profile-link); }