/* ============================================================
   cm_hub.css - Community IPTV
   [COMMUNITY-20102026] prima versione
   [PLAYER-21102026] seconda versione: in fondo al file,
   l'anteprima dei canali (finestra di cm_player_inc.php).
   [GUIDA-21102026] terza versione: in fondo al file, la pagina
   pubblica della guida (cm_guida.php), classi .hb-gd-*; quarta
   versione: .hb-top-b e .hb-top-wrap, due pulsanti accanto al
   titolo.

   Stile delle pagine pubbliche della Community, nella stessa
   linea dell'area riservata (cm_ui.css): sfondo grafite pieno,
   superfici grigie, magenta solo per il pulsante principale,
   verde, giallo e rosso solo per gli stati.

   Pagine: community.php, community_lista.php, cm_bacheca.php,
   cm_forum.php, cm_forum_domanda.php, cm_forum_nuova.php,
   cm_streamers.php, cm_streamer.php, cm_epg_oggi.php,
   cm_login.php, cm_registrazione.php, cm_recupero.php, cm_guida.php.

   Si carica con $extraHead DOPO cm_ui.css, che resta il foglio
   comune: qui si usano le sue variabili (--ui-*) e i suoi pezzi
   (.ui-btn, .ui-card, .ui-note, .ui-check, .ui-modal). Nessun
   colore nuovo. cm_ui.css e le pagine dell'area riservata non
   cambiano.

   Prefisso riservato: .hb-
   Mobile: da 760px in giu' (iPhone e telefoni). I campi di testo
   sono a 16px, cosi' iPhone non ingrandisce la pagina al tocco.
   ============================================================ */

/* -- Pagina --------------------------------------------------- */
/* [COMMUNITY-20102026] Larghezza: tutte le pagine sono larghe come
   la testata del sito (.nav-wrap di style.css): stessi 1200px e
   stessi margini, sul computer e sul telefono. Il contenuto parte
   sotto il logo e finisce sotto l'avatar. Le classi hb-narrow e
   hb-form-page restano nel markup ma non restringono piu' la pagina. */
.hb-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(68px + 1.6rem) clamp(1.25rem, 4vw, 2.5rem) calc(5rem + env(safe-area-inset-bottom));
}

.hb-page a, .hb-auth a { -webkit-tap-highlight-color: transparent; }
.hb-page :focus-visible, .hb-auth :focus-visible {
  outline: 2px solid var(--ui-acc); outline-offset: 2px;
}

/* Messaggi flash di cm_auth.php (cm-alert) nello stile di cm_ui.css */
.hb-page .cm-alert, .hb-auth .cm-alert {
  display: flex; gap: .7rem; align-items: flex-start;
  margin: 0 0 1.4rem; padding: .9rem 1.1rem;
  border: 1px solid var(--ui-line); border-left: 3px solid var(--ui-txt3);
  border-radius: var(--ui-r-sm); background: var(--ui-surf);
  color: var(--ui-txt); font-size: .9rem; line-height: 1.5;
}
.hb-page .cm-alert-success, .hb-auth .cm-alert-success { border-left-color: var(--ui-ok); }
.hb-page .cm-alert-success i, .hb-auth .cm-alert-success i { color: var(--ui-ok); }
.hb-page .cm-alert-error, .hb-auth .cm-alert-error { border-left-color: var(--ui-err); }
.hb-page .cm-alert-error i, .hb-auth .cm-alert-error i { color: var(--ui-err); }
.hb-page .cm-alert-info, .hb-auth .cm-alert-info { border-left-color: var(--ui-acc); }
.hb-page .cm-alert-info i, .hb-auth .cm-alert-info i { color: var(--ui-acc); }

/* Ritorno alla sezione nelle pagine interne */
.hb-back {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-bottom: 1rem; font-size: .88rem; color: var(--ui-txt2); text-decoration: none;
}
.hb-back:hover { color: var(--ui-txt); }

/* -- Linguette delle sezioni (Bacheca, Liste, Forum, Streamers) */
.hb-hub {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  margin-bottom: 1.8rem; padding: 4px;
  border: 1px solid var(--ui-line2); border-radius: 12px; background: var(--ui-deep);
}
.hb-hub a {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  height: 44px; padding: 0 .6rem; border-radius: 9px;
  font-size: .92rem; font-weight: 600; color: var(--ui-txt2); text-decoration: none;
}
.hb-hub a i { font-size: .95rem; color: var(--ui-txt3); }
.hb-hub a.on { background: var(--ui-surf2); color: var(--ui-txt); }
.hb-hub a.on i { color: var(--ui-txt); }
.hb-hub em {
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--ui-surf2); color: var(--ui-txt2);
  font-size: .72rem; font-style: normal; font-weight: 700; line-height: 20px; text-align: center;
}
.hb-hub a.on em { background: var(--ui-acc); color: #fff; }

/* -- Testata della pagina ------------------------------------ */
.hb-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.hb-top h1 { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: var(--ui-txt); }
.hb-top p { margin: .3rem 0 0; font-size: .92rem; line-height: 1.45; color: var(--ui-txt2); }
.hb-top p b { font-weight: 600; color: var(--ui-txt); }
.hb-top .ui-btn { flex-shrink: 0; }

/* Presentazione per chi non e' iscritto */
.hb-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 1.5rem 2.5rem; margin-bottom: 1.6rem; padding: 1.6rem 1.7rem;
}
.hb-intro h1 { margin: 0 0 .45rem; font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: var(--ui-txt); }
.hb-intro p { max-width: 620px; margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ui-txt2); }
.hb-intro p strong { font-weight: 600; color: var(--ui-txt); }
.hb-intro .hb-legal { margin-top: .7rem; font-size: .82rem; color: var(--ui-txt3); }
.hb-intro .hb-legal a { color: var(--ui-txt2); text-decoration: underline; }
.hb-nums { display: flex; gap: 1.8rem; margin-bottom: 1.1rem; }
.hb-nums div { display: flex; flex-direction: column; }
.hb-nums b { font-size: 1.45rem; font-weight: 700; line-height: 1.1; color: var(--ui-txt); font-variant-numeric: tabular-nums; }
.hb-nums span { margin-top: .2rem; font-size: .78rem; color: var(--ui-txt3); }
.hb-btns { display: flex; gap: .5rem; }
.hb-btns .ui-btn { height: 44px; padding: 0 1.2rem; }

/* -- Ricerca e scelte ---------------------------------------- */
.hb-tools { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.3rem; }
.hb-search { position: relative; flex: 1; max-width: 460px; margin: 0; }
.hb-search > i {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  font-size: .88rem; color: var(--ui-txt3); pointer-events: none;
}
.hb-search input {
  width: 100%; height: 44px; padding: 0 1rem 0 2.5rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-surf); color: var(--ui-txt);
  font: inherit; font-size: 16px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.hb-search input::placeholder { color: var(--ui-txt3); }
.hb-search input:focus { border-color: var(--ui-acc); }
.hb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Scelta a segmenti: ordine, filtri, linguette di una pagina */
.hb-seg {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px;
  padding: 3px; border: 1px solid var(--ui-line2); border-radius: 10px; background: var(--ui-deep);
}
.hb-seg a, .hb-seg button {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  height: 36px; padding: 0 .95rem; border: 0; border-radius: 7px; background: none;
  font: inherit; font-size: .86rem; font-weight: 600; color: var(--ui-txt2);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.hb-seg .on { background: var(--ui-surf2); color: var(--ui-txt); }
.hb-seg em {
  min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--ui-surf2); color: var(--ui-txt2);
  font-size: .7rem; font-style: normal; line-height: 18px; text-align: center;
}
.hb-seg .on em { background: var(--ui-acc); color: #fff; }
.hb-seg .hb-m { display: none; }
.hb-filt { margin-bottom: 1.1rem; }

.hb-found { margin: 0 0 .8rem; font-size: .85rem; color: var(--ui-txt3); }
.hb-found b { font-weight: 600; color: var(--ui-txt2); }

/* -- Etichette ----------------------------------------------- */
.hb-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  height: 22px; padding: 0 .5rem; border-radius: 6px;
  background: var(--ui-surf2); color: var(--ui-txt2);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.hb-tag i { font-size: .68rem; }
.hb-tag.is-epg, .hb-tag.is-ok { background: rgba(52, 201, 138, .14); color: var(--ui-ok); }
.hb-tag.is-prem { background: rgba(240, 180, 41, .14); color: var(--ui-warn); }

/* -- Copertina con il logo e lo sfondo sfocato --------------- */
.hb-cover {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--ui-surf2);
}
.hb-cover > .bg { position: absolute; inset: -20%; }
.hb-cover > .bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.1); opacity: .55; }
.hb-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 24, 29, .15), rgba(21, 24, 29, .45)); }
.hb-cover > .lg { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.hb-cover > .lg img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.hb-cover > .lg i { font-size: 1.6rem; color: var(--ui-txt3); }

/* -- Numeri in riga (download, mi piace, commenti) ----------- */
.hb-stats { display: flex; align-items: center; gap: 1rem; font-size: .84rem; color: var(--ui-txt2); font-variant-numeric: tabular-nums; }
.hb-stats > span { display: inline-flex; align-items: center; gap: .35rem; }
.hb-stats i { font-size: .78rem; color: var(--ui-txt3); }
.hb-by { display: flex; align-items: center; gap: .45rem; margin-top: .4rem; min-width: 0; font-size: .84rem; color: var(--ui-txt2); }
.hb-by img { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.hb-by span { color: var(--ui-txt3); white-space: nowrap; }

/* Pulsante dell'anteprima: e' un .cm-plgo (lo apre cm_player_inc.php),
   qui prende la forma dei pulsanti di cm_ui.css. */
.hb-page .cm-plgo {
  height: 34px; padding: 0 .8rem; gap: .45rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-surf); color: var(--ui-txt);
  font-size: .85rem; font-weight: 600; filter: none;
}
.hb-page .cm-plgo > i { font-size: .75rem; color: var(--ui-txt); }
.hb-page .cm-plgo:hover { background: var(--ui-surf2); filter: none; }
.hb-page .cm-plgo.hb-play {
  width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%;
}
.hb-page .cm-plgo.hb-play > i { margin-left: 2px; font-size: .8rem; }
.hb-page .cm-plgo:disabled, .hb-page .cm-plgo.is-off {
  opacity: .3; background: var(--ui-surf); border-color: var(--ui-line2); cursor: not-allowed;
}

/* -- Vetrina: card sul computer ------------------------------ */
/* [COMMUNITY-20102026] Card piccole come quelle degli streamers
   (.hb-sgrid): 4 per riga, 3 sotto i 1000px, copertina di 92px. */
.hb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hb-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ui-surf); border: 1px solid var(--ui-line); border-radius: var(--ui-r);
  transition: border-color .15s;
}
.hb-card-top { position: relative; display: block; }
.hb-card .hb-cover { height: 92px; }
.hb-card .hb-cover > .lg { width: 110px; height: 60px; }
.hb-card-tags { position: absolute; z-index: 2; top: .7rem; left: .7rem; right: .7rem; display: flex; justify-content: space-between; gap: .4rem; }
.hb-card-tags .hb-tag { background: rgba(21, 24, 29, .82); }
.hb-card-tags .is-prem { margin-left: auto; }
.hb-card-body { flex: 1; padding: .8rem 1rem .8rem; }
.hb-card-body h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.hb-card-body h3 a { color: var(--ui-txt); text-decoration: none; }
.hb-card-body p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: .45rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--ui-txt2);
}
.hb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1rem; border-top: 1px solid var(--ui-line); }
.hb-card-foot .hb-stats { gap: .75rem; font-size: .8rem; }
/* Nella card piccola l'anteprima e' il tasto tondo delle righe del
   telefono: la scritta resta per i lettori di schermo (font-size 0) */
