/* ======================================================
   community.css - Community IPTV
   Davide Fulgione Web Developer
   Mobile first. Tema dark viola coerente con style.css
====================================================== */

:root {
  --cm-bg:      #07050e;
  --cm-panel:   #0d0818;
  --cm-panel2:  #120c20;
  --cm-line:    rgba(208, 24, 171, .18);
  --cm-line2:   rgba(255, 255, 255, .08);
  --cm-acc:     #d018ab;
  --cm-acc2:    #8c0f70;
  --cm-acc-sf:  #e066cc;
  --cm-txt:     #e8e4f0;
  --cm-txt2:    #9e94bc;
  --cm-txt3:    #6f6390;
  --cm-ok:      #34c98a;
  --cm-err:     #f87070;
  --cm-warn:    #f0b429;
  --cm-gold:    #f0b429;
  --cm-gold-sf: #ffd76b;
  --cm-r:       16px;
  --cm-r-sm:    10px;
  --cm-sh:      0 6px 28px rgba(0, 0, 0, .45);

  /* Sfondo fotografico delle pagine riservate: le quattro manopole
     per tararlo in un punto solo. --cm-bg-op e' quanto si vede la
     foto, le tre --cm-veil-* sono il velo verticale (alto/centro/basso). */
  --cm-bg-op:   .68;
  --cm-veil-1:  .46;
  --cm-veil-2:  .60;
  --cm-veil-3:  .82;
}



[hidden] { display: none !important; }

/* -- Contenitori --------------------------------------- */
.cm-page {
  position: relative; z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(68px + 1.6rem) clamp(1rem, 4vw, 2.5rem) calc(3.5rem + env(safe-area-inset-bottom));
}
.cm-hero + .cm-page { padding-top: 1.6rem; }
.cm-page-narrow { max-width: 520px; }
.cm-page-mid    { max-width: 780px; }
.cm-page-auth   { max-width: 560px; }
.cm-page-auth-sm { max-width: 520px; }

.cm-back {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--cm-txt2); margin-bottom: 1.1rem;
}
.cm-back:hover { color: var(--cm-acc-sf); }

/* -- HERO ---------------------------------------------- */
.cm-hero {
  position: relative; z-index: 1; overflow: hidden; isolation: isolate;
  padding: calc(68px + 2.6rem) clamp(1rem, 4vw, 2.5rem) 2.4rem;
  border-bottom: 1px solid var(--cm-line);
}
.cm-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  transform: scale(1.05);
  transition: transform 9s ease;
}
.cm-hero:hover .cm-hero-bg { transform: scale(1); }
.cm-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(900px 380px at 20% -10%, rgba(208, 24, 171, .22), transparent 70%),
    radial-gradient(700px 320px at 90% 0%, rgba(140, 15, 112, .20), transparent 70%),
    linear-gradient(180deg, rgba(7, 5, 14, .74) 0%, rgba(7, 5, 14, .84) 55%, rgba(7, 5, 14, .97) 100%);
}
.cm-hero-in { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; }
.cm-hero-main { min-width: 0; }
.cm-hero-side { min-width: 0; }
.cm-hero h1 {
  font-size: clamp(1.9rem, 7vw, 3rem); font-weight: 700; letter-spacing: -.02em;
  color: #f7f4ff; margin: .7rem 0 .5rem; line-height: 1.12;
}
.cm-hero h1 span {
  background: linear-gradient(120deg, var(--cm-acc), var(--cm-acc-sf));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cm-hero p { color: var(--cm-txt2); font-size: .95rem; max-width: 620px; }
/* Nota legale sotto il testo dell'hero: deve leggersi come un avviso,
   non come il seguito della presentazione, quindi piu' piccola e
   staccata. Il link resta evidente: e' il punto dove si accettano i
   Termini. */
.cm-hero p.cm-hero-legal {
  margin-top: .7rem; font-size: .8rem; line-height: 1.55; color: var(--cm-txt3);
}
.cm-hero-legal i { color: var(--cm-acc-sf); margin-right: .3rem; }
.cm-hero-legal a { color: var(--cm-acc-sf); font-weight: 600; text-decoration: underline; }
.cm-hero-legal a:hover { color: #f7f4ff; }

/* Avvertenze legali di chiusura pagina (cm_disclaimer.php).
   E' un <details> chiuso: in riga resta la sola intestazione, il testo
   si apre a richiesta. Deve essere presente e consultabile, non pesare
   quanto il contenuto della pagina. */
.cm-disc {
  margin: 2.4rem 0 0;
  border: 1px solid var(--cm-line2); border-radius: var(--cm-r-sm);
  background: rgba(255, 255, 255, .02);
}
.cm-disc > summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem .9rem; cursor: pointer;
  font-size: .73rem; font-weight: 600; letter-spacing: .03em;
  color: var(--cm-txt3);
  /* il triangolo predefinito non e' allineabile: si usa una icona */
  list-style: none; -webkit-user-select: none; user-select: none;
}
.cm-disc > summary::-webkit-details-marker { display: none; }
.cm-disc > summary::marker { content: ''; }
.cm-disc > summary:hover { color: var(--cm-txt2); }
.cm-disc > summary:focus-visible {
  outline: 2px solid var(--cm-acc); outline-offset: -2px; border-radius: var(--cm-r-sm);
}
.cm-disc-x { margin-left: auto; font-size: .65rem; transition: transform .2s ease; }
.cm-disc[open] .cm-disc-x { transform: rotate(180deg); }
.cm-disc[open] > summary { color: var(--cm-txt2); }
.cm-disc-b { padding: 0 .9rem .85rem; }
.cm-disc-b p {
  font-size: .72rem; line-height: 1.6; color: var(--cm-txt3);
  margin: 0 0 .5rem;
}
.cm-disc-b p:last-child { margin-bottom: 0; }
.cm-disc-b strong { color: var(--cm-txt2); font-weight: 600; }
.cm-disc-b a { color: var(--cm-txt2); text-decoration: underline; text-underline-offset: 2px; }
.cm-disc-b a:hover { color: var(--cm-acc-sf); }
.cm-disc-l { margin-top: .65rem; padding-top: .55rem; border-top: 1px solid var(--cm-line2); }

/* Su schermi larghi il testo occupa tutta la cassa senza righe
   chilometriche: due colonne, con i rimandi finali a tutta larghezza. */
@media (min-width: 900px) {
  .cm-disc-b { columns: 2; column-gap: 2.4rem; }
  .cm-disc-b p { break-inside: avoid; margin-bottom: .6rem; }
  .cm-disc-l { column-span: all; margin-top: .3rem; }
}

.cm-hero-stats { display: flex; gap: 1.6rem; margin: 1.5rem 0 1.6rem; flex-wrap: wrap; }
.cm-hero-stats div { display: flex; flex-direction: column; align-items: flex-start; }
.cm-hero-stats strong { font-size: 1.5rem; font-weight: 700; color: #f7f4ff; line-height: 1.1; }
.cm-hero-stats span { font-size: .68rem; text-transform: uppercase; letter-spacing: .11em; color: var(--cm-txt3); }
.cm-hero-btns { display: flex; gap: .7rem; flex-wrap: wrap; }

/* -- Badge / tag --------------------------------------- */
.cm-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .9rem; border-radius: 40px;
  border: 1px solid var(--cm-line); background: rgba(208, 24, 171, .08);
  font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cm-acc-sf);
}
.cm-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 30px;
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .04);
  font-size: .66rem; font-weight: 500; color: var(--cm-txt2); white-space: nowrap;
}
.cm-tag-green { border-color: rgba(52, 201, 138, .3); background: rgba(52, 201, 138, .1); color: var(--cm-ok); }
.cm-tag-red   { border-color: rgba(248, 112, 112, .3); background: rgba(248, 112, 112, .1); color: var(--cm-err); }
.cm-count {
  display: inline-block; min-width: 1.5rem; padding: .05rem .45rem;
  border-radius: 20px; background: rgba(208, 24, 171, .14);
  font-size: .72rem; color: var(--cm-acc-sf); text-align: center;
}

/* -- Bottoni ------------------------------------------- */
.cm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem 1.25rem; border-radius: 40px; border: 1px solid transparent;
  font-family: inherit; font-size: .84rem; font-weight: 600; line-height: 1;
  cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent; text-align: center;
}
.cm-btn:active { transform: scale(.97); }
.cm-btn-primary {
  background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2));
  color: #fff; box-shadow: 0 4px 18px rgba(208, 24, 171, .35);
}
.cm-btn-green {
  background: linear-gradient(135deg, #3ddc97, #14a06a);
  color: #04160f; font-weight: 700;
  box-shadow: 0 4px 18px rgba(52, 201, 138, .32);
}
.cm-btn-green:hover { box-shadow: 0 6px 24px rgba(52, 201, 138, .48); }
.cm-btn-green i { color: inherit; }
/* Arancione: azione di prova/verifica (es. "Testa la tua lista"), da
   distinguere sia dal verde del salvataggio sia dal rosa primario. */
.cm-btn-orange {
  background: linear-gradient(135deg, #f7a83c, #e07a10);
  color: #1a1004; font-weight: 700;
  box-shadow: 0 4px 18px rgba(240, 148, 41, .32);
}
.cm-btn-orange:hover { box-shadow: 0 6px 24px rgba(240, 148, 41, .48); }
.cm-btn-orange i { color: inherit; }
.cm-btn-ghost {
  background: rgba(255, 255, 255, .04); border-color: var(--cm-line2); color: var(--cm-txt);
}
.cm-btn-ghost:hover { border-color: var(--cm-line); background: rgba(208, 24, 171, .08); }
.cm-btn-danger {
  background: rgba(248, 112, 112, .1); border-color: rgba(248, 112, 112, .3); color: var(--cm-err);
}
.cm-btn-danger:hover { background: rgba(248, 112, 112, .18); }
.cm-btn-sm   { padding: .5rem .9rem; font-size: .78rem; }
.cm-btn-full { width: 100%; margin-top: .6rem; }
.cm-btn[disabled] { opacity: .55; pointer-events: none; }
.cm-mini {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: none; padding: .2rem .1rem;
  font-family: inherit; font-size: .72rem; color: var(--cm-txt3); cursor: pointer;
}
.cm-mini:hover { color: var(--cm-acc-sf); }

/* -- Alert --------------------------------------------- */
.cm-alert {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .8rem 1rem; border-radius: var(--cm-r-sm);
  font-size: .82rem; line-height: 1.55; margin-bottom: 1.1rem;
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .04); color: var(--cm-txt2);
}
.cm-alert i { margin-top: .15rem; }
.cm-alert-error   { border-color: rgba(248, 112, 112, .28); background: rgba(248, 112, 112, .08); color: #ffb3b3; }
.cm-alert-success { border-color: rgba(52, 201, 138, .28);  background: rgba(52, 201, 138, .08);  color: #9ff0cd; }
.cm-alert-info    { border-color: var(--cm-line); background: rgba(208, 24, 171, .07); color: #f0c8ea; }

/* -- Sfondo pagine di autenticazione ------------------- */
.cm-authbg {
  position: fixed; inset: -6%; z-index: 0; pointer-events: none;
  background-position: center top; background-size: cover; background-repeat: no-repeat;
  filter: blur(5px) saturate(1.06);
  transform: scale(1.06);
  opacity: var(--cm-bg-op);
}
/* Il velo non e' piu' un muro nero: quattro sorgenti di colore (magenta
   dal top, viola a sinistra, ciano in basso a destra) piu' una
   vignettatura che chiude i bordi e lascia aperto il centro. Il velo
   verticale resta, ma solo quanto serve a tenere leggibili i titoli
   che stanno direttamente sopra la foto. */
.cm-authbg-veil {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(208, 24, 171, .24), transparent 70%),
    radial-gradient(660px 660px at 6% 22%,  rgba(120, 60, 220, .16), transparent 68%),
    radial-gradient(700px 700px at 96% 76%, rgba(24, 168, 208, .13), transparent 70%),
    radial-gradient(140% 124% at 50% 42%, transparent 34%, rgba(7, 5, 14, .58) 100%),
    linear-gradient(180deg,
      rgba(7, 5, 14, var(--cm-veil-1)) 0%,
      rgba(7, 5, 14, var(--cm-veil-2)) 46%,
      rgba(7, 5, 14, var(--cm-veil-3)) 100%);
}

/* -- Card di autenticazione ---------------------------- */
.cm-auth-card {
  background: var(--cm-panel); border: 1px solid var(--cm-line);
  border-radius: 20px; padding: clamp(1.4rem, 5vw, 2.2rem); box-shadow: var(--cm-sh);
}
.cm-page-auth .cm-auth-card {
  background: rgba(13, 8, 24, .84);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6);
}
.cm-auth-center { text-align: center; }
.cm-auth-head { margin-bottom: 1.4rem; }
.cm-auth-head h1 { font-size: 1.5rem; font-weight: 700; color: #f7f4ff; margin: .7rem 0 .4rem; }
.cm-auth-head p  { font-size: .86rem; color: var(--cm-txt2); }
.cm-auth-center h1 { font-size: 1.45rem; color: #f7f4ff; margin: .6rem 0 .5rem; }
.cm-auth-center p  { font-size: .87rem; color: var(--cm-txt2); margin-bottom: .8rem; }

.cm-ico-big { font-size: 2.6rem; line-height: 1; margin-bottom: .3rem; }
.cm-ico-ok   { color: var(--cm-ok); }
.cm-ico-warn { color: var(--cm-warn); }
.cm-ico-err  { color: var(--cm-err); }

.cm-hint { margin-top: 1.1rem; font-size: .8rem; color: var(--cm-txt3); text-align: center; }
.cm-hint a { color: var(--cm-acc-sf); font-weight: 500; }
.cm-hint a:hover { text-decoration: underline; }

/* -- Form ---------------------------------------------- */
.cm-form { display: block; }
.cm-field { margin-bottom: 1rem; display: block; }
.cm-field > label,
.cm-field > span:first-child {
  display: block; font-size: .74rem; font-weight: 500; color: var(--cm-txt2); margin-bottom: .4rem;
}
.cm-field input[type="text"],
.cm-field input[type="email"],
.cm-field input[type="password"],
.cm-field input[type="tel"],
.cm-field input[type="url"],
.cm-field input[type="date"],
.cm-field input[type="search"],
.cm-field select,
.cm-field textarea,
.cm-cnl-body input {
  width: 100%; padding: .78rem .9rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--cm-line2); border-radius: var(--cm-r-sm);
  color: #f7f4ff; font-family: inherit; font-size: 16px;  /* 16px: evita lo zoom su iOS */
  outline: none; transition: border-color .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
.cm-field textarea { resize: vertical; line-height: 1.6; min-height: 76px; }
.cm-field input:focus, .cm-field select:focus, .cm-field textarea:focus,
.cm-cnl-body input:focus { border-color: rgba(208, 24, 171, .55); background: rgba(208, 24, 171, .05); }
.cm-field input[type="file"] { padding: .6rem; font-size: .8rem; color: var(--cm-txt2); }
.cm-field select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239e94bc'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 1.3rem;
  padding-right: 2.2rem;
}
.cm-field select { color-scheme: dark; }
.cm-field select option { background-color: var(--cm-panel2); color: var(--cm-txt); }
.cm-help { display: block; font-size: .71rem; color: var(--cm-txt3); margin-top: .35rem; line-height: 1.5; }
.cm-help a { color: var(--cm-acc-sf); }
.cm-help code { background: rgba(208, 24, 171, .1); padding: .05rem .3rem; border-radius: 4px; font-size: .95em; }
.cm-row2 { display: grid; grid-template-columns: 1fr; gap: 0 .9rem; }
.cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cm-pw { position: relative; }
.cm-pw-eye {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--cm-txt3); padding: .45rem; cursor: pointer; font-size: .85rem;
}
.cm-pw-eye:hover { color: var(--cm-acc-sf); }

.cm-check {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .78rem; line-height: 1.55; color: var(--cm-txt2); margin: .3rem 0 1.1rem; cursor: pointer;
}
.cm-check input { width: 18px; height: 18px; margin-top: .12rem; accent-color: var(--cm-acc); flex-shrink: 0; }
.cm-check a { color: var(--cm-acc-sf); text-decoration: underline; }
.cm-check-sm { font-size: .73rem; margin: .5rem 0 0; }
.cm-file-hidden { position: absolute; left: -9999px; }
.cm-inline { display: inline-block; }
.cm-form-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }

/* -- Pannelli ------------------------------------------ */
.cm-panel {
  background: var(--cm-panel); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r); padding: clamp(1.1rem, 4vw, 1.6rem); margin-bottom: 1.2rem;
}
.cm-panel-h { font-size: 1rem; font-weight: 600; color: #f7f4ff; margin-bottom: 1rem; }
.cm-panel-ic { color: var(--cm-acc-sf); margin-right: .5rem; }
/* "(opzionale)" accanto al titolo della card: .cm-help e' block per
   default (sta sotto ai campi), qui deve restare sulla stessa riga. */
.cm-panel-h .cm-help { display: inline; margin: 0; font-weight: 400; }
.cm-panel-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cm-panel-head .cm-panel-h { margin: 0; }
.cm-panel-head-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.cm-panel > p { font-size: .84rem; color: var(--cm-txt2); margin-bottom: 1rem; }

/* -- Card richiudibile --------------------------------- */
.cm-acc {
  background: var(--cm-panel); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r); margin: 1.8rem 0 1.2rem; overflow: hidden;
}
.cm-acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .95rem 1.1rem; cursor: pointer; list-style: none;
  font-size: .95rem; font-weight: 600; color: #f7f4ff;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s;
}
.cm-acc > summary::-webkit-details-marker { display: none; }
.cm-acc > summary::marker { content: ''; }
.cm-acc > summary:hover { background: rgba(208, 24, 171, .07); }
.cm-acc-ic { color: var(--cm-acc-sf); margin-right: .55rem; font-size: .9rem; }
.cm-acc-ar { color: var(--cm-txt3); font-size: .78rem; transition: transform .25s; }
.cm-acc[open] .cm-acc-ar { transform: rotate(180deg); }
.cm-acc[open] > summary { border-bottom: 1px solid var(--cm-line2); }
.cm-acc-b { padding: 1.1rem clamp(1rem, 3vw, 1.4rem) 1.3rem; }
.cm-acc-b > p { font-size: .84rem; color: var(--cm-txt2); margin-bottom: 1rem; }

/* -- Pannello compatto --------------------------------- */
.cm-panel-slim { padding: 1rem clamp(1rem, 3vw, 1.3rem) 1.1rem; }
.cm-panel-slim .cm-panel-h { font-size: .95rem; margin-bottom: .9rem; }
.cm-panel-slim .cm-field { margin-bottom: .85rem; }
.cm-panel-slim .cm-field textarea { min-height: 64px; }
.cm-panel-slim .cm-check { margin: .2rem 0 0; }
.cm-panel-slim .cm-drop { padding: .75rem .85rem; gap: .8rem; }
.cm-panel-slim .cm-drop-prev { width: 62px; height: 62px; border-radius: 10px; }
.cm-panel-slim .cm-drop-txt strong { font-size: .82rem; }
.cm-dati { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; }

/* Riga a due colonne sopra l'editor canali (cm_lista_edit.php):
   a sinistra "Dati della lista", a destra due card impilate
   ("Stato e messaggi" + "Logo della lista"). L'altezza totale della
   colonna destra combacia con quella della card di sinistra.
   Stesso breakpoint di .cm-bacheca: sotto i 900px tutto impilato. */
.cm-datigrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.cm-datigrid > .cm-panel,
.cm-datigrid-col > .cm-panel { margin-bottom: 0; }

/* Colonna destra: due card, gap uguale a quello della griglia cosi'
   la spaziatura e' la stessa in orizzontale e in verticale. */
.cm-datigrid-col { display: flex; flex-direction: column; gap: 1.2rem; }

/* La card di sinistra ha pochi campi: la descrizione si allunga per
   riempire l'altezza, invece di lasciare un buco sotto. */
.cm-datigrid > .cm-panel { display: flex; flex-direction: column; }
.cm-field-grow { display: flex; flex-direction: column; flex: 1 1 auto; }
.cm-field-grow textarea { flex: 1 1 auto; resize: vertical; }

/* Stessa logica a destra: la card di stato assorbe lo spazio che
   avanza, quella del logo resta della sua altezza naturale. */
.cm-datigrid-col > .cm-panel:first-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.cm-datigrid-col > .cm-panel:first-child > .cm-modbox { flex: 1 1 auto; }

@media (max-width: 900px) {
  .cm-datigrid { grid-template-columns: 1fr; }
}

.cm-sec-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin: 1.8rem 0 1rem;
}
.cm-sec-head h1 { font-size: clamp(1.4rem, 5vw, 1.9rem); font-weight: 700; color: #f7f4ff; letter-spacing: -.01em; }
.cm-sec-head h2 { font-size: 1.1rem; font-weight: 600; color: #f7f4ff; }
.cm-h2 { font-size: 1.1rem; font-weight: 600; color: #f7f4ff; margin: 2rem 0 1rem; }

.cm-dl { display: grid; gap: .1rem; }
.cm-dl > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--cm-line2); font-size: .82rem;
}
.cm-dl dt { color: var(--cm-txt3); }
.cm-dl dd { color: var(--cm-txt); text-align: right; }

/* -- Toolbar vetrina ----------------------------------- */
.cm-toolbar { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.4rem; }
.cm-search { position: relative; display: flex; align-items: center; }
.cm-search > i { position: absolute; left: .95rem; color: var(--cm-txt3); font-size: .85rem; pointer-events: none; }
.cm-search input {
  width: 100%; padding: .8rem 5.4rem .8rem 2.5rem;
  background: var(--cm-panel); border: 1px solid var(--cm-line2);
  border-radius: 40px; color: #f7f4ff; font-family: inherit; font-size: 16px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.cm-search input:focus { border-color: rgba(208, 24, 171, .5); }
.cm-search-go {
  position: absolute; right: .35rem; padding: .5rem 1rem; border-radius: 40px; border: none;
  background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2));
  color: #fff; font-family: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.cm-tabs { display: flex; gap: .4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cm-tabs::-webkit-scrollbar { display: none; }
.cm-tab {
  flex-shrink: 0; padding: .45rem .95rem; border-radius: 40px;
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .03);
  font-size: .78rem; color: var(--cm-txt2); white-space: nowrap;
}
.cm-tab.on { border-color: var(--cm-acc); background: rgba(208, 24, 171, .14); color: #fff; font-weight: 600; }
.cm-resnum { font-size: .8rem; color: var(--cm-txt3); margin-bottom: 1rem; }
.cm-resnum a { color: var(--cm-acc-sf); }

/* -- Vetrina in AJAX ----------------------------------- */
/* Il contenitore dell'elenco resta in pagina e cambia solo dentro:
   durante la richiesta il contenuto si smorza invece di svuotarsi, cosi'
   l'altezza non collassa e la pagina non sobbalza sotto il dito.
   L'opacita' va sui figli e non su #cm-vetrina, altrimenti si porterebbe
   dietro anche la rotella, che deve restare piena. */
#cm-vetrina { position: relative; }
#cm-vetrina > * { transition: opacity .2s ease; }
#cm-vetrina.is-load { pointer-events: none; }
#cm-vetrina.is-load > * { opacity: .3; }

/* Rotella: anello con lo stesso alone magenta del loader del sito.
   E' fixed e centrata sullo schermo, non nel contenitore: l'elenco puo'
   essere alto qualche migliaio di pixel e una rotella al suo centro
   finirebbe fuori vista. z-index sotto la navbar (1000) e sopra tutto
   il resto della pagina.
   Nasce trasparente e sfuma dopo un attimo: la classe .is-load il JS la
   mette solo se la risposta tarda, e questo secondo ritardo evita il
   lampo anche quando ci mette il minimo indispensabile. */
#cm-vetrina.is-load::after {
  content: ''; position: fixed; z-index: 400; pointer-events: none;
  top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 2px solid rgba(224, 102, 204, .16);
  border-top-color: var(--cm-acc-sf);
  box-shadow: 0 0 26px rgba(208, 24, 171, .26), 0 0 58px rgba(208, 24, 171, .1);
  opacity: 0;
  animation: cm-vet-spin .75s linear infinite, cm-vet-in .22s ease .12s forwards;
}
@keyframes cm-vet-spin { to { transform: rotate(360deg); } }
@keyframes cm-vet-in   { to { opacity: 1; } }
.cm-tab[aria-current="true"] { cursor: default; }
/* Con il movimento ridotto la rotella non gira: pulsa. Serve comunque un
   segnale, ma non deve essere una rotazione continua. */
@media (prefers-reduced-motion: reduce) {
  #cm-vetrina > * { transition: none; }
  #cm-vetrina.is-load::after {
    opacity: 1;
    border-top-color: var(--cm-acc-sf);
    animation: cm-vet-puls 1.2s ease-in-out infinite;
  }
  @keyframes cm-vet-puls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}

/* -- Griglia card -------------------------------------- */
.cm-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.cm-card {
  display: flex; flex-direction: column;
  background: var(--cm-panel); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r); overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.cm-card:hover { border-color: var(--cm-line); box-shadow: var(--cm-sh); }
.cm-card-top {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 132px; overflow: hidden;
  background: linear-gradient(140deg, rgba(208, 24, 171, .13), rgba(140, 15, 112, .06));
  border-bottom: 1px solid var(--cm-line2);
}
/* position: relative serve a tenere il logo nitido sopra a .cm-card-bg,
   che e' posizionato: senza, il logo finirebbe sotto la sfocatura. */
.cm-card-logo { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.cm-card-logo img { max-height: 88px; max-width: 76%; width: auto; object-fit: contain; }
.cm-card-logo i { font-size: 2.1rem; color: rgba(224, 102, 204, .45); }
.cm-card-ch {
  position: absolute; right: .6rem; bottom: .6rem;
  padding: .2rem .6rem; border-radius: 30px;
  background: rgba(7, 5, 14, .75); backdrop-filter: blur(6px);
  font-size: .66rem; font-weight: 600; color: var(--cm-acc-sf); border: 1px solid var(--cm-line);
}
/* -- Card Premium (link personalizzato attivo) ------- */
.cm-card-premium {
  border-color: var(--cm-gold);
  box-shadow: 0 0 0 1px rgba(240, 180, 41, .35), 0 10px 30px rgba(240, 180, 41, .12);
}
.cm-card-premium:hover {
  border-color: var(--cm-gold-sf);
  box-shadow: 0 0 0 1px rgba(240, 180, 41, .5), var(--cm-sh);
}
.cm-card-premium .cm-card-top {
  background: linear-gradient(140deg, rgba(240, 180, 41, .14), rgba(208, 24, 171, .05));
  border-bottom-color: rgba(240, 180, 41, .3);
}

/* -- Copertina con sfondo sfocato (stile Instagram) ----
   I loghi delle liste sono piccoli e spesso trasparenti: al posto della
   tinta piatta si usa la stessa immagine ingrandita e sfocata come fondo,
   cosi' ogni card prende i colori del suo logo. La classe .has-bg arriva
   dal PHP solo quando il logo esiste, e vince anche sul fondo dorato
   delle card premium. */
.cm-card-top.has-bg,
.cm-card-premium .cm-card-top.has-bg { background: #0a0715; }
.cm-card-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* L'immagine sta a un quarto del riquadro e viene ingrandita 5.6 volte:
   25% x 5.6 = 140%, cioe' la stessa copertura di prima (piu' larga del
   riquadro, cosi' la sfumatura del blur cade fuori dai bordi e non li
   lascia sfumare nel trasparente).
   Il motivo del giro e' il costo: il filtro si calcola sulla dimensione di
   layout dell'immagine e solo dopo interviene la transform, quindi qui si
   sfocano sedici volte meno pixel con un raggio di 4px invece di 24, e a
   video il risultato e' identico (4 x 5.6 = 22px effettivi). Con dodici
   card per pagina, su iPhone e' la differenza fra uno scorrimento fluido e
   riquadri che restano vuoti.
   Il centraggio passa da top/left 50% + translate perche' con una
   larghezza del 25% la scatola non e' piu' quella del contenitore e uno
   scale() secco mostrerebbe l'angolo in alto a sinistra del logo. */
.cm-card-bg img {
  display: block; position: absolute; top: 50%; left: 50%;
  width: 25%; height: 25%; object-fit: cover;
  transform: translate(-50%, -50%) scale(5.6);
  -webkit-filter: blur(4px) saturate(1.5) brightness(.62);
  filter: blur(4px) saturate(1.5) brightness(.62);
}
/* Velo sopra la sfocatura: tiene il contrasto del logo nitido e delle
   pillole EPG / numero canali anche con loghi molto chiari. */
.cm-card-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(115% 88% at 50% 42%, rgba(7, 5, 14, .12) 0%, rgba(7, 5, 14, .62) 100%);
}
/* Sopra una copertina sfocata il backdrop-filter di queste pillole e' la
   combinazione peggiore: per sfocare cio' che hanno sotto il browser deve
   riprodurre il livello sfocato a ogni fotogramma dello scorrimento, ed e'
   li' che iOS si arrende e lascia le fasce vuote. Il vetro qui non serve
   comunque, lo sfondo e' gia' sfocato: basta una tinta piu' coprente.
   Sulle card senza logo il backdrop-filter resta come prima. */
.cm-card-top.has-bg .cm-card-ch,
.cm-card-top.has-bg .cm-epg-mark,
.cm-card-top.has-bg .cm-card-crown {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(7, 5, 14, .84);
}
/* Ombra del logo nitido: raggio contenuto, e' un filtro anche questo. */
.cm-card-top.has-bg .cm-card-logo img {
  -webkit-filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
/* Niente ingrandimento della copertina al passaggio del mouse: animare la
   transform di un livello sfocato lo fa ricalcolare a ogni fotogramma, e
   su iOS il :hover si attacca al primo tocco e non se ne va piu'. */
.cm-card-crown {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(7, 5, 14, .72);
  border: 1px solid var(--cm-gold);
  color: var(--cm-gold); font-size: .95rem; line-height: 1;
  box-shadow: 0 2px 12px rgba(240, 180, 41, .45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cm-card-crown .fa-crown,
.cm-card-crown i { font-size: 1rem; color: var(--cm-gold); }
.cm-card-body { padding: .95rem 1rem .5rem; flex: 1; }
.cm-card-title { font-size: 1rem; font-weight: 600; line-height: 1.35; margin-bottom: .35rem; }
.cm-card-title a { color: #f7f4ff; }
.cm-card-title a:hover { color: var(--cm-acc-sf); }
.cm-card-desc { font-size: .8rem; color: var(--cm-txt2); line-height: 1.55; margin-bottom: .7rem; }
.cm-card-author { display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--cm-txt2); }
.cm-card-author em { margin-left: auto; font-style: normal; font-size: .7rem; color: var(--cm-txt3); }
.cm-card-foot {
  display: flex; align-items: center; gap: .2rem;
  padding: .55rem .7rem; border-top: 1px solid var(--cm-line2);
}
.cm-card-go { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--cm-acc-sf); padding: .35rem .5rem; }
.cm-card-go i { font-size: .7rem; }

.cm-avatar {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--cm-line); flex-shrink: 0; background: var(--cm-panel2);
}
.cm-avatar-lg { width: 62px; height: 62px; }
.cm-nick { display: block; font-size: .84rem; font-weight: 600; color: #f7f4ff; }
.cm-bio  { display: block; font-size: .73rem; color: var(--cm-txt3); line-height: 1.45; }

.cm-act {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .55rem; border-radius: 8px; border: none; background: none;
  font-family: inherit; font-size: .76rem; color: var(--cm-txt2); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cm-act:hover { background: rgba(255, 255, 255, .05); color: var(--cm-txt); }
.cm-act.on { color: var(--cm-acc); }
.cm-act-static { cursor: default; }
.cm-act-static:hover { background: none; }
.cm-n { font-variant-numeric: tabular-nums; }

/* -- Paginazione --------------------------------------- */
.cm-pager { display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.cm-pg {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .03);
  font-size: .82rem; color: var(--cm-txt2);
}
.cm-pg.on { border-color: var(--cm-acc); background: rgba(208, 24, 171, .16); color: #fff; font-weight: 600; }
.cm-pg-dots { border: none; background: none; }

/* -- Stato vuoto + CTA --------------------------------- */
.cm-empty {
  text-align: center; padding: 2.6rem 1.2rem;
  border: 1px dashed var(--cm-line); border-radius: var(--cm-r); background: rgba(208, 24, 171, .03);
}
.cm-empty i { font-size: 2.2rem; color: rgba(224, 102, 204, .4); }
.cm-empty h3 { font-size: 1.05rem; color: #f7f4ff; margin: .8rem 0 .4rem; }
.cm-empty p  { font-size: .84rem; color: var(--cm-txt2); max-width: 460px; margin: 0 auto 1.1rem; }
.cm-cta {
  margin-top: 2.4rem; padding: 1.6rem 1.2rem; text-align: center;
  border: 1px solid var(--cm-line); border-radius: var(--cm-r);
  background: linear-gradient(140deg, rgba(208, 24, 171, .12), rgba(140, 15, 112, .05));
}
.cm-cta h3 { font-size: 1.05rem; color: #f7f4ff; margin-bottom: .4rem; }
.cm-cta p  { font-size: .84rem; color: var(--cm-txt2); margin-bottom: 1rem; }

/* -- Area riservata ------------------------------------ */
.cm-area-top { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem; }
.cm-area-user { display: flex; align-items: center; gap: .9rem; }
.cm-area-user h1 { font-size: 1.35rem; font-weight: 700; color: #f7f4ff; line-height: 1.2; }
.cm-area-user p  { font-size: .8rem; color: var(--cm-txt3); word-break: break-all; }
.cm-area-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.cm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: .6rem; margin-bottom: 1.4rem; }
.cm-stat {
  background: var(--cm-panel); border: 1px solid var(--cm-line2); border-radius: var(--cm-r-sm);
  padding: .8rem .6rem; text-align: center;
}
.cm-stat-n { display: block; font-size: 1.25rem; font-weight: 700; color: var(--cm-acc-sf); line-height: 1.1; }
.cm-stat-l { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--cm-txt2); margin-top: .2rem; }

.cm-mylist { display: grid; gap: .9rem; }

/* Ogni lista e' divisa in due card affiancate: a sinistra i dati
   (nome, stato, messaggi, statistiche), a destra link e azioni. */
.cm-myitem-row { display: flex; flex-direction: column; gap: .7rem; }
.cm-myitem {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--cm-panel); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r); padding: 1rem;
}
.cm-myitem-block { border-color: rgba(248, 112, 112, .3); background: rgba(248, 112, 112, .04); }
.cm-myitem-logo {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: rgba(208, 24, 171, .08); border: 1px solid var(--cm-line2);
}
.cm-myitem-logo img { width: 100%; height: 100%; object-fit: contain; }
.cm-myitem-logo i { color: rgba(224, 102, 204, .5); }
.cm-myitem-body { flex: 1; min-width: 0; }
.cm-myitem-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.cm-myitem-head h3 { font-size: .98rem; font-weight: 600; color: #f7f4ff; }
.cm-myitem-desc { font-size: .8rem; color: var(--cm-txt2); line-height: 1.55; margin-bottom: .5rem; }
.cm-myitem-nota {
  font-size: .76rem; color: #ffb3b3; background: rgba(248, 112, 112, .08);
  border-radius: 8px; padding: .45rem .6rem; margin-bottom: .5rem;
}
.cm-myitem-meta { display: flex; gap: .85rem; flex-wrap: wrap; font-size: .73rem; color: var(--cm-txt2); margin-bottom: 0; }
.cm-myitem-meta i { color: var(--cm-acc-sf); opacity: .85; margin-right: .15rem; }
.cm-myitem-btns { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }

/* -- Card destra: link personalizzati + azioni ---------- */
.cm-myitem-links {
  display: flex; flex-direction: column; gap: .7rem;
  background: var(--cm-panel); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r); padding: 1rem;
}
.cm-myitem-links.cm-myitem-block { border-color: rgba(248, 112, 112, .3); background: rgba(248, 112, 112, .04); }
.cm-myitem-links-head {
  display: flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--cm-acc-sf);
}
.cm-myitem-links .cm-linkbox { margin-bottom: 0; }
.cm-myitem-links .cm-linkbox input { color: var(--cm-txt); }
.cm-myitem-links .cm-vmini { margin: 0; }
.cm-myitem-links .cm-myitem-btns { margin-top: auto; }

@media (min-width: 720px) {
  .cm-myitem-row { flex-direction: row; align-items: stretch; }
  .cm-myitem-row > .cm-myitem { flex: 1 1 56%; min-width: 0; }
  .cm-myitem-row > .cm-myitem-links { flex: 1 1 44%; min-width: 0; }
}

.cm-linkbox { display: flex; gap: .4rem; margin-bottom: .7rem; }
.cm-linkbox input {
  flex: 1; min-width: 0; padding: .55rem .7rem;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--cm-line2);
  border-radius: 8px; color: var(--cm-txt2); font-family: inherit; font-size: .76rem;
  text-overflow: ellipsis; -webkit-appearance: none; appearance: none;
}
.cm-copy {
  flex-shrink: 0; width: 40px; border-radius: 8px;
  border: 1px solid var(--cm-line); background: rgba(208, 24, 171, .1);
  color: var(--cm-acc-sf); cursor: pointer; font-size: .82rem;
}
.cm-logo-now { display: flex; align-items: center; gap: .9rem; margin-bottom: .7rem; }
.cm-logo-now img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; border: 1px solid var(--cm-line2); background: var(--cm-panel2); }

/* -- Pannelli sopra lo sfondo immagine ----------------- */
.cm-onbg .cm-panel,
.cm-onbg .cm-stat,
.cm-onbg .cm-myitem,
.cm-onbg .cm-myitem-links,
.cm-onbg .cm-empty,
.cm-onbg .cm-acc,
.cm-onbg .cm-detail-logo,
.cm-onbg .cm-detail-info,
.cm-onbg .cm-detail-descbox,
.cm-onbg .cm-side,
.cm-onbg .cm-comment-rep .cm-comment-body,
.cm-onbg .cm-m3u,
.cm-onbg .cm-comment-body,
.cm-onbg .cm-auth-card {
  background-color: rgba(13, 8, 24, .84);
  backdrop-filter: blur(15px) saturate(1.12);
  -webkit-backdrop-filter: blur(15px) saturate(1.12);
  box-shadow: 0 12px 42px rgba(0, 0, 0, .45);
}
.cm-onbg .cm-myitem-block,
.cm-onbg .cm-myitem-links.cm-myitem-block { background-color: rgba(42, 12, 22, .84); }
.cm-onbg .cm-empty { border-style: dashed; }
.cm-onbg .cm-chip { background-color: rgba(13, 8, 24, .72); }
.cm-onbg .cm-loginline { background-color: rgba(13, 8, 24, .72); }

/* Titoli e testi che poggiano direttamente sulla foto (intestazione
   dell'area, titoli di sezione, link "torna a"): ora che lo sfondo e'
   piu' vivo servono un'ombra morbida per non perdere il contrasto. */
.cm-onbg .cm-area-user h1,
.cm-onbg .cm-area-user p,
.cm-onbg .cm-sec-head h1,
.cm-onbg .cm-sec-head h2,
.cm-onbg .cm-h2,
.cm-onbg .cm-back,
.cm-onbg .cm-help {
  text-shadow: 0 1px 2px rgba(7, 5, 14, .85), 0 2px 14px rgba(7, 5, 14, .55);
}

/* -- Dropzone immagine --------------------------------- */
.cm-drop {
  position: relative; display: flex; align-items: center; gap: 1rem;
  padding: 1rem; border-radius: var(--cm-r);
  border: 1.5px dashed rgba(208, 24, 171, .35);
  background: rgba(208, 24, 171, .04);
  transition: border-color .2s, background .2s;
  cursor: pointer;
}
.cm-drop:hover { border-color: rgba(208, 24, 171, .62); background: rgba(208, 24, 171, .08); }
.cm-drop.on {
  border-color: var(--cm-acc); border-style: solid;
  background: rgba(208, 24, 171, .15);
  box-shadow: 0 0 0 4px rgba(208, 24, 171, .12);
}
.cm-drop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; padding: 0; border: none; cursor: pointer;
}
.cm-drop-prev {
  width: 78px; height: 78px; flex-shrink: 0; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--cm-line2);
  background: var(--cm-panel2);
  display: flex; align-items: center; justify-content: center;
}
.cm-drop-prev img { width: 100%; height: 100%; object-fit: contain; }
.cm-drop-prev i { font-size: 1.55rem; color: rgba(224, 102, 204, .45); }
.cm-drop-txt { min-width: 0; }
.cm-drop-txt strong { display: block; font-size: .88rem; color: #f7f4ff; margin-bottom: .18rem; }
.cm-drop-txt > span { display: block; font-size: .74rem; color: var(--cm-txt3); line-height: 1.5; }
.cm-drop-txt em { color: var(--cm-acc-sf); font-style: normal; font-weight: 600; text-decoration: underline; }
.cm-drop .cm-drop-name {
  display: none; align-items: center; gap: .4rem;
  margin-top: .4rem; font-size: .74rem; color: var(--cm-ok); word-break: break-all;
}
.cm-drop.has .cm-drop-name { display: flex; }
.cm-drop-clear {
  position: relative; z-index: 2; margin-left: auto; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .05);
  color: var(--cm-txt2); font-size: .82rem;
  display: none; align-items: center; justify-content: center;
}
.cm-drop.has .cm-drop-clear { display: flex; }
.cm-drop-clear:hover { color: var(--cm-err); border-color: rgba(248, 112, 112, .4); }
@media (min-width: 641px) { .cm-drop { padding: 1.2rem 1.3rem; } }
/* la .cm-check figlia diretta di .cm-field non deve ereditare lo stile label */
.cm-field > label.cm-check {
  display: flex; font-size: .74rem; color: var(--cm-txt2); margin: .6rem 0 0;
}
.cm-prof-avatar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.cm-del-form { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(248, 112, 112, .2); }

/* -- Righe canale (editor) ----------------------------- */
.cm-chlist { display: grid; gap: .8rem; }
/* Barra in fondo all'elenco: aggiungere canali senza risalire la pagina */
.cm-chfoot {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .9rem; padding: .75rem .85rem;
  border: 1px dashed var(--cm-line2); border-radius: var(--cm-r-sm);
  background: rgba(208, 24, 171, .045);
}
.cm-chfoot-n { margin-left: auto; font-size: .74rem; color: var(--cm-txt2); font-variant-numeric: tabular-nums; }
.cm-chfoot-n b { color: var(--cm-acc-sf); font-weight: 600; }
@media (max-width: 620px) {
  .cm-chfoot-n { margin-left: 0; width: 100%; text-align: right; }
}
/* Editor canali della lista M3U (cm_lista_edit.php).
   Prefisso riservato: .cm-cnl-  --  NON usare .cm-ch-, che appartiene al
   cassetto chat in fondo al file, dove .cm-ch e' position:fixed. */
.cm-cnl { border: 1px solid var(--cm-line2); border-radius: var(--cm-r-sm); background: rgba(255, 255, 255, .02); overflow: hidden; }
.cm-cnl-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .7rem; background: rgba(208, 24, 171, .06); border-bottom: 1px solid var(--cm-line2);
}
.cm-cnl-n { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cm-acc-sf); }
.cm-cnl-hd-btns { display: flex; gap: .2rem; }
.cm-cnl-ico {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: rgba(255, 255, 255, .05); color: var(--cm-txt2); cursor: pointer; font-size: .75rem;
}
.cm-cnl-ico:hover { background: rgba(208, 24, 171, .15); color: #fff; }
.cm-cnl-del:hover { background: rgba(248, 112, 112, .18); color: var(--cm-err); }
.cm-cnl-body { padding: .8rem .7rem; display: grid; gap: .7rem; }
.cm-cnl-body label { display: block; font-size: .72rem; color: var(--cm-txt2); }
.cm-cnl-body label input { margin-top: .3rem; }
.cm-cnl-row4 { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.cm-cnl-logo { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.cm-cnl-logo input[type="url"] { flex: 1; min-width: 0; margin-top: 0; }
.cm-cnl-logo-prev {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
  background-color: rgba(255, 255, 255, .04); background-size: cover; background-position: center;
  border: 1px solid var(--cm-line2); display: none;
}
.cm-cnl-logo-prev.has { display: block; }
.cm-cnl-logo-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cm-cnl-logo-btn.has { color: var(--cm-ok); background: rgba(52, 201, 138, .12); }
.cm-cnl-logo-clear { display: none; align-items: center; justify-content: center; flex-shrink: 0; }
.cm-cnl-logo-clear.show { display: inline-flex; }
.cm-cnl-logo-clear:hover { background: rgba(248, 112, 112, .18); color: var(--cm-err); }
.cm-import { margin-top: 1rem; padding: 1rem; border: 1px dashed var(--cm-line); border-radius: var(--cm-r-sm); }
.cm-import label { display: block; font-size: .75rem; color: var(--cm-txt2); margin-bottom: .4rem; }
.cm-import textarea {
  width: 100%; padding: .7rem; background: rgba(0, 0, 0, .3);
  border: 1px solid var(--cm-line2); border-radius: 8px;
  color: var(--cm-txt); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  outline: none; resize: vertical;
}
.cm-import-btns { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }

/* -- Dettaglio lista ----------------------------------- */
.cm-detail-head {
  display: flex; flex-direction: column; gap: 1rem;
  background: none; border: none; border-radius: 0; padding: 0;
}
.cm-detail-logo {
  width: 100%; height: 150px; border-radius: var(--cm-r); padding: 1rem;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(140deg, rgba(208, 24, 171, .14), rgba(140, 15, 112, .05));
  border: 1px solid var(--cm-line);
}
.cm-detail-info {
  background: var(--cm-panel); border: 1px solid var(--cm-line);
  border-radius: var(--cm-r); padding: clamp(1.1rem, 4vw, 1.7rem);
}
.cm-detail-logo img { max-height: 116px; max-width: 82%; object-fit: contain; }
.cm-detail-logo i { font-size: 2.2rem; color: rgba(224, 102, 204, .45); }
.cm-detail-info h1 { font-size: clamp(1.35rem, 5.5vw, 2rem); font-weight: 700; color: #f7f4ff; line-height: 1.2; margin-bottom: .8rem; }
.cm-detail-author { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.cm-detail-meta { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .76rem; color: var(--cm-txt3); margin-bottom: .9rem; }
.cm-detail-descbox {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--cm-panel); border: 1px solid var(--cm-line);
  border-radius: var(--cm-r); padding: clamp(1.1rem, 4vw, 1.5rem);
}
.cm-detail-desch {
  display: flex; align-items: center; gap: .45rem; flex-shrink: 0;
  font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cm-acc-sf); margin-bottom: .7rem;
}
.cm-detail-desc {
  font-size: .88rem; color: var(--cm-txt2); line-height: 1.7;
  margin: 0; overflow-wrap: anywhere;
}
.cm-detail-acts { display: flex; gap: .5rem; flex-wrap: wrap; }

.cm-m3u {
  margin-top: 1rem; padding: 1.1rem;
  border: 1px solid var(--cm-line); border-radius: var(--cm-r);
  background: linear-gradient(140deg, rgba(208, 24, 171, .09), rgba(140, 15, 112, .03));
}
.cm-m3u-h { font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--cm-acc-sf); margin-bottom: .7rem; }
.cm-m3u-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.cm-m3u-note { font-size: .71rem; color: var(--cm-txt3); line-height: 1.55; margin-top: .8rem; }
.cm-m3u-lock { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.cm-m3u-lock > i { font-size: 1.5rem; color: var(--cm-acc-sf); }
.cm-m3u-lock strong { display: block; font-size: .92rem; color: #f7f4ff; margin-bottom: .25rem; }
.cm-m3u-lock p { font-size: .8rem; color: var(--cm-txt2); }
.cm-m3u .cm-linkbox { margin-bottom: 1rem; }

/* Empty-state senza pulsanti (es. commenti in attesa di moderazione):
   centrato, non il layout a riga di .cm-m3u-lock che presuppone dei
   bottoni a destra e altrimenti lascia meta' card vuota. */
.cm-emptybox {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .6rem; padding: 1.5rem 1rem;
}
.cm-emptybox > i { font-size: 1.7rem; color: var(--cm-acc-sf); }
.cm-emptybox strong { display: block; font-size: .92rem; color: #f7f4ff; }
.cm-emptybox p { font-size: .82rem; color: var(--cm-txt2); max-width: 44ch; }

/* Nota leggera per uno stato "riservato" quando c'e' gia' un CTA
   prominente altrove nella pagina: una riga, non un'altra card con
   bottoni duplicati. */
.cm-lockline {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .8rem .95rem; border-radius: var(--cm-r-sm);
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .03);


  font-size: .8rem; line-height: 1.55; color: var(--cm-txt2);
}
.cm-lockline i { color: var(--cm-acc-sf); flex: none; margin-top: .15rem; }
.cm-lockline a { color: var(--cm-acc-sf); font-weight: 600; text-decoration: none; }
.cm-lockline a:hover { text-decoration: underline; }
.cm-m3u.cm-m3u-premium {
  border-color: var(--cm-gold);
  box-shadow: 0 0 0 1px rgba(240, 180, 41, .4), 0 12px 42px rgba(0, 0, 0, .45);
}
.cm-m3u-premium .cm-copy {
  border-color: var(--cm-gold);
  background: linear-gradient(135deg, #f7c948, #d99a1e);
  color: #3a2600;
}
.cm-detail-logo.cm-detail-logo-premium {
  position: relative;
  border-color: var(--cm-gold);
  box-shadow: 0 0 0 1px rgba(240, 180, 41, .4), 0 12px 42px rgba(0, 0, 0, .45);
  background: linear-gradient(140deg, rgba(240, 180, 41, .16), rgba(208, 24, 171, .05));
}

.cm-group { margin-bottom: 1.3rem; }
.cm-group-h {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cm-txt2); margin-bottom: .6rem;
}
.cm-group-h span {
  padding: .05rem .45rem; border-radius: 20px; background: rgba(208, 24, 171, .12);
  font-size: .68rem; color: var(--cm-acc-sf); letter-spacing: 0;
}
.cm-chgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.cm-chip {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem; border-radius: 10px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--cm-line2);
  font-size: .78rem; color: var(--cm-txt); min-width: 0;
}
.cm-chip img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; border-radius: 5px; background: rgba(255, 255, 255, .05); }
.cm-chip-ph { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--cm-txt3); font-size: .7rem; }
.cm-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -- Colonna laterale: altre liste dell'autore --------- */
.cm-underbar { display: block; }
.cm-side {
  margin-top: 2rem; padding: 1.1rem;
  background: var(--cm-panel); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r);
}
.cm-side-h {
  display: flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cm-acc-sf); margin-bottom: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-side-list { display: grid; gap: .35rem; }
.cm-side-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .55rem; border-radius: 10px;
  border: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.cm-side-item:hover { background: rgba(208, 24, 171, .09); border-color: var(--cm-line); }
.cm-side-logo {
  width: 42px; height: 42px; flex-shrink: 0; overflow: hidden;
  border-radius: 8px; border: 1px solid var(--cm-line2); background: var(--cm-panel2);
  display: flex; align-items: center; justify-content: center;
}
.cm-side-logo img { width: 100%; height: 100%; object-fit: contain; }
.cm-side-logo i { font-size: .88rem; color: rgba(224, 102, 204, .5); }
.cm-side-txt { flex: 1; min-width: 0; }
.cm-side-txt strong {
  display: block; font-size: .82rem; font-weight: 600; color: #f7f4ff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-side-txt em { display: block; font-style: normal; font-size: .69rem; color: var(--cm-txt3); margin-top: .12rem; }
.cm-side-item > i { flex-shrink: 0; font-size: .68rem; color: var(--cm-txt3); }
.cm-side-all {
  display: block; margin-top: .9rem; padding-top: .8rem;
  border-top: 1px solid var(--cm-line2);
  text-align: center; font-size: .76rem; font-weight: 600; color: var(--cm-acc-sf);
}
.cm-side-all:hover { text-decoration: underline; }

/* -- Commenti ------------------------------------------ */
.cm-comments { max-width: 720px; }
/* Quando l'aside "Prova i canali" non compare (visitatore anonimo, o
   nessun canale in streaming) i commenti restano soli sulla riga: si
   allungano invece di restare stretti a 720px con vuoto a destra. */
.cm-underbar-solo .cm-comments { max-width: none; }
.cm-comments .cm-h2 { margin-bottom: .9rem; }
.cm-cform { display: flex; gap: .8rem; margin-bottom: 1.4rem; }
.cm-cform-body { flex: 1; min-width: 0; }
.cm-cform textarea {
  width: 100%; padding: .7rem .85rem;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--cm-line2);
  border-radius: 12px; color: #f7f4ff; font-family: inherit; font-size: 16px;
  outline: none; resize: vertical; line-height: 1.6;
  -webkit-appearance: none; appearance: none;
}
.cm-cform textarea:focus { border-color: rgba(208, 24, 171, .5); }
.cm-cform-foot { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .5rem; }
.cm-cform-foot .cm-help { margin: 0; }
.cm-loginline {
  display: inline-block;
  padding: .5rem 1rem; margin-bottom: 1.2rem;
  border: 1px solid var(--cm-line2); border-radius: 40px;
  background: rgba(255, 255, 255, .03);
  font-size: .78rem; text-align: left;
}
.cm-loginline a { color: var(--cm-acc-sf); font-weight: 600; }
.cm-loginline a:hover { text-decoration: underline; }

.cm-clist { display: grid; gap: 1rem; }
.cm-comment { display: flex; align-items: flex-start; gap: .75rem; }
.cm-comment .cm-avatar { width: 36px; height: 36px; }
.cm-comment-body {
  flex: 0 1 auto; min-width: 200px; max-width: 100%;
  background: var(--cm-panel2);
  border: 1px solid var(--cm-line2); border-radius: 4px 14px 14px 14px;
  padding: .65rem .9rem .7rem;
}
.cm-comment-hd { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .2rem; }
.cm-comment-hd .cm-nick { font-size: .8rem; }
.cm-comment-hd em { font-style: normal; font-size: .7rem; color: var(--cm-txt3); }
.cm-comment-body p { font-size: .84rem; color: var(--cm-txt); line-height: 1.6; word-wrap: break-word; overflow-wrap: anywhere; }
.cm-comment-acts { display: flex; align-items: center; gap: .85rem; margin-top: .5rem; flex-wrap: wrap; }
.cm-clike { gap: .3rem; }
.cm-clike i { font-size: .8rem; }
.cm-clike:hover { color: var(--cm-acc-sf); }
.cm-clike.on { color: var(--cm-acc-sf); }
.cm-clike.on i { color: var(--cm-acc); }
.cm-clike .cm-cn { font-variant-numeric: tabular-nums; }
.cm-crep:hover { color: var(--cm-acc-sf); }

/* -- Thread: risposte a un commento -------------------- */
.cm-thread { display: grid; gap: .6rem; }
.cm-replies { display: grid; gap: .6rem; }
.cm-replies:empty { display: none; }
.cm-comment-rep { padding-left: 2.2rem; position: relative; }
.cm-comment-rep::before {
  content: ''; position: absolute; left: 1rem; top: -.35rem; bottom: 50%;
  width: 1px; background: var(--cm-line2);
}
.cm-comment-rep::after {
  content: ''; position: absolute; left: 1rem; top: 50%; width: .9rem; height: 1px;
  background: var(--cm-line2);
}
.cm-comment-rep .cm-avatar { width: 30px; height: 30px; }
.cm-comment-rep .cm-comment-body { min-width: 170px; background: rgba(255, 255, 255, .025); }
.cm-cform-rep { margin: .2rem 0 .2rem 2.2rem; }
.cm-cform-rep textarea { font-size: 16px; }

/* -- Commento principale vs risposta: colori distinti - */
.cm-comment:not(.cm-comment-rep) > .cm-comment-body {
  background: linear-gradient(180deg, rgba(208, 24, 171, .10), rgba(208, 24, 171, .03));
  border-color: var(--cm-line);
  box-shadow: inset 3px 0 0 var(--cm-acc);
}
.cm-comment-rep .cm-comment-body { background: var(--cm-panel2); border-color: var(--cm-line2); }
/* Sopra lo sfondo immagine (pagina dettaglio) vincono queste */
.cm-onbg .cm-comment:not(.cm-comment-rep) > .cm-comment-body {
  background-color: rgba(34, 12, 44, .86);
  border-color: rgba(208, 24, 171, .32);
  box-shadow: 0 12px 42px rgba(0, 0, 0, .45), inset 3px 0 0 var(--cm-acc);
}
.cm-onbg .cm-comment-rep .cm-comment-body {
  background-color: rgba(12, 10, 20, .80);
  border-color: var(--cm-line2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .40);
}