.hb-page .hb-card-foot .cm-plgo {
  flex-shrink: 0; width: 32px; height: 32px; padding: 0; justify-content: center;
  border-radius: 50%; font-size: 0;
}
.hb-page .hb-card-foot .cm-plgo > i { margin-left: 2px; font-size: .72rem; }

/* -- Vetrina: righe sul telefono ----------------------------- */
.hb-rows { display: none; }
.hb-li {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) 40px; align-items: center; gap: .9rem;
  margin-bottom: .6rem; padding: .8rem;
  background: var(--ui-surf); border: 1px solid var(--ui-line); border-radius: var(--ui-r);
}
.hb-li > a { display: block; min-width: 0; color: inherit; text-decoration: none; }
.hb-li .hb-cover { width: 76px; height: 76px; border-radius: 10px; }
.hb-li .hb-cover > .lg { width: 58px; height: 46px; }
.hb-li .hb-cover > .lg img { border-radius: 4px; }
.hb-li h3 { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--ui-txt); }
.hb-li h3 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-li h3 i { flex-shrink: 0; font-size: .78rem; color: var(--ui-warn); }
.hb-li .hb-by { margin-top: .2rem; font-size: .82rem; }
.hb-li .hb-stats { margin-top: .45rem; gap: .85rem; font-size: .8rem; }
.hb-li .hb-tag { height: 19px; padding: 0 .4rem; font-size: .66rem; }

/* -- Paginazione --------------------------------------------- */
.hb-pager { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 1.6rem 0 0; }
.hb-pager .ui-btn { min-width: 40px; padding: 0 .8rem; }
.hb-pager .on { background: var(--ui-surf2); border-color: var(--ui-txt3); cursor: default; }
.hb-pager .is-off { opacity: .45; pointer-events: none; }
.hb-pager-dots { min-width: 24px; text-align: center; color: var(--ui-txt3); }
.hb-pager-m { display: none; }
.hb-pager-m span { font-size: .86rem; color: var(--ui-txt2); }

/* -- Stato vuoto --------------------------------------------- */
.hb-empty { padding: 2.4rem 1.5rem; text-align: center; }
.hb-empty > i {
  width: 52px; height: 52px; margin: 0 auto 1rem; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ui-surf2); color: var(--ui-txt2); font-size: 1.15rem;
}
.hb-empty h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ui-txt); }
.hb-empty p { max-width: 460px; margin: .4rem auto 0; font-size: .92rem; line-height: 1.55; color: var(--ui-txt2); }
.hb-empty .ui-btn { margin-top: 1.1rem; }

/* -- Sezioni sotto un elenco --------------------------------- */
.hb-sec { margin-top: 2.6rem; }
.hb-more { display: flex; justify-content: center; margin-top: .9rem; }

/* Sostieni la Community */
.hb-sup { display: flex; align-items: center; gap: 1.2rem; padding: 1.3rem 1.5rem; }
.hb-sup-ic {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ui-surf2); color: var(--ui-acc); font-size: 1.1rem;
}
.hb-sup > div { flex: 1; min-width: 0; }
.hb-sup h2, .hb-sup h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ui-txt); }
.hb-sup p { margin: .2rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--ui-txt2); }
.hb-sup .hb-sup-act { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.hb-sup-act small { font-size: .76rem; color: var(--ui-txt3); }

/* Riquadro riservato agli iscritti */
.hb-lock { display: flex; align-items: center; gap: 1rem; padding: 1.3rem 1.5rem; }
.hb-lock > i {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ui-surf2); color: var(--ui-txt2);
}
.hb-lock > div { flex: 1; min-width: 0; }
.hb-lock h3 { margin: 0; font-size: .98rem; font-weight: 700; color: var(--ui-txt); }
.hb-lock p { margin: .2rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--ui-txt2); }
.hb-lock .hb-btns .ui-btn { height: 40px; }

/* Link consigliati dagli utenti */
.hb-lk { overflow: hidden; }
.hb-lk-i { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: .8rem; padding: 1rem 1.2rem; border-top: 1px solid var(--ui-line); }
.hb-lk-i:first-child { border-top: 0; }
.hb-lk-i > img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.hb-lk-h { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.hb-lk-h b { font-weight: 600; color: var(--ui-txt); }
.hb-lk-h span { color: var(--ui-txt3); }
.hb-lk-h .hb-tag { margin-left: auto; }
.hb-lk-i p { margin: .3rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--ui-txt); overflow-wrap: anywhere; }
.hb-lk-url {
  display: flex; align-items: center; gap: .5rem; margin-top: .55rem; padding: .5rem .5rem .5rem .75rem;
  border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-bg);
}
.hb-lk-url code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; color: var(--ui-txt2); }
.hb-lk-act { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; }
.hb-lk-act .ui-btn { height: 32px; padding: 0 .7rem; font-size: .8rem; }
.hb-ln {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 32px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .82rem; color: var(--ui-txt3); text-decoration: none;
}
.hb-ln:hover { color: var(--ui-txt); }
.hb-lk-act .hb-ln:first-of-type { margin-left: auto; }
.hb-lk-act .hb-ln + .hb-ln { margin-left: .6rem; }

/* ============================================================
   DETTAGLIO LISTA (community_lista.php)
   ============================================================ */
.hb-det { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 1.5rem; }
.hb-side { position: sticky; top: calc(68px + 1rem); display: flex; flex-direction: column; gap: 1rem; }

.hb-head { padding: 1.4rem; }
.hb-head-top { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 1.3rem; }
.hb-head .hb-cover { width: 112px; height: 112px; border-radius: var(--ui-r); }
.hb-head .hb-cover > .lg { width: 84px; height: 66px; }
.hb-head h1 { margin: 0; font-size: 1.55rem; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: var(--ui-txt); overflow-wrap: anywhere; }
.hb-head .hb-by { margin-top: .45rem; font-size: .9rem; }
.hb-head .hb-by img { width: 24px; height: 24px; }
.hb-head-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.hb-desc { margin: 1.1rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--ui-txt2); overflow-wrap: anywhere; }
.hb-desc.is-cut { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hb-desc-more { margin-top: .3rem; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600; color: var(--ui-txt); }
.hb-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.2rem 0 0; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-bg); }
.hb-kpi div { min-width: 0; padding: .7rem .9rem; border-left: 1px solid var(--ui-line); }
.hb-kpi div:first-child { border-left: 0; }
.hb-kpi b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.1rem; font-weight: 700; color: var(--ui-txt); font-variant-numeric: tabular-nums; }
.hb-kpi span { font-size: .78rem; color: var(--ui-txt3); }
.hb-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.hb-acts .ui-btn-ic { flex: 0 0 40px; width: 40px; }
.hb-acts .is-on, .hb-acts .is-on i { color: var(--ui-acc); }