/* -- Espandi conversazione ----------------------------- */
.cm-replies-more { display: grid; gap: .6rem; }
.cm-replies-more[hidden] { display: none; }
.cm-rexpand { justify-self: start; margin-left: 2.2rem; color: var(--cm-acc-sf); font-weight: 600; }
.cm-rexpand:hover { color: #fff; }
.cm-rexpand i { font-size: .72rem; }
.cm-rexpand .cm-count { margin-left: .15rem; }

/* Mostra altri commenti: i thread eccedenti sono gia' nel DOM con
   hidden, questo pulsante li scopre a scaglioni. */
.cm-cmore {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  width: 100%; margin-top: 1rem; padding: .7rem 1rem;
  border: 1px solid var(--cm-line2); border-radius: var(--cm-r-sm);
  background: rgba(255, 255, 255, .03);
  font-size: .8rem; font-weight: 600; color: var(--cm-txt2);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.cm-cmore:hover { background: rgba(208, 24, 171, .08); border-color: var(--cm-line); color: #fff; }
.cm-cmore i { font-size: .72rem; }
.cm-cmore .cm-count { color: var(--cm-acc-sf); }

/* Commento raggiunto da un'ancora delle notifiche: un lampo breve,
   altrimenti in una pagina lunga non si capisce dove si e' atterrati. */
.cm-comment.is-evidenza {
  animation: cm-evidenza 2.8s ease-out 1;
  border-radius: var(--cm-r-sm);
}
@keyframes cm-evidenza {
  0%, 55% { background: rgba(208, 24, 171, .16); }
  100%    { background: transparent; }
}
.cm-cform-rep .cm-cform-foot { justify-content: flex-end; gap: .9rem; }

/* -- Bottom sheet -------------------------------------- */
.cm-sheet { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-end; }
.cm-sheet[hidden] { display: none; }
.cm-sheet-bg { position: absolute; inset: 0; background: rgba(3, 2, 8, .72); backdrop-filter: blur(3px); }
.cm-sheet-card {
  position: relative; width: 100%; max-height: 88vh; overflow-y: auto;
  background: var(--cm-panel); border-top: 1px solid var(--cm-line);
  border-radius: 20px 20px 0 0;
  padding: 1.2rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
  animation: cm-up .24s ease;
}
@keyframes cm-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cm-sheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cm-sheet-h strong { font-size: 1rem; color: #f7f4ff; }
.cm-sheet-h .cm-mini { font-size: 1.1rem; }

/* -- Modale messaggi / conferme del sito --------------- */
.cm-modal { position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.cm-modal[hidden] { display: none; }
.cm-modal-bg { position: absolute; inset: 0; background: rgba(3, 2, 8, .74); backdrop-filter: blur(4px); }
.cm-modal-card {
  position: relative; width: 100%; max-width: 400px; text-align: center;
  background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: 18px;
  padding: 1.6rem 1.5rem 1.3rem; box-shadow: var(--cm-sh); animation: cm-pop .2s ease;
}
@keyframes cm-pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cm-modal-ico { font-size: 2rem; margin-bottom: .7rem; color: var(--cm-acc-sf); }
.cm-modal-ico.is-ok   { color: var(--cm-ok); }
.cm-modal-ico.is-err  { color: var(--cm-err); }
.cm-modal-ico.is-warn { color: var(--cm-warn); }
.cm-modal-msg { font-size: .9rem; color: var(--cm-txt); line-height: 1.55; margin-bottom: 1.3rem; word-wrap: break-word; overflow-wrap: anywhere; }
.cm-modal-btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.cm-modal-btns .cm-btn { min-width: 112px; }

/* -- Tablet -------------------------------------------- */
@media (min-width: 641px) {
  .cm-row2   { grid-template-columns: 1fr 1fr; }
  .cm-grid   { grid-template-columns: repeat(2, 1fr); }
  .cm-cnl-row4 { grid-template-columns: 1.3fr .8fr 1.5fr .9fr; }
  .cm-cnl-body { padding: 1rem; }
  .cm-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .cm-search { flex: 1; max-width: 420px; }
  .cm-area-top { flex-direction: row; align-items: center; justify-content: space-between; }
  .cm-m3u-lock { flex-direction: row; align-items: center; }
  .cm-m3u-lock .cm-m3u-btns { margin-left: auto; }
}

/* -- Desktop ------------------------------------------- */
@media (min-width: 1025px) {
  .cm-hero { padding-top: calc(68px + 3.6rem); padding-bottom: 3.2rem; }
  .cm-page-auth { max-width: 900px; }
  .cm-dati { grid-template-columns: 1.55fr 1fr; }
  .cm-dati .cm-field:last-child { margin-bottom: 0; }
  .cm-page-auth.cm-page-auth-sm { max-width: 560px; }
  .cm-page-auth-sm .cm-auth-card { padding: 2.4rem 2.6rem 2.6rem; }
  .cm-page-auth-sm .cm-auth-head h1 { font-size: 1.75rem; }
  .cm-page-auth .cm-auth-card { padding: 2.6rem 3rem 2.8rem; border-radius: 24px; }
  .cm-page-auth .cm-auth-head { margin-bottom: 1.9rem; }
  .cm-page-auth .cm-auth-head h1 { font-size: 1.95rem; }
  .cm-page-auth .cm-auth-head p { font-size: .92rem; max-width: 640px; }
  .cm-page-auth .cm-row2 { gap: 0 1.5rem; }
  .cm-page-auth .cm-field { margin-bottom: 1.15rem; }
  .cm-page-auth .cm-check { font-size: .82rem; margin: .6rem 0 .2rem; }
  .cm-page-auth form .cm-btn-full {
    display: flex; width: 100%; max-width: 340px; margin: 1.4rem auto 0;
    padding-top: .82rem; padding-bottom: .82rem;
  }
  .cm-hero-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(2rem, 5vw, 4rem);
  }
  .cm-hero-main { flex: 1 1 auto; max-width: 640px; }
  .cm-hero-main p { margin-bottom: 0; }
  .cm-hero-side {
    flex: 0 0 auto; display: flex; flex-direction: column;
    align-items: flex-end; gap: 1.5rem; text-align: right;
  }
  .cm-hero-side .cm-hero-stats { margin: 0; gap: 2.4rem; justify-content: flex-end; }
  .cm-hero-side .cm-hero-stats div { align-items: flex-end; text-align: right; }
  .cm-hero-side .cm-hero-stats strong { font-size: 1.9rem; }
  .cm-hero-side .cm-hero-btns { margin: 0; justify-content: flex-end; }
  .cm-grid { grid-template-columns: repeat(3, 1fr); }
  .cm-detail-head { flex-direction: row; align-items: stretch; gap: 1.2rem; }
  .cm-detail-logo { width: 300px; height: auto; min-height: 240px; flex-shrink: 0; padding: 1.6rem; }
  .cm-detail-logo img { max-height: 100%; max-width: 100%; }
  .cm-detail-info { flex: 1 1 380px; min-width: 0; }
  .cm-jump-comm { display: none; }
  .cm-underbar { display: flex; align-items: flex-start; gap: 1.6rem; }
  .cm-underbar .cm-comments { flex: 1 1 720px; }
  .cm-side { flex: 1 1 330px; max-width: 390px; position: sticky; top: 88px; }
  .cm-detail-descbox { flex: 1 1 320px; min-width: 0; max-height: 320px; }
  .cm-detail-descbox .cm-detail-desc {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: .6rem;
    scrollbar-width: thin; scrollbar-color: var(--cm-acc) transparent;
  }
  .cm-card-top { height: 150px; }
  /* La card informativa (sinistra) mostra testa+statistiche in riga;
     link, widget affiliazione e pulsanti vivono ora nella card destra
     (.cm-myitem-links), quindi non fanno piu' parte di questa griglia. */
  .cm-myitem-body {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "head meta" "desc desc" "badge badge" "nota nota";
    align-items: start; column-gap: 1.2rem; row-gap: .5rem;
  }
  .cm-myitem-head { grid-area: head; margin-bottom: 0; }
  .cm-myitem-meta { grid-area: meta; justify-content: flex-end; align-self: center; }
  .cm-myitem-desc { grid-area: desc; margin-bottom: 0; }
  /* Senza grid-area il badge finiva in una riga implicita e, per il
     default "stretch" degli item di griglia, si allargava a tutta
     larghezza invece di restare la pillola compatta prevista. */
  .cm-myitem-body .cm-revbadge { grid-area: badge; justify-self: start; margin: 0; }
  .cm-myitem-nota { grid-area: nota; margin-bottom: 0; }
}


/* ======================================================
   Fix iPhone / iOS
   - footer sopra lo sfondo fisso della Community
   - centratura robusta delle card statistiche
====================================================== */
body #footer { position: relative; z-index: 1; }

.cm-stats { justify-items: stretch; }
.cm-stat {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.cm-stat-n, .cm-stat-l { width: 100%; text-align: center; }

/* -- Accessibilita' / preferenze ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .cm-btn, .cm-card, .cm-sheet-card { transition: none; animation: none; }
}

/* ===========================================================
   FIX iOS - sfondo Community (.cm-authbg)
   Il blur runtime + transform su un layer fixed a pagina intera
   su iOS Safari viene ridipinto a tile: risultato, sfondo a meta'.
   Il blur e' ora gia' cotto nell'asset, il filter runtime e' rimosso.
   =========================================================== */
.cm-authbg {
  inset: 0;
  filter: none;
  -webkit-filter: none;
  transform: none;
  will-change: auto;
  opacity: var(--cm-bg-op);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('assets/img/community-blur-m.jpg');
}

@media (min-width: 1025px) {
  .cm-authbg { background-image: url('assets/img/community-blur-d.jpg'); }
}

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .cm-authbg {
    background-image: image-set(
      url('assets/img/community-blur-m.webp') type('image/webp'),
      url('assets/img/community-blur-m.jpg')  type('image/jpeg'));
  }
  @media (min-width: 1025px) {
    .cm-authbg {
      background-image: image-set(
        url('assets/img/community-blur-d.webp') type('image/webp'),
        url('assets/img/community-blur-d.jpg')  type('image/jpeg'));
    }
  }
}

/* Logo e avatar nel dettaglio lista: decodifica asincrona, niente
   attesa sul thread principale mentre il resto della card e' gia' pronto. */
.cm-detail-logo img { display: block; }

/* ======================================================
   URL personalizzato (vanity) - liste con 100+ like
====================================================== */
.cm-vanity {
  margin-top: 1rem; padding: 1.2rem 1.3rem;
  border: 1px solid rgba(212, 175, 55, .55); border-radius: var(--cm-r);
  background: linear-gradient(140deg, rgba(212, 175, 55, .14), rgba(120, 90, 20, .05));
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .10), 0 8px 26px rgba(120, 90, 20, .12);
}
.cm-vanity .cm-m3u-h { color: #e6c559; }
.cm-vanity .cm-m3u-h i { color: #f0cf6a; }
.cm-vanity-note {
  font-size: .82rem; color: var(--cm-txt2); line-height: 1.6; margin: 0 0 .8rem;
}
.cm-vanity-note code {
  padding: .05rem .35rem; border-radius: 5px;
  background: rgba(255, 255, 255, .06); color: #f0c8ea;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82em;
}
.cm-vanity-locked { display: flex; align-items: flex-start; gap: .5rem; }
.cm-vanity-locked > i { margin-top: .15rem; color: #e6c559; }

.cm-vanity-form {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: .3rem;
  margin: .2rem 0 .8rem;
}
.cm-vanity-prefix, .cm-vanity-suffix {
  display: inline-flex; align-items: center;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .78rem; color: var(--cm-txt3); white-space: nowrap;
}
.cm-vanity-prefix { opacity: .8; }
.cm-vanity-form input {
  flex: 1 1 160px; min-width: 120px;
  padding: .5rem .7rem; border-radius: 8px;
  border: 1px solid var(--cm-line2); background: rgba(0, 0, 0, .28);
  color: var(--cm-txt); font-size: .9rem; outline: none;
  transition: border-color .15s;
}
.cm-vanity-form input:focus { border-color: rgba(212, 175, 55, .8); }
.cm-vanity-btns { display: flex; gap: .5rem; flex-wrap: wrap; }

.cm-vanity-bar {
  height: 8px; border-radius: 6px; overflow: hidden;
  background: rgba(255, 255, 255, .07); margin: .2rem 0 .5rem;
}
.cm-vanity-bar-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #c9a227, #f0cf6a);
  transition: width .4s ease;
}
.cm-vanity-count { font-size: .78rem; color: var(--cm-txt3); margin: 0; }
.cm-vanity-count strong { color: #e6c559; }

/* ======================================================
   Widget affiliazione URL personalizzato (area riservata)
====================================================== */
.cm-vmini {
  margin: .9rem 0; padding: 1rem 1.1rem;
  border: 1px solid var(--cm-line2); border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}
.cm-vmini.is-on {
  border-color: rgba(224, 102, 204, .35);
  background: linear-gradient(140deg, rgba(208, 24, 171, .12), rgba(140, 15, 112, .03));
}
.cm-vmini.is-ready {
  border-color: rgba(74, 222, 128, .45);
  background: linear-gradient(140deg, rgba(74, 222, 128, .12), rgba(16, 120, 70, .04));
  box-shadow: 0 0 0 1px rgba(74, 222, 128, .12), 0 6px 20px rgba(74, 222, 128, .10);
}
.cm-vmini-head {
  display: flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cm-acc-sf); margin-bottom: .55rem;
}
.cm-vmini-head i { font-size: .82rem; }
.cm-vmini-cta { color: #86efac; }
.cm-vmini-note { font-size: .8rem; color: var(--cm-txt2); line-height: 1.55; margin: 0 0 .6rem; }

/* Barra di avanzamento verso i 100 like */
.cm-vmini-bar {
  height: 7px; border-radius: 6px; overflow: hidden;
  background: rgba(255, 255, 255, .07); margin: .1rem 0 .5rem;
}
.cm-vmini-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #d018ab, #e066cc);
  transition: width .5s ease;
}
.cm-vmini-progress { font-size: .76rem; color: var(--cm-txt2); margin: 0; line-height: 1.5; }
.cm-vmini-progress strong { color: var(--cm-acc-sf); }
.cm-vmini-url {
  display: inline-block; margin-left: .1rem;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem;
  color: var(--cm-txt2); opacity: .9;
}

/* Form scelta nome */
.cm-vmini-form {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: .25rem; margin: .1rem 0 .6rem;
}
.cm-vmini-prefix, .cm-vmini-suffix {
  display: inline-flex; align-items: center;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .74rem;
  color: var(--cm-txt2); white-space: nowrap;
}
.cm-vmini-prefix { opacity: .8; }
.cm-vmini-input {
  flex: 1 1 150px; min-width: 110px;
  padding: .45rem .6rem; border-radius: 8px;
  border: 1px solid var(--cm-line2); background: rgba(0, 0, 0, .28);
  color: var(--cm-txt); font-size: .86rem; outline: none; transition: border-color .15s;
}
.cm-vmini-input:focus { border-color: var(--cm-acc-sf); }
.cm-vmini-btns { display: flex; gap: .45rem; flex-wrap: wrap; }

/* ======================================================
   @@FIX-MYLIST-MOBILE-V1@@
   Area riservata - card "Le mie liste M3U"
   Su iPhone le card sforavano il viewport: il contenuto a
   min-content non riducibile (prefisso URL monospace con

   white-space:nowrap, URL di esempio senza spazi) dentro
   una griglia con min-width:auto allargava tutta la card.
====================================================== */
.cm-mylist { grid-template-columns: minmax(0, 1fr); }
.cm-myitem-row { min-width: 0; max-width: 100%; }
.cm-myitem { min-width: 0; max-width: 100%; }
.cm-myitem-links { min-width: 0; max-width: 100%; }
.cm-myitem-body { min-width: 0; max-width: 100%; }
.cm-myitem-head { min-width: 0; }
.cm-myitem-head h3 { min-width: 0; overflow-wrap: anywhere; }
.cm-myitem-desc { overflow-wrap: anywhere; }
.cm-myitem-meta { min-width: 0; }
.cm-myitem-nota { overflow-wrap: anywhere; }
.cm-linkbox { min-width: 0; max-width: 100%; }
.cm-linkbox input { width: 100%; min-width: 0; }
.cm-vmini { min-width: 0; max-width: 100%; }
.cm-vmini-form { min-width: 0; max-width: 100%; }
.cm-vmini-prefix, .cm-vmini-suffix { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.cm-vmini-input { max-width: 100%; }
.cm-vmini-note, .cm-vmini-progress { overflow-wrap: anywhere; }
.cm-vmini-url { max-width: 100%; word-break: break-all; }

@media (max-width: 640px) {
  .cm-myitem { gap: .75rem; padding: .9rem; }
  .cm-myitem-logo { width: 44px; height: 44px; border-radius: 10px; }
  .cm-myitem-meta { gap: .45rem .7rem; font-size: .7rem; margin-bottom: 0; }
  .cm-myitem-btns { gap: .4rem; }
  .cm-myitem-btns .cm-btn { flex: 1 1 auto; justify-content: center; }
  .cm-linkbox input { font-size: .72rem; }
  .cm-vmini { padding: .8rem .85rem; margin: .8rem 0; }
  .cm-vmini-prefix { flex: 1 1 100%; font-size: .68rem; }
  .cm-vmini-input { flex: 1 1 auto; min-width: 0; }
  .cm-vmini-suffix { flex: 0 0 auto; font-size: .68rem; }
  .cm-vmini-btns .cm-btn { flex: 1 1 auto; justify-content: center; }
  .cm-vmini-url { display: block; margin-left: 0; margin-top: .25rem; }
}

/* ======================================================
   Guida EPG (XMLTV): flag, campo, verifica e abbinamento
   ====================================================== */

/* -- Pannello e flag ----------------------------------- */
.cm-epgp { position: relative; overflow: hidden; }
.cm-epgp::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: linear-gradient(180deg, var(--cm-acc), rgba(208, 24, 171, 0));
}
.cm-epgp .cm-epg-flag { align-items: flex-start; margin: 0; }
.cm-epg-flag > span { display: block; font-size: .86rem; color: var(--cm-txt); line-height: 1.45; }
.cm-epg-flag em {
  display: block; font-style: normal; font-size: .74rem;
  color: var(--cm-txt3); line-height: 1.55; margin-top: .2rem;
}

.cm-epg-box {
  margin-top: .95rem; padding-top: .95rem;
  border-top: 1px dashed var(--cm-line);
  animation: cm-epg-in .22s ease;
}
.cm-epg-box[hidden] { display: none; }
@keyframes cm-epg-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* -- Campo indirizzo + pulsante ------------------------ */
.cm-epg-row { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.cm-epg-inp { position: relative; flex: 1 1 250px; min-width: 0; display: flex; align-items: center; }
.cm-epg-inp > i {
  position: absolute; left: .8rem; font-size: .78rem;
  color: var(--cm-txt3); pointer-events: none;
}
.cm-epg-inp input {
  width: 100%; padding: .72rem .8rem .72rem 2.1rem;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r-sm); color: var(--cm-txt);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.cm-epg-inp input::placeholder { color: var(--cm-txt3); }
.cm-epg-inp input:focus {
  border-color: var(--cm-acc); box-shadow: 0 0 0 3px rgba(208, 24, 171, .14);
}
.cm-epg-row .cm-btn { flex: 0 0 auto; }

.cm-epg-help { font-size: .72rem; color: var(--cm-txt3); line-height: 1.65; margin: .6rem 0 0; }
.cm-epg-help b { color: var(--cm-txt2); font-weight: 600; }
.cm-epg-help code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .68rem;
  padding: .06rem .34rem; border-radius: 5px;
  background: rgba(255, 255, 255, .06); color: var(--cm-acc-sf);
}

/* -- Striscia di esito --------------------------------- */
.cm-epg-esito { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .85rem; }
.cm-epg-esito[hidden] { display: none; }
.cm-epg-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .62rem; border-radius: 999px;
  font-size: .7rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .04); color: var(--cm-txt2);
}
.cm-epg-pill.is-info { border-color: var(--cm-line); background: rgba(208, 24, 171, .09); color: var(--cm-acc-sf); }
.cm-epg-pill.is-ok   { border-color: rgba(52, 201, 138, .32); background: rgba(52, 201, 138, .1);  color: var(--cm-ok); }
.cm-epg-pill.is-warn { border-color: rgba(240, 180, 41, .32); background: rgba(240, 180, 41, .1);  color: var(--cm-warn); }
.cm-epg-pill.is-err  { border-color: rgba(248, 112, 112, .32); background: rgba(248, 112, 112, .1); color: var(--cm-err); }
.cm-epg-pill.is-load { border-color: var(--cm-line); background: rgba(208, 24, 171, .07); color: var(--cm-txt2); }
.cm-epg-esito .cm-btn { margin-left: auto; }

/* -- Pallino di stato accanto al tvg-id ---------------- */
.cm-epg-dot {
  display: none; width: 8px; height: 8px; border-radius: 50%;
  margin-left: .3rem; vertical-align: middle; background: var(--cm-txt3);
}
.cm-epg-dot.is-ok, .cm-epg-dot.is-err, .cm-epg-dot.is-none, .cm-epg-dot.is-prop {
  display: inline-block;
}
.cm-epg-dot.is-ok   { background: var(--cm-ok);   box-shadow: 0 0 0 3px rgba(52, 201, 138, .16); }
.cm-epg-dot.is-err  { background: var(--cm-err);  box-shadow: 0 0 0 3px rgba(248, 112, 112, .16); }
.cm-epg-dot.is-prop { background: var(--cm-warn); box-shadow: 0 0 0 3px rgba(240, 180, 41, .16); }
.cm-epg-dot.is-none { background: var(--cm-txt3); box-shadow: 0 0 0 3px rgba(255, 255, 255, .05); }

/* -- Modale larga di abbinamento ----------------------- */
.cm-modal-wide .cm-modal-card {
  max-width: 760px; text-align: left; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
  max-height: min(86vh, 760px);
}
.cm-epg-mhead {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1.05rem 1.15rem .9rem; border-bottom: 1px solid var(--cm-line);
  background: linear-gradient(140deg, rgba(208, 24, 171, .1), rgba(208, 24, 171, 0));
}
.cm-epg-mtit { min-width: 0; }
.cm-epg-mhead h3 {
  display: flex; align-items: center; gap: .5rem;
  font-size: .98rem; font-weight: 600; color: var(--cm-txt); line-height: 1.3;
}
.cm-epg-mhead h3 i { color: var(--cm-acc-sf); }
.cm-epg-mhead p { font-size: .73rem; color: var(--cm-txt3); line-height: 1.5; margin-top: .35rem; }
.cm-epg-mhead p b.is-ok   { color: var(--cm-ok); }
.cm-epg-mhead p b.is-warn { color: var(--cm-warn); }
.cm-epg-mhead p b.is-err  { color: var(--cm-err); }
.cm-epg-mhead > button { margin-left: auto; flex-shrink: 0; }

.cm-epg-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap; padding: .55rem 1.15rem;
  background: rgba(255, 255, 255, .02); border-bottom: 1px solid var(--cm-line2);
}
.cm-epg-selall {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .74rem; color: var(--cm-txt2); cursor: pointer;
}
.cm-epg-selall input { width: 16px; height: 16px; accent-color: var(--cm-acc); }
.cm-epg-legend { display: flex; gap: .75rem; flex-wrap: wrap; font-size: .68rem; color: var(--cm-txt3); }
.cm-epg-legend span { display: inline-flex; align-items: center; gap: .32rem; }
.cm-epg-legend .cm-epg-dot { margin-left: 0; }

.cm-epg-list {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: .6rem .7rem; display: grid; gap: .35rem;
}
.cm-epg-list::-webkit-scrollbar { width: 9px; }
.cm-epg-list::-webkit-scrollbar-thumb {
  background: rgba(208, 24, 171, .28); border-radius: 9px;
  border: 2px solid transparent; background-clip: content-box;
}
.cm-epg-vuoto { font-size: .8rem; color: var(--cm-txt3); text-align: center; padding: 1.6rem .8rem; }

.cm-epg-it {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .3rem .55rem;
  align-items: center; padding: .5rem .55rem; border-radius: var(--cm-r-sm);
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .02);
  border-left: 3px solid var(--cm-txt3); transition: background .15s;
}
.cm-epg-it:hover      { background: rgba(255, 255, 255, .045); }
.cm-epg-it.is-ok      { border-left-color: var(--cm-ok); }
.cm-epg-it.is-prop    { border-left-color: var(--cm-warn); }
.cm-epg-it.is-err     { border-left-color: var(--cm-err); }
.cm-epg-ck { display: flex; align-items: center; justify-content: center; }
.cm-epg-ck input { width: 17px; height: 17px; accent-color: var(--cm-acc); cursor: pointer; }
.cm-epg-ck i { color: var(--cm-ok); font-size: .88rem; }
.cm-epg-nm { min-width: 0; }
.cm-epg-nm b {
  display: block; font-size: .82rem; font-weight: 600; color: var(--cm-txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-epg-nm span {
  display: block; font-size: .68rem; color: var(--cm-txt3); margin-top: .1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-epg-as { grid-column: 2 / -1; min-width: 0; display: flex; align-items: center; }
.cm-epg-as select,
.cm-epg-as input {
  width: 100%; min-width: 0; padding: .42rem .55rem;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--cm-line2); border-radius: 8px;
  color: var(--cm-txt); font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; outline: none; color-scheme: dark;
}
.cm-epg-as select option { background-color: var(--cm-panel2); color: var(--cm-txt); }
.cm-epg-as select:focus,
.cm-epg-as input:focus { border-color: var(--cm-acc); box-shadow: 0 0 0 3px rgba(208, 24, 171, .13); }
.cm-epg-badge {
  display: inline-flex; align-items: center; gap: .35rem; max-width: 100%;
  padding: .3rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-epg-badge.is-ok {
  border: 1px solid rgba(52, 201, 138, .3); background: rgba(52, 201, 138, .1); color: var(--cm-ok);
}

.cm-epg-mfoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .7rem; flex-wrap: wrap; padding: .8rem 1.15rem;
  border-top: 1px solid var(--cm-line); background: rgba(255, 255, 255, .02);
}
.cm-epg-nota { font-size: .68rem; color: var(--cm-txt3); line-height: 1.5; flex: 1 1 200px; }
.cm-epg-nota b { color: var(--cm-txt2); }
.cm-epg-mbtn { display: flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }

/* -- Tablet in su -------------------------------------- */
@media (min-width: 641px) {
  .cm-epg-it { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1.25fr); }
  .cm-epg-as { grid-column: auto; }
}

/* -- Telefono ------------------------------------------ */
@media (max-width: 640px) {
  /* 16px: evita lo zoom automatico su iOS quando si tocca il campo */
  .cm-epg-inp input,
  .cm-epg-as select,
  .cm-epg-as input { font-size: 16px; }
  .cm-epg-inp input { padding-top: .68rem; padding-bottom: .68rem; }
  .cm-epg-row .cm-btn { width: 100%; justify-content: center; }
  .cm-epg-esito .cm-btn { margin-left: 0; width: 100%; justify-content: center; }
  .cm-modal-wide .cm-modal-card { max-height: 90vh; }
  .cm-epg-mhead, .cm-epg-tools, .cm-epg-mfoot { padding-left: .85rem; padding-right: .85rem; }
  .cm-epg-mbtn { width: 100%; }
  .cm-epg-mbtn .cm-btn { flex: 1 1 auto; justify-content: center; }
}


/* ======================================================
   Badge "EPG" sulle liste che hanno una guida collegata
   ====================================================== */

/* Pastiglia in sovrimpressione sull'immagine (vetrina e dettaglio) */
.cm-detail-logo { position: relative; }
.cm-epg-mark {
  position: absolute; top: .5rem; left: .5rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .24rem .55rem; border-radius: 30px; line-height: 1;
  font-size: .64rem; font-weight: 700; letter-spacing: .06em;
  background: rgba(7, 5, 14, .74); border: 1px solid rgba(52, 201, 138, .55);
  color: var(--cm-ok); white-space: nowrap;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 2px 10px rgba(52, 201, 138, .22);
}
.cm-epg-mark i { font-size: .66rem; }

/* Etichetta in linea accanto al titolo (area riservata) */
.cm-epg-tag {
  display: inline-flex; align-items: center; gap: .32rem; flex-shrink: 0;
  padding: .18rem .5rem; border-radius: 30px; line-height: 1.3;
  font-size: .64rem; font-weight: 700; letter-spacing: .05em;
  border: 1px solid rgba(52, 201, 138, .32);
  background: rgba(52, 201, 138, .1); color: var(--cm-ok);
}
.cm-epg-tag i { font-size: .64rem; }

/* Variante del tag nella riga dei dati del dettaglio */
.cm-tag-epg {
  border-color: rgba(52, 201, 138, .3);
  background: rgba(52, 201, 138, .1);
  color: var(--cm-ok);
}

/* ======================================================
   Card canale richiudibile (editor lista)
   ====================================================== */
.cm-cnl-hd {
  gap: .5rem; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; transition: background .15s;
}
.cm-cnl-hd:hover { background: rgba(208, 24, 171, .11); }
.cm-cnl.is-closed .cm-cnl-hd { border-bottom-color: transparent; }
.cm-cnl.is-closed .cm-cnl-body { display: none; }
.cm-cnl:not(.is-closed) { border-color: var(--cm-line); }

.cm-cnl-tog {
  flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: transparent; cursor: pointer;
  color: var(--cm-txt3); font-size: .72rem;
}
.cm-cnl-tog:hover { background: rgba(255, 255, 255, .07); color: var(--cm-txt); }
.cm-cnl-tog i { transition: transform .18s ease; }
.cm-cnl:not(.is-closed) .cm-cnl-tog { color: var(--cm-acc-sf); }
.cm-cnl:not(.is-closed) .cm-cnl-tog i { transform: rotate(90deg); }

/* Numero del canale: pastiglia compatta, si legge anche in liste lunghe */
.cm-cnl-n {
  flex: 0 0 auto; min-width: 24px; height: 22px; padding: 0 .34rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; border: 1px solid var(--cm-line);
  background: rgba(208, 24, 171, .14);
  font-size: .68rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--cm-acc-sf); font-variant-numeric: tabular-nums;
}

/* Riepilogo visibile a card chiusa */
.cm-cnl-sum {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: .45rem; overflow: hidden;
}
.cm-cnl-sum-lg {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--cm-line2); background-color: rgba(255, 255, 255, .04);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.cm-cnl-sum-lg.has { border-color: var(--cm-line); }
.cm-cnl-sum-nm {
  min-width: 0; font-size: .8rem; font-weight: 600; color: var(--cm-txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-cnl-sum-nm.is-empty { color: var(--cm-txt3); font-weight: 500; font-style: italic; }
.cm-cnl-sum-gr {
  flex: 0 0 auto; max-width: 34%; padding: .1rem .42rem; border-radius: 30px;
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .04);
  font-size: .63rem; color: var(--cm-txt3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-cnl-sum .cm-epg-dot { margin-left: .1rem; }
.cm-cnl-hd-btns { flex: 0 0 auto; }

@media (max-width: 560px) {
  .cm-cnl-hd { padding: .45rem .5rem; gap: .35rem; }
  .cm-cnl-sum-gr { display: none; }
  .cm-cnl-sum-nm { font-size: .76rem; }
  .cm-cnl-ico { width: 29px; height: 29px; }
}

/* Maniglia di trascinamento per riordinare i canali (Pointer Events,
   vedi cm_lista_edit.php). touch-action: none e' essenziale: senza,
   il browser prova a scrollare la pagina invece di far partire il drag. */
.cm-cnl-drag {
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
}
.cm-cnl-drag:active { cursor: grabbing; }
.cm-cnl.is-dragging {
  opacity: .92; border-color: var(--cm-ok); position: relative; z-index: 5;
  box-shadow: 0 0 0 2px var(--cm-ok), 0 8px 24px rgba(0, 0, 0, .35);
}
.cm-cnl.is-dragging .cm-cnl-hd { background: rgba(52, 201, 138, .18); border-bottom-color: rgba(52, 201, 138, .35); }
.cm-cnl.is-dragging .cm-cnl-drag { color: var(--cm-ok); }

/* Campo segnalato dai controlli JS prima del salvataggio */
.cm-field input.is-bad,
.cm-cnl-body input.is-bad,
.cm-epg-inp input.is-bad {
  border-color: var(--cm-err);
  box-shadow: 0 0 0 3px rgba(248, 112, 112, .18);
  background: rgba(248, 112, 112, .06);
}


/* -- HUB COMMUNITY: barra sezioni (Liste / Forum / Streamers) --
   Stesso vetro grigio della fascia .bs-hub della home: sotto c'e'
   img/sfondo.jpg, sopra un velo con backdrop-filter desaturato.
   Nessun bordo e nessuna linea oro: la fascia si stacca solo per
   luminosita'. */
.cm-hub {
  position: relative; z-index: 2;
  width: 100%;
  /* copre il border-bottom della hero: una sola linea, non due */
  margin-top: -1px;
  background: url('img/sfondo.jpg') center center / cover no-repeat;
  border: 0;
  isolation: isolate;
}
/* Velo sopra la foto: sfoca lo sfondo della fascia, non il testo.
   saturate(.2) spegne i blu e i verdi della foto. */
.cm-hub::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 100%),
    rgba(12, 10, 18, .74);
  -webkit-backdrop-filter: blur(30px) saturate(.2) brightness(.85);
  backdrop-filter: blur(30px) saturate(.2) brightness(.85);
}
.cm-hub::after { content: none; }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .cm-hub::before { background: rgba(12, 10, 18, .94); }
}

/* Su pagine senza hero la fascia scende sotto la navbar fissa */
.cm-hub-solo { margin-top: 68px; }
/* La hero non e' piu' adiacente a .cm-page: ripristina la spaziatura */
.cm-hub + .cm-page { padding-top: 1.7rem; }

/* Contenuto allineato alla griglia del resto della pagina */
.cm-hub-in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

.cm-hub-t {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 56px; padding: .6rem .9rem;
  font-size: .88rem; font-weight: 600; letter-spacing: .01em;
  color: rgba(255, 255, 255, .74); text-align: center;
  transition: color .18s ease, background .18s ease;
}
.cm-hub-t i {
  font-size: 1rem; color: rgba(255, 255, 255, .44);
  transition: color .18s ease, transform .25s ease;
}
.cm-hub-t:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.cm-hub-t:hover i { color: rgba(255, 255, 255, .9); transform: translateY(-1px); }
.cm-hub-t:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .45); outline-offset: -3px;
}