/* Riquadri della colonna principale */
.hb-box { margin-top: 1rem; padding: 1.3rem 1.4rem; }
.hb-box-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.hb-box-h h2 { margin: 0; font-size: 1.08rem; font-weight: 700; color: var(--ui-txt); }
.hb-box-h h2 small { margin-left: .4rem; font-size: .85rem; font-weight: 500; color: var(--ui-txt3); }
.hb-box .ui-lbl { display: flex; align-items: center; gap: .5rem; }
.hb-link { display: flex; gap: .5rem; }
.hb-link input {
  flex: 1; min-width: 0; height: 44px; padding: 0 .9rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt); font: inherit; font-size: .95rem;
}
.hb-link .ui-btn { height: 44px; }
.hb-box > .hb-lock { padding: 0; }

/* Canali: riquadro che si apre con il + (iscritti) */
.hb-chbox .hb-box-h { margin-bottom: .5rem; }
.hb-chbox:not(.is-open) .hb-box-h { margin-bottom: .35rem; }
.hb-ch-peek { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ui-txt2); }
.hb-ch-peek b { color: var(--ui-txt); }
.hb-chbox.is-open .hb-ch-peek { margin-bottom: .9rem; }
.hb-chbody { display: none; }
.hb-chbox.is-open .hb-chbody { display: block; }
.hb-chbox.is-open .hb-ch-peek.is-closed-only { display: none; }
.hb-chsearch { position: relative; margin-bottom: .8rem; }
.hb-chsearch > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); font-size: .85rem; color: var(--ui-txt3); pointer-events: none; }
.hb-chsearch input {
  width: 100%; height: 42px; padding: 0 1rem 0 2.4rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt); font: inherit; font-size: 16px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.hb-chsearch input::placeholder { color: var(--ui-txt3); }
.hb-chsearch input:focus { border-color: var(--ui-acc); }
.hb-ch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-bg); }
.hb-ch-i { display: grid; grid-template-columns: 26px 38px minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .5rem .6rem .5rem .8rem; border-top: 1px solid var(--ui-line); }
.hb-ch-i:nth-child(odd) { border-right: 1px solid var(--ui-line); }
.hb-ch-i:nth-child(1), .hb-ch-i:nth-child(2) { border-top: 0; }
.hb-ch-n { font-size: .75rem; font-weight: 600; text-align: right; color: var(--ui-txt3); font-variant-numeric: tabular-nums; }
.hb-ch-lg { width: 38px; height: 38px; overflow: hidden; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--ui-surf2); color: var(--ui-txt3); }
.hb-ch-lg img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.hb-ch-t { min-width: 0; }
.hb-ch-t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; font-weight: 600; color: var(--ui-txt); }
.hb-ch-t span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--ui-txt3); }
.hb-ch-go { display: inline-flex; align-items: center; gap: .45rem; }
.hb-ch-go .hb-tag { height: 20px; font-size: .64rem; }
.hb-page .hb-ch-go .cm-plgo { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; }
.hb-page .hb-ch-go .cm-plgo > i { margin-left: 2px; font-size: .72rem; }
.hb-ch-none { padding: 1.2rem; font-size: .9rem; text-align: center; color: var(--ui-txt3); }
.hb-note { margin: .8rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--ui-txt3); }
.hb-note i { color: var(--ui-txt2); }
.hb-note b { font-weight: 600; color: var(--ui-txt2); }

/* Commenti e risposte (liste e forum) */
.hb-cform { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: .8rem; margin-bottom: 1.2rem; }
.hb-cform > img, .hb-c > img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.hb-cform textarea {
  display: block; width: 100%; min-height: 76px; padding: .7rem .85rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt);
  font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; outline: none;
  -webkit-appearance: none; appearance: none;
}
.hb-cform textarea::placeholder { color: var(--ui-txt3); }
.hb-cform textarea:focus { border-color: var(--ui-acc); }
.hb-cform-f { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .5rem; font-size: .8rem; color: var(--ui-txt3); font-variant-numeric: tabular-nums; }
.hb-cform-f > div { display: flex; gap: .4rem; }
.hb-cform.is-rep { grid-template-columns: 30px minmax(0, 1fr); margin: .5rem 0 .4rem; }
.hb-cform.is-rep > img { width: 30px; height: 30px; }
.hb-cform-to { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; font-size: .82rem; color: var(--ui-txt2); }
.hb-cform-to b { color: var(--ui-txt); font-weight: 600; }
.hb-c { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: .8rem; padding: .95rem 0; border-top: 1px solid var(--ui-line); }
.hb-c-b { min-width: 0; }
.hb-c-h { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .88rem; }
.hb-c-h b { font-weight: 600; color: var(--ui-txt); }
.hb-c-h time, .hb-c-h > span:not(.hb-tag) { color: var(--ui-txt3); }
.hb-c-h .hb-tag { height: 19px; font-size: .64rem; }
.hb-c p, .hb-c .hb-c-t { margin: .25rem 0 0; font-size: .93rem; line-height: 1.55; color: var(--ui-txt); overflow-wrap: anywhere; }
.hb-c-a { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; margin-top: .3rem; }
.hb-c-a .on, .hb-c-a .on i { color: var(--ui-acc); }
.hb-c-a .is-ok, .hb-c-a .is-ok i { color: var(--ui-ok); }
.hb-c-a .is-del:hover { color: var(--ui-err); }
.hb-rep { margin: .2rem 0 0 44px; padding-left: 1rem; border-left: 2px solid var(--ui-line2); }
.hb-rep .hb-c { grid-template-columns: 30px minmax(0, 1fr); padding: .7rem 0 .2rem; border-top: 0; }
.hb-rep .hb-c > img { width: 30px; height: 30px; }
.hb-rmore { margin: .3rem 0 .4rem; }
.hb-c.is-flash { animation: hb-flash 2.4s ease; }
@keyframes hb-flash { 0%, 30% { background: rgba(255, 255, 255, .06); } 100% { background: transparent; } }

/* Autore e altre liste (colonna) */
.hb-au { padding: 1.3rem; }
.hb-au-top { display: flex; align-items: center; gap: .85rem; }
.hb-au-top img { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.hb-au-top b { display: block; font-size: 1rem; color: var(--ui-txt); }
.hb-au-top span { font-size: .84rem; color: var(--ui-txt2); }
.hb-au-foll { display: flex; align-items: center; margin-top: .9rem; }
.hb-au-foll img { width: 30px; height: 30px; margin-left: -8px; border: 2px solid var(--ui-surf); border-radius: 50%; object-fit: cover; }
.hb-au-foll img:first-child { margin-left: 0; }
.hb-au-foll span { margin-left: .6rem; font-size: .82rem; color: var(--ui-txt3); }
.hb-au > .ui-btn { width: 100%; margin-top: 1rem; }

/* Elenco a righe nelle colonne (altre liste, streamers, follower) */
.hb-sbox { padding: .4rem 0; }
.hb-sbox h3 { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: .9rem 1.2rem .5rem; font-size: .95rem; font-weight: 700; color: var(--ui-txt); }
.hb-sbox h3 small { font-size: .8rem; font-weight: 500; color: var(--ui-txt3); }
.hb-si { display: grid; grid-template-columns: 38px minmax(0, 1fr) 12px; align-items: center; gap: .75rem; padding: .5rem 1.2rem; color: var(--ui-txt); text-decoration: none; }
.hb-si > img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.hb-si .hb-cover { width: 38px; height: 38px; border-radius: 8px; }
.hb-si .hb-cover > .lg { width: 28px; height: 24px; }
.hb-si .hb-cover > .lg i { font-size: .9rem; }
.hb-si > span { min-width: 0; }
.hb-si b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 600; }
.hb-si span span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--ui-txt3); }
.hb-si > i { font-size: .72rem; color: var(--ui-txt3); }
.hb-sbox > .ui-btn { display: flex; margin: .6rem 1.2rem .9rem; }
.hb-sbox-v { padding: .4rem 1.2rem .9rem; font-size: .86rem; color: var(--ui-txt3); }

/* ============================================================
   BACHECA E PAGINA DELLO STREAMER
   ============================================================ */
.hb-two { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 1.5rem; }
.hb-two > aside { display: flex; flex-direction: column; gap: 1rem; }
.hb-post { margin-bottom: .8rem; padding: 1.1rem 1.25rem; }
.hb-post-h { display: flex; align-items: center; gap: .7rem; }
.hb-post-h > img { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.hb-post-h > div { min-width: 0; }
.hb-post-h b { display: block; font-size: .95rem; font-weight: 600; color: var(--ui-txt); }
.hb-post-h b a { color: inherit; text-decoration: none; }
.hb-post-h span { font-size: .8rem; color: var(--ui-txt3); }
.hb-post-h .hb-tag { margin-left: auto; }
.hb-post-t { margin: .8rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--ui-txt); overflow-wrap: anywhere; white-space: pre-line; }
.hb-post-img { display: block; width: 100%; max-height: 520px; margin-top: .8rem; border-radius: 10px; object-fit: cover; background: var(--ui-bg); }
.hb-post-vid { position: relative; margin-top: .8rem; overflow: hidden; border-radius: 10px; background: var(--ui-bg); aspect-ratio: 16 / 9; }
.hb-post-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hb-post-f { display: flex; align-items: center; gap: 1.1rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--ui-line); font-size: .85rem; color: var(--ui-txt2); }
.hb-post-f .hb-ln { color: var(--ui-txt2); font-size: .85rem; }
.hb-post-f .hb-ln i { color: var(--ui-txt3); }
.hb-post-f .on, .hb-post-f .on i { color: var(--ui-acc); }
.hb-post-f .hb-r { margin-left: auto; }
.hb-post-n { margin: .7rem 0 0; font-size: .82rem; color: var(--ui-txt3); }
.hb-post-n a { font-weight: 600; color: var(--ui-txt2); text-decoration: underline; }
.hb-pl {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: .9rem;
  margin-top: .9rem; padding: .7rem; color: inherit; text-decoration: none;
  border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-bg);
}
.hb-pl .hb-cover { width: 64px; height: 64px; border-radius: 8px; }
.hb-pl .hb-cover > .lg { width: 48px; height: 38px; }
.hb-pl > span { min-width: 0; }
.hb-pl b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .98rem; font-weight: 700; color: var(--ui-txt); }
.hb-pl em { display: block; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-style: normal; color: var(--ui-txt2); }
.hb-pl small { display: block; margin-top: .25rem; font-size: .78rem; color: var(--ui-txt3); }
.hb-cprev { margin-top: .8rem; padding-left: .9rem; border-left: 2px solid var(--ui-line2); }
.hb-cprev > div { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .6rem; padding: .35rem 0; font-size: .86rem; line-height: 1.45; color: var(--ui-txt); overflow-wrap: anywhere; }
.hb-cprev img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.hb-cprev b { margin-right: .35rem; font-weight: 600; }
.hb-cprev > a, .hb-cprev > button { display: inline-block; margin-top: .2rem; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: .8rem; color: var(--ui-txt2); }

/* Testata della pagina dello streamer */
.hb-sh { overflow: hidden; }
.hb-sh-cv { height: 190px; background: var(--ui-surf2); }
.hb-sh-cv img { width: 100%; height: 100%; object-fit: cover; }
.hb-sh-in { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: end; gap: 1.2rem; padding: 0 1.5rem 1.4rem; }
.hb-sh-av { width: 112px; height: 112px; margin-top: -56px; border: 4px solid var(--ui-surf); border-radius: 50%; object-fit: cover; background: var(--ui-surf); }
.hb-sh h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .8rem 0 0; font-size: 1.5rem; font-weight: 700; color: var(--ui-txt); overflow-wrap: anywhere; }
.hb-sh-bio { margin: .25rem 0 0; font-size: .93rem; color: var(--ui-txt2); }
.hb-sh-n { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .6rem; font-size: .86rem; color: var(--ui-txt3); }
.hb-sh-n b { font-weight: 600; color: var(--ui-txt); }
.hb-sh-so { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.hb-sh-so .ui-btn { height: 32px; padding: 0 .7rem; font-size: .8rem; }
.hb-sh-act .ui-btn { height: 42px; padding: 0 1.3rem; }
.hb-sh-tabs { margin: 1.2rem 0 1rem; }

/* [COMMUNITY-20102026] Pagina dello streamer (bozza 9) */
/* Etichette del post: FISSATO e NASCOSTO possono stare insieme */
.hb-post-h .hb-tag + .hb-tag { margin-left: .35rem; }
.hb-tag.is-warn { background: rgba(240, 180, 41, .14); color: var(--ui-warn); }
.hb-post-f .is-del:hover, .hb-cprev .is-del:hover { color: var(--ui-err); }

/* Post o commento raggiunto da una notifica: un lampo breve */
.hb-post.is-flash, .hb-cprev > div.is-flash { animation: hb-flash 2.4s ease; }
.hb-cprev > div.is-flash { border-radius: 6px; }

/* Riquadro per pubblicare un post (solo il proprietario) */
.hb-bpnew .hb-cform { margin-bottom: 0; }
.hb-bpnew .hb-cform-f { flex-wrap: wrap; }
.hb-bpnew .hb-cform-f > div { flex-wrap: wrap; justify-content: flex-end; }
.hb-bpnew .ui-btn.on { background: var(--ui-surf2); border-color: var(--ui-txt3); }
.hb-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hb-file span { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-vid { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
.hb-vid[hidden] { display: none; }
.hb-vid > i { flex-shrink: 0; color: var(--ui-txt3); }
.hb-vid input {
  flex: 1; min-width: 0; height: 40px; padding: 0 .85rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt); font: inherit; font-size: 16px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.hb-vid input::placeholder { color: var(--ui-txt3); }
.hb-vid input:focus { border-color: var(--ui-acc); }
/* Telefono: niente foto accanto al campo, i tre pulsanti in una riga */
@media (max-width: 760px) {
  .hb-bpnew .hb-cform { grid-template-columns: minmax(0, 1fr); }
  .hb-bpnew .hb-cform > img { display: none; }
  .hb-bpnew .hb-cform-f > div { flex: 1 1 100%; flex-wrap: nowrap; }
  .hb-bpnew .hb-cform-f .ui-btn-p { flex: 1; }
  .hb-file span { max-width: 5.5rem; }
}

/* Liste: la riga del telefono, senza anteprima, porta la freccia */
.hb-li > i { justify-self: center; font-size: .75rem; color: var(--ui-txt3); }

/* Follower: "Mostra tutti" e' un <button>, che da solo non si allarga
   come i link della colonna */
.hb-sbox > button.ui-btn { width: calc(100% - 2.4rem); }

/* Info */
.hb-info { padding: 1.3rem 1.4rem; }
.hb-info h2 { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 700; color: var(--ui-txt); }
.hb-info .ui-dl + h2 { margin-top: 1.6rem; }
.hb-info .hb-note { margin-top: 1.4rem; }

/* ============================================================
   FORUM
   ============================================================ */
.hb-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.3rem 0 1.2rem; }
.hb-chip {
  display: inline-flex; align-items: center; gap: .4rem; height: 30px; padding: 0 .75rem;
  border: 1px solid var(--ui-line2); border-radius: 15px; background: var(--ui-surf);
  font-size: .82rem; font-weight: 500; color: var(--ui-txt2); text-decoration: none; white-space: nowrap;
}
.hb-chip em { font-size: .72rem; font-style: normal; color: var(--ui-txt3); }
.hb-chip.on { background: var(--ui-surf2); border-color: var(--ui-txt3); color: var(--ui-txt); }
.hb-qs { overflow: hidden; }
.hb-q { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 1rem; padding: 1.05rem 1.25rem; border-top: 1px solid var(--ui-line); color: inherit; text-decoration: none; }
.hb-q:first-child { border-top: 0; }
.hb-q > span:last-child { display: block; min-width: 0; }
.hb-q-n { height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--ui-line2); border-radius: 9px; }
.hb-q-n b { font-size: 1.15rem; font-weight: 700; line-height: 1.1; color: var(--ui-txt); }
.hb-q-n span { font-size: .66rem; color: var(--ui-txt3); }
.hb-q-n.is-ok { border-color: rgba(52, 201, 138, .45); background: rgba(52, 201, 138, .08); }
.hb-q-n.is-ok b { color: var(--ui-ok); }
.hb-q h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--ui-txt); }
.hb-q h3 .hb-pin { font-size: .8rem; color: var(--ui-txt2); }
.hb-q p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: .3rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--ui-txt2); overflow-wrap: anywhere; }
.hb-q-m { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin-top: .55rem; font-size: .8rem; color: var(--ui-txt3); }
.hb-q-m > span { display: inline-flex; align-items: center; gap: .35rem; }
.hb-q-m img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.hb-q-m .hb-tag { height: 20px; font-size: .68rem; font-weight: 600; letter-spacing: 0; }

/* Domanda */
.hb-qd { padding: 1.5rem 1.6rem; }
.hb-qd h1 { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ui-txt); overflow-wrap: anywhere; }
.hb-qd-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.hb-qd .hb-q-m { margin-top: .8rem; font-size: .85rem; }
.hb-qd-t { margin: 1.1rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--ui-line); font-size: .97rem; line-height: 1.7; color: var(--ui-txt); overflow-wrap: anywhere; }
.hb-qd-t a, .hb-c-t a { color: var(--ui-txt); text-decoration: underline; text-decoration-color: var(--ui-txt3); }
.hb-qd .hb-c-a { margin-top: 1rem; }
.hb-ans { padding: .3rem 1.4rem .6rem; }
.hb-ans > .hb-box-h { margin: 1rem 0 .2rem; }
.hb-ans > .hb-c:first-of-type { border-top: 0; }
.hb-best { margin: .8rem -.6rem .2rem; padding: .2rem .6rem .4rem; border: 1px solid rgba(52, 201, 138, .4); border-radius: 10px; background: rgba(52, 201, 138, .05); }
.hb-best > .hb-tag { margin-top: .7rem; }
.hb-best .hb-c { border-top: 0; }

/* Moduli (nuova domanda) */
.hb-form .ui-field input[type="text"] { height: 46px; font-size: 16px; }
.hb-form .ui-field textarea { min-height: 180px; font-size: 16px; }
.hb-form .ui-field small { display: flex; justify-content: space-between; gap: 1rem; margin-top: .35rem; font-size: .8rem; color: var(--ui-txt3); }
.hb-form-act { display: flex; gap: .5rem; padding-top: 1.1rem; border-top: 1px solid var(--ui-line); }
.hb-form-act .ui-btn { height: 44px; }
.hb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   STREAMERS
   ============================================================ */