.cm-hub-t.is-on {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03));
}
.cm-hub-t.is-on i { color: #fff; }
/* Indicatore al piede della voce attiva */
.cm-hub-t.is-on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0), rgba(255, 255, 255, .65) 22%,
    rgba(255, 255, 255, .65) 78%, rgba(255, 255, 255, 0));
}

.cm-hub-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 .38rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  font-size: .68rem; font-weight: 700; color: rgba(255, 255, 255, .6);
  transition: background .18s ease, color .18s ease;
}
.cm-hub-t.is-on .cm-hub-n {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
.cm-hub-lb-s { display: none; }

@media (max-width: 720px) {
  .cm-hub-in { padding: 0 .4rem; }
  .cm-hub-t {
    flex-direction: column; gap: .3rem;
    min-height: 60px; padding: .55rem .3rem;
    font-size: .74rem;
  }
  .cm-hub-t i { font-size: 1rem; }
  .cm-hub-lb   { display: none; }
  .cm-hub-lb-s { display: inline; }
  .cm-hub-n {
    position: absolute; top: 6px; right: 8px;
    min-width: 17px; height: 16px; padding: 0 .26rem; font-size: .58rem;
  }
  .cm-hub + .cm-page { padding-top: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-hub-t, .cm-hub-t i, .cm-hub-n { transition: none; }
}


/* ======================================================
   FORUM - elenco domande, dettaglio, form
====================================================== */

/* Hero compatta per le pagine interne dell'hub */
.cm-hero-sm { padding-bottom: 1.7rem; }
.cm-hero-sm h1 { font-size: clamp(1.6rem, 5.5vw, 2.35rem); }

/* -- Barra dei tag ------------------------------------- */
.cm-tagbar {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 1.6rem;
}
.cm-tagchip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .8rem; border-radius: 40px;
  border: 1px solid var(--cm-line2);
  background: rgba(255, 255, 255, .035);
  font-size: .76rem; font-weight: 500; color: var(--cm-txt2);
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.cm-tagchip:hover {
  border-color: var(--cm-line); background: rgba(208, 24, 171, .09); color: var(--cm-txt);
}
.cm-tagchip.on {
  border-color: rgba(208, 24, 171, .45);
  background: rgba(208, 24, 171, .14);
  color: #f7e4f4;
}
.cm-tagchip span {
  padding: 0 .34rem; border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  font-size: .66rem; color: var(--cm-txt3);
}
.cm-tagchip.on span { background: rgba(208, 24, 171, .3); color: #f7d9f0; }
.cm-tagchip-sm { padding: .22rem .62rem; font-size: .7rem; }

/* -- Elenco domande ------------------------------------ */
.cm-qlist { display: flex; flex-direction: column; gap: .7rem; }

.cm-q {
  display: flex; gap: 1rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r);
  background: var(--cm-panel);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.cm-q:hover {
  border-color: var(--cm-line);
  background: var(--cm-panel2);
  transform: translateY(-1px);
}
.cm-q.is-solved { border-left: 2px solid rgba(52, 201, 138, .55); border-radius: 0 var(--cm-r) var(--cm-r) 0; }
.cm-q.is-pin    { background: linear-gradient(180deg, rgba(240, 180, 41, .05), transparent 60%), var(--cm-panel); }

.cm-q-side { flex-shrink: 0; width: 62px; }
.cm-q-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; width: 62px; padding: .5rem .2rem;
  border-radius: var(--cm-r-sm);
  border: 1px solid var(--cm-line2);
  background: rgba(255, 255, 255, .025);
}
.cm-q-stat strong { font-size: 1.15rem; font-weight: 700; color: var(--cm-txt2); line-height: 1; }
.cm-q-stat small  { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cm-txt3); }
.cm-q-stat.has { border-color: rgba(52, 201, 138, .32); background: rgba(52, 201, 138, .08); }
.cm-q-stat.has strong { color: var(--cm-ok); }

.cm-q-body { min-width: 0; flex: 1; }
.cm-q-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  font-size: 1rem; font-weight: 600; line-height: 1.35; margin: 0 0 .35rem;
}
.cm-q-title a { color: var(--cm-txt); }
.cm-q-title a:hover { color: var(--cm-acc-sf); }
.cm-q-pin { color: var(--cm-gold); font-size: .82rem; }
.cm-q-desc {
  font-size: .85rem; line-height: 1.55; color: var(--cm-txt2);
  margin: 0 0 .6rem;
}
.cm-q-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; }
.cm-q-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  font-size: .74rem; color: var(--cm-txt3);
}
.cm-q-meta .cm-avatar { width: 22px; height: 22px; }
.cm-q-meta em { font-style: normal; color: var(--cm-txt3); }
.cm-q-meta em::before { content: '\00b7'; margin-right: .55rem; }

/* -- Dettaglio domanda --------------------------------- */
.cm-qd {
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r);
  background: var(--cm-panel);
  margin-bottom: 2rem;
}
.cm-qd-head { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .7rem; }
.cm-qd-title {
  flex: 1; min-width: 0;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem); font-weight: 700;
  line-height: 1.25; letter-spacing: -.01em; color: #f7f4ff; margin: 0;
}
.cm-qd-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  margin: .9rem 0 1.2rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--cm-line2);
  font-size: .78rem; color: var(--cm-txt3);
}
.cm-qd-meta .cm-avatar { width: 30px; height: 30px; }
.cm-qd-nick { font-weight: 600; color: var(--cm-txt2); }
.cm-qd-meta em { font-style: normal; }
.cm-qd-testo {
  font-size: .93rem; line-height: 1.72; color: var(--cm-txt);
  overflow-wrap: break-word; margin-bottom: 1.2rem;
}

/* -- Muro per i non iscritti --------------------------- */
.cm-gate {
  position: relative; overflow: hidden;
  text-align: center;
  padding: 2.4rem 1.5rem;
  border: 1px solid rgba(240, 180, 41, .26);
  border-radius: var(--cm-r);
  background:
    radial-gradient(520px 200px at 50% 0%, rgba(240, 180, 41, .09), transparent 70%),
    var(--cm-panel);
}
.cm-gate-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: .9rem;
  border-radius: 50%;
  border: 1px solid rgba(240, 180, 41, .34);
  background: rgba(240, 180, 41, .10);
  color: var(--cm-gold-sf); font-size: 1.15rem;
}
.cm-gate h3 {
  font-size: 1.08rem; font-weight: 600; color: #f7f4ff; margin: 0 0 .5rem;
}
.cm-gate p {
  max-width: 480px; margin: 0 auto 1.3rem;
  font-size: .86rem; line-height: 1.6; color: var(--cm-txt2);
}
.cm-gate-btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* -- Risposte ------------------------------------------ */
.cm-rlist { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.4rem; }
.cm-r {
  position: relative;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r);
  background: var(--cm-panel);
}
.cm-r.is-sub {
  position: relative;
  margin-left: clamp(1.2rem, 5vw, 2.6rem);
  background: var(--cm-panel2);
}
/* Filo di collegamento alla risposta radice */
.cm-r.is-sub::before {
  content: ''; position: absolute;
  left: calc(clamp(1.2rem, 5vw, 2.6rem) * -0.5);
  top: -.7rem; bottom: 50%;
  width: 1px;
  background: var(--cm-line2);
}
.cm-r.is-sub::after {
  content: ''; position: absolute;
  left: calc(clamp(1.2rem, 5vw, 2.6rem) * -0.5);
  top: 50%; width: calc(clamp(1.2rem, 5vw, 2.6rem) * 0.5);
  height: 1px;
  background: var(--cm-line2);
}
.cm-r.is-best {
  border-color: rgba(52, 201, 138, .38);
  background: linear-gradient(180deg, rgba(52, 201, 138, .06), transparent 60%), var(--cm-panel);
}
.cm-r-best {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-bottom: .6rem; padding: .22rem .7rem;
  border-radius: 40px;
  background: rgba(52, 201, 138, .14);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cm-ok);
}
.cm-r-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin-bottom: .6rem; font-size: .76rem; color: var(--cm-txt3);
}
.cm-r-head .cm-avatar { width: 26px; height: 26px; }
.cm-r-nick { font-weight: 600; color: var(--cm-txt2); }
.cm-r-head em { font-style: normal; }
.cm-r-head em::before { content: '\00b7'; margin-right: .5rem; }
.cm-r-testo {
  font-size: .88rem; line-height: 1.66; color: var(--cm-txt);
  overflow-wrap: break-word;
}
.cm-r-foot {
  display: flex; align-items: center; gap: .8rem;
  margin-top: .7rem; padding-top: .6rem;
  border-top: 1px solid var(--cm-line2);
}

/* -- Form: campi usati dal forum ----------------------- */
.cm-lb {
  display: block; margin: 1.2rem 0 .4rem;
  font-size: .8rem; font-weight: 600; color: var(--cm-txt);
}
.cm-lb-opt { font-weight: 400; color: var(--cm-txt3); }
.cm-in {
  width: 100%; padding: .72rem .9rem;
  border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r-sm);
  background: rgba(255, 255, 255, .03);
  font-family: inherit; font-size: .88rem; color: var(--cm-txt);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.cm-in::placeholder { color: var(--cm-txt3); }
.cm-in:focus {
  outline: none;
  border-color: rgba(208, 24, 171, .5);
  box-shadow: 0 0 0 3px rgba(208, 24, 171, .12);
}
.cm-ta { resize: vertical; min-height: 160px; line-height: 1.6; }
.cm-cnt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-cnt b { font-weight: 600; color: var(--cm-txt2); }
.cm-help-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.cm-tagprev { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; min-height: 4px; }
.cm-form-actions {
  display: flex; gap: .6rem; flex-wrap: wrap;
  margin-top: 1.6rem; padding-top: 1.3rem;
  border-top: 1px solid var(--cm-line2);
}
/* Honeypot: fuori schermo, mai display:none (i bot lo saltano) */
.cm-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

@media (max-width: 620px) {
  .cm-q { padding: .95rem 1rem; gap: .8rem; }
  .cm-q-side { width: 52px; }
  .cm-q-stat { width: 52px; padding: .42rem .15rem; }
  .cm-q-stat strong { font-size: 1rem; }
  .cm-qd { padding: 1.2rem 1.1rem; }
  .cm-gate { padding: 1.9rem 1.1rem; }
  .cm-r { padding: .95rem 1rem; }
}

/* -- Azioni su domanda e risposte ---------------------- */
.cm-qd-acts {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--cm-line2);
}
.cm-r-acts {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
  margin-top: .9rem; padding-top: .7rem;
  border-top: 1px solid var(--cm-line2);
}
.cm-acts-l, .cm-acts-r { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
/* Azioni distruttive: discrete finche' non le sfiori */
.cm-acts-r .cm-mini { color: var(--cm-txt3); opacity: .75; }
.cm-acts-r .cm-mini:hover { opacity: 1; }
.cm-acts-r .is-del:hover { color: var(--cm-err); }


.cm-r-acts .cm-mini,
.cm-qd-acts .cm-mini {
  display: inline-flex; align-items: center; gap: .35rem;
}
.cm-rlike.on, .cm-dlike.on { color: var(--cm-acc-sf); }
.cm-rlike.on i, .cm-dlike.on i { color: var(--cm-acc); }
.cm-rbest.on { color: var(--cm-ok); }
.cm-rbest.on i { color: var(--cm-ok); }
.cm-cn { font-variant-numeric: tabular-nums; }

/* -- Modulo di risposta -------------------------------- */
.cm-rform {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r);
  background: var(--cm-panel2);
}
.cm-rform-head {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .8rem;
}
.cm-rform-head .cm-avatar { width: 30px; height: 30px; }
.cm-rform-head strong { font-size: .88rem; font-weight: 600; color: var(--cm-txt); }
.cm-rform-to {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .6rem; border-radius: 40px;
  background: rgba(208, 24, 171, .12);
  font-size: .72rem; color: var(--cm-acc-sf);
}
.cm-rform-to b { font-weight: 600; }
.cm-rform-to .cm-mini { padding: 0; color: var(--cm-acc-sf); }
.cm-ta-sm { min-height: 96px; }
.cm-rform-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-top: .7rem;
}
.cm-rform-foot .cm-help { margin: 0; }

/* -- Nessuna risposta: riga, non card --------------------- */
.cm-nores {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 1.1rem; padding: 0;
  border: 0; background: none;
  font-size: .85rem; line-height: 1.5; color: var(--cm-txt3);
}
.cm-nores i { color: var(--cm-txt3); opacity: .75; }
.cm-nores b { font-weight: 600; color: var(--cm-txt2); }

/* ======================================================
   STREAMERS - elenco, card, pagina personale
====================================================== */

/* -- Griglia dell'elenco ------------------------------- */
.cm-stgrid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

.cm-st {
  display: flex; flex-direction: column;
  background: var(--cm-panel); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r); overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.cm-st:hover { border-color: var(--cm-line); box-shadow: var(--cm-sh); }
.cm-st.is-premium {
  border-color: var(--cm-gold);
  box-shadow: 0 0 0 1px rgba(240, 180, 41, .35), 0 10px 30px rgba(240, 180, 41, .12);
}
.cm-st.is-premium:hover {
  border-color: var(--cm-gold-sf);
  box-shadow: 0 0 0 1px rgba(240, 180, 41, .5), var(--cm-sh);
}

/* Copertina della card */
.cm-st-cover {

  position: relative; display: block; height: 104px; overflow: hidden;
  background: linear-gradient(140deg, rgba(208, 24, 171, .16), rgba(140, 15, 112, .06));
  border-bottom: 1px solid var(--cm-line2);
}
.cm-st-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-st-cover-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.cm-st-cover-ph i { font-size: 1.7rem; color: rgba(224, 102, 204, .32); }
.cm-st.is-premium .cm-st-cover {
  background: linear-gradient(140deg, rgba(240, 180, 41, .16), rgba(208, 24, 171, .05));
  border-bottom-color: rgba(240, 180, 41, .3);
}
.cm-st-crown {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(7, 5, 14, .72);
  border: 1px solid var(--cm-gold);
  color: var(--cm-gold); font-size: 1rem; line-height: 1;
  box-shadow: 0 2px 12px rgba(240, 180, 41, .45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* Corpo della card */
.cm-st-body { position: relative; padding: 0 1rem .6rem; flex: 1; }
.cm-st-av {
  width: 64px; height: 64px; margin: -32px 0 .5rem;
  border: 3px solid var(--cm-panel); background: var(--cm-panel2);
  position: relative; z-index: 2;
}
.cm-st-nick { font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0 0 .3rem; }
.cm-st-nick a { color: #f7f4ff; }
.cm-st-nick a:hover { color: var(--cm-acc-sf); }
.cm-st-bio { font-size: .8rem; color: var(--cm-txt2); line-height: 1.55; margin: 0 0 .7rem; }
.cm-st-bio em { color: var(--cm-txt3); font-style: normal; }
.cm-st-nums { display: flex; flex-wrap: wrap; gap: .1rem .9rem; margin-bottom: .65rem; }
.cm-st-nums .cm-count { font-size: .74rem; }
.cm-st-nums strong { color: #f7f4ff; font-weight: 700; }

.cm-st-social { display: flex; flex-wrap: wrap; gap: .35rem; }
.cm-st-social a {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--cm-line2);
  background: rgba(255, 255, 255, .03); color: var(--cm-txt2);
  font-size: .82rem; transition: .18s;
}
.cm-st-social a:hover {
  color: var(--cm-acc-sf); border-color: var(--cm-line);
  background: rgba(208, 24, 171, .1);
}

.cm-st-foot {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .7rem .55rem 1rem; border-top: 1px solid var(--cm-line2);
}
.cm-st-since { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--cm-txt3); }
.cm-st-go { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--cm-acc-sf); padding: .35rem .5rem; }

/* -- Intestazione della pagina personale --------------- */
.cm-sth {
  background: var(--cm-panel); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r); overflow: hidden; margin-bottom: 1.2rem;
}
.cm-sth.is-premium {
  border-color: var(--cm-gold);
  box-shadow: 0 0 0 1px rgba(240, 180, 41, .3), 0 10px 30px rgba(240, 180, 41, .1);
}
.cm-sth-cover {
  position: relative; height: clamp(120px, 26vw, 230px); overflow: hidden;
  background: linear-gradient(140deg, rgba(208, 24, 171, .2), rgba(140, 15, 112, .07));
}
.cm-sth-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-sth-cover-ph {
  position: absolute; inset: 0;
  background: radial-gradient(600px 200px at 30% 0%, rgba(208, 24, 171, .22), transparent 70%);
}
.cm-sth-in {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 0 clamp(1rem, 4vw, 1.6rem) 1.2rem;
}
.cm-sth-av {
  width: 92px; height: 92px; margin: -46px 0 .7rem;
  border: 4px solid var(--cm-panel); background: var(--cm-panel2);
  position: relative; z-index: 2;
}
.cm-sth-id { min-width: 0; }
.cm-sth-nick {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  font-size: clamp(1.25rem, 4.5vw, 1.6rem); font-weight: 700;
  color: #f7f4ff; letter-spacing: -.01em; margin: 0 0 .4rem;
}
.cm-sth-bio {
  font-size: .88rem; color: var(--cm-txt2); line-height: 1.6;
  margin: 0 0 .7rem; max-width: 680px;
}
.cm-sth-nums { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-bottom: .8rem; }
.cm-sth-nums .cm-count { font-size: .78rem; }
.cm-sth-nums strong { color: #f7f4ff; font-weight: 700; }

.cm-sth-social { display: flex; flex-wrap: wrap; gap: .4rem; }
.cm-sth-social a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .75rem; border-radius: 40px;
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .03);
  font-size: .76rem; color: var(--cm-txt2); transition: .18s;
}
.cm-sth-social a:hover {
  color: var(--cm-acc-sf); border-color: var(--cm-line);
  background: rgba(208, 24, 171, .1);
}
.cm-sth-acts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }
.cm-sth-acts .cm-btn[disabled] { opacity: .55; cursor: not-allowed; }

.cm-tabs-sth { margin-bottom: 1.2rem; }

/* -- Copertina nel form del profilo -------------------- */
.cm-cop-box { display: flex; flex-direction: column; gap: .8rem; }
.cm-cop-prev {
  height: 130px; border-radius: var(--cm-r-sm);
  border: 1px dashed var(--cm-line2); background-color: rgba(255, 255, 255, .02);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; color: var(--cm-txt3);

}
.cm-cop-prev span { display: inline-flex; align-items: center; gap: .45rem; }
.cm-cop-acts { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }

/* -- Responsive ---------------------------------------- */
@media (min-width: 641px) {
  .cm-stgrid   { grid-template-columns: repeat(2, 1fr); }
  .cm-cop-box  { flex-direction: row; align-items: flex-start; }
  .cm-cop-prev { flex: 1 1 320px; height: 150px; }
  .cm-cop-acts { flex: 0 0 210px; }
}
@media (min-width: 1025px) {
  .cm-stgrid   { grid-template-columns: repeat(3, 1fr); }
  .cm-sth-in   { flex-direction: row; align-items: flex-start; gap: 1.4rem; }
  .cm-sth-av   { flex-shrink: 0; }
  .cm-sth-id   { flex: 1; padding-top: 1rem; }
  .cm-sth-acts { margin-left: auto; padding-top: 1rem; }
}

/* ============================================================
   BACHECA DEGLI STREAMERS (step 7)
   Aggiunto in coda: nessuna regola preesistente e' stata toccata.
   ============================================================ */

/* -- Form di pubblicazione (solo il proprietario) ----------- */
.cm-bpnew { margin-bottom: 1.2rem; }
.cm-bpnew-ta {
  width: 100%; padding: .78rem .9rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--cm-line2); border-radius: var(--cm-r-sm);
  color: #f7f4ff; font-family: inherit; font-size: 16px;
  line-height: 1.6; min-height: 76px; resize: vertical;
  outline: none; transition: border-color .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
.cm-bpnew-ta:focus { border-color: rgba(208, 24, 171, .55); background: rgba(208, 24, 171, .05); }
.cm-bpnew-foot {
  display: flex; align-items: center; gap: .7rem;
  flex-wrap: wrap; margin-top: .7rem;
}
.cm-bpnew-file {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem; border-radius: 40px; cursor: pointer;
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .03);
  color: var(--cm-txt2); font-size: .78rem;
  max-width: 100%; overflow: hidden;
}
.cm-bpnew-file:hover { border-color: var(--cm-line); color: var(--cm-txt); }
.cm-bpnew-file input[type="file"] { display: none; }
.cm-bpnew-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-bpnew-cnt { margin-left: auto; font-size: .72rem; color: var(--cm-txt3); }

/* -- Elenco dei post --------------------------------------- */
.cm-bplist { display: flex; flex-direction: column; gap: 1rem; }

.cm-bp {
  background: var(--cm-panel); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r); padding: 1rem 1.1rem;
}
.cm-bp.is-fissato { border-color: var(--cm-line); background: var(--cm-panel2); }
.cm-bp.is-nascosto { opacity: .72; border-style: dashed; }

.cm-bp-head { display: flex; align-items: flex-start; gap: .7rem; flex-wrap: wrap; }
.cm-bp-av { width: 40px; height: 40px; flex: 0 0 auto; }
.cm-bp-who { display: flex; flex-direction: column; min-width: 0; }
.cm-bp-who strong { font-size: .88rem; color: var(--cm-txt); }
.cm-bp-when { font-size: .71rem; color: var(--cm-txt3); }
.cm-bp-badges { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.cm-bp-own { margin-left: auto; display: flex; gap: .3rem; align-items: flex-start; }

.cm-tag-warn {
  background: rgba(240, 180, 41, .14); border-color: rgba(240, 180, 41, .35);
  color: var(--cm-gold);
}

.cm-bp-txt {
  margin-top: .8rem; font-size: .9rem; line-height: 1.65;
  color: var(--cm-txt); word-wrap: break-word; overflow-wrap: anywhere;
}

.cm-bp-img {
  display: block; margin-top: .8rem; border-radius: var(--cm-r-sm);
  overflow: hidden; border: 1px solid var(--cm-line2); background: var(--cm-panel2);
}
.cm-bp-img img { display: block; width: 100%; height: auto; }

.cm-bp-foot {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: .85rem; padding-top: .7rem; border-top: 1px solid var(--cm-line2);
}
.cm-bp-like.on { color: var(--cm-acc-sf); border-color: rgba(208, 24, 171, .45); }
.cm-bp-like.on i { color: var(--cm-acc-sf); }

/* motivi della segnalazione, in linea */
.cm-bp-seg {
  display: inline-flex; align-items: center; gap: .3rem;
  flex-wrap: wrap; margin-left: .2rem;
}
.cm-bp-seg em { font-size: .72rem; color: var(--cm-txt3); font-style: normal; }

/* -- Conferma in linea sui pulsanti distruttivi ------------- */
.cm-mini-del.is-armed {
  color: var(--cm-err); border-color: rgba(248, 112, 112, .5);
  background: rgba(248, 112, 112, .1);
}
.cm-mini-lb { font-size: .72rem; }

/* -- Commenti ---------------------------------------------- */
.cm-bc { margin-top: .8rem; }
.cm-bc-more {
  background: none; border: 0; padding: 0 0 .5rem; cursor: pointer;
  font-family: inherit; font-size: .76rem; color: var(--cm-acc-sf);
}
.cm-bc-more:hover { text-decoration: underline; }

.cm-bc-list { display: flex; flex-direction: column; gap: .55rem; }
.cm-bc-i { display: flex; align-items: flex-start; gap: .55rem; }
.cm-bc-i.is-nascosto { opacity: .6; }
.cm-bc-av { width: 28px; height: 28px; flex: 0 0 auto; }
.cm-bc-body {
  flex: 1 1 auto; min-width: 0;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r-sm); padding: .5rem .7rem;
}
.cm-bc-who { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.cm-bc-who strong { font-size: .8rem; color: var(--cm-txt); }
.cm-bc-txt {
  margin-top: .2rem; font-size: .84rem; line-height: 1.55;
  color: var(--cm-txt2); word-wrap: break-word; overflow-wrap: anywhere;
}

.cm-bc-new { display: flex; gap: .45rem; margin-top: .7rem; }
.cm-bc-in {
  flex: 1 1 auto; min-width: 0; padding: .6rem .75rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--cm-line2); border-radius: 40px;
  color: #f7f4ff; font-family: inherit; font-size: 16px;
  outline: none; transition: border-color .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
.cm-bc-in:focus { border-color: rgba(208, 24, 171, .55); background: rgba(208, 24, 171, .05); }

/* -- Mobile ------------------------------------------------ */
@media (max-width: 640px) {
  .cm-bp { padding: .85rem .9rem; }
  .cm-bp-own { margin-left: 0; width: 100%; justify-content: flex-end; }
  .cm-bpnew-cnt { margin-left: 0; }
  .cm-bp-foot { gap: .6rem; }
}


/* -- Bacheca a due colonne --------------------------------- */
/* I post occupano due terzi, i follower un terzo. La card dei
   follower resta agganciata durante lo scorrimento e diventa
   scorrevole quando l'elenco supera l'altezza disponibile. */
.cm-bacheca {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 1.2rem; align-items: start;
}
.cm-bacheca-main,
.cm-bacheca-side { min-width: 0; }

/* -- Card dei follower ------------------------------------- */
/* Padding proprio, piu' contenuto di quello di .cm-panel: con
   pochi follower la card larga risultava mezza vuota. */
.cm-follbox {
  position: sticky; top: 84px;
  padding: 1rem 1.05rem;
  background: linear-gradient(180deg, var(--cm-panel2) 0%, var(--cm-panel) 55%);
  border-color: var(--cm-line);
}
.cm-follbox .cm-panel-h {
  display: flex; align-items: center; gap: .5rem;
  font-size: .76rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--cm-txt2);
  padding-bottom: .7rem; margin-bottom: .55rem;
  border-bottom: 1px solid var(--cm-line2);
}
.cm-follbox .cm-panel-h i { color: var(--cm-acc-sf); font-size: .9rem; }
.cm-follbox .cm-panel-h .cm-count { margin-left: auto; }

.cm-foll-list {
  display: flex; flex-direction: column; gap: .15rem;
  max-height: 420px; overflow-y: auto;
  margin: 0 -.35rem; padding: .2rem .35rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(208, 24, 171, .45) transparent;
}
.cm-foll-list::-webkit-scrollbar { width: 8px; }
.cm-foll-list::-webkit-scrollbar-track { background: transparent; }
.cm-foll-list::-webkit-scrollbar-thumb {
  background: rgba(208, 24, 171, .4); border-radius: 8px;
}
.cm-foll-list::-webkit-scrollbar-thumb:hover { background: rgba(208, 24, 171, .65); }

.cm-foll-i {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .6rem;
  padding: .45rem .5rem; border-radius: var(--cm-r-sm);
  border: 1px solid transparent;
  color: var(--cm-txt2); text-decoration: none;
  transition: background .18s, border-color .18s, transform .18s;
}
a.cm-foll-i:hover {
  background: rgba(208, 24, 171, .09);
  border-color: rgba(208, 24, 171, .3);
  transform: translateX(2px);
}

.cm-foll-av {
  width: 36px; height: 36px; flex: 0 0 auto;
  border: 1.5px solid rgba(208, 24, 171, .35);
  box-shadow: 0 0 0 3px rgba(208, 24, 171, .07);
}
a.cm-foll-i:hover .cm-foll-av { border-color: var(--cm-acc-sf); }