.hb-sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hb-st { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--ui-surf); border: 1px solid var(--ui-line); border-radius: var(--ui-r); color: inherit; text-decoration: none; }
.hb-st-cv { display: block; height: 92px; background: var(--ui-surf2); }
.hb-st-cv img { width: 100%; height: 100%; object-fit: cover; }
.hb-st-av { position: relative; width: 64px; height: 64px; margin: -32px 0 0 1rem; border: 3px solid var(--ui-surf); border-radius: 50%; object-fit: cover; background: var(--ui-surf); }
.hb-st-b { flex: 1; display: block; padding: .45rem 1rem 1rem; }
.hb-st-b h3, .hb-sr h3 { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: 1rem; font-weight: 700; color: var(--ui-txt); }
.hb-st-b h3 span, .hb-sr h3 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-st-b h3 i, .hb-sr h3 i { flex-shrink: 0; font-size: .75rem; color: var(--ui-warn); }
/* Bio sempre alta due righe (2 x 1.5): i numeri restano allineati fra le card */
.hb-st-b p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; margin: .25rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--ui-txt2); }
.hb-st-b p.is-empty, .hb-sr p.is-empty { color: var(--ui-txt3); }
.hb-st-s { display: flex; gap: 1rem; margin-top: .7rem; font-size: .82rem; color: var(--ui-txt3); }
.hb-st-s b { font-weight: 600; color: var(--ui-txt); }
.hb-srows { display: none; overflow: hidden; }
.hb-sr { display: grid; grid-template-columns: 52px minmax(0, 1fr) 12px; align-items: center; gap: .85rem; padding: .8rem 1rem; border-top: 1px solid var(--ui-line); color: inherit; text-decoration: none; }
.hb-sr:first-child { border-top: 0; }
.hb-sr > img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.hb-sr > span { display: block; min-width: 0; }
.hb-sr h3 { font-size: .98rem; }
.hb-sr p { margin: .1rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; color: var(--ui-txt2); }
.hb-sr .hb-st-s { gap: .8rem; margin-top: .3rem; font-size: .78rem; }
.hb-sr > i { font-size: .75rem; color: var(--ui-txt3); }

/* ============================================================
   OGGI IN TV
   ============================================================ */
.hb-tvg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.hb-tv { display: block; min-width: 0; padding: 1rem 1.1rem; background: var(--ui-surf); border: 1px solid var(--ui-line); border-radius: var(--ui-r); color: inherit; text-decoration: none; }
.hb-tv-h { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.hb-tv-lg { width: 40px; height: 40px; flex-shrink: 0; overflow: hidden; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--ui-surf2); color: var(--ui-txt3); }
.hb-tv-lg img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.hb-tv-h b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; font-weight: 700; color: var(--ui-txt); }
.hb-tv-now { display: block; margin-top: .8rem; }
.hb-tv-now small { font-size: .78rem; color: var(--ui-txt3); font-variant-numeric: tabular-nums; }
.hb-tv-now strong { display: block; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; font-weight: 600; color: var(--ui-txt); }
.hb-bar { display: block; height: 4px; margin-top: .5rem; overflow: hidden; border-radius: 2px; background: var(--ui-surf2); }
.hb-bar span { display: block; height: 100%; border-radius: 2px; background: var(--ui-acc); }
.hb-tv-nx { display: flex; gap: .5rem; margin-top: .65rem; padding-top: .6rem; border-top: 1px solid var(--ui-line); font-size: .82rem; color: var(--ui-txt2); }
.hb-tv-nx span:first-child { flex-shrink: 0; color: var(--ui-txt3); font-variant-numeric: tabular-nums; }
.hb-tv-nx span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-sched { overflow: hidden; }
.hb-sched h2 { margin: 0; padding: .9rem 1.2rem .5rem; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-txt3); }
.hb-pr { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .7rem 1.2rem; border-top: 1px solid var(--ui-line); }
.hb-pr > span:first-child { font-size: .9rem; font-weight: 600; color: var(--ui-txt2); font-variant-numeric: tabular-nums; }
.hb-pr > span:nth-child(2) { min-width: 0; }
.hb-pr b { display: block; font-size: .93rem; font-weight: 600; color: var(--ui-txt); overflow-wrap: anywhere; }
.hb-pr small { font-size: .78rem; color: var(--ui-txt3); }
.hb-pr > em { font-size: .8rem; font-style: normal; white-space: nowrap; color: var(--ui-txt3); font-variant-numeric: tabular-nums; }
.hb-pr.is-now { background: rgba(255, 255, 255, .03); box-shadow: inset 3px 0 0 var(--ui-acc); }
.hb-pr.is-now > span:first-child { color: var(--ui-txt); }
.hb-live { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: var(--ui-ok); }
.hb-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-ok); }
.hb-tv-ch { display: flex; align-items: center; gap: .9rem; }
.hb-tv-ch .hb-tv-lg { width: 52px; height: 52px; }

/* ============================================================
   ACCESSO, REGISTRAZIONE, RECUPERO
   ============================================================ */
.hb-auth { max-width: 460px; margin: 0 auto; padding: calc(68px + 2.4rem) 1.25rem calc(4rem + env(safe-area-inset-bottom)); }
.hb-auth-w { max-width: 680px; }
.hb-auth-ic {
  width: 52px; height: 52px; margin: 0 auto 1rem; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ui-surf2); color: var(--ui-txt); font-size: 1.15rem;
}
.hb-auth h1 { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.015em; text-align: center; color: var(--ui-txt); }
.hb-auth > p { margin: .45rem 0 1.4rem; font-size: .95rem; line-height: 1.55; text-align: center; color: var(--ui-txt2); }
.hb-auth > p b { color: var(--ui-txt); }
.hb-ac { padding: 1.5rem; }
.hb-f { margin-bottom: 1rem; }
.hb-f label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; font-size: .88rem; font-weight: 600; color: var(--ui-txt); }
.hb-f label a { font-size: .84rem; font-weight: 500; color: var(--ui-txt2); text-decoration: underline; }
.hb-in { position: relative; }
.hb-in input {
  width: 100%; height: 48px; padding: 0 .95rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt); font: inherit; font-size: 16px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.hb-in input::placeholder { color: var(--ui-txt3); }
.hb-in input:focus { border-color: var(--ui-acc); }
.hb-in input.has-eye { padding-right: 3rem; }
.hb-eye { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border: 0; border-radius: 6px; background: none; color: var(--ui-txt2); cursor: pointer; }
.hb-eye:hover { color: var(--ui-txt); }
.hb-f small { display: block; margin-top: .35rem; font-size: .8rem; line-height: 1.45; color: var(--ui-txt3); }
.hb-full { width: 100%; height: 48px; font-size: .95rem; }
.hb-or { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; font-size: .82rem; color: var(--ui-txt3); }
.hb-or::before, .hb-or::after { content: ""; flex: 1; height: 1px; background: var(--ui-line); }
.hb-back-note { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; padding: .7rem .9rem; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-bg); font-size: .85rem; color: var(--ui-txt2); }
.hb-back-note b { font-weight: 600; color: var(--ui-txt); overflow-wrap: anywhere; }
.hb-grp { margin: 0 0 1.2rem; padding-bottom: .3rem; border-bottom: 1px solid var(--ui-line); }
.hb-grp:last-of-type { border-bottom: 0; }
.hb-grp h2 { margin: 0 0 .8rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-txt3); }
.hb-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
.hb-pwok { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin-top: .55rem; font-size: .8rem; color: var(--ui-txt3); }
.hb-pwok span { display: inline-flex; align-items: center; gap: .3rem; }
.hb-pwok i { font-size: .7rem; }
.hb-pwok .is-ok { color: var(--ui-ok); }
.hb-auth .ui-check a { color: var(--ui-txt); text-decoration: underline; }
.hb-auth-ok { padding: 2rem 1.5rem; text-align: center; }
.hb-auth-ok p { margin: .5rem 0 0; font-size: .92rem; line-height: 1.55; color: var(--ui-txt2); }

/* ============================================================
   FOGLI E FINESTRE (markup di community.css)
   ============================================================ */
.hb-sheet .cm-sheet-card {
  max-height: calc(100vh - 2rem);
  background: var(--ui-surf); border-top: 1px solid var(--ui-line2);
  border-radius: 16px 16px 0 0;
}
@supports (height: 100dvh) {
  .hb-sheet .cm-sheet-card { max-height: calc(100dvh - 2rem); }
}
.hb-sheet .cm-sheet-h strong { color: var(--ui-txt); }
.hb-sheet select, .hb-sheet textarea {
  width: 100%; padding: .65rem .8rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt); font: inherit; font-size: 16px;
}
@media (min-width: 761px) {
  .hb-sheet { align-items: center; justify-content: center; }
  .hb-sheet .cm-sheet-card { max-width: 480px; border: 1px solid var(--ui-line2); border-radius: var(--ui-r); }
}

/* Pulsanti fissi: chat piatta; su telefono niente "torna su",
   che finiva sopra i contenuti. Valgono solo su queste pagine. */
body:has(.hb-page) .cm-chfab, body:has(.hb-auth) .cm-chfab {
  background: var(--ui-acc); border-color: var(--ui-acc);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
body:has(.hb-page) .cm-chfab-alone { display: none; }

/* ============================================================
   PASSAGGIO DEL MOUSE (solo dove c'e' un mouse)
   ============================================================ */
@media (hover: hover) {
  .hb-hub a:not(.on):hover { background: rgba(255, 255, 255, .03); color: var(--ui-txt); }
  .hb-seg a:not(.on):hover, .hb-seg button:not(.on):hover { color: var(--ui-txt); }
  .hb-card:hover, .hb-st:hover, .hb-tv:hover { border-color: var(--ui-line2); }
  .hb-card-body h3 a:hover { text-decoration: underline; }
  .hb-q:hover, .hb-sr:hover, .hb-si:hover { background: rgba(255, 255, 255, .025); }
  .hb-chip:not(.on):hover { color: var(--ui-txt); border-color: var(--ui-txt3); }
  .hb-pl:hover { border-color: var(--ui-line2); }
  .hb-c-a .hb-ln:hover, .hb-c-a button:hover { color: var(--ui-txt); }
  body:has(.hb-page) .cm-chfab:hover { background: var(--ui-acc-h); transform: none; }
}

/* ============================================================
   SCHERMI MEDI
   ============================================================ */
@media (max-width: 1000px) {
  .hb-sgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-tvg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hb-det, .hb-two { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hb-side { position: static; margin-top: 1rem; }
  .hb-two > aside { margin-top: 1rem; }
}

/* ============================================================
   TELEFONO (iPhone e simili)
   ============================================================ */
@media (max-width: 760px) {
  .hb-page { padding-top: calc(68px + 1.1rem); }

  .hb-hub { margin-bottom: 1.4rem; }
  .hb-hub a { flex-direction: column; gap: .25rem; height: 56px; padding: 0 .2rem; font-size: .76rem; }
  .hb-hub a i { font-size: 1rem; }
  .hb-hub em { position: absolute; top: 5px; right: 6px; min-width: 18px; height: 16px; padding: 0 4px; font-size: .62rem; line-height: 16px; }

  .hb-top h1 { font-size: 1.4rem; }
  .hb-top p { font-size: .86rem; }
  .hb-top .ui-btn { height: 38px; padding: 0 .8rem; font-size: .85rem; }

  .hb-intro { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: 1.3rem; }
  .hb-intro h1 { font-size: 1.45rem; }
  .hb-intro p { font-size: .92rem; }
  .hb-nums { gap: 1.4rem; margin-bottom: 1rem; }
  .hb-btns .ui-btn { flex: 1; }

  .hb-tools { flex-direction: column; align-items: stretch; gap: .6rem; }
  .hb-search { max-width: none; }
  .hb-seg { display: grid; }
  .hb-seg a, .hb-seg button { padding: 0 .3rem; font-size: .84rem; }
  .hb-seg .hb-d { display: none; }
  .hb-seg .hb-m { display: inline; }

  .hb-grid { display: none; }
  .hb-rows { display: block; }
  .hb-pager-d { display: none; }
  .hb-pager-m { display: flex; justify-content: space-between; }

  .hb-sup { flex-wrap: wrap; gap: 1rem; padding: 1.2rem; }
  .hb-sup > div { flex: 1 1 200px; }
  .hb-sup .hb-sup-act { align-items: stretch; width: 100%; }
  .hb-sup-act .ui-btn { height: 44px; }
  .hb-lock { flex-direction: column; align-items: flex-start; padding: 1.2rem; }
  .hb-lock .hb-btns { width: 100%; }
  .hb-sec .ui-sec-h .ui-btn span { display: none; }

  .hb-lk-i { padding: .9rem 1rem; }
  .hb-lk-act { gap: .35rem; }
  .hb-lk-act .ui-btn { height: 30px; padding: 0 .55rem; font-size: .78rem; }
  .hb-lk-act.is-link .hb-ln span { display: none; }
  .hb-lk-act.is-link .hb-ln { padding: 0 .3rem; font-size: .9rem; }

  .hb-head { padding: 1.1rem; }
  .hb-head-top { grid-template-columns: 80px minmax(0, 1fr); gap: 1rem; }
  .hb-head .hb-cover { width: 80px; height: 80px; border-radius: 10px; }
  .hb-head .hb-cover > .lg { width: 62px; height: 48px; }
  .hb-head h1 { font-size: 1.3rem; }
  .hb-kpi div { padding: .6rem .55rem; }
  .hb-kpi b { font-size: 1rem; }
  .hb-kpi span { font-size: .7rem; }
  .hb-acts .ui-btn:not(.ui-btn-ic) { flex: 1; }
  .hb-box { padding: 1.1rem; }
  .hb-link { flex-direction: column; }
  .hb-link input { flex: none; }
  .hb-link .ui-btn { width: 100%; }
  .hb-ch { grid-template-columns: minmax(0, 1fr); }
  .hb-ch-i { padding: .45rem .6rem .45rem .7rem; }
  .hb-ch-i:nth-child(odd) { border-right: 0; }
  .hb-ch-i:nth-child(2) { border-top: 1px solid var(--ui-line); }
  .hb-rep { margin-left: 18px; padding-left: .8rem; }

  .hb-post { padding: 1rem; }

  .hb-q { grid-template-columns: 48px minmax(0, 1fr); gap: .8rem; padding: .95rem 1rem; }
  .hb-q-n { height: 48px; }
  .hb-q h3 { font-size: .96rem; }
  .hb-tags { flex-wrap: nowrap; margin-right: -1.25rem; padding-right: 1.25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hb-tags::-webkit-scrollbar { display: none; }
  .hb-chip { flex-shrink: 0; }
  .hb-qd { padding: 1.1rem; }
  .hb-qd h1 { font-size: 1.25rem; }
  .hb-ans { padding: .2rem 1rem .5rem; }
  .hb-form-act .ui-btn { flex: 1; }

  .hb-sgrid { display: none; }
  .hb-srows { display: block; }

  .hb-sh-cv { height: 120px; }
  .hb-sh-in { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; padding: 0 1.1rem 1.1rem; }
  .hb-sh-av { width: 84px; height: 84px; margin-top: -42px; }
  .hb-sh h1 { margin-top: .5rem; font-size: 1.3rem; }
  .hb-sh-act { margin-top: 1rem; }
  .hb-sh-act .ui-btn { width: 100%; }
  .hb-sh-tabs { display: grid; }

  .hb-tvg { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .hb-tv { padding: .9rem 1rem; }
  .hb-pr { padding: .65rem 1rem; }

  .hb-auth { padding-top: calc(68px + 1.6rem); }
  .hb-auth h1 { font-size: 1.4rem; }
  .hb-ac { padding: 1.2rem; }
  .hb-r2 { grid-template-columns: minmax(0, 1fr); }

  body:has(.hb-page) #gotop, body:has(.hb-auth) #gotop { display: none !important; }
  body:has(.hb-page) .cm-chfab, body:has(.hb-auth) .cm-chfab {
    right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
    width: 50px; height: 50px; font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hb-card, .hb-c.is-flash, .hb-post.is-flash, .hb-cprev > div.is-flash { transition: none; animation: none; }
}

/* ============================================================
   ANTEPRIMA DEI CANALI  [PLAYER-21102026]
   Finestra di cm_player_inc.php, aperta dai pulsanti .cm-plgo di
   community.php e community_lista.php. Il markup e' quello di
   community.css (cm-modal, cm-pl-*, cm-btn): qui prende la linea
   di cm_ui.css, con le sue variabili e nessun colore nuovo.
   Magenta solo sul pulsante principale e sulla riga del canale
   scelto; verde, giallo e rosso solo per gli stati.

   Computer (da 901px): finestra al centro, alta al massimo quanto
   lo spazio libero e mai oltre 860px. Video a sinistra, elenco a
   destra che scorre da solo.

   Telefono e tablet stretto (fino a 900px, la stessa soglia delle
   due colonne di community.css): finestra a tutto schermo, testata
   ferma con la X da 44px, un solo scorrimento per video ed elenco.
   Mentre c'e' il video (.cm-pl-stage.is-video, classe messa da
   cm_player_inc.php) video, conto e pulsanti restano fermi in alto
   e l'elenco scorre sotto. Sugli schermi bassi (sotto i 520px,
   telefono in orizzontale) non restano fermi: coprirebbero tutto.

   Perche' non piu' 94vh: su iPhone vh e' l'altezza dello schermo
   senza le barre di Safari, quindi la finestra usciva sopra e
   sotto. La X finiva sotto la barra in alto e gli ultimi canali
   sotto quella in basso. 100% si misura sulla parte visibile.
   ============================================================ */

/* -- Finestra ------------------------------------------------- */
.cm-plmodal .cm-modal-bg { background: rgba(21, 24, 29, .82); }
.cm-plmodal .cm-modal-card {
  max-width: 1180px; max-height: min(100%, 860px);
  background: var(--ui-surf); border: 1px solid var(--ui-line2);
  border-radius: var(--ui-r); box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}

/* -- Testata e X ---------------------------------------------- */
.cm-plmodal .cm-pl-head {
  flex-shrink: 0; align-items: center; gap: .8rem;
  padding: 1rem 1rem 1rem 1.4rem;
  background: var(--ui-surf); border-bottom: 1px solid var(--ui-line);
}
.cm-plmodal .cm-pl-htit { flex: 1; }
.cm-plmodal .cm-pl-head h3 {
  gap: .5rem; margin: 0;
  font-size: 1.05rem; font-weight: 700; line-height: 1.25; color: var(--ui-txt);
}
.cm-plmodal .cm-pl-head h3 i { font-size: .95rem; color: var(--ui-txt2); }
.cm-plmodal .cm-pl-head p { margin: .2rem 0 0; font-size: .82rem; line-height: 1.4; color: var(--ui-txt3); }
.cm-plmodal .cm-pl-head > .cm-pl-x {
  width: 40px; height: 40px; padding: 0; justify-content: center;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-surf); color: var(--ui-txt); font-size: 1.1rem;
  -webkit-tap-highlight-color: transparent; transition: background .15s;
}
.cm-plmodal .cm-pl-head > .cm-pl-x:hover { background: var(--ui-surf2); color: var(--ui-txt); }
.cm-plmodal .cm-pl-head > .cm-pl-x:focus-visible { outline: 2px solid var(--ui-acc); outline-offset: 2px; }

/* -- Palco: video, conto, messaggi, pulsanti ----------------- */
.cm-plmodal .cm-pl-body { background: var(--ui-bg); }
.cm-plmodal .cm-pl-stage { gap: .9rem; background: var(--ui-bg); }
.cm-plmodal .cm-pl-stage > * { flex-shrink: 0; }
.cm-plmodal .cm-pl-video { border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); }

.cm-plmodal .cm-pl-msg {
  padding: .8rem 1rem; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm);
  background: var(--ui-surf); color: var(--ui-txt2); font-size: .88rem; line-height: 1.55;
}
.cm-plmodal .cm-pl-msg i { color: var(--ui-txt3); }
.cm-plmodal .cm-pl-msg > .fa-triangle-exclamation { color: var(--ui-warn); }
.cm-plmodal .cm-pl-msg > .fa-circle-exclamation { color: var(--ui-err); }

/* Conto dell'anteprima: riga grigia sottile e secondi a destra.
   La riga (.cm-pl-bart) la scrive cm_player_inc.php. */
.cm-plmodal .cm-pl-bar {
  display: flex; align-items: center; gap: .7rem;
  height: auto; border: 0; border-radius: 0; background: none; overflow: visible;
}
.cm-plmodal .cm-pl-bart {
  position: relative; flex: 1; min-width: 0; height: 4px; overflow: hidden;
  border-radius: 2px; background: var(--ui-surf2);
}
.cm-plmodal .cm-pl-barf { border-radius: 2px; background: var(--ui-txt2); opacity: 1; }
.cm-plmodal .cm-pl-bar b {
  flex-shrink: 0; height: auto; padding: 0; gap: .4rem;
  font-size: .82rem; font-weight: 600; letter-spacing: 0; color: var(--ui-txt2);
  font-variant-numeric: tabular-nums;
}
.cm-plmodal .cm-pl-bar b i { font-size: .75rem; color: var(--ui-txt3); }
.cm-plmodal .cm-pl-acts { gap: .5rem; }

/* Pulsanti: i cm-btn della finestra prendono la forma di .ui-btn */
.cm-plmodal .cm-btn {
  height: 40px; padding: 0 1rem; gap: .45rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-surf); color: var(--ui-txt); box-shadow: none;
  font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.cm-plmodal .cm-btn:hover { background: var(--ui-surf2); border-color: var(--ui-line2); color: var(--ui-txt); }
.cm-plmodal .cm-btn i { margin: 0; font-size: .9em; color: var(--ui-txt2); }
.cm-plmodal .cm-btn-primary { background: var(--ui-acc); border-color: var(--ui-acc); color: #fff; }
.cm-plmodal .cm-btn-primary i { color: #fff; }
.cm-plmodal .cm-btn-primary:hover { background: var(--ui-acc-h); border-color: var(--ui-acc-h); color: #fff; }
.cm-plmodal .cm-btn:focus-visible { outline: 2px solid var(--ui-acc); outline-offset: 2px; }

/* -- Elenco dei canali ---------------------------------------- */
.cm-plmodal .cm-pl-side { background: var(--ui-surf); border-color: var(--ui-line); }
.cm-plmodal .cm-pl-sideh {
  display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: .6rem;
  padding: 1rem 1rem .7rem;
}
.cm-plmodal .cm-pl-sideh strong { font-size: .95rem; font-weight: 700; color: var(--ui-txt); }
.cm-plmodal .cm-pl-sideh span { font-size: .8rem; color: var(--ui-txt3); }
.cm-plmodal .cm-pl-find { padding: 0 1rem .9rem; border-bottom: 1px solid var(--ui-line); }
.cm-plmodal .cm-pl-find > i { left: 1.85rem; top: calc(50% - .45rem); font-size: .85rem; color: var(--ui-txt3); }
.cm-plmodal .cm-pl-find input {
  height: 42px; padding: 0 1rem 0 2.4rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt);
  font-size: 16px; -webkit-appearance: none; appearance: none;
}
.cm-plmodal .cm-pl-find input::placeholder { color: var(--ui-txt3); }
.cm-plmodal .cm-pl-find input:focus { border-color: var(--ui-acc); }

.cm-plmodal .cm-pl-list { padding: 0; overscroll-behavior: contain; }
.cm-plmodal .cm-pl-i { border-bottom: 1px solid var(--ui-line); }
.cm-plmodal .cm-pl-i:last-child { border-bottom: 0; }
.cm-plmodal .cm-pl-b {
  gap: .75rem; min-height: 56px; padding: .5rem 1rem;
  border: 0; border-radius: 0; background: none; color: var(--ui-txt);
  -webkit-tap-highlight-color: transparent; transition: background .15s;
}
.cm-plmodal .cm-pl-b:hover { background: var(--ui-surf2); }
.cm-plmodal .cm-pl-b.is-on { background: var(--ui-surf2); box-shadow: inset 3px 0 0 var(--ui-acc); }
.cm-plmodal .cm-pl-b:disabled { opacity: .4; background: none; }
.cm-plmodal .cm-pl-b:focus-visible { outline: 2px solid var(--ui-acc); outline-offset: -2px; }
.cm-plmodal .cm-pl-lg { width: 40px; height: 40px; border-radius: 7px; background: var(--ui-surf2); }
.cm-plmodal .cm-pl-b.is-on .cm-pl-lg { background: var(--ui-surf); }
.cm-plmodal .cm-pl-lg img { width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.cm-plmodal .cm-pl-lg i { font-size: .85rem; color: var(--ui-txt3); }
.cm-plmodal .cm-pl-nm { font-size: .92rem; font-weight: 600; line-height: 1.3; color: var(--ui-txt); }
.cm-plmodal .cm-pl-nm em { margin-top: .1rem; font-size: .78rem; font-weight: 400; color: var(--ui-txt3); }
.cm-plmodal .cm-pl-tp {
  display: inline-flex; align-items: center; height: 20px; padding: 0 .45rem;
  border: 0; border-radius: 6px; background: var(--ui-surf2); color: var(--ui-txt2);
  font-size: .64rem; font-weight: 700; letter-spacing: .02em;
}
.cm-plmodal .cm-pl-b.is-on .cm-pl-tp { background: var(--ui-surf); }
.cm-plmodal .cm-pl-tp.is-off { background: rgba(240, 180, 41, .14); color: var(--ui-warn); }
.cm-plmodal .cm-pl-note {
  padding: .7rem 1rem; border-top: 1px solid var(--ui-line);
  font-size: .8rem; color: var(--ui-txt3);
}

/* -- Fine dell'anteprima e segnalazione ----------------------- */
.cm-plmodal .cm-pl-msg.is-end {
  padding: 1.6rem 1.3rem 1.4rem;
  background: var(--ui-surf); border-color: var(--ui-line); border-radius: var(--ui-r);
}
.cm-plmodal .cm-pl-msg.is-end .cm-pl-endi { font-size: 1.8rem; color: var(--ui-ok); }
.cm-plmodal .cm-pl-endt { font-size: 1.15rem; font-weight: 700; color: var(--ui-txt); }
.cm-plmodal .cm-pl-endd { font-size: .9rem; line-height: 1.6; color: var(--ui-txt2); }
.cm-plmodal .cm-pl-endd em { color: var(--ui-txt); }
.cm-plmodal .cm-pl-endb { gap: .5rem; margin-top: .5rem; }
.cm-plmodal .cm-pl-endw {
  margin-top: .6rem; padding-top: .8rem; border-top-color: var(--ui-line);
  font-size: .82rem; line-height: 1.5; color: var(--ui-txt3);
}

.cm-plmodal .cm-pl-seg { margin-top: .6rem; padding-top: .8rem; border-top-color: var(--ui-line); }
.cm-plmodal .cm-pl-segb {
  height: 34px; padding: 0 .8rem; gap: .4rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: none; color: var(--ui-txt2); font-size: .82rem; font-weight: 600;
}
.cm-plmodal .cm-pl-segb i { margin: 0; color: var(--ui-warn); }
.cm-plmodal .cm-pl-segb:hover { background: var(--ui-surf2); border-color: var(--ui-line2); color: var(--ui-txt); }
.cm-plmodal .cm-pl-segb:focus-visible { outline: 2px solid var(--ui-acc); outline-offset: 2px; }
.cm-plmodal .cm-pl-segf label span { font-size: .8rem; color: var(--ui-txt2); }
.cm-plmodal .cm-pl-segf select,
.cm-plmodal .cm-pl-segf textarea {
  padding: .6rem .75rem; border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt); font-size: 16px;
}
.cm-plmodal .cm-pl-segf select:focus,
.cm-plmodal .cm-pl-segf textarea:focus { border-color: var(--ui-acc); }
.cm-plmodal .cm-pl-segh { font-size: .78rem; color: var(--ui-txt3); }
.cm-plmodal .cm-pl-sege { font-size: .8rem; color: var(--ui-err); }
.cm-plmodal .cm-pl-seg.is-fatta { font-size: .85rem; color: var(--ui-ok); }

/* -- Computer: due colonne ------------------------------------ */
@media (min-width: 901px) {
  .cm-plmodal .cm-pl-stage { min-height: 0; overflow-y: auto; padding: 1.4rem; }
  .cm-plmodal .cm-pl-side { width: 340px; border-left-color: var(--ui-line); }
  .cm-plmodal .cm-pl-msg.is-end {
    max-width: 34rem; padding: 2.2rem 2rem;
    background: var(--ui-surf); -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: var(--ui-line); box-shadow: none;
  }
}

/* -- Telefono e tablet stretto: tutto schermo ----------------- */
@media (max-width: 900px) {
  .cm-plmodal { padding: 0; }
  .cm-plmodal .cm-modal-card {
    width: 100%; height: 100%; max-width: none; max-height: none;
    border: 0; border-radius: 0; box-shadow: none; animation: none;
  }
  .cm-plmodal .cm-pl-head { padding: .6rem .7rem .6rem 1rem; }
  .cm-plmodal .cm-pl-head p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cm-plmodal .cm-pl-hx { display: none; }
  .cm-plmodal .cm-pl-head > .cm-pl-x { width: 44px; height: 44px; }

  /* Un solo scorrimento: l'elenco non ha piu' un'altezza sua */
  .cm-plmodal .cm-pl-body {
    display: block; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .cm-plmodal .cm-pl-stage { padding: .9rem 0; gap: .75rem; border-bottom: 1px solid var(--ui-line); }
  .cm-plmodal .cm-pl-stage.is-video { padding-top: 0; }
  /* Video da bordo a bordo; in orizzontale non piu' alto dello schermo */
  .cm-plmodal .cm-pl-video {
    max-width: calc((100vh - 10rem) * 16 / 9); margin: 0 auto;
    border: 0; border-radius: 0;
  }
  .cm-plmodal .cm-pl-bar,
  .cm-plmodal .cm-pl-msg,
  .cm-plmodal .cm-pl-acts { margin: 0 .75rem; }
  .cm-plmodal .cm-pl-acts .cm-btn { flex: 1 1 auto; height: 44px; }

  /* Spazio in fondo: l'ultimo canale si ferma sopra la barra */
  .cm-plmodal .cm-pl-side {
    border: 0; background: var(--ui-bg);
    padding: 0 .75rem calc(2rem + env(safe-area-inset-bottom));
  }
  .cm-plmodal .cm-pl-sideh { padding: 1rem .25rem .7rem; }
  .cm-plmodal .cm-pl-find { padding: 0 0 .75rem; border-bottom: 0; }
  .cm-plmodal .cm-pl-find > i { left: .85rem; top: calc(50% - .375rem); }
  .cm-plmodal .cm-pl-list {
    flex: none; max-height: none; overflow: hidden;
    background: var(--ui-surf); border: 1px solid var(--ui-line); border-radius: var(--ui-r);
  }
  .cm-plmodal .cm-pl-b { min-height: 58px; padding: .55rem .9rem; }
  .cm-plmodal .cm-pl-note { padding: .75rem .25rem 0; border-top: 0; }

  .cm-plmodal .cm-pl-endb { flex-direction: column; align-self: stretch; }
  .cm-plmodal .cm-pl-endb .cm-btn { width: 100%; height: 44px; }
  .cm-plmodal .cm-pl-segr .cm-btn { height: 44px; }
}
@media (max-width: 900px) and (min-height: 520px) {
  .cm-plmodal .cm-pl-stage.is-video { position: sticky; top: 0; z-index: 2; }
}

/* ============================================================
   GUIDA  [GUIDA-21102026]
   Pagina pubblica cm_guida.php (bozza-guida-computer.png e
   bozza-guida-iphone.png, approvate): indice con 3 capitoli,
   capitoli con schermata e passi numerati, domande frequenti,
   invito finale. Solo colori gia' presenti (--ui-*); i numeri
   dei passi sono magenta come i numeri sulle schermate.
   ============================================================ */

/* Due pulsanti accanto al titolo (community.php: Guida e Oggi in
   TV per gli ospiti). Le misure dei pulsanti restano quelle di
   .hb-top .ui-btn. Con .hb-top-wrap la testata va a capo da sola
   quando accanto ai pulsanti il testo resterebbe sotto gli 8.7rem
   (iPhone SE, mini e telefoni stretti): i pulsanti scendono sotto. */
.hb-top-b { display: flex; flex-shrink: 0; gap: .5rem; }
.hb-top-wrap { flex-wrap: wrap; }
.hb-top-wrap > div:first-child { flex: 1 1 8.7rem; min-width: 0; }

.hb-gd-lead { max-width: 46rem; }

/* Indice dei capitoli */
.hb-gd-ix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 0; }
.hb-gd-ix a {
  display: flex; gap: .85rem; padding: 1.1rem 1.15rem;
  border: 1px solid var(--ui-line); border-radius: var(--ui-r);
  background: var(--ui-surf); color: var(--ui-txt); text-decoration: none;
}
.hb-gd-ix a:hover { border-color: var(--ui-line2); background: var(--ui-surf2); }
.hb-gd-ix i {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; background: var(--ui-bg); color: var(--ui-acc); font-size: 1.05rem;
}
.hb-gd-ix b { display: block; margin-bottom: .2rem; font-size: 1rem; font-weight: 600; }
.hb-gd-ix span { font-size: .9rem; line-height: 1.45; color: var(--ui-txt2); }
.hb-gd-ix span b { color: var(--ui-txt); }

/* Capitolo */
.hb-gd-cap { margin-top: 1.5rem; padding: 1.6rem 1.6rem 1.4rem; scroll-margin-top: calc(68px + 1rem); }
.hb-gd-cap h2 { display: flex; align-items: center; gap: .7rem; margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.25; color: var(--ui-txt); }
.hb-gd-num {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ui-surf2); border: 1px solid var(--ui-line2);
  font-size: .95rem; font-weight: 700; color: var(--ui-txt);
}
.hb-gd-cap > p { margin: .55rem 0 0; line-height: 1.55; color: var(--ui-txt2); }
.hb-gd-cap > p strong { font-weight: 600; color: var(--ui-txt); }

.hb-gd-row {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.75rem; align-items: start; margin-top: 1.3rem;
}
.hb-gd-fig { margin: 0; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); overflow: hidden; background: var(--ui-bg); }
.hb-gd-fig img { display: block; width: 100%; height: auto; }

.hb-gd-steps { list-style: none; margin: 0; padding: 0; }
.hb-gd-steps li { display: flex; gap: .8rem; margin: 0 0 1.05rem; }
.hb-gd-steps li:last-child { margin-bottom: 0; }
.hb-gd-steps li > b {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center; margin-top: .05rem;
  border-radius: 50%; background: var(--ui-acc); color: #fff; font-size: .82rem; font-weight: 700;
}
.hb-gd-steps p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ui-txt2); }
.hb-gd-steps strong { font-weight: 600; color: var(--ui-txt); }