.cm-foll-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cm-foll-nick {
  font-size: .84rem; font-weight: 500; color: var(--cm-txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-foll-da { font-size: .68rem; color: var(--cm-txt3); }

/* La freccia compare all'avvicinarsi: suggerisce che si apre
   una pagina, senza aggiungere rumore a riposo. */
.cm-foll-go {
  font-size: .68rem; color: var(--cm-acc-sf);
  opacity: 0; transform: translateX(-3px);
  transition: opacity .18s, transform .18s;
}
a.cm-foll-i:hover .cm-foll-go { opacity: .85; transform: translateX(0); }

.cm-foll-vuoto { text-align: center; padding: 1.1rem .4rem .5rem; }
.cm-foll-vuoto i { font-size: 1.5rem; color: var(--cm-txt3); opacity: .55; }
.cm-foll-vuoto p {
  margin-top: .6rem; font-size: .76rem; line-height: 1.55; color: var(--cm-txt3);
}

.cm-bpmore { display: flex; justify-content: center; margin-top: 1.1rem; }

@media (max-width: 900px) {
  .cm-bacheca { grid-template-columns: 1fr; }
  .cm-follbox { position: static; }
  .cm-foll-list {
    max-height: none; flex-direction: row; flex-wrap: wrap; gap: .4rem;
    margin: 0; padding: 0;
  }
  .cm-foll-i {
    border-color: var(--cm-line2); border-radius: 40px;
    padding: .35rem .8rem .35rem .4rem;
  }
  .cm-foll-go { display: none; }
}
/* -- Allega un video YouTube ------------------------------- */
/* Il pulsante riusa .cm-bpnew-file, che era nato per un <label>:
   su un <button> servono i reset di font e cursore. */
button.cm-bpnew-file {
  font-family: inherit; font-size: .78rem; cursor: pointer;
}
.cm-bpnew-vidbtn.on {
  border-color: rgba(208,24,171,.45);
  background: rgba(208,24,171,.12);
  color: var(--cm-txt);
}
.cm-bpnew-vidbtn i { color: #ff0033; }

.cm-bpnew-vidrow {
  display: flex; align-items: center; gap: .5rem; margin-top: .6rem;
}
/* display:flex vincerebbe sull'attributo hidden: va detto qui. */
.cm-bpnew-vidrow[hidden] { display: none; }

.cm-bpnew-vidrow > i { color: #ff0033; font-size: 1rem; flex: 0 0 auto; }
.cm-bpnew-vidin {
  flex: 1 1 auto; min-width: 0; padding: .55rem .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--cm-line2); border-radius: 40px;
  color: #f7f4ff; font-family: inherit; font-size: 16px;
  outline: none; transition: border-color .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
.cm-bpnew-vidin:focus { border-color: rgba(208,24,171,.55); background: rgba(208,24,171,.05); }

/* -- Video nel post ---------------------------------------- */
/* aspect-ratio invece del vecchio trucco del padding-top */
.cm-bp-video {
  position: relative; margin-top: .8rem;
  aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--cm-r-sm); overflow: hidden;
  border: 1px solid var(--cm-line2); background: #000;
}
.cm-bp-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* ============================================================
   BACHECA DELLA COMMUNITY (step 13)
   Aggiunto in coda: nessuna regola preesistente e' stata toccata.
   Il flusso riusa .cm-bacheca, .cm-bplist e .cm-bp della bacheca
   personale: le liste e i post si alternano nella stessa colonna,
   quindi devono avere la stessa scocca.
   ============================================================ */

/* -- Autore cliccabile (feed: gli autori sono diversi) ------ */
.cm-bp-avl { display: block; flex: 0 0 auto; line-height: 0; }
.cm-bp-au { color: inherit; text-decoration: none; }
.cm-bp-au:hover strong { color: var(--cm-acc-sf); }
.cm-bp-avl:hover .cm-bp-av { border-color: var(--cm-acc-sf); }

/* -- Card di una lista nel feed ---------------------------- */
/* Il corpo e' un unico bersaglio cliccabile: nel feed la lista
   non ha like ne' commenti, si apre e basta. Solo elementi in
   linea dentro l'<a>, come .cm-card-top della vetrina. */
.cm-fel-box {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .9rem;
  margin-top: .8rem; padding: .8rem .9rem;
  border: 1px solid var(--cm-line2); border-radius: var(--cm-r-sm);
  background: linear-gradient(135deg, rgba(208, 24, 171, .07), rgba(255, 255, 255, .02));
  text-decoration: none; color: inherit;
  transition: border-color .18s, background .18s, transform .18s;
}
.cm-fel-box:hover {
  border-color: rgba(208, 24, 171, .4);
  background: linear-gradient(135deg, rgba(208, 24, 171, .13), rgba(255, 255, 255, .03));
  transform: translateY(-1px);
}

.cm-fel-logo {
  width: 62px; height: 62px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--cm-r-sm); overflow: hidden;
  border: 1px solid var(--cm-line); background: var(--cm-panel2);
}
.cm-fel-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-fel-logo i { font-size: 1.4rem; color: var(--cm-acc-sf); opacity: .75; }

.cm-fel-in { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cm-fel-tit {
  font-size: .95rem; font-weight: 600; color: #f7f4ff; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-fel-desc {
  font-size: .8rem; line-height: 1.5; color: var(--cm-txt2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-fel-meta { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin-top: .15rem; }
.cm-fel-meta .cm-count { font-size: .72rem; }

/* La freccia compare all'avvicinarsi, come nella colonna dei
   follower: a riposo non aggiunge rumore. */
.cm-fel-go {
  font-size: .8rem; color: var(--cm-acc-sf);
  opacity: 0; transform: translateX(-3px);
  transition: opacity .18s, transform .18s;
}
.cm-fel-box:hover .cm-fel-go { opacity: .9; transform: translateX(0); }

.cm-fel-open {
  margin-left: auto; font-size: .76rem; font-weight: 600;
  color: var(--cm-acc-sf); padding: .35rem .5rem; text-decoration: none;
}
.cm-fel-open i { font-size: .7rem; }
.cm-fel-open:hover { color: var(--cm-gold-sf); }

/* -- Colonna laterale: chi seguire ------------------------- */
.cm-fesugg .cm-foll-da { font-size: .69rem; }
.cm-fesugg-all { margin-top: .8rem; }

.cm-fest {
  display: flex; flex-direction: column; gap: .25rem;
  margin-top: .9rem; padding-top: .75rem;
  border-top: 1px solid var(--cm-line2);
  font-size: .74rem; color: var(--cm-txt3);
}
.cm-fest strong { color: var(--cm-txt2); font-weight: 600; }

@media (max-width: 640px) {
  .cm-fel-box { gap: .7rem; padding: .7rem .75rem; }
  .cm-fel-logo { width: 52px; height: 52px; }
  .cm-fel-go { display: none; }
}

@media (max-width: 900px) {
  /* In orizzontale le pill non hanno spazio per due righe di testo */
  .cm-fesugg .cm-foll-da { display: none; }
}
/* La card di una lista ha un badge solo: spinto a destra respira,
   mentre sui post i badge stanno accanto all'autore. */
.cm-fel .cm-bp-badges { margin-left: auto; }

/* Contatore dei commenti: gemello di .cm-cn, era rimasto senza
   regola dallo step 7 e ballava a ogni cifra in piu'. */
.cm-ccn { font-variant-numeric: tabular-nums; }

/* ============================================================
   BARRA DELL'HUB A QUATTRO VOCI (step 13)
   .cm-hub-in nasceva con grid-template-columns: repeat(3, 1fr):
   con la quarta voce la griglia mandava Streamers a capo da sola.
   Override in coda, le regole originali non sono state toccate.
   ============================================================ */

/* minmax(0, 1fr) e non 1fr: il minimo automatico di 1fr e' la
   larghezza del contenuto, quindi su schermi stretti la barra
   sfonderebbe in orizzontale invece di stringere le celle. */
.cm-hub-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cm-hub-t { min-width: 0; }

/* Rete di sicurezza: se una voce diventasse piu' lunga di quelle
   di oggi, taglia con i puntini e non va mai a capo. */
.cm-hub-lb,
.cm-hub-lb-s {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Fra tablet e desktop piccolo quattro etichette per intero stanno
   strette: meno margine laterale, meno gap, font e badge ridotti. */
@media (min-width: 721px) and (max-width: 1024px) {
  .cm-hub-in { padding: 0 clamp(.5rem, 2vw, 1.2rem); }
  .cm-hub-t  { gap: .42rem; padding: .6rem .45rem; font-size: .8rem; }
  .cm-hub-t i { font-size: .92rem; }
  .cm-hub-n  { min-width: 20px; height: 18px; font-size: .64rem; }
}

/* Sotto i 720 px le voci sono gia' in colonna, icona sopra ed
   etichetta corta sotto: serve solo togliere il fiato di troppo. */
@media (max-width: 720px) {
  .cm-hub-in { padding: 0 .3rem; }
  .cm-hub-t  { padding: .55rem .22rem; }
}

/* iPhone: 393 px il 15/16, 375 px l'SE 2 e 3, 320 px l'SE 1.
   A 320 px la cella e' 77 px e "Streamers" a .74rem ne chiedeva
   80: da qui in giu' il font scende e l'etichetta entra intera. */
@media (max-width: 420px) {
  .cm-hub-t   { font-size: .67rem; letter-spacing: 0; gap: .22rem; }
  .cm-hub-t i { font-size: .95rem; }
  .cm-hub-n {
    top: 4px; right: 4px;
    min-width: 15px; height: 14px; padding: 0 .2rem; font-size: .55rem;
  }
}

/* ============================================================
   BACHECA: PULSANTE DI PUBBLICAZIONE E ALTRE LISTE (step 13b)
   ============================================================ */

/* -- Riga dei filtri con la chiamata all'azione a destra ---- */
/* width al 100%: sopra i 641 px .cm-toolbar diventa una riga e i
   suoi figli si stringono sul contenuto, cosi' il pulsante finiva
   appiccicato ai filtri invece che al margine destro. */
.cm-fetop {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; width: 100%;
}
/* flex-grow a zero: con 1 i filtri si prendevano tutto lo spazio
   libero e il pulsante finiva a capo anche su desktop. */
.cm-fetop .cm-tabs { flex: 0 1 auto; min-width: 0; }
.cm-fetop-btn { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 700px) {
  /* Affiancati non ci starebbero: il pulsante prende tutta la riga
     sotto i filtri, invece di stringersi fino a troncare. */
  .cm-fetop { flex-direction: column; align-items: stretch; gap: .7rem; }
  .cm-fetop-btn { width: 100%; justify-content: center; }
}

/* -- Colonna con due card ---------------------------------- */
/* Con due pannelli lo sticky del primo scavalcava il secondo
   durante lo scorrimento: nella bacheca della community la
   colonna scorre con la pagina. Sulla pagina personale, dove la
   card e' una sola, .cm-follbox resta sticky com'era. */
.cm-feside { display: flex; flex-direction: column; gap: 1.2rem; }
.cm-feside .cm-follbox { position: static; }

/* -- Card "Altre liste" ------------------------------------ */
.cm-flbox .cm-panel-h .cm-count { margin-left: auto; }

.cm-fl-list { display: flex; flex-direction: column; gap: .15rem; }

.cm-fl-i {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .6rem;
  padding: .45rem .5rem; border-radius: var(--cm-r-sm);
  border: 1px solid transparent;
  color: var(--cm-txt2); text-decoration: none;
  transition: background .18s, border-color .18s, transform .18s;
}
.cm-fl-i:hover {
  background: rgba(208, 24, 171, .09);
  border-color: rgba(208, 24, 171, .3);
  transform: translateX(2px);
}

.cm-fl-logo {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--cm-line); background: var(--cm-panel2);
}
.cm-fl-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-fl-logo i { font-size: .8rem; color: var(--cm-acc-sf); opacity: .7; }

.cm-fl-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cm-fl-tit {
  font-size: .82rem; font-weight: 500; color: var(--cm-txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-fl-meta {
  font-size: .68rem; color: var(--cm-txt3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-fl-go {
  font-size: .68rem; color: var(--cm-acc-sf);
  opacity: 0; transform: translateX(-3px);
  transition: opacity .18s, transform .18s;
}
.cm-fl-i:hover .cm-fl-go { opacity: .85; transform: translateX(0); }

/* -- Ricerca dentro la card -------------------------------- */
/* Riusa .cm-search, che era nato per la toolbar a tutta
   larghezza: in colonna serve meno imbottitura. */
.cm-flsearch { margin-top: .9rem; }
.cm-flsearch input { padding: .62rem 4.4rem .62rem 2.2rem; font-size: 16px; }
.cm-flsearch > i { left: .8rem; font-size: .8rem; }
.cm-flsearch .cm-search-go { right: .28rem; padding: .42rem .8rem; font-size: .72rem; }

/* ======================================================
   Player nel browser (vetrina liste)
   Header della card con "Riproduci" + modale ampia con
   elenco canali a destra. Il flusso lo richiede il
   dispositivo dell'utente: qui c'e' solo la vestizione.
   ====================================================== */

/* -- Header della card --------------------------------- */
.cm-plhead {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .45rem .55rem .45rem .75rem;
  border-bottom: 1px solid var(--cm-line2);
  background: rgba(255, 255, 255, .02);
}
.cm-plch {
  display: inline-flex; align-items: center; gap: .35rem; min-width: 0;
  font-size: .7rem; font-weight: 600; color: var(--cm-txt3);
}
.cm-plch > i { color: var(--cm-acc-sf); opacity: .8; }
.cm-plfmt {
  padding: .1rem .35rem; border-radius: 5px;
  font-size: .6rem; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--cm-line2); color: var(--cm-txt2); cursor: help;
}
.cm-plfmt.is-dash { color: var(--cm-warn); border-color: rgba(240, 180, 41, .35); }
.cm-plfmt.is-http { color: var(--cm-err);  border-color: rgba(248, 112, 112, .35); }
.cm-plgo {
  display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0;
  padding: .34rem .7rem; border-radius: 30px; cursor: pointer;
  font-family: inherit; font-size: .72rem; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2));
  border: 1px solid transparent;
  transition: filter .2s, opacity .2s;
}
.cm-plgo:hover { filter: brightness(1.14); }
.cm-plgo > i { font-size: .66rem; }
.cm-plgo.is-off, .cm-plgo:disabled {
  background: none; border-color: var(--cm-line2);
  color: var(--cm-txt3); cursor: not-allowed; filter: none;
}

/* -- Modale del player --------------------------------- */
body.cm-pl-lock { overflow: hidden; }
.cm-plmodal { padding: .6rem; }
.cm-plmodal .cm-modal-card {
  max-width: 1180px; width: 100%; text-align: left; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
  max-height: min(94vh, 860px);
}
.cm-pl-head {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .85rem 1rem .8rem; border-bottom: 1px solid var(--cm-line);
  background: linear-gradient(140deg, rgba(208, 24, 171, .12), rgba(208, 24, 171, 0));
}
.cm-pl-htit { min-width: 0; }
.cm-pl-head h3 {
  display: flex; align-items: center; gap: .45rem;
  font-size: .98rem; font-weight: 600; color: #f7f4ff; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-pl-head h3 i { color: var(--cm-acc-sf); flex-shrink: 0; }
.cm-pl-head p { font-size: .7rem; color: var(--cm-txt3); line-height: 1.5; margin-top: .25rem; }
.cm-pl-head > .cm-mini { margin-left: auto; flex-shrink: 0; font-size: 1.15rem; }

.cm-pl-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cm-pl-stage { padding: .8rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.cm-pl-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: var(--cm-r-sm); overflow: hidden;
  border: 1px solid var(--cm-line2);
}
.cm-pl-video[hidden] { display: none; }
.cm-pl-video .video-js { width: 100%; height: 100%; }
.cm-pl-msg {
  padding: .7rem .85rem; border-radius: var(--cm-r-sm);
  background: var(--cm-panel2); border: 1px solid var(--cm-line2);
  font-size: .78rem; color: var(--cm-txt2); line-height: 1.6;
  overflow-wrap: anywhere;
}
.cm-pl-msg[hidden] { display: none; }
.cm-pl-msg i { color: var(--cm-acc-sf); margin-right: .35rem; }
.cm-pl-acts { display: flex; flex-wrap: wrap; gap: .45rem; }
.cm-pl-acts[hidden] { display: none; }

/* -- Elenco canali ------------------------------------- */
.cm-pl-side {
  display: flex; flex-direction: column; min-height: 0;
  border-top: 1px solid var(--cm-line2); background: rgba(0, 0, 0, .18);
}
.cm-pl-find {
  position: relative; flex-shrink: 0;
  padding: .55rem .7rem; border-bottom: 1px solid var(--cm-line2);
}
.cm-pl-find > i {
  position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%);
  font-size: .74rem; color: var(--cm-txt3); pointer-events: none;
}
.cm-pl-find input {
  width: 100%; padding: .5rem .7rem .5rem 2rem;
  background: var(--cm-panel2); color: var(--cm-txt);
  border: 1px solid var(--cm-line2); border-radius: 30px;
  font-family: inherit; font-size: .78rem; outline: none;
}
.cm-pl-find input:focus { border-color: var(--cm-acc); }
.cm-pl-list {
  list-style: none; margin: 0; padding: .35rem;
  overflow-y: auto; flex: 1; min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.cm-pl-i { margin: 0; }
.cm-pl-i[hidden] { display: none; }
.cm-pl-b {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .4rem .5rem; border: 1px solid transparent; border-radius: var(--cm-r-sm);
  background: none; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--cm-txt2);
  transition: background .15s, border-color .15s;
}
.cm-pl-b:hover { background: rgba(208, 24, 171, .09); border-color: var(--cm-line); }
.cm-pl-b:disabled { opacity: .42; cursor: not-allowed; background: none; border-color: transparent; }
.cm-pl-b.is-on { background: rgba(208, 24, 171, .16); border-color: var(--cm-acc); }
.cm-pl-lg {
  flex-shrink: 0; width: 34px; height: 26px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04); overflow: hidden;
}
.cm-pl-lg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cm-pl-lg i { font-size: .74rem; color: var(--cm-txt3); }
.cm-pl-nm {
  min-width: 0; flex: 1; display: block;
  font-size: .78rem; font-weight: 500; color: var(--cm-txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-pl-nm em {
  display: block; font-style: normal; font-size: .66rem; color: var(--cm-txt3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-pl-tp {
  flex-shrink: 0; padding: .1rem .32rem; border-radius: 5px;
  font-size: .58rem; font-weight: 700; letter-spacing: .03em;
  color: var(--cm-txt3); border: 1px solid var(--cm-line2);
}
.cm-pl-tp.is-off { color: var(--cm-warn); border-color: rgba(240, 180, 41, .3); }
.cm-pl-note {
  flex-shrink: 0; padding: .45rem .7rem; border-top: 1px solid var(--cm-line2);
  font-size: .68rem; color: var(--cm-txt3);
}
.cm-pl-note[hidden] { display: none; }

/* -- Due colonne da tablet in su ----------------------- */
@media (min-width: 901px) {
  .cm-pl-body { flex-direction: row; }
  .cm-pl-stage { flex: 1; padding: 1rem; }
  .cm-pl-side {
    width: 330px; flex-shrink: 0;
    border-top: 0; border-left: 1px solid var(--cm-line2);
  }
}

/* -- Telefono ------------------------------------------ */
@media (max-width: 900px) {
  .cm-pl-list { max-height: 42vh; }
}
@media (max-width: 640px) {
  .cm-plhead { padding-left: .6rem; }
  /* 16px: evita lo zoom automatico di iOS al tocco del campo */
  .cm-pl-find input { font-size: 16px; }
  .cm-pl-acts .cm-btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================
   Anteprima del player (barra + card di chiusura)
   Aggiunto per l'anteprima a tempo: 15 secondi per canale,
   uguale per registrati e ospiti.
   ========================================================== */
.cm-pl-bar {
  position: relative; flex-shrink: 0;
  height: 1.55rem; border-radius: var(--cm-r-sm);
  background: var(--cm-panel2); border: 1px solid var(--cm-line2);
  overflow: hidden;
}
.cm-pl-bar[hidden] { display: none; }
.cm-pl-barf {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--cm-acc), var(--cm-acc-sf));
  opacity: .28; transition: width 1s linear;
}
.cm-pl-bar b {
  position: relative; display: flex; align-items: center; gap: .35rem;
  height: 100%; padding: 0 .6rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .01em;
  color: var(--cm-txt2);
}
.cm-pl-bar b i { color: var(--cm-acc-sf); }

/* -- Fine dell'anteprima -------------------------------- */
/* Non e' un errore ne' un'interruzione: e' il punto in cui uno decide.
   Tutto centrato, colonna stretta, un fatto positivo in testa. */
.cm-pl-msg.is-end {
  padding: 1.7rem 1.2rem;
  text-align: center;
  background: var(--cm-panel);
  border-color: var(--cm-line);
}
.cm-pl-end {
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem; max-width: 30rem; margin: 0 auto;
}
.cm-pl-msg.is-end .cm-pl-endi {
  margin: 0 0 .15rem; font-size: 1.75rem; line-height: 1;
  color: var(--cm-ok);
}
.cm-pl-endt {
  font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--cm-txt);
}
.cm-pl-endd {
  margin: 0; font-size: .81rem; line-height: 1.7; color: var(--cm-txt2);
}
.cm-pl-endd em { font-style: normal; font-weight: 600; color: var(--cm-txt); }
.cm-pl-endb {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem; margin-top: .55rem;
}
.cm-pl-endw {
  margin-top: .7rem; padding-top: .6rem;
  border-top: 1px solid var(--cm-line2);
  width: 100%;
  font-size: .73rem; line-height: 1.6; color: var(--cm-txt3);
}
.cm-pl-msg.is-end .cm-pl-endw i { color: var(--cm-txt3); margin-right: .3rem; }
/* -- Desktop: la card galleggia al centro del palco ----- */
/* Stessa soglia (901px) e stesse immagini di .cm-authbg: sullo sfondo
   del palco, la chiusura dell'anteprima diventa una schermata, non un
   avviso appiccicato in alto. margin: auto su un figlio flex in colonna
   centra su entrambi gli assi. */
@media (min-width: 901px) {
  .cm-pl-bar { height: 1.7rem; }
  .cm-pl-bar b { font-size: .73rem; }

  .cm-pl-stage {
    background-image:
      linear-gradient(180deg, rgba(13, 8, 24, .80), rgba(13, 8, 24, .93)),
      url('assets/img/community-blur-d.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
  }

  .cm-pl-msg.is-end {
    margin: auto; width: 100%; max-width: 34rem;
    padding: 2.4rem 2rem;
    background: rgba(13, 8, 24, .74);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: var(--cm-line);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  }
  .cm-pl-endt { font-size: 1.2rem; }
}

/* WebP dove il browser lo sostiene, come per .cm-authbg. */
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  @media (min-width: 901px) {
    .cm-pl-stage {
      background-image:
        linear-gradient(180deg, rgba(13, 8, 24, .80), rgba(13, 8, 24, .93)),
        image-set(url('assets/img/community-blur-d.webp') type('image/webp'),
                  url('assets/img/community-blur-d.jpg')  type('image/jpeg'));
    }
  }
}

/* ==========================================================
   Segnalazione di malfunzionamento (player della vetrina)
   Vive dentro la card di fine anteprima e dentro il pannello
   d'errore. Il pulsante e' volutamente discreto: la card di
   chiusura ha gia' la sua chiamata all'azione, questa e' una
   via di servizio. Il modulo si apre in linea, senza un

   secondo livello di modale sopra il player.
   ========================================================== */
.cm-pl-seg {
  width: 100%; margin-top: .7rem; padding-top: .65rem;
  border-top: 1px solid var(--cm-line2);
  text-align: center;
}
.cm-pl-segb {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .78rem; border-radius: 30px;
  background: transparent; border: 1px solid var(--cm-line2);
  font: inherit; font-size: .73rem; font-weight: 600;
  color: var(--cm-txt3); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.cm-pl-segb[hidden] { display: none; }
.cm-pl-segb i { margin: 0; color: var(--cm-warn); }
.cm-pl-segb:hover {
  color: var(--cm-txt); border-color: var(--cm-warn);
  background: rgba(240, 180, 41, .09);
}
.cm-pl-segb:focus-visible { outline: 2px solid var(--cm-warn); outline-offset: 2px; }

.cm-pl-segf { margin-top: .65rem; text-align: left; }
.cm-pl-segf[hidden] { display: none; }
.cm-pl-segf label { display: block; margin-bottom: .55rem; }
.cm-pl-segf label span {
  display: block; margin-bottom: .25rem;
  font-size: .72rem; font-weight: 600; color: var(--cm-txt2);
}
.cm-pl-segf select,
.cm-pl-segf textarea {
  width: 100%; padding: .48rem .62rem;
  background: var(--cm-panel2); color: var(--cm-txt);
  border: 1px solid var(--cm-line2); border-radius: var(--cm-r-sm);
  font: inherit; font-size: .78rem; line-height: 1.5;
}
.cm-pl-segf textarea { resize: vertical; min-height: 3.2rem; }
.cm-pl-segf select:focus,
.cm-pl-segf textarea:focus { outline: none; border-color: var(--cm-acc); }
.cm-pl-segr { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .1rem; }
.cm-pl-segr .cm-btn { flex: 1 1 auto; justify-content: center; }
.cm-pl-segh {
  margin: .6rem 0 0; font-size: .69rem; line-height: 1.6;
  color: var(--cm-txt3);
}
.cm-pl-sege {
  margin: .55rem 0 0; font-size: .73rem; font-weight: 600;
  color: var(--cm-err);
}

/* Esito: una riga sola, verde, senza pulsanti da premere di nuovo. */
.cm-pl-seg.is-fatta {
  display: flex; align-items: center; justify-content: center;
  gap: .4rem; text-align: center;
  font-size: .75rem; font-weight: 600; line-height: 1.5;
  color: var(--cm-ok);
}
.cm-pl-msg .cm-pl-seg.is-fatta i { margin: 0; color: var(--cm-ok); }

/* ==========================================================
   Card "Prova i canali" (colonna destra del dettaglio lista)
   Ha preso il posto dell'elenco delle altre liste dell'autore.
   Misura fissa per scelta: l'elenco scorre dentro un'altezza
   data, cosi' una lista da 400 canali e una da 6 lasciano la
   pagina della stessa forma. Ogni riga apre il modale del
   player sul suo canale, dove vive la segnalazione.
   ========================================================== */
.cm-plcard {
  margin-top: 2rem; padding: 1.1rem;
  background: var(--cm-panel); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r);
}
.cm-plcard-h {
  display: flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--cm-txt2);
}
.cm-plcard-h i { color: var(--cm-acc-sf); }
.cm-plcard-h .cm-count { margin-left: auto; }
.cm-plcard-sub {
  margin: .5rem 0 .8rem; font-size: .74rem; line-height: 1.6;
  color: var(--cm-txt3);
}

/* L'altezza fissa e' il punto della card: 15.5rem sono circa sei
   righe, abbastanza per capire che si scorre. */
.cm-plcard-list {
  display: grid; gap: .3rem; margin: 0 0 .85rem; padding: 0; list-style: none;
  height: 15.5rem; overflow-y: auto; overscroll-behavior: contain;
  padding-right: .35rem;
  scrollbar-width: thin; scrollbar-color: var(--cm-acc) transparent;
}
.cm-plcard-list::-webkit-scrollbar { width: 6px; }
.cm-plcard-list::-webkit-scrollbar-thumb {
  background: var(--cm-acc); border-radius: 3px;
}
.cm-plcard-i {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .4rem .5rem; border-radius: var(--cm-r-sm);
  background: var(--cm-panel2); border: 1px solid transparent;
  font: inherit; color: var(--cm-txt); text-align: left; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cm-plcard-i:hover { background: rgba(208, 24, 171, .09); border-color: var(--cm-line); }
.cm-plcard-i:focus-visible { outline: 2px solid var(--cm-acc); outline-offset: 2px; }
.cm-plcard-i:disabled { opacity: .45; cursor: not-allowed; }
.cm-plcard-lg {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .05); color: var(--cm-txt3); font-size: .72rem;
}
.cm-plcard-lg img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.cm-plcard-nm { min-width: 0; flex: 1 1 auto; }
.cm-plcard-nm strong {
  display: block; font-size: .8rem; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-plcard-nm em {
  display: block; font-style: normal; font-size: .68rem; color: var(--cm-txt3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-plcard-go { flex-shrink: 0; font-size: .68rem; color: var(--cm-txt3); }
.cm-plcard-i:hover .cm-plcard-go { color: var(--cm-acc-sf); }
.cm-plcard-note {
  display: grid; gap: .3rem; margin: .7rem 0 0;
  font-size: .68rem; line-height: 1.5; color: var(--cm-txt3);
}

@media (min-width: 1025px) {
  /* Stessa misura che teneva la colonna delle altre liste. */
  .cm-underbar .cm-plcard {
    flex: 1 1 330px; max-width: 390px;
    position: sticky; top: 88px;
  }
}

/* ============================================================
   MOBILE / iPhone — sfondo canna di fucile
   Allineato al blocco omologo di style.css: sole tre variabili
   ridefinite, tutto il resto della palette resta invariato.
   ============================================================ */
@media (max-width: 1024px) {
  :root{
    --cm-bg:     #1c2026;
    --cm-panel:  #242930;
    --cm-panel2: #2b3139;
    --cm-line2:  rgba(255, 255, 255, .10);
    --cm-sh:     0 6px 28px rgba(0, 0, 0, .40);
  }
}

/* ============================================================
   OGGI IN TV - pulsante nella vetrina e pagina della guida
   ============================================================ */

/* Il pulsante sta nella barra delle schede e ne condivide forma e
   altezza, ma non e' un ordinamento: cambia pagina. Colore diverso e

   un separatore prima, cosi' si vede che appartiene a un altro gruppo
   senza staccarsi dal blocco. */
.cm-tabs-sep {
  flex-shrink: 0; align-self: center;
  width: 1px; height: 1.1rem; margin: 0 .25rem;
  background: var(--cm-line2);
}
.cm-tab.cm-tvbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  border-color: rgba(94, 234, 212, .34);
  background: rgba(94, 234, 212, .10);
  font-weight: 600; color: #7fe6d4;
  transition: background .15s, border-color .15s, color .15s;
}
.cm-tab.cm-tvbtn:hover { background: rgba(94, 234, 212, .18); border-color: rgba(94, 234, 212, .55); color: #b6f5ea; }
.cm-tab.cm-tvbtn i { font-size: .78rem; }

/* -- Intestazione della guida -------------------------- */
.cm-tv-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 1.6rem; }
.cm-tv-head h1 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .45rem; font-size: 1.5rem; font-weight: 700; color: #f7f4ff; }
.cm-tv-head h1 i { font-size: 1.1rem; color: #7fe6d4; }
.cm-tv-head p { margin: 0; max-width: 62ch; font-size: .82rem; line-height: 1.6; color: var(--cm-txt2); }
.cm-tv-agg { display: block; margin-top: .2rem; font-size: .74rem; color: var(--cm-txt3); }
.cm-tv-back { white-space: nowrap; }
.cm-tv-search { max-width: 460px; margin-bottom: 1.4rem; }

.cm-tv-avviso {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 0 0 1.4rem; padding: .8rem 1rem;
  border: 1px solid rgba(234, 179, 8, .34); border-radius: var(--cm-r-sm);
  background: rgba(234, 179, 8, .09);
  font-size: .8rem; line-height: 1.55; color: #f0d894;
}

/* -- Griglia dei canali -------------------------------- */
.cm-tv-grid {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.cm-tv-card {
  display: flex; flex-direction: column; gap: .7rem;
  padding: .9rem 1rem;
  border: 1px solid var(--cm-line2); border-radius: var(--cm-r-sm);
  background: rgba(255, 255, 255, .025);
  text-decoration: none; color: inherit;
  transition: background .15s, border-color .15s, transform .15s;
}
.cm-tv-card:hover { background: rgba(255, 255, 255, .06); border-color: var(--cm-line); transform: translateY(-2px); }
.cm-tv-card-h { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.cm-tv-card-h img {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
  object-fit: contain; background: rgba(255, 255, 255, .06); padding: 3px;
}
.cm-tv-noimg {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .06); color: var(--cm-txt3); font-size: .8rem;
}
.cm-tv-nome {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .88rem; font-weight: 600; color: #f7f4ff;
}

.cm-tv-now { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.cm-tv-now strong {
  font-size: .86rem; font-weight: 600; color: var(--cm-txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-tv-vuoto span { font-size: .8rem; color: var(--cm-txt3); font-style: italic; }
.cm-tv-orario { font-size: .7rem; letter-spacing: .04em; color: #7fe6d4; font-variant-numeric: tabular-nums; }

.cm-tv-bar { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .09); overflow: hidden; margin-top: .15rem; }
.cm-tv-bar > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2dd4bf, #7fe6d4); transition: width .6s linear; }
/* Programma finito mentre la pagina era aperta: la barra resta a
   fondo corsa e si spegne. Nessun ricaricamento automatico. */
.cm-tv-bar.is-finito > span { background: rgba(255, 255, 255, .22); }

.cm-tv-next {
  display: flex; align-items: baseline; gap: .4rem; min-width: 0;
  padding-top: .55rem; border-top: 1px solid var(--cm-line2);
  font-size: .76rem; color: var(--cm-txt2);
}
.cm-tv-lab { flex-shrink: 0; text-transform: uppercase; letter-spacing: .07em; font-size: .62rem; font-weight: 600; color: var(--cm-txt3); }
.cm-tv-tit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -- Palinsesto di un canale --------------------------- */
.cm-tv-day { margin: 1.6rem 0 .5rem; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--cm-txt3); }
.cm-tv-day:first-child { margin-top: 0; }
.cm-tv-sched { display: flex; flex-direction: column; gap: .3rem; }
.cm-tv-row {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: baseline; gap: .8rem;
  padding: .6rem .9rem; border-radius: var(--cm-r-sm);
  border: 1px solid transparent;
  font-size: .84rem; color: var(--cm-txt2);
}
.cm-tv-row:nth-child(odd) { background: rgba(255, 255, 255, .02); }
.cm-tv-row.is-ora { border-color: rgba(94, 234, 212, .34); background: rgba(94, 234, 212, .08); color: var(--cm-txt); }
.cm-tv-h { font-variant-numeric: tabular-nums; font-weight: 600; color: #7fe6d4; }
.cm-tv-row.is-ora .cm-tv-h { color: #b6f5ea; }
.cm-tv-t { min-width: 0; }
.cm-tv-cat { margin-left: .45rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cm-txt3); }
.cm-tv-fine { font-size: .72rem; color: var(--cm-txt3); font-variant-numeric: tabular-nums; }
.cm-tv-live { display: inline-flex; align-items: center; gap: .35rem; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #7fe6d4; }
.cm-tv-live i { font-size: .4rem; animation: cm-tv-puls 2s ease-in-out infinite; }
@keyframes cm-tv-puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.cm-tv-empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: 4rem 1.2rem 5rem; }
.cm-tv-empty i { font-size: 2.2rem; color: var(--cm-txt3); opacity: .55; }
.cm-tv-empty p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--cm-txt2); }

@media (min-width: 700px) {
  .cm-tv-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
  .cm-tv-head h1 { font-size: 1.65rem; }
}

/* ============================================================
   LINK CONSIGLIATI DAGLI UTENTI (bacheca in fondo alla vetrina)
   Aggiunto in coda: nessuna regola preesistente e' stata toccata.
   ============================================================ */

.cm-lkbox {
  margin-top: 2.2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--cm-line2);
}
.cm-lkbox .cm-sec-head { margin-top: 0; margin-bottom: .6rem; }

.cm-lk-intro {
  /* il testo occupa tutta la larghezza del contenitore: nessun tetto di
     misura, che qui lasciava mezza riga vuota a destra */
  margin: 0 0 .55rem;
  font-size: .82rem; line-height: 1.65; color: var(--cm-txt2);
}
.cm-lk-intro b { color: var(--cm-txt); font-weight: 600; }

/* Nota di regole e visibilita': staccata dall'introduzione, cosi' la
   prosa resta corta e l'avvertenza si legge come un'avvertenza */
.cm-lk-nota {
  display: flex; align-items: flex-start; gap: .45rem;
  margin: 0 0 1rem;
  font-size: .76rem; line-height: 1.6; color: var(--cm-txt3);
}
.cm-lk-nota span { flex: 1 1 auto; min-width: 0; }
.cm-lk-nota i { margin-top: .2rem; color: var(--cm-gold); }

/* -- Composizione ------------------------------------------- */
.cm-lknew {
  background: var(--cm-panel); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r); padding: .8rem .85rem; margin-bottom: .9rem;
}
.cm-lknew-mode { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .6rem; }
.cm-lkchip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .8rem; border-radius: 40px; cursor: pointer;
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .03);
  font-family: inherit; font-size: .74rem; color: var(--cm-txt2); white-space: nowrap;
}
.cm-lkchip:hover { border-color: var(--cm-line); color: var(--cm-txt); }
.cm-lkchip.on {
  border-color: var(--cm-acc); background: rgba(208, 24, 171, .14);
  color: #fff; font-weight: 600;
}


/* Etichetta e indirizzo affiancati: sono due parti dello stesso
   dato, e l'indirizzo ha bisogno di piu' spazio dell'etichetta.
   Sotto i 700 px tornano in colonna, dove affiancarli li
   stringerebbe entrambi. */
.cm-lknew-campi { display: grid; gap: .45rem; margin-bottom: .45rem; }
@media (min-width: 700px) {
  .cm-lknew-campi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
}
.cm-lknew-campi input,
.cm-lknew-ta {
  width: 100%; padding: .52rem .7rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--cm-line2); border-radius: var(--cm-r-sm);
  color: #f7f4ff; font-family: inherit; font-size: 16px; line-height: 1.5;
  outline: none; transition: border-color .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
/* 16 px solo dove serve: sotto quella soglia iOS zooma al focus.
   Da tablet in su si puo' rimpicciolire senza effetti collaterali. */
@media (min-width: 641px) {
  .cm-lknew-campi input,
  .cm-lknew-ta { font-size: .85rem; }
}
.cm-lknew-campi input:focus,
.cm-lknew-ta:focus { border-color: rgba(208, 24, 171, .55); background: rgba(208, 24, 171, .05); }
.cm-lknew-ta { min-height: 56px; resize: vertical; display: block; }

.cm-lknew-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .55rem; }
.cm-lknew-cnt { font-size: .7rem; color: var(--cm-txt3); font-variant-numeric: tabular-nums; }

.cm-lknew-foot .cm-btn { margin-left: auto; padding: .42rem .85rem; font-size: .76rem; }

/* -- Muro della versione precedente di community.php --------
   Regole tenute per compatibilita': la pagina nuova usa .cm-gate
   del design system, ma finche' in produzione gira il markup
   vecchio senza queste il blocco resta senza stile. Si possono
   togliere quando community.php e questo foglio sono allineati. */
.cm-lkgate {
  display: flex; align-items: center; gap: .7rem .8rem; flex-wrap: wrap;
  padding: .85rem 1rem; margin: 0 0 .9rem;
  border: 1px dashed rgba(240, 180, 41, .3); border-radius: var(--cm-r);
  background: rgba(240, 180, 41, .05);
}
.cm-lkgate > i { flex: 0 0 auto; color: var(--cm-gold-sf); font-size: .95rem; }
.cm-lkgate p {
  flex: 1 1 240px; min-width: 0; margin: 0;
  font-size: .8rem; line-height: 1.55; color: var(--cm-txt2);
}
.cm-lkgate p b { color: var(--cm-txt); font-weight: 600; }
.cm-lkgate-btns { flex: 0 0 auto; margin-left: auto; display: flex; gap: .45rem; flex-wrap: wrap; }

/* -- Schede del filtro (sono pulsanti, non link) ------------ */
.cm-lktabs { margin-bottom: .8rem; }
.cm-lktabs .cm-tab { font-family: inherit; cursor: pointer; padding: .36rem .85rem; }
.cm-lktabs .cm-tab .cm-count { margin-left: .3rem; }

/* -- Elenco delle voci -------------------------------------- */
.cm-lklist { display: flex; flex-direction: column; gap: .6rem; transition: opacity .15s; }

.cm-lk {
  background: var(--cm-panel); border: 1px solid var(--cm-line2);
  border-radius: var(--cm-r); padding: .75rem .85rem;
}
.cm-lk.is-link { border-left: 3px solid rgba(208, 24, 171, .5); }
.cm-lk.is-commento { border-left: 3px solid var(--cm-line2); }
/* voce raggiunta da un doppione: si evidenzia per qualche secondo */
.cm-lk.is-evid { border-color: var(--cm-acc); box-shadow: 0 0 0 2px rgba(208, 24, 171, .22); }

.cm-lk-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.cm-lk-av { width: 30px; height: 30px; flex: 0 0 auto; }
.cm-lk-who { display: flex; flex-direction: column; min-width: 0; }
.cm-lk-who strong { font-size: .82rem; color: var(--cm-txt); }
.cm-lk-au { color: inherit; }
.cm-lk-au:hover strong { color: var(--cm-acc-sf); }
.cm-lk-when { font-size: .68rem; color: var(--cm-txt3); }
.cm-lk-kind {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .14rem .5rem; border-radius: 40px;
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .03);
  font-size: .64rem; color: var(--cm-txt3); text-transform: uppercase; letter-spacing: .04em;
}
.cm-lk.is-link .cm-lk-kind { border-color: rgba(208, 24, 171, .3); color: var(--cm-acc-sf); }
.cm-lk-own { margin-left: auto; display: flex; gap: .3rem; }

.cm-lk-tit {
  margin: .55rem 0 .3rem; font-size: .9rem; font-weight: 600; color: #f7f4ff;
  overflow-wrap: anywhere;
}

.cm-lk-url {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .4rem .55rem; border-radius: var(--cm-r-sm);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--cm-line2);
}
.cm-lk-url > i { color: var(--cm-acc-sf); font-size: .74rem; }
.cm-lk-url a {
  font-size: .75rem; color: var(--cm-txt); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere; min-width: 0;
}
.cm-lk-url a:hover { color: var(--cm-acc-sf); text-decoration: underline; }
.cm-lk-copia.on { color: var(--cm-ok); }
.cm-lk-host { margin-left: auto; font-size: .66rem; color: var(--cm-txt3); white-space: nowrap; }

.cm-lk-txt {
  margin-top: .5rem; font-size: .83rem; line-height: 1.6;
  color: var(--cm-txt2); overflow-wrap: anywhere;
}

.cm-lk-foot {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin-top: .65rem; padding-top: .55rem; border-top: 1px solid var(--cm-line2);
}
.cm-lk-voto {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .26rem .6rem; border-radius: 40px; cursor: pointer;
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .03);
  font-family: inherit; font-size: .72rem; color: var(--cm-txt2);
}
/* i conteggi stanno dentro il pulsante quando si e' loggati e dentro
   uno .cm-count quando no: la cifra deve restare allineata in entrambi */
.cm-lk-nok, .cm-lk-nko { font-variant-numeric: tabular-nums; }
.cm-lk-voto:hover { border-color: var(--cm-line); color: var(--cm-txt); }
.cm-lk-voto.is-ok.on {
  border-color: rgba(52, 201, 138, .5); background: rgba(52, 201, 138, .12); color: var(--cm-ok);
}
.cm-lk-voto.is-ko.on {
  border-color: rgba(248, 112, 112, .5); background: rgba(248, 112, 112, .12); color: var(--cm-err);
}
.cm-lk-voto[disabled] { opacity: .6; pointer-events: none; }
.cm-lk-flag.on { color: var(--cm-warn); }

/* motivi della segnalazione, in linea come sulla bacheca streamers */
.cm-lk-seg { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.cm-lk-seg em { font-size: .7rem; color: var(--cm-txt3); font-style: normal; }
.cm-lk-data { margin-left: auto; font-size: .66rem; color: var(--cm-txt3); white-space: nowrap; }

.cm-lkvuoto {
  display: flex; align-items: center; gap: .55rem;
  padding: .9rem 1rem; border-radius: var(--cm-r);
  border: 1px dashed var(--cm-line2); background: rgba(255, 255, 255, .02);
  font-size: .82rem; color: var(--cm-txt2);
}
.cm-lkvuoto i { color: var(--cm-txt3); }

.cm-lkmore { display: flex; justify-content: center; margin-top: .9rem; }

@media (max-width: 620px) {
  .cm-lkgate-btns { margin-left: 0; width: 100%; }
  .cm-lknew-foot .cm-btn { margin-left: 0; width: 100%; justify-content: center; }
  .cm-lk-host { margin-left: 0; }
  .cm-lk-data { margin-left: 0; width: 100%; }
}

/* ======================================================
   BENVENUTO UNA TANTUM + SOSTEGNO PAYPAL (community.php)
====================================================== */

/* -- Riquadro di sostegno in fondo alla vetrina -------- */
.cm-sup {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  margin-top: 1.6rem; padding: 1.35rem 1.5rem;
  border: 1px solid var(--cm-line); border-radius: var(--cm-r);
  background:
    radial-gradient(560px 200px at 8% 0%, rgba(0, 120, 240, .13), transparent 72%),
    linear-gradient(180deg, var(--cm-panel2), var(--cm-panel));
  box-shadow: var(--cm-sh);
}
.cm-sup-ico {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2));
  color: #fff; font-size: 1.05rem;
  box-shadow: 0 4px 18px rgba(208, 24, 171, .38);
}
.cm-sup-txt { flex: 1 1 260px; min-width: 0; }
.cm-sup-txt h2 {
  margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700;
  color: #f7f4ff; letter-spacing: -.01em;
}
.cm-sup-txt p { margin: 0; font-size: .83rem; line-height: 1.6; color: var(--cm-txt2); }
.cm-sup-act { margin-left: auto; text-align: center; }

/* Versione ridotta, sopra la vetrina: stesso blocco, meno voce. Non
   deve competere con le liste, che sono il motivo per cui si e' qui. */
.cm-sup-slim { margin: 0 0 1.4rem; padding: .9rem 1.1rem; gap: .9rem; }
.cm-sup-slim .cm-sup-ico { width: 38px; height: 38px; font-size: .92rem; }
.cm-sup-slim .cm-sup-txt h2 { margin-bottom: .12rem; font-size: .94rem; }
.cm-sup-slim .cm-sup-txt p { font-size: .78rem; }
.cm-sup-slim .cm-pp { padding: .58rem 1.15rem; font-size: .8rem; }

/* -- Bacheca link: compositore a scomparsa ------------- */
/* I due tasti vivono dentro .cm-sec-head, che e' gia' un flex in
   space-between: da soli finiscono a destra del titolo. Verdi come
   ogni altra azione costruttiva del sito (.cm-btn-green), per
   distinguerli dalle schede del filtro, che sono magenta. */
.cm-lkopen { margin: 0; }
.cm-lkopen .cm-lkchip {
  border-color: rgba(52, 201, 138, .38);
  background: rgba(52, 201, 138, .1);
  color: #7ee2b8; font-weight: 600;
  transition: border-color .2s, background .2s, color .2s;
}
.cm-lkopen .cm-lkchip:hover {
  border-color: rgba(52, 201, 138, .68); background: rgba(52, 201, 138, .18); color: #c6f5e2;
}
.cm-lkopen .cm-lkchip.on {
  border-color: transparent; color: #04160f; font-weight: 700;
  background: linear-gradient(135deg, #3ddc97, #14a06a);
  box-shadow: 0 3px 14px rgba(52, 201, 138, .3);
}
/* .cm-lknew-foot allinea a destra il primo .cm-btn che incontra:
   con due pulsanti la regola li separerebbe ai due lati. Qui la
   coppia resta unita, spinta a destra da Annulla. */
.cm-lknew-foot .cm-lkannulla { margin-left: auto; }
.cm-lknew-foot .cm-lkannulla + .cm-btn { margin-left: 0; }

/* -- Pulsante PayPal del sito -------------------------- */
/* Il bottone reso dall'SDK vive fuori schermo: questo e' quello
   che si vede, e il JS gli gira sopra il clic. */
.cm-pp {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .72rem 1.4rem; border-radius: 40px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(135deg, #0a8bff, #00337d);
  color: #fff; font-family: inherit; font-size: .85rem; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 22px rgba(0, 92, 200, .38);
  transition: transform .15s, box-shadow .2s, filter .2s;
  -webkit-tap-highlight-color: transparent;
}
.cm-pp:hover { filter: brightness(1.09); box-shadow: 0 8px 28px rgba(0, 92, 200, .52); }
.cm-pp:active { transform: scale(.97); }
.cm-pp i { font-size: 1.02rem; color: #fff; }
.cm-pp-note {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  margin: .55rem 0 0; font-size: .66rem; line-height: 1.45; color: var(--cm-txt3);
}
.cm-pp-note i { font-size: .62rem; }

/* Contenitore del bottone ufficiale: presente nel DOM, mai a video. */
.cm-pp-sdk {
  position: fixed; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
}

/* -- Modale di benvenuto ------------------------------- */
/* Lo scorrimento sta sull'involucro, non sulla card: dentro la card
   la barra del sito (4px magenta, ::-webkit-scrollbar in style.css)
   taglia in due gli angoli arrotondati e si vede piu' di quanto
   dovrebbe. Qui corre sul bordo della finestra, dove il magenta e'
   il comportamento normale del sito, ed e' comunque ammorbidita. */
.cm-wel {
  position: fixed; inset: 0; z-index: 3400;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1.1rem;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(208, 24, 171, .5) transparent;
  opacity: 0; transition: opacity .28s ease;
}
.cm-wel::-webkit-scrollbar { width: 8px; }
.cm-wel::-webkit-scrollbar-track { background: transparent; }
.cm-wel::-webkit-scrollbar-thumb {
  background: rgba(208, 24, 171, .42); border-radius: 4px;
  border: 2px solid transparent; background-clip: padding-box;
}
.cm-wel::-webkit-scrollbar-thumb:hover { background: rgba(208, 24, 171, .7); background-clip: padding-box; }
.cm-wel.is-on { opacity: 1; }
.cm-wel-bg {
  position: fixed; inset: 0; background: rgba(3, 2, 8, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cm-wel-card {
  position: relative; z-index: 1; text-align: center;
  width: 100%; max-width: 470px;
  /* i margini automatici centrano finche' c'e' spazio e si annullano
     quando la card e' piu' alta della finestra, senza tagliare l'alto */
  margin: auto 0;
  padding: 1.7rem 1.5rem 1.35rem;
  border: 1px solid var(--cm-line); border-radius: 22px;
  background:
    radial-gradient(340px 150px at 50% -8%, rgba(208, 24, 171, .30), transparent 70%),
    linear-gradient(180deg, #150d26, var(--cm-panel) 62%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .66);
  transform: translateY(16px) scale(.97);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
.cm-wel.is-on .cm-wel-card { transform: none; }
.cm-wel-x {
  position: absolute; top: .7rem; right: .7rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .05);
  color: var(--cm-txt2); font-size: .82rem;
  transition: color .2s, border-color .2s, background .2s;
}
.cm-wel-x:hover { color: #fff; border-color: var(--cm-line); background: rgba(208, 24, 171, .14); }
.cm-wel-h {
  margin: .85rem 0 .4rem; font-size: 1.3rem; font-weight: 700;
  color: #f7f4ff; letter-spacing: -.015em; line-height: 1.25;
}
.cm-wel-p { margin: 0 0 1.1rem; font-size: .85rem; line-height: 1.6; color: var(--cm-txt2); }

.cm-wel-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  margin: 0 0 1.05rem; padding: .8rem 0;
  border-top: 1px solid var(--cm-line2); border-bottom: 1px solid var(--cm-line2);
}
.cm-wel-stats div { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.cm-wel-stats strong {
  font-size: 1.15rem; font-weight: 700; color: #f7f4ff;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.cm-wel-stats span {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .11em; color: var(--cm-txt3);
}

.cm-wel-feat {
  display: grid; gap: .5rem; margin: 0 0 1.15rem; padding: 0;
  list-style: none; text-align: left;
}
.cm-wel-feat li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .81rem; line-height: 1.5; color: var(--cm-txt2);
}
.cm-wel-feat li i { flex: none; margin-top: .18rem; font-size: .78rem; color: var(--cm-ok); }

.cm-wel-sup {
  margin: 0 0 1.1rem; padding: 1rem; border-radius: 14px;
  border: 1px solid rgba(10, 139, 255, .3);
  background: linear-gradient(180deg, rgba(10, 139, 255, .13), rgba(10, 139, 255, .04));
}
.cm-wel-sup-t {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin: 0 0 .35rem; font-size: .82rem; font-weight: 700; color: #f2eeff;
}
.cm-wel-sup-t i { color: var(--cm-acc-sf); }
.cm-wel-sup-p { margin: 0 0 .85rem; font-size: .76rem; line-height: 1.55; color: var(--cm-txt2); }

.cm-wel-act {
  display: flex; gap: .55rem; flex-wrap: wrap; justify-content: center; margin-bottom: .85rem;
}
.cm-wel-act .cm-btn { flex: 1 1 150px; }
.cm-wel-foot { margin: 0; font-size: .66rem; color: var(--cm-txt3); }

/* -- Bacheca link: risposte ---------------------------- */
/* Le risposte stanno dentro la voce, rientrate e con una barra
   verticale a sinistra: si capisce a colpo d'occhio che sono
   subordinate senza doverle incassare in un riquadro dentro un
   riquadro, che su mobile mangia tutta la larghezza. */
.cm-lk-rep { margin-top: .6rem; }
.cm-lk-replist:not(:empty) {
  display: grid; gap: .55rem; margin-bottom: .55rem;
  padding-left: .85rem; border-left: 2px solid var(--cm-line);

}
.cm-lkr { display: flex; align-items: flex-start; gap: .55rem; min-width: 0; }
.cm-lkr-av { width: 24px; height: 24px; flex: 0 0 auto; margin-top: .1rem; }
.cm-lkr-body { flex: 1 1 auto; min-width: 0; }
.cm-lkr-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.cm-lkr-head strong { font-size: .78rem; color: var(--cm-txt); }
.cm-lkr-az { margin-left: auto; }
.cm-lkr-txt {
  margin-top: .12rem; font-size: .81rem; line-height: 1.55;
  color: var(--cm-txt2); overflow-wrap: anywhere;
}

.cm-lk-repgo {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 40px; cursor: pointer;
  border: 1px solid var(--cm-line2); background: rgba(255, 255, 255, .03);
  font-family: inherit; font-size: .72rem; color: var(--cm-txt2);
  transition: border-color .2s, color .2s, background .2s;
}
.cm-lk-repgo:hover { border-color: var(--cm-line); background: rgba(208, 24, 171, .08); color: var(--cm-txt); }
.cm-lk-repn { margin-left: .1rem; }

.cm-lk-repnew { margin-top: .55rem; }
.cm-lk-repta {
  width: 100%; min-height: 48px; resize: vertical; display: block;
  padding: .52rem .7rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--cm-line2); border-radius: var(--cm-r-sm);
  color: #f7f4ff; font-family: inherit; font-size: 16px; line-height: 1.5;
  outline: none; transition: border-color .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
@media (min-width: 700px) { .cm-lk-repta { font-size: .85rem; } }
.cm-lk-repta:focus { border-color: rgba(208, 24, 171, .55); background: rgba(208, 24, 171, .05); }
.cm-lk-repfoot {
  display: flex; justify-content: flex-end; gap: .45rem; flex-wrap: wrap; margin-top: .45rem;
}

@media (max-width: 620px) {
  .cm-lk-repfoot .cm-btn { flex: 1 1 auto; justify-content: center; }
  .cm-sup { padding: 1.15rem 1.1rem; gap: .9rem; }
  .cm-lkopen { width: 100%; }
  .cm-lkopen .cm-lkchip { flex: 1 1 auto; justify-content: center; }
  .cm-lknew-foot .cm-lkannulla,
  .cm-lknew-foot .cm-lkannulla + .cm-btn { margin-left: 0; width: 100%; justify-content: center; }
  .cm-sup-act { margin-left: 0; width: 100%; }
  .cm-sup-act .cm-pp { width: 100%; }
  .cm-wel-card { padding: 1.5rem 1.15rem 1.2rem; }
  .cm-wel-h { font-size: 1.16rem; }
  .cm-wel-act .cm-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-wel, .cm-wel-card { transition: none; }
  .cm-wel-card { transform: none; }
}

/* ======================================================
   CHAT DELLA COMMUNITY (cm_chat_inc.php)
   Pulsante fisso in basso a destra + cassetto laterale.
   Prefisso .cm-ch / .cm-chfab / .cm-chi / .cm-chg /
   .cm-chu / .cm-chm / .cm-chh

   Il pannello e' CHIARO su un sito scuro: e' una scelta,
   non una dimenticanza. La chat e' l'unica parte della
   Community che si legge a lungo e riga per riga, e il
   testo scuro su fondo chiaro regge meglio della lettura
   in negativo. Il contrasto con la pagina fa anche da
   confine: si vede subito dove finisce il sito e dove
   comincia la conversazione.

   I colori del cassetto stanno tutti nelle variabili qui
   sotto, ridefinite localmente: il tema scuro di :root
   resta intatto per tutto il resto del foglio, e per
   cambiare tinta alla chat si toccano sei righe.
====================================================== */

/* -- Pulsante fisso ------------------------------------ */
/* Il pulsante resta scuro e acceso: vive sulla pagina, non
   dentro il pannello. Sta nello stesso angolo di #gotop
   (style.css): la classe sul body, messa dal JS della chat,
   sposta il "torna su" sopra il pulsante invece di
   sovrapporlo. La regola vive qui e non in style.css perche'
   il pulsante esiste solo nelle pagine della Community, e
   solo per chi e' loggato. */
body.cm-chat-on #gotop { bottom: 6.35rem; }

.cm-chfab {
  position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 900;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.32rem; color: #fff;
  background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2));
  border: 1px solid rgba(224, 102, 204, .45);
  box-shadow: 0 10px 30px rgba(208, 24, 171, .42), 0 2px 8px rgba(0, 0, 0, .5);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s;
  -webkit-tap-highlight-color: transparent;
}
.cm-chfab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 38px rgba(208, 24, 171, .55), 0 3px 10px rgba(0, 0, 0, .5);
}
.cm-chfab:active { transform: translateY(-1px) scale(.99); }
.cm-chfab i { position: relative; z-index: 2; }
.cm-chfab[aria-expanded="true"] { filter: saturate(.75); }

/* Alone: gira solo quando c'e' qualcosa di non letto, cosi'
   il movimento vuol dire una cosa precisa e non e' decoro. */
.cm-chfab-alone {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(224, 102, 204, .5);
  opacity: 0; pointer-events: none;
}
.cm-chfab.has-new .cm-chfab-alone { animation: cm-ch-pulse 2.1s ease-out infinite; }
@keyframes cm-ch-pulse {
  0%   { opacity: .75; transform: scale(.86); }
  70%  { opacity: 0;   transform: scale(1.28); }
  100% { opacity: 0;   transform: scale(1.28); }
}

/* Rimbalzo del pulsante quando il numero sale da solo: in una
   pagina ferma un contatore che cambia senza movimento non lo
   nota nessuno. Breve e una volta sola, non e' un richiamo. */
.cm-chfab.is-pop { animation: cm-ch-pop .42s ease; }
@keyframes cm-ch-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.16); }
  70%  { transform: scale(.97); }
  100% { transform: scale(1); }
}


.cm-chfab-n {
  position: absolute; top: -3px; right: -3px; z-index: 3;
  min-width: 22px; height: 22px; padding: 0 .32rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 40px; font-size: .68rem; font-weight: 700; line-height: 1;
  color: #2a1c04; background: linear-gradient(135deg, var(--cm-gold-sf), var(--cm-gold));
  border: 2px solid var(--cm-bg);
  box-shadow: 0 2px 8px rgba(240, 180, 41, .45);
}

/* -- Cassetto ------------------------------------------ */
/* .cm-ch e' position:fixed su tutto lo schermo: il prefisso .cm-ch- e'
   riservato alla chat. L'editor canali usa .cm-cnl- (vedi sopra). */
.cm-ch {
  /* Tavolozza chiara, valida solo dentro il cassetto. */
  --ch-bg:    #ffffff;
  --ch-bg2:   #f6f4fa;   /* superfici secondarie: schede, campi, bolle altrui */
  --ch-bg3:   #f1eef7;   /* fondo della conversazione */
  --ch-line:  #e6e1ef;   /* bordo neutro */
  --ch-line2: rgba(208, 24, 171, .26);   /* bordo in tinta */
  --ch-txt:   #241c33;
  --ch-txt2:  #5d5674;
  --ch-txt3:  #736b88;   /* orari e metadati: piu' scuro di quanto sembri
                            necessario, ma a .64rem su fondo chiaro un grigio
                            leggero non si legge (qui sta a 4,4:1) */
  --ch-acc:   #b3128f;   /* accento scurito quanto basta per leggersi su bianco */
  --ch-err:   #c62828;

  position: fixed; inset: 0; z-index: 3600;
  display: flex; justify-content: flex-end;
}
.cm-ch-bg {
  position: absolute; inset: 0;
  background: rgba(3, 2, 8, .55);
  opacity: 0; transition: opacity .3s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.cm-ch.is-on .cm-ch-bg { opacity: 1; }

.cm-ch-panel {
  position: relative; z-index: 1;
  width: min(420px, 100%); height: 100%;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--ch-bg);
  border-left: 1px solid rgba(208, 24, 171, .3);
  box-shadow: -22px 0 60px rgba(0, 0, 0, .55);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.cm-ch.is-on .cm-ch-panel { transform: translateX(0); }

/* -- Intestazione -------------------------------------- */
.cm-ch-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: .6rem;
  padding: .85rem .95rem; min-height: 66px;
  border-bottom: 1px solid var(--ch-line);
  background: linear-gradient(180deg, rgba(208, 24, 171, .07), rgba(208, 24, 171, 0));
}
.cm-ch-back, .cm-ch-x {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--ch-bg2); border: 1px solid var(--ch-line);
  color: var(--ch-txt2); font-size: .88rem; transition: .2s;
}
.cm-ch-back:hover, .cm-ch-x:hover {
  color: var(--ch-acc); border-color: var(--ch-line2); background: rgba(208, 24, 171, .08);
}

.cm-chh { flex: 1 1 auto; display: flex; align-items: center; gap: .6rem; min-width: 0; }
.cm-chh-av {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--ch-line);
}
.cm-chh-av-gr {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(208, 24, 171, .16), rgba(140, 15, 112, .09));
  color: var(--ch-acc); font-size: .92rem;
}
.cm-chh-txt { min-width: 0; flex: 1 1 auto; }
.cm-chh-tit {
  font-size: .95rem; font-weight: 600; color: var(--ch-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-chh-sub {
  font-size: .72rem; color: var(--ch-txt3); margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-chh-act { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.cm-chh-b {
  display: inline-flex; align-items: center; gap: .3rem;
  height: 30px; padding: 0 .55rem; border-radius: 40px; cursor: pointer;
  background: var(--ch-bg2); border: 1px solid var(--ch-line);
  color: var(--ch-txt3); font-family: inherit; font-size: .72rem; transition: .2s;
}
.cm-chh-b:hover { color: var(--ch-txt); border-color: var(--ch-line2); }
.cm-chh-b.is-del:hover { color: var(--ch-err); border-color: rgba(198, 40, 40, .4); background: rgba(198, 40, 40, .07); }
.cm-chh-b.is-armed { color: var(--ch-err); border-color: rgba(198, 40, 40, .5); background: rgba(198, 40, 40, .09); }

/* L'avviso di errore eredita da .cm-alert, che e' pensato per
   il fondo scuro: dentro il pannello va rivestito, altrimenti
   resta un rettangolo rosa pallido illeggibile sul bianco. */
.cm-ch-err {
  margin: .7rem .95rem 0;
  border-color: rgba(198, 40, 40, .28);
  background: #fdeded;
  color: #96201f;
}

/* -- Vista elenco -------------------------------------- */
.cm-ch-home, .cm-ch-conv {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}

.cm-ch-tabs {
  flex: 0 0 auto; display: flex; gap: .3rem; padding: .7rem .8rem .55rem;
}
.cm-ch-tab {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .48rem .3rem; border-radius: 40px; cursor: pointer;
  background: var(--ch-bg2); border: 1px solid var(--ch-line);
  color: var(--ch-txt2); font-family: inherit; font-size: .76rem; transition: .2s;
}
.cm-ch-tab:hover { color: var(--ch-acc); border-color: var(--ch-line2); }
.cm-ch-tab.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2));
  box-shadow: 0 3px 12px rgba(208, 24, 171, .28);
}

.cm-ch-find {
  flex: 0 0 auto; position: relative; margin: 0 .8rem .55rem;
}
.cm-ch-find i {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--ch-txt3); font-size: .78rem; pointer-events: none;
}
.cm-ch-find input {
  width: 100%; padding: .55rem .8rem .55rem 2.1rem;
  background: var(--ch-bg2);
  border: 1px solid var(--ch-line); border-radius: 40px;
  color: var(--ch-txt); font-family: inherit; font-size: 16px;
  outline: none; transition: border-color .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
@media (min-width: 700px) { .cm-ch-find input { font-size: .84rem; } }
.cm-ch-find input::placeholder { color: var(--ch-txt3); }
.cm-ch-find input:focus { border-color: var(--ch-line2); background: #fff; }

.cm-ch-grnew {
  flex: 0 0 auto; margin: 0 .8rem .6rem; padding: .75rem;
  background: var(--ch-bg2); border: 1px solid var(--ch-line);
  border-radius: var(--cm-r-sm);
}
.cm-ch-grnew input {
  width: 100%; padding: .5rem .7rem; margin-bottom: .45rem;
  background: #fff;
  border: 1px solid var(--ch-line); border-radius: var(--cm-r-sm);
  color: var(--ch-txt); font-family: inherit; font-size: 16px;
  outline: none; transition: border-color .2s;
  -webkit-appearance: none; appearance: none;
}
@media (min-width: 700px) { .cm-ch-grnew input { font-size: .84rem; } }
.cm-ch-grnew input::placeholder { color: var(--ch-txt3); }
.cm-ch-grnew input:focus { border-color: var(--ch-line2); }
.cm-ch-grfoot { display: flex; justify-content: flex-end; gap: .45rem; }

/* Stessa ragione dell'avviso: .cm-btn-ghost e' bianco su
   trasparente, e sul pannello chiaro sparirebbe. */
.cm-ch-panel .cm-btn-ghost {
  background: #fff; border-color: var(--ch-line); color: var(--ch-txt2);
}
.cm-ch-panel .cm-btn-ghost:hover {
  border-color: var(--ch-line2); background: rgba(208, 24, 171, .06); color: var(--ch-acc);
}

.cm-ch-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 0 .8rem .6rem; scrollbar-width: thin;
  scrollbar-color: rgba(208, 24, 171, .35) transparent;
}
.cm-ch-list::-webkit-scrollbar { width: 7px; }
.cm-ch-list::-webkit-scrollbar-thumb { background: rgba(208, 24, 171, .3); border-radius: 40px; }

.cm-ch-load, .cm-ch-vuoto {
  padding: 1.6rem 1.1rem; text-align: center;
  font-size: .82rem; line-height: 1.6; color: var(--ch-txt3);

}
.cm-ch-vuoto i { display: block; font-size: 1.5rem; margin-bottom: .5rem; opacity: .45; }
.cm-ch-vuoto b { color: var(--ch-acc); }
.cm-ch-load i { margin-right: .4rem; }

.cm-ch-foot {
  flex: 0 0 auto; padding: .6rem .8rem .85rem;
  border-top: 1px solid var(--ch-line);
}
.cm-ch-crea {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem .9rem; border-radius: 40px; cursor: pointer;
  background: rgba(208, 24, 171, .06); border: 1px dashed var(--ch-line2);
  color: var(--ch-acc); font-family: inherit; font-size: .8rem; transition: .2s;
}
.cm-ch-crea:hover { background: rgba(208, 24, 171, .12); border-style: solid; }

/* -- Pallino di presenza ------------------------------- */
/* Il wrapper prende la misura dall'immagine che contiene, cosi'
   la stessa regola vale per gli avatar da 28, 38 e 42 px senza
   una variante per elenco. L'anello e' del colore della
   superficie sotto: e' quello che stacca il pallino
   dall'avatar, non il bordo. */
.cm-chav { position: relative; flex: 0 0 auto; display: inline-flex; }
.cm-chpt {
  position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--ch-bg); pointer-events: none;
}
.cm-chpt.is-online {
  background: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, .35), 0 0 7px rgba(34, 197, 94, .55);
}
.cm-chpt.is-assente { background: #e0a416; }

/* Sulle righe in evidenza e su quelle sorvolate il fondo non e'
   piu' bianco: l'anello lo segue, altrimenti resta il buco di
   un cerchio chiaro su fondo colorato. */
.cm-chi:hover .cm-chpt, .cm-chu:hover .cm-chpt { border-color: var(--ch-bg2); }
.cm-chi.has-new .cm-chpt { border-color: #fbeff8; }

/* La stessa parola nelle due righe di testo, cosi' il pallino
   non e' l'unico modo per capire lo stato: sul daltonismo il
   verde e l'ambra non si distinguono. */
.cm-chon { color: #15803d; font-weight: 600; }
.cm-chas { color: #a16207; font-weight: 600; }

/* -- Riga: conversazione ------------------------------- */
.cm-chi {
  width: 100%; display: flex; align-items: center; gap: .65rem; text-align: left;
  padding: .6rem .65rem; margin-bottom: .3rem; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--cm-r-sm);
  font-family: inherit; transition: background .2s, border-color .2s;
}
.cm-chi:hover { background: var(--ch-bg2); border-color: var(--ch-line); }
.cm-chi.has-new { background: rgba(208, 24, 171, .06); border-color: var(--ch-line2); }
.cm-chi-av {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--ch-line);
}
.cm-chi-av-gr {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(208, 24, 171, .16), rgba(140, 15, 112, .09));
  color: var(--ch-acc); font-size: .95rem;
}
.cm-chi-body { flex: 1 1 auto; min-width: 0; }
.cm-chi-top { display: flex; align-items: baseline; gap: .5rem; }
.cm-chi-tit {
  flex: 1 1 auto; min-width: 0; font-size: .86rem; font-weight: 600; color: var(--ch-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-chi-when { flex: 0 0 auto; font-size: .68rem; color: var(--ch-txt3); }
.cm-chi-ant {
  display: block; margin-top: .12rem; font-size: .77rem; color: var(--ch-txt2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-chi-ant b { color: var(--ch-txt); font-weight: 600; }
.cm-chi-ant i { color: var(--ch-txt3); }
.cm-chi-sub { display: block; margin-top: .1rem; font-size: .66rem; color: var(--ch-txt3); }
.cm-chi-n {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 .3rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 40px; font-size: .66rem; font-weight: 700; line-height: 1;
  color: #fff; background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2));
}

/* -- Riga: canale di gruppo ---------------------------- */
.cm-chg {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem; margin-bottom: .4rem;
  background: var(--ch-bg2); border: 1px solid var(--ch-line);
  border-radius: var(--cm-r-sm); transition: border-color .2s, background .2s;
}
.cm-chg:hover { border-color: var(--ch-line2); background: #fff; }
.cm-chg-ico {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--cm-r-sm);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(208, 24, 171, .16), rgba(140, 15, 112, .09));
  color: var(--ch-acc); font-size: .9rem;
}
.cm-chg-body { flex: 1 1 auto; min-width: 0; }
.cm-chg-tit {
  font-size: .85rem; font-weight: 600; color: var(--ch-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-chg-desc {
  margin-top: .1rem; font-size: .74rem; color: var(--ch-txt2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-chg-meta {
  margin-top: .2rem; display: flex; flex-wrap: wrap; gap: .5rem;
  font-size: .68rem; color: var(--ch-txt3);
}
.cm-chg-meta i { margin-right: .18rem; }
.cm-chg-au { color: var(--ch-acc); }
.cm-chg-go, .cm-chu-go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
  padding: .38rem .7rem; border-radius: 40px; cursor: pointer;
  background: rgba(208, 24, 171, .08); border: 1px solid var(--ch-line2);
  color: var(--ch-acc); font-family: inherit; font-size: .72rem; transition: .2s;
}
.cm-chg-go:hover, .cm-chu-go:hover {
  background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2));
  border-color: transparent; color: #fff;
}
.cm-chg-go:disabled, .cm-chu-go:disabled { opacity: .55; cursor: default; }
.cm-chu-go.is-off {
  background: var(--ch-bg2); border-color: var(--ch-line); color: var(--ch-txt3);
}
.cm-chu-go.is-off:hover { background: #fff; border-color: var(--ch-line2); color: var(--ch-txt); }

/* -- Riga: persona ------------------------------------- */
.cm-chu {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .65rem; margin-bottom: .25rem;
  border: 1px solid transparent; border-radius: var(--cm-r-sm);
  transition: background .2s, border-color .2s;
}
.cm-chu:hover { background: var(--ch-bg2); border-color: var(--ch-line); }
.cm-chu.is-bloccato { opacity: .6; }
.cm-chu-av {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--ch-line);
}
.cm-chu-body { flex: 1 1 auto; min-width: 0; }
.cm-chu-nick {
  font-size: .84rem; font-weight: 600; color: var(--ch-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-chu-sub { margin-top: .08rem; font-size: .68rem; color: var(--ch-txt3); }
.cm-chu-sub i { margin-right: .2rem; }

/* -- Vista conversazione ------------------------------- */
/* Il fondo dei messaggi e' appena piu' grigio del pannello:
   le bolle bianche degli altri hanno bisogno di staccare da
   qualcosa, altrimenti restano appese nel vuoto. */
.cm-ch-msgs {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: .9rem .85rem .4rem;
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--ch-bg3);
  scrollbar-width: thin; scrollbar-color: rgba(208, 24, 171, .35) transparent;
}
.cm-ch-msgs::-webkit-scrollbar { width: 7px; }
.cm-ch-msgs::-webkit-scrollbar-thumb { background: rgba(208, 24, 171, .3); border-radius: 40px; }

.cm-ch-empty {
  margin: auto; padding: 1.4rem 1rem; text-align: center;
  font-size: .82rem; line-height: 1.6; color: var(--ch-txt3);
}
.cm-ch-empty i { display: block; font-size: 1.6rem; margin-bottom: .5rem; opacity: .45; }

.cm-chi-ic { opacity: .7; font-size: .72rem; }

.cm-chm { display: flex; align-items: flex-end; gap: .5rem; max-width: 100%; }
.cm-chm.is-mio { flex-direction: row-reverse; }
.cm-chm-av {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--ch-line);
}
.cm-chm-b {
  max-width: 78%; padding: .48rem .7rem .3rem;
  background: #fff; border: 1px solid var(--ch-line);
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 1px 2px rgba(36, 28, 51, .05);
}
.cm-chm.is-mio .cm-chm-b {
  background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2));
  border-color: transparent;
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 2px 8px rgba(208, 24, 171, .25);
}
.cm-chm-who {
  font-size: .7rem; font-weight: 600; color: var(--ch-acc); margin-bottom: .12rem;
}
/* La foto occupa tutta la bolla. width/height arrivano in
   attributo dal server, quindi il browser conosce le
   proporzioni prima di scaricare l'immagine e la conversazione
   non sobbalza mentre carica. */
.cm-chm-img {
  display: block; margin: .05rem 0 .1rem;
  border-radius: 10px; overflow: hidden; line-height: 0;
  background: var(--ch-bg3); cursor: zoom-in;
}
.cm-chm-img img {
  display: block; width: 100%; height: auto;
  max-height: 340px; object-fit: cover;
}
.cm-chm-img + .cm-chm-t { margin-top: .35rem; }
/* Foto senza didascalia: la cornice bianca attorno diventa una
   fascia inutile, si stringe fino a fare da sola da bordo. */
.cm-chm-b.is-solofoto { padding: .25rem .25rem .1rem; }
.cm-chm-b.is-solofoto .cm-chm-f { padding: 0 .35rem .15rem; margin-top: .1rem; }

.cm-chm-t {
  font-size: .84rem; line-height: 1.5; color: var(--ch-txt);
  overflow-wrap: anywhere;
}
.cm-chm.is-mio .cm-chm-t { color: #fff; }
.cm-chm-f {
  display: flex; align-items: center; justify-content: flex-end; gap: .35rem;
  margin-top: .12rem;
}
.cm-chm-h { font-size: .64rem; color: var(--ch-txt3); }
.cm-chm.is-mio .cm-chm-h { color: rgba(255, 255, 255, .75); }
.cm-chm-del {
  display: inline-flex; align-items: center; gap: .25rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(255, 255, 255, .7); font-family: inherit; font-size: .64rem; transition: color .2s;
}
.cm-chm-del:hover, .cm-chm-del.is-armed { color: #fff; }

.cm-ch-lock {
  flex: 0 0 auto; margin: 0; padding: .7rem .85rem;
  background: var(--ch-bg2); border-top: 1px solid var(--ch-line);
  font-size: .76rem; color: var(--ch-txt3); text-align: center;
}
.cm-ch-lock i { margin-right: .35rem; }

.cm-ch-new {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: .5rem;
  padding: .6rem .85rem .85rem; border-top: 1px solid var(--ch-line);
  background: var(--ch-bg);
}
.cm-ch-new-r { display: flex; align-items: flex-end; gap: .5rem; }

/* Pulsante dell'allegato: stessa misura dell'invio, ma in tono
   neutro. Il colore pieno resta all'azione principale. */
.cm-ch-att {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--ch-bg2); border: 1px solid var(--ch-line);
  color: var(--ch-txt2); font-size: .92rem;
  transition: color .2s, border-color .2s, background .2s;
}
.cm-ch-att:hover {
  color: var(--ch-acc); border-color: var(--ch-line2); background: rgba(208, 24, 171, .08);
}

/* Foto scelta e non ancora spedita. */
.cm-ch-foto {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .45rem; border-radius: 12px;
  background: var(--ch-bg2); border: 1px solid var(--ch-line2);
}
.cm-ch-foto img {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 8px; object-fit: cover; background: var(--ch-bg3);
}
.cm-ch-foto-txt {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem;
}
.cm-ch-foto-txt b {
  font-size: .76rem; font-weight: 600; color: var(--ch-txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-ch-foto-txt span { font-size: .68rem; color: var(--ch-txt3); }
.cm-ch-foto-x {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: none; border: 0; color: var(--ch-txt3); font-size: .84rem;
  transition: color .2s, background .2s;
}
.cm-ch-foto-x:hover { background: rgba(198, 40, 40, .1); color: var(--ch-err); }

/* Trascinamento in corso sulla conversazione. */
.cm-ch-conv.is-drop { outline: 2px dashed var(--ch-line2); outline-offset: -6px; }
.cm-ch-new textarea {
  flex: 1 1 auto; min-height: 40px; max-height: 120px; resize: none;
  padding: .55rem .8rem;
  background: var(--ch-bg2);
  border: 1px solid var(--ch-line); border-radius: 18px;
  color: var(--ch-txt); font-family: inherit; font-size: 16px; line-height: 1.45;
  outline: none; transition: border-color .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
@media (min-width: 700px) { .cm-ch-new textarea { font-size: .85rem; } }
.cm-ch-new textarea::placeholder { color: var(--ch-txt3); }
.cm-ch-new textarea:focus { border-color: var(--ch-line2); background: #fff; }
.cm-ch-send {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2));
  border: 1px solid transparent;
  color: #fff; font-size: .9rem;
  box-shadow: 0 3px 12px rgba(208, 24, 171, .3);
  transition: transform .2s, box-shadow .2s;
}
.cm-ch-send:hover { transform: scale(1.06); box-shadow: 0 5px 16px rgba(208, 24, 171, .42); }
.cm-ch-send:disabled { opacity: .5; cursor: default; transform: none; }

/* -- Foto a schermo intero ----------------------------- */
/* z-index sopra il cassetto (3600): il visore lo copre, non ci
   finisce dentro. */
.cm-chlb {
  position: fixed; inset: 0; z-index: 3700;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(3, 2, 8, .9);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  cursor: zoom-out;
}
.cm-chlb[hidden] { display: none; }
.cm-chlb img {
  max-width: 100%; max-height: 100%;
  border-radius: 10px; box-shadow: 0 18px 60px rgba(0, 0, 0, .6);
}
.cm-chlb-x {
  position: absolute; top: 1rem; right: 1rem;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; font-size: 1rem; transition: background .2s;
}
.cm-chlb-x:hover { background: rgba(255, 255, 255, .24); }

/* -- Adattamenti --------------------------------------- */
@media (max-width: 620px) {
  .cm-chfab { right: 1.05rem; bottom: 1.05rem; width: 54px; height: 54px; font-size: 1.22rem; }
  body.cm-chat-on #gotop { right: 1.25rem; bottom: 5.4rem; }
  .cm-ch-panel { width: 100%; border-left: 0; }
  .cm-chm-b { max-width: 84%; }
  .cm-chm-img img { max-height: 280px; }
  .cm-chlb { padding: .6rem; }
  .cm-chlb-x { top: .6rem; right: .6rem; width: 38px; height: 38px; }
  .cm-chg { flex-wrap: wrap; }
  .cm-chg-go { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-ch-bg, .cm-ch-panel, .cm-chfab { transition: none; }
  .cm-ch-panel { transform: none; }
  .cm-chfab.has-new .cm-chfab-alone { animation: none; }
  .cm-chfab.is-pop { animation: none; }
}


/* ==========================================================
   Moderazione delle liste
   Le liste utente sono pubbliche solo dopo l'approvazione admin.
   Tre elementi: badge di stato, pannello esplicativo, nota.
   ========================================================== */

/* Badge di stato: area riservata, scheda lista, editor.
   Le varianti condividono la forma, cambiano solo i colori. */
.cm-revbadge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  padding: .3rem .6rem; border-radius: 999px;
  border: 1px solid transparent; margin-bottom: .5rem;
}
.cm-revbadge.is-ok    { color: var(--cm-ok);   background: rgba(52, 201, 138, .1);  border-color: rgba(52, 201, 138, .3); }
.cm-revbadge.is-ko    { color: var(--cm-err);  background: rgba(248, 112, 112, .1); border-color: rgba(248, 112, 112, .3); }
.cm-revbadge.is-wait  { color: var(--cm-warn); background: rgba(240, 180, 41, .1);  border-color: rgba(240, 180, 41, .32); }
/* modifica in verifica: verde di fondo (e' online) ma bordo ambra */
.cm-revbadge.is-ok.is-dirty { color: var(--cm-warn); background: rgba(240, 180, 41, .1); border-color: rgba(240, 180, 41, .32); }

/* Pannello esplicativo: sostituisce la vecchia checkbox "pubblica".
   Non c'e' nulla da scegliere, quindi non deve somigliare a un
   controllo: bordo sinistro colorato, nessuna affordance di click. */
.cm-modbox {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .9rem 1rem; border-radius: var(--cm-r-sm);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--cm-line2); border-left-width: 3px;
}
.cm-modbox.is-ok            { border-left-color: var(--cm-ok); }
.cm-modbox.is-ko            { border-left-color: var(--cm-err); }
.cm-modbox.is-wait          { border-left-color: var(--cm-warn); }
.cm-modbox.is-ok.is-dirty   { border-left-color: var(--cm-warn); }

/* Solo nella scheda dettaglio lista: prima era un margine inline. */
.cm-modbox-detail { margin: 1rem 0; }

.cm-modbox-i { font-size: 1.05rem; line-height: 1.4; color: var(--cm-txt3); flex: none; }
.cm-modbox.is-ok          .cm-modbox-i { color: var(--cm-ok); }
.cm-modbox.is-ko          .cm-modbox-i { color: var(--cm-err); }
.cm-modbox.is-wait        .cm-modbox-i { color: var(--cm-warn); }
.cm-modbox.is-ok.is-dirty .cm-modbox-i { color: var(--cm-warn); }

.cm-modbox-b { min-width: 0; }
.cm-modbox-b strong { display: block; font-size: .84rem; color: var(--cm-txt); margin-bottom: .2rem; }
.cm-modbox-b p { font-size: .77rem; line-height: 1.55; color: var(--cm-txt2); margin: 0; }
.cm-modbox-b p + p { margin-top: .5rem; }
.cm-modbox-b code {
  font-size: .73rem; padding: .05rem .3rem; border-radius: 4px;
  background: rgba(255, 255, 255, .06); color: var(--cm-txt);
}
.cm-modbox-nota {
  padding: .5rem .65rem; border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: var(--cm-txt2) !important; font-style: italic;
}
.cm-modbox-nota .fa { color: var(--cm-txt3); margin-right: .3rem; font-size: .68rem; }

@media (max-width: 520px) {
  .cm-modbox { padding: .75rem .85rem; gap: .65rem; }
  .cm-modbox-i { font-size: .95rem; }
}

/* Link di test temporaneo: stessa famiglia del modbox, accento verde
   perche' e' un'azione utile (non un avviso), bordo tratteggiato per
   segnalare che e' un contenuto "provvisorio" e non l'URL definitivo. */
.cm-testbox {
  margin-top: 1.3rem; padding: 1.05rem 1.15rem; border-radius: var(--cm-r-sm);
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--cm-line2); border-left: 3px solid var(--cm-warn);
}

.cm-testbox-tit {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .92rem; font-weight: 600; color: #f7f4ff;
}
.cm-testbox-tit .fa-flask { color: var(--cm-warn); font-size: .88rem; }

/* Spiegazione: si stende per tutta la larghezza della card, senza
   limite in ch, cosi' sta su una riga sola invece di andare a capo. */
.cm-testbox-p {
  font-size: .77rem; line-height: 1.6; color: var(--cm-txt2);
  margin: .5rem 0 0;
}
.cm-testbox-p strong { color: var(--cm-txt); font-weight: 600; }

/* Riga azione: pulsante e, appena generato, campo URL + scadenza tutti
   sulla stessa riga. Il pulsante non si comprime, il campo si allarga. */
.cm-testbox-res {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: .95rem;
}
.cm-testbox-res > .cm-btn { flex: 0 0 auto; }
.cm-testbox-out {
  flex: 1 1 320px; min-width: 0;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.cm-testbox-out[hidden] { display: none; }
.cm-testbox-out .cm-linkbox { flex: 1 1 260px; min-width: 0; margin: 0; }
.cm-testbox-scad {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .75rem; border-radius: 30px; white-space: nowrap;
  font-size: .74rem; font-weight: 700; color: var(--cm-warn);
  background: rgba(240, 180, 41, .12); border: 1px solid rgba(240, 180, 41, .32);
}

/* Messaggio inline (errori di validazione, rete). */
.cm-testbox-msg { flex: 1 1 auto; font-size: .77rem; line-height: 1.55; color: var(--cm-txt2); margin: 0; }
.cm-testbox-msg.is-err { color: var(--cm-err); }

@media (max-width: 560px) {
  .cm-testbox-res > .cm-btn { width: 100%; }
  .cm-testbox-out { flex-basis: 100%; }
  .cm-testbox-out .cm-linkbox { flex-basis: 100%; }
}

/* Anteprima riservata: stesso ingombro del pulsante attivo, ma spento.
   Non e' disabilitato (porta al login), quindi resta cliccabile. */
.cm-plgo.is-lock {
  background: none; border-color: var(--cm-line2);
  color: var(--cm-txt3); text-decoration: none;
}
.cm-plgo.is-lock:hover {
  filter: none; color: var(--cm-txt2);
  border-color: var(--cm-line); background: rgba(255, 255, 255, .04);
}
/* ======================================================
   RUOLO DELL'ISCRITTO: scelta Viewer / Streamer
   (cm_area.php - passo 2)
   ====================================================== */

/* -- Intestazione della schermata di scelta ------------ */
.cm-pickhead { text-align: center; margin-bottom: 1.6rem; }
.cm-pickhead .cm-avatar-lg { margin: 0 auto .9rem; display: block; }
.cm-pickhead h1 {
  font-size: clamp(1.4rem, 5vw, 1.9rem); font-weight: 700;
  color: #f7f4ff; letter-spacing: -.01em; margin-bottom: .5rem;
}
.cm-pickhead p {
  font-size: .86rem; color: var(--cm-txt2); line-height: 1.6;
  max-width: 52ch; margin: 0 auto;
}

/* -- Le due card -------------------------------------- */
.cm-pickgrid { display: grid; grid-template-columns: 1fr; gap: .9rem; }

.cm-pick { display: block; cursor: pointer; }

/* Il radio resta nel flusso per la tastiera e per i lettori di
   schermo: si nasconde alla vista, non all'accessibilita'. */
.cm-pick-r {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}

.cm-pick-in {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 1.4rem 1.2rem 1.2rem;
  background: var(--cm-panel); border: 1.5px solid var(--cm-line2);
  border-radius: var(--cm-r);
  transition: border-color .2s, box-shadow .2s, transform .2s, background-color .2s;
}
.cm-pick:hover .cm-pick-in { border-color: var(--cm-line); transform: translateY(-2px); }

.cm-pick-r:checked + .cm-pick-in {
  border-color: var(--cm-acc);
  box-shadow: 0 0 0 1px var(--cm-acc), 0 12px 34px rgba(208, 24, 171, .18);
}
.cm-pick-r:focus-visible + .cm-pick-in {
  outline: 2px solid var(--cm-acc-sf); outline-offset: 3px;
}

/* La card Streamer e' quella che richiede l'approvazione: l'oro e'
   lo stesso segnale usato per il premium e per la barra dell'hub. */
.cm-pick-str .cm-pick-ico { color: var(--cm-gold); border-color: rgba(240, 180, 41, .35); background: rgba(240, 180, 41, .1); }
.cm-pick-str .cm-pick-r:checked + .cm-pick-in,
.cm-pick-str.is-sel .cm-pick-in {
  border-color: var(--cm-gold);
  box-shadow: 0 0 0 1px rgba(240, 180, 41, .55), 0 12px 34px rgba(240, 180, 41, .14);
}

/* -- Spunta di selezione ------------------------------ */
.cm-pick-ck {
  position: absolute; top: .8rem; right: .8rem;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--cm-acc); color: #fff;
  font-size: .72rem; line-height: 1;
  opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s;
}
.cm-pick-r:checked + .cm-pick-in .cm-pick-ck { opacity: 1; transform: scale(1); }
.cm-pick-str .cm-pick-r:checked + .cm-pick-in .cm-pick-ck { background: var(--cm-gold); color: #241703; }

/* -- Contenuto della card ----------------------------- */
.cm-pick-ico {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  margin-bottom: .9rem; border-radius: 14px;
  background: rgba(208, 24, 171, .1); border: 1px solid var(--cm-line);
  color: var(--cm-acc-sf); font-size: 1.35rem;
}
.cm-pick-t { display: block; font-size: 1.15rem; font-weight: 700; color: #f7f4ff; }
.cm-pick-s { display: block; font-size: .82rem; color: var(--cm-txt2); margin-top: .15rem; }
.cm-pick-l { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0 .9rem; }
.cm-pick-l > span {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .81rem; line-height: 1.5; color: var(--cm-txt);
}
.cm-pick-l > span i { color: var(--cm-ok); font-size: .72rem; margin-top: .3rem; flex-shrink: 0; }
.cm-pick-note {
  display: block; margin-top: auto; padding-top: .8rem;
  border-top: 1px solid var(--cm-line2);
  font-size: .74rem; color: var(--cm-txt3);
}
.cm-pick-str .cm-pick-note { color: var(--cm-gold); }

/* -- Consenso al profilo pubblico e piede del form ---- */
.cm-pickcons {
  margin-top: 1rem; padding: .95rem 1.05rem;
  border: 1px solid rgba(240, 180, 41, .3); border-radius: var(--cm-r-sm);
  background: rgba(240, 180, 41, .06);
}
.cm-pickcons .cm-check { margin: 0; font-size: .8rem; line-height: 1.55; }
.cm-pickcons[hidden] { display: none; }
.cm-pickfoot { margin-top: 1.2rem; text-align: center; }
.cm-pickfoot .cm-help { margin-top: .7rem; }

/* -- Etichetta del ruolo nell'intestazione dell'area --- */
.cm-rolebadge {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .7rem; border-radius: 30px;
  border: 1px solid var(--cm-line); background: rgba(208, 24, 171, .1);
  color: var(--cm-acc-sf); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.cm-rolebadge.is-str {
  border-color: rgba(240, 180, 41, .4); background: rgba(240, 180, 41, .1);
  color: var(--cm-gold-sf);
}

/* -- Invito ad accendere la pagina pubblica ----------- */
.cm-strinvite {
  display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.1rem; margin-bottom: 1.4rem;
  border: 1px solid rgba(240, 180, 41, .3); border-radius: var(--cm-r);
  background: rgba(240, 180, 41, .06);
}
.cm-strinvite > i { color: var(--cm-gold); font-size: 1.2rem; margin-top: .15rem; }
.cm-strinvite > div { flex: 1; min-width: 200px; }
.cm-strinvite strong { display: block; font-size: .92rem; color: #f7f4ff; margin-bottom: .3rem; }
.cm-strinvite p { font-size: .8rem; color: var(--cm-txt2); line-height: 1.55; }
.cm-strinvite .cm-btn { flex-shrink: 0; align-self: center; }

/* -- Riquadro della richiesta ------------------------- */
.cm-strask { margin-top: 1.6rem; }
.cm-strask .cm-check { margin: .2rem 0 1rem; font-size: .8rem; line-height: 1.55; }
.cm-strask textarea { min-height: 76px; }

/* -- Sopra lo sfondo immagine ------------------------- */
/* Le card della vetrina e quelle della scelta poggiano sulla foto
   dell'area riservata: stesso trattamento degli altri pannelli. */
.cm-onbg .cm-pick-in,
.cm-onbg .cm-card,
.cm-onbg .cm-strinvite,
.cm-onbg .cm-pickcons {
  background-color: rgba(13, 8, 24, .84);
  -webkit-backdrop-filter: blur(15px) saturate(1.12);
  backdrop-filter: blur(15px) saturate(1.12);
  box-shadow: 0 12px 42px rgba(0, 0, 0, .45);
}
.cm-onbg .cm-pick-r:checked + .cm-pick-in {
  box-shadow: 0 0 0 1px var(--cm-acc), 0 12px 42px rgba(0, 0, 0, .5);
}
.cm-onbg .cm-pick-str .cm-pick-r:checked + .cm-pick-in {
  box-shadow: 0 0 0 1px rgba(240, 180, 41, .55), 0 12px 42px rgba(0, 0, 0, .5);
}
.cm-onbg .cm-pickhead h1,
.cm-onbg .cm-pickhead p {
  text-shadow: 0 1px 2px rgba(7, 5, 14, .85), 0 2px 14px rgba(7, 5, 14, .55);
}

@media (min-width: 641px) {
  .cm-pickgrid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .cm-pick-in  { padding: 1.6rem 1.4rem 1.3rem; }
  .cm-pickfoot .cm-btn-full { max-width: 340px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-pick-in, .cm-pick-ck { transition: none; }
  .cm-pick:hover .cm-pick-in { transform: none; }
}

/* ======================================================
   Statistiche della modale di benvenuto: quattro voci
   (Liste, Canali, Utenti, Streamers) al posto di tre.
   La regola originale sta piu' su con repeat(3, 1fr) e non
   si tocca: qui la si sovrascrive, e auto-fit manda le voci
   su due righe sui telefoni stretti invece di schiacciarle.
   ====================================================== */
.cm-wel-stats { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }

/* ======================================================
   Sfondo fotografico dell'hub + bacheca link staccata
   (community.php, cm_bacheca.php, cm_forum.php, cm_streamers.php,
    community_lista.php)
   ====================================================== */

/* -- Bacheca link: sezione autonoma in fondo alla pagina --
   .cm-page tiene un padding alto quanto la navbar fissa perche'
   di solito e' la prima sezione della pagina. Quella della bacheca
   e' la seconda: il padding lascerebbe un vuoto di 68px in mezzo
   alla pagina, su tutte le larghezze. La regola gemella sulla
   sezione sopra chiude il conto: fra la striscia del sostegno e la
   bacheca resta esattamente lo stacco di prima, che e' il
   margin-top di .cm-lkbox, ne' piu' ne' meno.
   Il padding basso con env(safe-area-inset-bottom) ora sta dove
   serve: e' la bacheca l'ultima sezione della pagina. */
.cm-page-liste { padding-bottom: 0; }
.cm-page-lk    { padding-top: 0; }

/* -- Griglia dei canali a blocchi (community_lista.php) --
   I riquadri oltre la soglia restano in pagina ma nascosti: il
   pulsante li scopre a gruppi togliendo la classe. Nascosti col
   display, non con l'opacita', cosi' le immagini loading="lazy"
   che contengono non partono finche' non servono.
   La specificita' con .cm-chgrid davanti serve a battere il
   display:flex di .cm-chip senza ricorrere a !important. */
.cm-chgrid .cm-chip.is-oltre { display: none; }
.cm-chmore { display: flex; justify-content: center; margin-top: .9rem; }

/* -- Colonna di destra della pagina lista (community_lista.php)
   Prima conteneva solo l'aside "Prova i canali", che si prendeva la
   colonna da solo con le proprie regole. Ora la colonna e' questo
   contenitore e le tre carte ci stanno dentro incolonnate: le
   regole vecchie dell'aside vanno tolte di dosso, non riscritte.
   Il selettore con .cm-side-col davanti ha specificita' piu' alta
   di quello originale, quindi vince senza toccarlo.

   La colonna non e' piu' sticky: con tre carte una sopra l'altra
   supera in altezza la finestra, e un blocco appiccicato piu' alto
   dello schermo non si riesce a leggere fino in fondo. */
.cm-side-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 2rem;
  min-width: 0;
}
.cm-side-col > .cm-plcard  { margin-top: 0; }
.cm-side-col > .cm-panel   { margin-bottom: 0; }
.cm-side-col > .cm-follbox { position: static; top: auto; }
.cm-side-col .cm-plcard-h  { margin-bottom: .7rem; }

/* Il riquadro delle altre liste riusa le righe dei follower: stessa
   forma, tre colonne con icona, testo su due righe e freccia. Al
   posto dell'avatar tondo ci va il logo della lista, che e'
   quadrato e va contenuto senza deformarlo. */
.cm-altra-lg {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 9px;
  border: 1px solid var(--cm-line2); background: var(--cm-panel2);
}
.cm-altra-lg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cm-altra-lg i   { font-size: .85rem; color: rgba(224, 102, 204, .55); }

@media (min-width: 1025px) {
  .cm-underbar .cm-side-col { flex: 1 1 330px; max-width: 390px; }
  .cm-underbar .cm-side-col > .cm-plcard {
    flex: none; max-width: none;
    position: static; top: auto;
  }
}

/* -- Link .m3u: lo scarica in riga con la copia (community_lista.php)
   Da desktop il pulsante "Scarica .m3u" sale accanto a quello della
   copia invece di stare su una riga sua: il blocco e' largo quanto
   la pagina e quella riga sotto era quasi tutta vuota. Da mobile
   non cambia niente, li' lo spazio in orizzontale non c'e'.

   Le due esclusioni non sono decorative: .cm-m3u lo portano anche il
   riquadro del muro per gli ospiti (.cm-m3u-lock) e quello dei
   commenti in attesa (.cm-emptybox), che sono impaginati in colonna
   dalle loro regole. Senza i :not, arrivando questo blocco in fondo
   al foglio, il display:flex in riga li ribalterebbe entrambi. */
@media (min-width: 1025px) {
  .cm-m3u:not(.cm-m3u-lock):not(.cm-emptybox) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
  }
  /* L'etichetta resta una riga sua, larga tutto. */
  .cm-m3u:not(.cm-m3u-lock):not(.cm-emptybox) > .cm-m3u-h {
    flex: 0 0 100%;
    margin-bottom: 0;
  }
  /* Il campo con l'indirizzo si prende lo spazio che avanza; il
     min-width:0 gli permette di stringersi davvero invece di
     sfondare la riga con un indirizzo lungo. */
  .cm-m3u:not(.cm-m3u-lock):not(.cm-emptybox) > .cm-linkbox {
    flex: 1 1 240px;
    min-width: 0;
    margin-bottom: 0;
  }
  .cm-m3u:not(.cm-m3u-lock):not(.cm-emptybox) > .cm-m3u-btns {
    flex: 0 0 auto;
  }
}

/* ======================================================
   Sfondo fotografico dell'hub (SOLO desktop)

   Due livelli fissi a schermo intero, la foto e il suo velo,
   esattamente come .cm-authbg / .cm-authbg-veil delle pagine
   riservate. Sono ancorati alla finestra: non si allungano con la
   pagina, non si ridimensionano se le card sono sei o sessanta,
   e scorrendo restano fermi.

   Perche' cosi' e non con background-attachment: fixed sulla
   sezione, come nel primo giro: con l'attachment fisso il fondo
   appartiene a un elemento alto quanto tutta la fascia, e il
   browser deve ridisegnarlo a ogni fotogramma dello scorrimento.
   E' da li' che venivano gli scatti. Un elemento position:fixed
   con dentro un'immagine ferma diventa invece un livello a se',
   che il compositore riusa senza ridipingere nulla. Il
   translateZ(0) lo chiede esplicitamente.

   Perche' liste-blur.jpg e non liste.jpg: la sfocatura e' gia'
   cotta nell'asset, come si e' dovuto fare per .cm-authbg (vedi il
   blocco "FIX iOS" piu' su). Un filter: blur() a runtime su un
   livello a schermo intero e' proprio il costo che qui si evita.
   liste.jpg resta in root, non serve piu' a questa regola ma non
   si tocca.

   z-index 0 come .cm-authbg: la hero (z-index 1), la barra
   dell'hub (2), le sezioni .cm-page (1) e il footer (20, da
   style.css) stanno tutti sopra.

   I due divi si mettono subito dopo l'include di header.php, non
   piu' in basso: su queste pagine la hero sta dentro un if e lo
   sfondo deve esserci per tutti.

   Le pagine che hanno gia' .cm-authbg non devono prendere i divi
   alla cieca: sono cm_streamer.php, cm_area.php, cm_epg_oggi.php,
   cm_forum_domanda.php, cm_forum_nuova.php e le pagine di accesso.
   Due sfondi sovrapposti si annullerebbero a vicenda.
   L'eccezione e' community_lista.php, dove i divi dell'hub stanno
   PRIMA di quelli vecchi e la regola qui sotto spegne .cm-authbg da
   desktop. Da mobile succede il contrario ed e' quello che si vuole:
   li' i divi dell'hub sono a display:none e la pagina resta com'era.
   ====================================================== */

/* Da mobile i due livelli non esistono: display:none evita anche
   lo scaricamento dell'immagine. Il telefono resta identico. */
.cm-hubbg,
.cm-hubbg-veil { display: none; }

@media (min-width: 1025px) {

  .cm-hubbg,
  .cm-hubbg-veil {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transform: translateZ(0);
  }

  .cm-hubbg {
    /* unica manopola: quanto si vede la foto */
    --cm-hubbg-op: .55;

    background-image: url('liste-blur.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: var(--cm-hubbg-op);
  }

  /* Velo. Due sorgenti di colore riportano la foto (neutra, in
     bianco e nero) dentro la palette magenta/viola; la
     vignettatura chiude gli angoli senza spegnere i fianchi, che
     sono la parte che si vede di piu'; la velatura piatta tiene il
     contrasto del testo appoggiato direttamente sopra la foto. */
  .cm-hubbg-veil {
    background:
      radial-gradient(1200px 620px at 14% -6%, rgba(208, 24, 171, .20), transparent 70%),
      radial-gradient(1000px 700px at 90% 4%,  rgba(120, 60, 220, .15), transparent 72%),
      radial-gradient(130% 115% at 50% 40%, transparent 42%, rgba(7, 5, 14, .48) 100%),
      linear-gradient(180deg, rgba(7, 5, 14, .34) 0%, rgba(7, 5, 14, .44) 100%);
  }

  /* community_lista.php: da qui in su comanda lo sfondo dell'hub,
     quello vecchio si spegne. Il combinatore ~ chiede che i divi
     dell'hub vengano prima nel markup, ed e' cosi' che sono messi. */
  .cm-hubbg ~ .cm-authbg,
  .cm-hubbg ~ .cm-authbg-veil { display: none; }

  /* Le regole che seguono valgono solo dove i due livelli ci sono
     davvero: il combinatore ~ le lega ai divi, che stanno prima di
     tutto il contenuto. Sulle pagine senza sfondo non scattano. */

  /* Le schede dell'ordinamento sono quasi trasparenti (3% di
     bianco): sul fondo scuro andava bene, sopra la foto il testo
     ci si perde. Qui prendono una tinta coprente.
     Le due esclusioni servono perche' questo blocco sta in fondo al
     foglio: a parita' di specificita' vincerebbe sulla scheda
     attiva e sul pulsante "Oggi in TV", spegnendone i colori. */
  .cm-hubbg ~ * .cm-tab:not(.on):not(.cm-tvbtn) {
    background-color: rgba(13, 8, 24, .78);
  }

  /* Titoli e conteggi appoggiati direttamente sulla foto. */
  .cm-hubbg ~ * .cm-sec-head h1,
  .cm-hubbg ~ * .cm-sec-head h2,
  .cm-hubbg ~ * .cm-resnum {
    text-shadow: 0 1px 2px rgba(7, 5, 14, .85), 0 2px 14px rgba(7, 5, 14, .55);
  }

  /* Le card sono opache e restano leggibili da sole: qui si aggiunge
     solo la profondita' che le stacca dalla foto. Le quattro regole
     ripetono i valori originali invece di sostituirli, perche' un
     box-shadow secco spegnerebbe l'anello dorato delle premium e
     l'alone dell'hover. */
  .cm-hubbg ~ * .cm-card:not(.cm-card-premium) {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  }
  .cm-hubbg ~ * .cm-card:not(.cm-card-premium):hover {
    box-shadow: var(--cm-sh), 0 14px 34px rgba(0, 0, 0, .5);
  }
  .cm-hubbg ~ * .cm-card-premium {
    box-shadow: 0 0 0 1px rgba(240, 180, 41, .35), 0 14px 34px rgba(0, 0, 0, .5);
  }
  .cm-hubbg ~ * .cm-card-premium:hover {
    box-shadow: 0 0 0 1px rgba(240, 180, 41, .5), var(--cm-sh), 0 14px 34px rgba(0, 0, 0, .5);
  }
}