.hb-gd-tip {
  display: flex; gap: .65rem; margin: 1.2rem 0 0; padding: .95rem 1.05rem;
  border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-bg);
  font-size: .92rem; line-height: 1.55; color: var(--ui-txt2);
}
.hb-gd-tip i { flex: none; margin-top: .2rem; color: var(--ui-ok); }
.hb-gd-tip strong { font-weight: 600; color: var(--ui-txt); }
.hb-gd-tip code, .hb-gd-faq code {
  padding: .05rem .35rem; border-radius: 5px; background: var(--ui-surf2);
  font-size: .86em; color: var(--ui-txt);
}

/* Domande frequenti */
.hb-gd-faq { margin-top: 1.5rem; padding: 1.4rem 1.6rem; }
.hb-gd-faq h2 { margin: 0 0 .4rem; font-size: 1.35rem; font-weight: 700; color: var(--ui-txt); }
.hb-gd-faq details { border-top: 1px solid var(--ui-line); }
.hb-gd-faq summary {
  display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0;
  cursor: pointer; list-style: none; font-weight: 600; color: var(--ui-txt);
}
.hb-gd-faq summary::-webkit-details-marker { display: none; }
.hb-gd-faq summary i { flex: none; margin-top: .2rem; color: var(--ui-txt3); transition: transform .15s; }
.hb-gd-faq details[open] summary i { transform: rotate(180deg); }
.hb-gd-faq details p { margin: 0 0 1rem; line-height: 1.6; color: var(--ui-txt2); }
.hb-gd-faq details a { color: var(--ui-txt); }

/* Invito finale */
.hb-gd-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: 1.4rem 1.6rem; }
.hb-gd-cta h2 { margin: 0 0 .25rem; font-size: 1.2rem; font-weight: 700; color: var(--ui-txt); }
.hb-gd-cta p { margin: 0; color: var(--ui-txt2); }
.hb-gd-cta-b { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 760px) {
  .hb-gd-ix { grid-template-columns: 1fr; gap: .6rem; }
  .hb-gd-row { grid-template-columns: 1fr; gap: 1.1rem; }
  .hb-gd-cap, .hb-gd-faq, .hb-gd-cta { padding: 1.15rem; }
  .hb-gd-cap h2, .hb-gd-faq h2 { font-size: 1.2rem; }
  .hb-gd-cta { flex-direction: column; align-items: stretch; }
  .hb-gd-cta-b .ui-btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-gd-faq summary i { transition: none; }
}