/* ============================================================
   cm_ui.css - Community IPTV
   [AREA-19102026] Stile comune delle pagine dell'utente
   (19/10/2026, terza versione: aggiunti modifica lista e profilo)
   [NOTIFICHE-19102026] quarta versione: aggiunte le notifiche
   (risposta dalla riga) e il canale segnalato nell'editor.
   [COMMUNITY-20102026] quinta versione: pagina larga come la
   testata del sito, come le pagine pubbliche (cm_hub.css).
   [EPGMULTI-21102026] sesta versione: guide TV multiple
   nell'editor della lista (in fondo, classi ui-eg-).
   [AREA-22102026] settima versione: immagine nel riquadro "La mia
   lista" dell'area riservata (in fondo, classi ui-mia-f e ui-mia-img).
   [NOVITA-23102026] ottava versione: pagina "Novita' per te"
   (cm_novita.php, in fondo, classi ui-nv-) e pulsanti rapidi
   dell'area su una riga sotto il saluto su iPhone (ui-head-row).
   (area riservata, poi modifica lista, notifiche, la mia lista,
   profilo). Linea semplice: sfondo grafite pieno, superfici
   grigie, magenta solo per i pulsanti principali, verde, giallo
   e rosso solo per gli stati.

   Il grafite e' lo stesso che style.css usa gia' su iPhone
   (--mb-bg / --mb-surf / --mb-surf2): qui vale per tutte le
   larghezze. Si carica solo sulle pagine che lo chiedono con
   $extraHead, quindi le regole su body e #navbar toccano solo
   quelle pagine.

   Tutte le classi hanno il prefisso ui- per non scontrarsi con
   community.css, che resta caricato.
   ============================================================ */

:root {
  --ui-deep:   #15181d;   /* barra in alto, come style.css */
  --ui-bg:     #1c2026;   /* sfondo pagina */
  --ui-surf:   #242930;   /* card */
  --ui-surf2:  #2b3139;   /* campi, pulsanti al passaggio */
  --ui-line:   rgba(255, 255, 255, .08);
  --ui-line2:  rgba(255, 255, 255, .14);
  --ui-txt:    #eceef1;
  --ui-txt2:   #a3abb5;
  --ui-txt3:   #78818c;
  --ui-acc:    #d018ab;   /* magenta del sito */
  --ui-acc-h:  #b8149a;
  --ui-ok:     #34c98a;
  --ui-warn:   #f0b429;
  --ui-err:    #f87070;
  --ui-r:      12px;
  --ui-r-sm:   8px;
}

body { background: var(--ui-bg); color: var(--ui-txt); }
#navbar.solid { background: rgba(21, 24, 29, .97); }

/* -- Pagina --------------------------------------------------- */
/* Larga come la testata del sito (.nav-wrap di style.css): stessi
   1200px e stessi margini, sul computer e sul telefono. Il contenuto
   parte sotto il logo e finisce sotto l'avatar. */
.ui-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(68px + 2.2rem) clamp(1.25rem, 4vw, 2.5rem) calc(6rem + env(safe-area-inset-bottom));
}

/* -- Testata: avatar, nome, ruolo ---------------------------- */
.ui-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.4rem; }
.ui-av {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--ui-line2);
}
.ui-id { flex: 1; min-width: 0; }
.ui-id h1 {
  margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em; color: var(--ui-txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-id p { margin: .25rem 0 0; font-size: .92rem; line-height: 1.4; color: var(--ui-txt2); }
.ui-role {
  display: inline-block; margin-right: .4rem; padding: .1rem .5rem;
  border-radius: 6px; background: var(--ui-surf2);
  font-size: .78rem; font-weight: 600; color: var(--ui-txt);
}
.ui-quick { display: flex; gap: .5rem; flex-shrink: 0; }

/* -- Pulsanti ------------------------------------------------- */
.ui-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: 40px; padding: 0 1rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-surf); color: var(--ui-txt);
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ui-btn:hover { background: var(--ui-surf2); color: var(--ui-txt); }
.ui-btn i { font-size: .9em; color: var(--ui-txt2); }
.ui-btn:disabled { opacity: .45; cursor: not-allowed; }
.ui-btn-p { background: var(--ui-acc); border-color: var(--ui-acc); color: #fff; }
.ui-btn-p i { color: #fff; }
.ui-btn-p:hover { background: var(--ui-acc-h); border-color: var(--ui-acc-h); color: #fff; }
.ui-btn-ko { color: var(--ui-err); border-color: rgba(248, 112, 112, .35); }
.ui-btn-ko i { color: var(--ui-err); }
.ui-btn-ko:hover { background: rgba(248, 112, 112, .1); color: var(--ui-err); }
.ui-btn-sm { height: 34px; padding: 0 .8rem; font-size: .85rem; }
.ui-btn-ic { width: 40px; padding: 0; }
.ui-btn.is-done, .ui-btn.is-done i { color: var(--ui-ok); }
.ui-btn-p.is-done, .ui-btn-p.is-done i { color: #fff; }
.ui-btn:focus-visible, .ui-foot a:focus-visible, .ui-foot button:focus-visible,
.ui-t a:focus-visible, .ui-more summary:focus-visible {
  outline: 2px solid var(--ui-acc); outline-offset: 2px;
}

/* Contatore notifiche: header.php lo aggiorna da solo (data-cm-badge) */
.ui-n {
  display: inline-block; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--ui-acc); color: #fff;
  font-size: .75rem; font-style: normal; font-weight: 700;
  line-height: 20px; text-align: center;
}

/* -- Sezioni e card ------------------------------------------- */
.ui-sec { margin-bottom: 2.6rem; }
.ui-sec-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem;
}
.ui-sec-h h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--ui-txt); }
.ui-sec-h h2 small { margin-left: .45rem; font-size: .85rem; font-weight: 500; color: var(--ui-txt3); }
.ui-card { background: var(--ui-surf); border: 1px solid var(--ui-line); border-radius: var(--ui-r); }
.ui-help { font-size: .85rem; color: var(--ui-txt3); line-height: 1.5; }

/* -- Avvisi (stato richiesta, pagina pubblica spenta) --------- */
.ui-note {
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: 1.6rem; padding: .9rem 1.1rem;
  border: 1px solid var(--ui-line); border-left: 3px solid var(--ui-txt3);
  border-radius: var(--ui-r-sm); background: var(--ui-surf);
}
.ui-note > i { color: var(--ui-txt2); }
.ui-note p { flex: 1; margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ui-txt2); }
.ui-note p strong { color: var(--ui-txt); }
.ui-note.is-wait { border-left-color: var(--ui-warn); }
.ui-note.is-wait > i { color: var(--ui-warn); }
.ui-note.is-ko { border-left-color: var(--ui-err); }
.ui-note.is-ko > i { color: var(--ui-err); }

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

/* -- La mia lista --------------------------------------------- */
.ui-mia { padding: 1.4rem 1.5rem; }
.ui-mia-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; margin-bottom: 1.1rem;
}
.ui-mia-top p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ui-txt2); }
.ui-mia-top p strong { color: var(--ui-txt); font-weight: 600; }
.ui-lbl { display: block; margin-bottom: .45rem; font-size: .85rem; color: var(--ui-txt2); }
.ui-link { display: flex; gap: .5rem; }
.ui-link input {
  flex: 1; min-width: 0; height: 44px; padding: 0 .9rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt);
  font: inherit; font-size: .92rem;
}
.ui-link .ui-btn { height: 44px; }

/* Card vuota con invito (nessuna lista personale, nessuna lista) */
.ui-empty { display: flex; align-items: center; gap: 1.2rem; padding: 1.5rem; }
.ui-empty > div { flex: 1; }
.ui-empty h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ui-txt); }
.ui-empty p { margin: .25rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--ui-txt2); }

/* -- Righe delle liste ---------------------------------------- */
.ui-rows { overflow: hidden; }
.ui-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 252px;
  align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--ui-line);
}
.ui-row:first-child { border-top: 0; }
.ui-logo {
  width: 44px; height: 44px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ui-r-sm); background: var(--ui-surf2); color: var(--ui-txt3);
}
.ui-logo img { width: 100%; height: 100%; object-fit: cover; }
.ui-t { min-width: 0; }
.ui-t a {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .98rem; font-weight: 600; color: var(--ui-txt); text-decoration: none;
}
.ui-t a:hover { text-decoration: underline; }
.ui-st { display: inline-flex; align-items: center; gap: .4rem; margin-top: .15rem; font-size: .83rem; color: var(--ui-txt2); }
.ui-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-txt3); }
.ui-st.is-ok::before   { background: var(--ui-ok); }
.ui-st.is-wait::before { background: var(--ui-warn); }
.ui-st.is-ko::before   { background: var(--ui-err); }
.ui-st-nota { display: block; margin-top: .2rem; font-size: .83rem; line-height: 1.45; color: var(--ui-err); }
.ui-num {
  display: grid; grid-template-columns: 5.5rem 6.5rem 5.5rem; gap: .6rem;
  font-size: .85rem; color: var(--ui-txt2); white-space: nowrap;
}
.ui-num span { text-align: right; }
.ui-num b { font-weight: 600; color: var(--ui-txt); }
.ui-act { display: flex; justify-content: flex-end; gap: .4rem; }
.ui-act .ui-btn { height: 36px; padding: 0 .8rem; font-size: .85rem; }
.ui-act .ui-btn-ic { width: 36px; padding: 0; }
.ui-inline { display: inline-flex; margin: 0; }

/* -- Riquadro che si apre (richiesta Streamer) ---------------- */
.ui-more { padding: 1.1rem 1.5rem; }
.ui-more summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  list-style: none; cursor: pointer; color: var(--ui-txt);
}
.ui-more summary::-webkit-details-marker { display: none; }
.ui-more summary small { display: block; margin-top: .15rem; font-size: .88rem; line-height: 1.45; color: var(--ui-txt2); }
.ui-more summary > i { color: var(--ui-txt2); transition: transform .2s; }
.ui-more[open] summary > i { transform: rotate(180deg); }
.ui-more .ui-form { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--ui-line); }

/* -- Moduli --------------------------------------------------- */
.ui-form > p { margin: 0 0 1rem; font-size: .9rem; line-height: 1.5; color: var(--ui-txt2); }
.ui-field { margin-bottom: 1rem; }
.ui-field label { display: block; margin-bottom: .4rem; font-size: .88rem; font-weight: 600; color: var(--ui-txt); }
.ui-field label span { font-weight: 400; color: var(--ui-txt3); }
.ui-field input[type="text"], .ui-field textarea {
  width: 100%; padding: .7rem .9rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt);
  font: inherit; font-size: 1rem; line-height: 1.5;
}
.ui-field textarea { resize: vertical; min-height: 84px; }
.ui-field input:focus, .ui-field textarea:focus { outline: none; border-color: var(--ui-acc); }
.ui-check { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1.2rem; font-size: .88rem; line-height: 1.5; color: var(--ui-txt2); cursor: pointer; }
.ui-check input { width: 18px; height: 18px; margin-top: .15rem; flex-shrink: 0; accent-color: var(--ui-acc); }
.ui-check strong { color: var(--ui-txt); }

/* -- Piede: account ------------------------------------------- */
.ui-foot {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  padding-top: 1.4rem; border-top: 1px solid var(--ui-line);
  font-size: .88rem;
}
.ui-foot a, .ui-foot button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--ui-txt2); text-decoration: none;
}
.ui-foot a:hover, .ui-foot button:hover { color: var(--ui-txt); }
.ui-foot .is-ko, .ui-foot .is-ko:hover { color: var(--ui-err); }
.ui-del { margin-top: 1.2rem; padding: 1.3rem 1.5rem; border-color: rgba(248, 112, 112, .35); }

/* -- Finestra di conferma (markup cm-modal di community.css) -- */
.ui-modal .cm-modal-card {
  background: var(--ui-surf); border: 1px solid var(--ui-line2);
  border-radius: var(--ui-r); box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.ui-modal .cm-modal-msg { color: var(--ui-txt); }
.ui-modal .cm-modal-btns { display: flex; justify-content: flex-end; gap: .5rem; }

/* -- iPhone e schermi stretti -------------------------------- */
@media (max-width: 760px) {
  .ui-page { padding-top: calc(68px + 1.4rem); }
  .ui-head { margin-bottom: 1.8rem; }
  .ui-id h1 { font-size: 1.25rem; }
  .ui-quick .ui-btn { width: 40px; padding: 0; }
  .ui-quick .ui-btn span { display: none; }
  .ui-quick .ui-n { position: absolute; top: -6px; right: -6px; }

  .ui-mia { display: flex; flex-direction: column; padding: 1.1rem; }
  .ui-mia-top { display: contents; }
  .ui-mia-top p { margin-bottom: 1rem; }
  .ui-mia-top .ui-btn { order: 3; width: 100%; margin-top: .6rem; }
  .ui-link { flex-direction: column; }
  .ui-link input { flex: none; }
  .ui-link .ui-btn { width: 100%; }

  .ui-sec-h .ui-btn { height: 36px; font-size: .85rem; }
  .ui-row { grid-template-columns: 44px minmax(0, 1fr); gap: .35rem .9rem; padding: 1rem; }
  .ui-num { grid-column: 2; display: flex; gap: 1rem; }
  .ui-num span { text-align: left; }
  .ui-act { grid-column: 1 / -1; justify-content: stretch; margin-top: .6rem; }
  .ui-act .ui-btn, .ui-act .ui-inline { flex: 1; }
  .ui-act .ui-inline .ui-btn { width: 100%; }
  .ui-act .ui-btn-ic { flex: 0 0 36px; }

  .ui-empty { flex-direction: column; align-items: stretch; padding: 1.2rem; }
  .ui-more { padding: 1rem 1.1rem; }
  .ui-note { align-items: flex-start; flex-wrap: wrap; }
  .ui-del { padding: 1.1rem; }
}

/* ============================================================
   MODIFICA LISTA (cm_lista_edit.php)  [AREA-19102026]
   Elenco dei canali con scorrimento proprio, righe sottili che
   si aprono al tocco, barra Salva fissa in fondo allo schermo.
   ============================================================ */

.ui-ed { padding-bottom: calc(9rem + env(safe-area-inset-bottom)); }
.ui-back {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-bottom: .9rem; font-size: .88rem; color: var(--ui-txt2); text-decoration: none;
}
.ui-back:hover { color: var(--ui-txt); }
.ui-ed-top { margin-bottom: 1.8rem; }
.ui-ed-top h1 {
  margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em; color: var(--ui-txt); overflow-wrap: anywhere;
}
.ui-ed-top p { margin: .35rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--ui-txt2); }
.ui-ed-top .ui-st { margin: 0 .35rem 0 0; font-size: .9rem; font-weight: 600; color: var(--ui-txt); }
.ui-ed > .cm-alert { margin-bottom: 1.4rem; }

.ui-ed-card { padding: 1.4rem 1.5rem; margin-bottom: 1.4rem; }
.ui-ed-card h2 { margin: 0 0 1.1rem; font-size: 1.05rem; font-weight: 700; color: var(--ui-txt); }
.ui-ed-card h2 small { margin-left: .45rem; font-size: .85rem; font-weight: 500; color: var(--ui-txt3); }
.ui-ed .ui-field input[type="url"] {
  width: 100%; padding: .7rem .9rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt); font: inherit; font-size: 1rem;
}
.ui-field-last { margin-bottom: 0; }
.ui-count { display: block; margin-top: .25rem; text-align: right; font-size: .8rem; color: var(--ui-txt3); }
.ui-check-sm { margin: 0; align-items: center; font-size: .85rem; }
.ui-check-sm input { width: 16px; height: 16px; margin-top: 0; }

/* -- Dati: logo a sinistra, titolo e descrizione a destra ----- */
.ui-ed-dati { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1.5rem; }
.ui-ed-logo { display: flex; flex-direction: column; gap: .7rem; }
.ui-ed-logo-txt { display: flex; flex-direction: column; gap: .5rem; }
.ui-ed-logo-txt .ui-btn { width: 100%; }
.ui-ed-logo-txt .ui-help { font-size: .78rem; line-height: 1.4; overflow-wrap: anywhere; }
.ui-drop {
  position: relative; width: 132px; height: 132px;
  border: 1px dashed var(--ui-line2); border-radius: var(--ui-r);
  background: var(--ui-surf2); overflow: hidden;
}
.ui-drop.on { border-color: var(--ui-acc); background: rgba(208, 24, 171, .08); }
.ui-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }
.ui-drop-prev { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ui-txt3); font-size: 1.6rem; }
.ui-drop-prev img { width: 100%; height: 100%; object-fit: cover; }
.ui-drop-clear {
  position: absolute; top: 6px; right: 6px; z-index: 2; display: none;
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: rgba(21, 24, 29, .85); color: #fff; cursor: pointer;
}
.ui-drop.has .ui-drop-clear { display: block; }

/* -- Strumenti dei canali: cerca, importa, aggiungi ---------- */
.ui-ed-tools { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.ui-search { position: relative; flex: 1; min-width: 0; }
.ui-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); font-size: .85rem; color: var(--ui-txt3); pointer-events: none; }
.ui-search input {
  width: 100%; height: 40px; padding: 0 .9rem 0 2.3rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt); font: inherit; font-size: .95rem;
}
.ui-search input:focus { outline: none; border-color: var(--ui-acc); }
.ui-import { margin-bottom: .9rem; padding: 1rem; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-bg); }
.ui-import label { display: block; margin-bottom: .5rem; font-size: .88rem; color: var(--ui-txt2); }
.ui-import textarea {
  width: 100%; min-height: 120px; padding: .7rem .9rem; resize: vertical;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-surf); color: var(--ui-txt); font: inherit; font-size: .88rem; line-height: 1.5;
}
.ui-import-btns { display: flex; gap: .5rem; margin-top: .7rem; }

/* -- Elenco dei canali: scorre da solo ------------------------ */
.ui-chlist {
  max-height: 560px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-bg);
}
.ui-chvuoto { margin: .8rem 0 0; font-size: .88rem; color: var(--ui-txt3); }
.ui-ch { border-top: 1px solid var(--ui-line); background: var(--ui-bg); }
.ui-ch:first-child { border-top: 0; }
.ui-ch[hidden] { display: none; }
.ui-ch-hd {
  display: grid; grid-template-columns: 32px 30px 32px minmax(0, 1fr) auto 14px 36px;
  align-items: center; gap: .6rem; min-height: 50px; padding: 0 .5rem 0 .25rem; cursor: pointer;
}
.ui-ch-hd:hover { background: rgba(255, 255, 255, .025); }
.ui-ch-drag {
  width: 32px; height: 40px; border: 0; background: none; color: var(--ui-txt3);
  cursor: grab; touch-action: none; border-radius: 6px;
}
.ui-ch-drag:hover { color: var(--ui-txt); }
.ui-ch-n { font-size: .82rem; color: var(--ui-txt3); text-align: right; font-variant-numeric: tabular-nums; }
.ui-ch-lg { width: 32px; height: 32px; border-radius: 6px; background: var(--ui-surf2) center / contain no-repeat; }
.ui-ch-nm { font-size: .92rem; font-weight: 600; color: var(--ui-txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-ch-nm.is-empty { font-weight: 400; font-style: italic; color: var(--ui-txt3); }
.ui-ch-gr {
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .1rem .5rem; border-radius: 5px; background: var(--ui-surf2);
  font-size: .78rem; color: var(--ui-txt2);
}
.ui-ch-del {
  width: 36px; height: 36px; border: 0; border-radius: 6px;
  background: none; color: var(--ui-txt3); cursor: pointer;
}
.ui-ch-del:hover { color: var(--ui-err); background: rgba(248, 112, 112, .1); }
.ui-ch:not(.is-closed) { background: var(--ui-surf); box-shadow: inset 3px 0 0 var(--ui-acc); }
.ui-ch.is-dragging { opacity: .6; background: var(--ui-surf2); }
.ui-chlist.is-cerca .ui-ch-drag, .ui-chlist.is-cerca .ui-ch-move { visibility: hidden; }

.ui-ch-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem;
  padding: .3rem 1rem 1rem 1.2rem;
}
.ui-ch.is-closed .ui-ch-body { display: none; }
.ui-ch-body label { display: block; font-size: .8rem; font-weight: 600; color: var(--ui-txt2); }
.ui-ch-body input[type="text"], .ui-ch-body input[type="url"] {
  display: block; width: 100%; height: 40px; margin-top: .3rem; padding: 0 .75rem;
  border: 1px solid var(--ui-line2); border-radius: 7px;
  background: var(--ui-bg); color: var(--ui-txt); font: inherit; font-size: .92rem; font-weight: 400;
}
.ui-ch-body input:focus { outline: none; border-color: var(--ui-acc); }
.ui-ch-body input.is-bad, .ui-ed input.is-bad, .ui-ed textarea.is-bad { border-color: var(--ui-err); box-shadow: 0 0 0 3px rgba(248, 112, 112, .18); }
.ui-ch-full { grid-column: 1 / -1; }
.ui-ch-logo { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.ui-ch-logo input[type="url"] { margin-top: 0; flex: 1; min-width: 0; }
.ui-ch-logo .ui-btn-ic { width: 40px; height: 40px; flex-shrink: 0; }
.ui-ch-logo-prev { width: 40px; height: 40px; flex-shrink: 0; border-radius: 7px; background: var(--ui-surf2) center / contain no-repeat; }
.ui-ch-logo-btn.has, .ui-ch-logo-btn.has i { color: var(--ui-ok); }
.ui-ch-logo-clear { display: none; }
.ui-ch-logo-clear.show { display: inline-flex; }
.ui-ch-btns { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: .5rem; }
.ui-ch-move { display: flex; gap: .4rem; }

.ui-ed-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: .8rem; font-size: .84rem; line-height: 1.45; color: var(--ui-txt3);
}
.ui-legend { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }

/* Pallino della guida TV: verde = ID impostato o trovato,
   giallo = proposta, rosso = ID che la guida non conosce */
.ui-ed .cm-epg-dot, .ui-modal .cm-epg-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: transparent; box-shadow: none; vertical-align: middle;
}
.ui-ed .cm-epg-dot.is-ok, .ui-ed .cm-epg-dot.is-set, .ui-modal .cm-epg-dot.is-ok { background: var(--ui-ok); }
.ui-ed .cm-epg-dot.is-err, .ui-modal .cm-epg-dot.is-err   { background: var(--ui-err); }
.ui-ed .cm-epg-dot.is-prop, .ui-modal .cm-epg-dot.is-prop { background: var(--ui-warn); }
.ui-ed .cm-epg-dot.is-none { background: var(--ui-txt3); }

/* -- Guida TV: interruttore ----------------------------------- */
.ui-switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
.ui-switch strong { display: block; font-size: 1.05rem; color: var(--ui-txt); }
.ui-switch small { display: block; margin-top: .2rem; font-size: .88rem; line-height: 1.45; color: var(--ui-txt2); }
.ui-switch input {
  -webkit-appearance: none; appearance: none; flex-shrink: 0;
  position: relative; width: 46px; height: 26px; margin: 0;
  border-radius: 13px; background: var(--ui-surf2); border: 1px solid var(--ui-line2);
  cursor: pointer; transition: background .15s;
}
.ui-switch input::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--ui-txt2);
  transition: transform .15s, background .15s;
}
.ui-switch input:checked { background: var(--ui-acc); border-color: var(--ui-acc); }
.ui-switch input:checked::after { transform: translateX(20px); background: #fff; }
.ui-switch input:focus-visible { outline: 2px solid var(--ui-acc); outline-offset: 2px; }
.ui-epg-box { margin-top: 1rem; }
.ui-epg-row { display: flex; gap: .5rem; margin-bottom: .5rem; }
.ui-epg-row input {
  flex: 1; min-width: 0; height: 42px; padding: 0 .9rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt); font: inherit; font-size: .92rem;
}
.ui-epg-row input:focus { outline: none; border-color: var(--ui-acc); }
.ui-epg-row .ui-btn { height: 42px; }
.ui-epg-esito { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .8rem; }
.ui-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem; border-radius: 6px; background: var(--ui-surf2);
  font-size: .82rem; color: var(--ui-txt2);
}
.ui-pill.is-ok   { color: var(--ui-ok); }
.ui-pill.is-warn { color: var(--ui-warn); }
.ui-pill.is-err  { color: var(--ui-err); }
.ui-pill.is-info { color: var(--ui-txt); }

/* -- Link della lista: sotto-blocchi -------------------------- */
.ui-sub { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--ui-line); }
.ui-sub h3 { margin: 0 0 .35rem; font-size: .95rem; font-weight: 700; color: var(--ui-txt); }
.ui-sub > p { margin: 0 0 .8rem; font-size: .88rem; line-height: 1.5; color: var(--ui-txt2); }
.ui-sub > p strong { color: var(--ui-txt); font-weight: 600; }
.ui-sub .ui-link { margin-bottom: .6rem; }
.ui-bar { height: 6px; margin: .3rem 0 .6rem; border-radius: 3px; background: var(--ui-surf2); overflow: hidden; }
.ui-bar b { display: block; height: 100%; min-width: 2%; border-radius: 3px; background: var(--ui-acc); }
.ui-vform {
  display: flex; align-items: center; margin-bottom: .6rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm); background: var(--ui-bg); overflow: hidden;
}
.ui-vpre, .ui-vsuf { padding: 0 .7rem; font-size: .85rem; color: var(--ui-txt3); white-space: nowrap; }
.ui-vpre { padding-right: 0; }
.ui-vinput {
  flex: 1; min-width: 60px; height: 42px; padding: 0 .3rem;
  border: 0; background: none; color: var(--ui-txt); font: inherit; font-size: .95rem;
}
.ui-vinput:focus { outline: none; }
.ui-vform:focus-within { border-color: var(--ui-acc); }
.ui-vbtns { display: flex; gap: .5rem; flex-wrap: wrap; }
.ui-test-out { margin-top: .9rem; }
.ui-test-out .ui-link { margin-bottom: .4rem; }
.ui-test-out .ui-help { margin: 0; }
.ui-help-ko { color: var(--ui-err); }
.ui-ed-azioni { display: flex; flex-wrap: wrap; gap: .6rem; }

/* -- Barra Salva fissa in fondo -------------------------------- */
.ui-savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  padding: .75rem clamp(1.25rem, 4vw, 2.5rem) calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(21, 24, 29, .97); border-top: 1px solid var(--ui-line2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ui-savebar-in { max-width: calc(1200px - 5rem); margin: 0 auto; display: flex; align-items: center; gap: .6rem; }
.ui-savebar-in p { flex: 1; margin: 0; font-size: .88rem; line-height: 1.4; color: var(--ui-txt2); }
.ui-savebar-in .ui-btn { height: 42px; }
/* Chat e "torna su" salgono sopra la barra */
body.ui-has-savebar .cm-chfab { bottom: calc(80px + env(safe-area-inset-bottom)); }
body.ui-has-savebar #gotop    { bottom: calc(150px + env(safe-area-inset-bottom)); }

/* -- Finestra larga: abbinamento della guida TV --------------- */
.ui-modal-wide .cm-modal-card {
  display: flex; flex-direction: column; max-width: 760px; max-height: 86vh;
  padding: 0; text-align: left; overflow: hidden;
}
.ui-em-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem .8rem; }
.ui-em-head h3 { margin: 0; font-size: 1.1rem; color: var(--ui-txt); }
.ui-em-head p { margin: .3rem 0 0; font-size: .85rem; color: var(--ui-txt2); }
.ui-em-head p .is-ok { color: var(--ui-ok); }
.ui-em-head p .is-warn { color: var(--ui-warn); }
.ui-em-head p .is-err { color: var(--ui-err); }
.ui-em-tools {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1.4rem; border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line);
}
.ui-em-legend { display: flex; gap: .9rem; font-size: .8rem; color: var(--ui-txt2); }
.ui-em-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.ui-em-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .3rem 0; }
.ui-em-it {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center; gap: .8rem; padding: .55rem 1.4rem; border-bottom: 1px solid var(--ui-line);
}
.ui-em-it:last-child { border-bottom: 0; }
.ui-em-ck { text-align: center; }
.ui-em-ck input { width: 18px; height: 18px; accent-color: var(--ui-acc); }
.ui-em-it.is-ok .ui-em-ck i { color: var(--ui-ok); }
.ui-em-nm b { display: block; font-size: .9rem; color: var(--ui-txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-em-nm span { font-size: .78rem; color: var(--ui-txt3); }
.ui-em-as select, .ui-em-as input {
  width: 100%; height: 38px; padding: 0 .6rem;
  border: 1px solid var(--ui-line2); border-radius: 7px;
  background: var(--ui-bg); color: var(--ui-txt); font: inherit; font-size: .88rem;
}
.ui-em-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.4rem; border-top: 1px solid var(--ui-line);
}
.ui-em-foot p { flex: 1; min-width: 200px; margin: 0; font-size: .8rem; line-height: 1.45; color: var(--ui-txt3); }
.ui-em-foot div { display: flex; gap: .5rem; }

@media (max-width: 760px) {
  .ui-ed-top h1 { font-size: 1.3rem; }
  .ui-ed-card { padding: 1.1rem; }
  .ui-ed-dati { grid-template-columns: 1fr; gap: 1.1rem; }
  .ui-ed-logo { flex-direction: row; align-items: center; gap: 1rem; }
  .ui-drop { width: 84px; height: 84px; flex-shrink: 0; }
  .ui-ed-logo-txt { flex: 1; min-width: 0; }
  .ui-ed-logo-txt .ui-btn { width: auto; align-self: flex-start; }
  .ui-ed-tools { flex-wrap: wrap; }
  .ui-search { flex: 1 1 100%; }
  .ui-ed-tools .ui-btn { flex: 1; }
  .ui-chlist { max-height: 62vh; }
  .ui-ch-hd { grid-template-columns: 28px 24px 30px minmax(0, 1fr) 12px 36px; gap: .45rem; min-height: 52px; }
  .ui-ch-gr { display: none; }
  .ui-ch-body { grid-template-columns: 1fr; padding: .3rem .8rem .9rem 1rem; }
  .ui-ch-body input[type="text"], .ui-ch-body input[type="url"] { font-size: 1rem; }
  .ui-ed-foot { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .ui-epg-row { flex-direction: column; }
  .ui-epg-row .ui-btn { width: 100%; }
  .ui-vpre { display: none; }
  .ui-vsuf { padding-left: .2rem; }
  .ui-vinput { padding-left: .8rem; }
  .ui-ed-azioni .ui-inline, .ui-ed-azioni .ui-btn { width: 100%; }
  .ui-savebar-in p { display: none; }
  .ui-savebar-in .ui-btn { flex: 1; }
  body.ui-has-savebar .cm-chfab { bottom: calc(74px + env(safe-area-inset-bottom)); width: 48px; height: 48px; font-size: 1.1rem; }
  body.ui-has-savebar #gotop    { bottom: calc(132px + env(safe-area-inset-bottom)); right: 1.05rem; }
  .ui-modal-wide .cm-modal-card { max-height: 92vh; }
  .ui-em-it { grid-template-columns: 24px minmax(0, 1fr); padding: .6rem 1rem; }
  .ui-em-as { grid-column: 2; }
  .ui-em-head, .ui-em-tools, .ui-em-foot { padding-left: 1rem; padding-right: 1rem; }
  .ui-em-legend { display: none; }
}

/* ============================================================
   PROFILO (cm_profilo.php)  [AREA-19102026]
   Stessa larghezza delle altre pagine. Ogni riquadro: a
   sinistra titolo e spiegazione, a destra i campi.
   ============================================================ */

.ui-set {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem;
  margin-bottom: 1.4rem; padding: 1.6rem;
}
.ui-set-h h2 { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 700; color: var(--ui-txt); }
.ui-set-h p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ui-txt2); }
.ui-set-h p strong { color: var(--ui-txt); font-weight: 600; }
.ui-set-h a, .ui-set-b a:not(.ui-btn), .ui-switch small a { color: var(--ui-txt); text-decoration: underline; text-underline-offset: 2px; }
.ui-set-b { min-width: 0; }
.ui-set-ft { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.ui-set-txt { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ui-txt2); }
.ui-set-nota { margin: .7rem 0 0; }
.ui-set-nota i { margin-right: .3rem; }
.ui-set .ui-switch { margin-bottom: .2rem; }
.ui-set .ui-switch strong { font-size: .95rem; }
.ui-switch input:disabled { opacity: .55; cursor: not-allowed; }
.ui-switch:has(input:disabled) { cursor: default; }

.ui-set .ui-field input[type="text"],
.ui-set .ui-field input[type="url"],
.ui-set .ui-field input[type="password"] {
  width: 100%; height: 44px; padding: 0 .9rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt); font: inherit; font-size: 1rem;
}
.ui-set .ui-field input:focus { outline: none; border-color: var(--ui-acc); }
.ui-set .ui-field label i { margin-right: .2rem; color: var(--ui-txt3); }
.ui-set .ui-field small.ui-help { display: block; margin-top: .3rem; font-size: .78rem; }
.ui-set .ui-field:last-child { margin-bottom: 0; }

/* Campo file nascosto: si apre dal pulsante con for="..." */
.ui-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

/* Foto profilo */
.ui-av-row { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.2rem; }
.ui-av-lg { width: 80px; height: 80px; }
.ui-av-acts { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.ui-av-acts .ui-help { font-size: .8rem; }

/* Copertina della pagina pubblica */
.ui-field-cop { margin-top: 1.3rem; }
.ui-cop {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 5; width: 100%; margin-bottom: .7rem;
  border: 1px dashed var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-surf2) center / cover no-repeat;
  font-size: .88rem; color: var(--ui-txt3);
}
.ui-cop span i { margin-right: .35rem; }
.ui-cop[style] { border-style: solid; border-color: var(--ui-line); }
.ui-cop-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.ui-cop-acts .ui-help { flex-basis: 100%; font-size: .8rem; }
/* .ui-field label e' un blocco in grassetto: la casella torna riga normale */
.ui-field .ui-check { display: flex; margin-bottom: 0; font-weight: 400; color: var(--ui-txt2); }

/* Due campi affiancati (link social, nuova password) */
.ui-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; margin-top: 1.2rem; }
.ui-grid2 .ui-field { margin-bottom: 1rem; }
.ui-grid2 .ui-field:last-child { margin-bottom: 1rem; }
.ui-set-b > .ui-field + .ui-grid2 { margin-top: 0; }

/* Dati anagrafici: elenco in due colonne */
.ui-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.5rem; margin: 0; }
.ui-dl dt { margin-bottom: .15rem; font-size: .8rem; color: var(--ui-txt3); }
.ui-dl dd { margin: 0; font-size: .95rem; color: var(--ui-txt); overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .ui-set { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.1rem; }
  .ui-grid2, .ui-dl { grid-template-columns: 1fr; }
  .ui-cop { aspect-ratio: 16 / 7; }
  .ui-set-ft .ui-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-btn, .ui-more summary > i, .ui-switch input, .ui-switch input::after { transition: none; }
}

/* ============================================================
   NOTIFICHE (cm_notifiche.php)  [NOTIFICHE-19102026]
   Due blocchi: Nuove e Gia' viste. Ogni riga ha avatar, testo
   e due pulsanti: Rispondi (dove si puo') e Vai a..., che porta
   al punto preciso. La risposta si scrive dentro la riga, senza
   cambiare pagina. Nessun colore nuovo: verde e rosso solo per
   l'esito dell'invio.
   ============================================================ */

.ui-nt-sec { margin: 2rem 0 .7rem; font-size: 1rem; font-weight: 700; color: var(--ui-txt); }
.ui-nt-sec small { margin-left: .4rem; font-size: .85rem; font-weight: 500; color: var(--ui-txt3); }
.ui-ed-top + .ui-nt-sec { margin-top: 0; }
.ui-nt-box { overflow: hidden; }

/* Riga: avatar | testo | pulsanti. Il riquadro di risposta e
   l'esito vanno sotto, sulla seconda riga della griglia. */
.ui-nt {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center; gap: .2rem 1rem;
  padding: .95rem 1.25rem;
  border-top: 1px solid var(--ui-line);
}
.ui-nt:first-child { border-top: 0; }
.ui-nt.is-open { background: var(--ui-surf2); }
.ui-nt-av {
  align-self: start; width: 40px; height: 40px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--ui-line2); background: var(--ui-surf2);
}
.ui-nt-tx { min-width: 0; }
.ui-nt-tt { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ui-txt2); overflow-wrap: anywhere; }
.ui-nt-tt strong { font-weight: 600; color: var(--ui-txt); }

/* Estratto: due righe e poi i puntini; per intero quando si risponde */
.ui-nt-ex {
  margin: .2rem 0 0; font-size: .88rem; line-height: 1.45; color: var(--ui-txt3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.ui-nt.is-open .ui-nt-ex { display: block; white-space: pre-line; color: var(--ui-txt2); }
.ui-nt-mt { margin: .3rem 0 0; font-size: .8rem; color: var(--ui-txt3); }

.ui-nt-act { display: flex; justify-content: flex-end; gap: .4rem; white-space: nowrap; }
.ui-nt-act .fa-chevron-right { font-size: .7rem; color: var(--ui-txt3); }
.ui-nt-off { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ui-txt3); }

/* Riquadro di risposta */
.ui-nt-form { grid-column: 2 / -1; margin-top: .7rem; }
.ui-nt-form textarea {
  display: block; width: 100%; min-height: 84px; padding: .7rem .9rem; resize: vertical;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-bg); color: var(--ui-txt);
  font: inherit; font-size: 1rem; line-height: 1.5;
}
.ui-nt-form textarea:focus { outline: none; border-color: var(--ui-acc); }
.ui-nt-fb { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.ui-nt-fb .ui-count { flex: 1; margin: 0; text-align: left; }
.ui-nt-fb .ui-count b { font-weight: 600; color: var(--ui-txt2); }
.ui-nt-err { margin: .45rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--ui-err); }
.ui-nt-ok { grid-column: 2 / -1; margin: .5rem 0 0; font-size: .88rem; color: var(--ui-ok); }
.ui-nt-ok i { margin-right: .3rem; }

/* Pagine: piu' recenti / piu' vecchie */
.ui-nt-pag {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem; margin-top: 1.6rem;
}
.ui-nt-pag > span { font-size: .88rem; color: var(--ui-txt2); text-align: center; }
.ui-nt-pag .ui-nt-prev { justify-self: start; }
.ui-nt-pag .ui-nt-next { justify-self: end; }
.ui-nt-pag .ui-nt-prev i, .ui-nt-pag .ui-nt-next i { font-size: .7rem; }

@media (max-width: 760px) {
  .ui-nt { grid-template-columns: 40px minmax(0, 1fr); gap: .3rem .85rem; padding: .9rem 1rem; }
  .ui-nt-act { grid-column: 2; justify-content: flex-start; margin-top: .5rem; }
  .ui-nt-act .ui-btn { flex: 1; }
  .ui-nt-form, .ui-nt-ok { grid-column: 1 / -1; }
  .ui-nt-pag { gap: .5rem; }
  .ui-nt-pag .ui-btn span { display: none; }
}

/* ============================================================
   EDITOR: CANALE SEGNALATO  [NOTIFICHE-19102026]
   La notifica "Vai al canale" apre cm_lista_edit.php sul canale
   segnalato: un lampo giallo (stato di avviso) per qualche
   secondo, poi la riga torna come le altre.
   ============================================================ */

.ui-ch.is-evidenza { animation: ui-evid 3s ease-out 1; }
@keyframes ui-evid {
  0%, 50% { background-color: rgba(240, 180, 41, .14); box-shadow: inset 3px 0 0 var(--ui-warn); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-ch.is-evidenza { animation: none; box-shadow: inset 3px 0 0 var(--ui-warn); }
}

/* ============================================================
   EDITOR: GUIDE TV MULTIPLE  [EPGMULTI-21102026]
   Scheda Guida TV di cm_lista_edit.php con piu' guide
   (bozza-guide-editor.png): copertura della lista, le tue guide
   numerate, guide consigliate, nota sul link unico. Nella finestra
   degli abbinamenti il numero della guida accanto a ogni ID
   (bozza-guide-abbinamenti.png). Solo colori gia' usati qui sopra:
   superfici, linee, verde, giallo e rosso degli stati.
   ============================================================ */

/* Copertura: numero, barra verde, pillole, Rivedi abbinamenti.
   Sul computer il pulsante sta in alto a destra, sul telefono in
   fondo e largo quanto il riquadro. */
.ui-eg-cov {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem;
  margin-bottom: 1.4rem; padding: 1rem 1.1rem;
  border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-bg);
}
.ui-eg-cov[hidden] { display: none; }
.ui-eg-cov > p { grid-column: 1; grid-row: 1; margin: 0; font-size: .92rem; color: var(--ui-txt2); }
.ui-eg-cov > p b { margin-right: .3rem; font-size: 1.45rem; font-weight: 700; line-height: 1; color: var(--ui-txt); }
.ui-eg-cov > .ui-btn { grid-column: 2; grid-row: 1; }
.ui-eg-bar { grid-column: 1 / -1; grid-row: 2; margin: .75rem 0 .7rem; }
.ui-eg-bar b { min-width: 0; background: var(--ui-ok); }
.ui-eg-pills { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: .45rem; }

/* Titoli e spiegazioni delle due parti */
.ui-eg-h { margin: 0; font-size: .95rem; font-weight: 700; color: var(--ui-txt); }
.ui-eg-h small { margin-left: .4rem; font-size: .8rem; font-weight: 500; color: var(--ui-txt3); }
.ui-eg-p { margin: .25rem 0 .75rem; font-size: .86rem; line-height: 1.5; color: var(--ui-txt2); }

/* Elenco delle guide: le tue e le consigliate */
.ui-eg-list {
  margin-bottom: .75rem;
  border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-bg);
}
.ui-eg-list[hidden] { display: none; }
.ui-eg-it {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center; gap: .75rem; min-height: 52px; padding: .5rem .75rem .5rem .9rem;
  border-bottom: 1px solid var(--ui-line);
}
.ui-eg-it:last-child { border-bottom: 0; }
.ui-eg-n {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%; background: var(--ui-surf2);
  font-size: .78rem; font-weight: 700; color: var(--ui-txt);
}
.ui-eg-ic { text-align: center; font-size: .9rem; color: var(--ui-txt3); }
.ui-eg-tx { min-width: 0; }
.ui-eg-tx b {
  display: block; font-size: .92rem; font-weight: 600; color: var(--ui-txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-eg-f {
  display: block; margin-top: .1rem; font-size: .8rem; color: var(--ui-txt3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-eg-m { display: none; }
.ui-eg-ch {
  padding: .2rem .55rem; border-radius: 6px; background: var(--ui-surf2);
  font-size: .8rem; color: var(--ui-txt2); white-space: nowrap;
}
.ui-eg-it.is-err .ui-eg-ch, .ui-eg-it.is-err .ui-eg-m { color: var(--ui-err); }
.ui-eg-x { width: 34px; }
.ui-eg-plus { font-size: .8rem; color: var(--ui-txt3); white-space: nowrap; }
.ui-eg-plus b { font-size: .9rem; color: var(--ui-txt); }

/* Campo del link, messaggi, consigliate, nota finale */
.ui-eg .ui-eg-add { margin-bottom: 0; }
.ui-eg-msg { margin: .55rem 0 0; }
.ui-eg-msg i { margin-right: .35rem; }
.ui-eg-msg.is-ok { color: var(--ui-ok); }
.ui-eg-sug { margin-top: 1.4rem; }
.ui-eg-sug .ui-eg-list { margin-bottom: 0; }
.ui-eg-nota {
  display: flex; gap: .55rem; margin: 1.3rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--ui-line);
  font-size: .82rem; line-height: 1.55; color: var(--ui-txt3);
}
.ui-eg-nota i { margin-top: .22rem; }
.ui-eg-nota strong { font-weight: 600; color: var(--ui-txt2); }

/* Finestra degli abbinamenti: numero della guida accanto all'ID */
.ui-em-g { display: flex; align-items: center; gap: .55rem; }
.ui-em-g > select, .ui-em-g > input { flex: 1; min-width: 0; }
.ui-em-g .ui-pill {
  flex: 1; min-width: 0; height: 38px; padding: 0 .7rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-em-g .ui-eg-n { width: 24px; height: 24px; font-size: .74rem; }

@media (max-width: 760px) {
  .ui-eg-cov { grid-template-columns: minmax(0, 1fr); }
  .ui-eg-cov > .ui-btn { grid-column: 1; grid-row: 4; width: 100%; margin-top: .85rem; }
  .ui-eg-it { grid-template-columns: 26px minmax(0, 1fr) auto; gap: .65rem; padding: .55rem .6rem .55rem .75rem; }
  .ui-eg-ch, .ui-eg-plus { display: none; }
  .ui-eg-m { display: inline; }
  /* Il campo resta alto 44px anche con l'elenco in colonna. 16px:
     sotto questa misura iPhone ingrandisce la pagina al tocco. */
  .ui-eg .ui-epg-row input { flex: none; height: 44px; font-size: 1rem; }
  .ui-eg .ui-epg-row .ui-btn { height: 44px; }
  .ui-em-as select, .ui-em-as input { font-size: 1rem; }
}

/* ============================================================
   [AREA-22102026] Immagine nel riquadro "La mia lista"
   (bozza-area-mialista.png). La foto della parete di schermi che il
   sito usa gia' (assets/img/community.jpg): a sinistra su computer,
   in alto su iPhone, sfumata nel colore della card. Solo colori
   gia' presenti. Le regole valgono solo per la card con la classe
   ui-mia-f: senza la nuova cm_area.php la pagina resta com'e'.
   ============================================================ */
.ui-mia-img { position: relative; display: block; overflow: hidden; }
.ui-mia-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-mia-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 45%, var(--ui-surf));
}

@media (min-width: 761px) {
  /* Foto nella prima colonna, alta quanto la card; testo, pulsante e
     link nella seconda, come prima. */
  .ui-mia-f { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 1.5rem; overflow: hidden; }
  .ui-mia-f > * { grid-column: 2; }
  .ui-mia-f > .ui-mia-img { grid-column: 1; grid-row: 1 / span 3; margin: -1.4rem 0 -1.4rem -1.5rem; }
}
@media (max-width: 760px) {
  /* Foto in alto, larga quanto la card. */
  .ui-mia-f { overflow: hidden; }
  .ui-mia-f > .ui-mia-img { flex: none; height: 120px; margin: -1.1rem -1.1rem 1rem; }
  .ui-mia-img::after { background: linear-gradient(180deg, transparent 40%, var(--ui-surf)); }
}

/* ============================================================
   [NOVITA-23102026] Pagina "Novita' per te" (cm_novita.php,
   bozze bozza-novita-computer.png e bozza-novita-iphone.png).
   Righe delle liste come quelle dell'area riservata, canali come
   il catalogo di La mia lista: su computer in due colonne. Solo
   colori gia' presenti: verde per i numeri delle novita', magenta
   per "Aggiunto".
   ============================================================ */
.ui-nv-sum { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.ui-nv-sum span {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 30px; padding: .2rem .75rem;
  border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-surf);
  font-size: .84rem; line-height: 1.3; color: var(--ui-txt2);
}
.ui-nv-sum b { font-weight: 600; color: var(--ui-txt); }

/* Liste degli streamer seguiti */
.ui-nv-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center; gap: 1rem;
  padding: .85rem 1.25rem; border-top: 1px solid var(--ui-line);
}
.ui-nv-row:first-child { border-top: 0; }
.ui-nv-sub { display: block; margin-top: .15rem; font-size: .83rem; line-height: 1.4; color: var(--ui-txt2); }
.ui-nv-new { font-size: .85rem; color: var(--ui-txt2); white-space: nowrap; }
.ui-nv-new b { font-weight: 600; color: var(--ui-ok); }

/* Canali nuovi */
.ui-nv-msg { margin: -.3rem 0 .8rem; font-size: .88rem; line-height: 1.45; color: var(--ui-ok); }
.ui-nv-msg.is-ko { color: var(--ui-err); }
.ui-nv-msg[hidden] { display: none; }
.ui-nv-ch {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none; overflow: hidden;
}
.ui-nv-c {
  display: flex; align-items: center; gap: .7rem; min-width: 0;
  padding: .65rem 1rem; border-top: 1px solid var(--ui-line);
}
.ui-nv-c[hidden] { display: none; }
.ui-nv-c:nth-child(-n+2) { border-top: 0; }
.ui-nv-c:nth-child(odd) { border-right: 1px solid var(--ui-line); }
.ui-nv-lg {
  width: 40px; height: 40px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--ui-surf2);
}
.ui-nv-lg img { width: 100%; height: 100%; object-fit: contain; }
.ui-nv-lg i { font-size: .85rem; color: var(--ui-txt3); }
.ui-nv-b { flex: 1; min-width: 0; }
.ui-nv-n {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .93rem; font-weight: 600; line-height: 1.3; color: var(--ui-txt);
}
.ui-nv-s {
  display: flex; align-items: center; gap: .45rem; min-width: 0; margin-top: .15rem;
  font-size: .78rem; line-height: 1.3; color: var(--ui-txt3);
}
.ui-nv-s em {
  flex-shrink: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .05rem .45rem; border-radius: 5px; background: var(--ui-surf2);
  font-size: .74rem; font-style: normal; font-weight: 500; color: var(--ui-txt2);
}
.ui-nv-s span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-nv-add {
  height: 34px; flex-shrink: 0; padding: 0 .75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--ui-line2); border-radius: var(--ui-r-sm);
  background: var(--ui-surf); color: var(--ui-txt);
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ui-nv-add:hover { background: var(--ui-surf2); }
.ui-nv-add:disabled { cursor: default; }
.ui-nv-add.is-in, .ui-nv-add.is-in:hover { border-color: var(--ui-acc); background: var(--ui-acc); color: #fff; }
.ui-nv-add:focus-visible { outline: 2px solid var(--ui-acc); outline-offset: 2px; }
.ui-nv-more { display: flex; justify-content: center; margin-top: .9rem; }
.ui-nv-more[hidden] { display: none; }

@media (max-width: 760px) {
  .ui-nv-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: .2rem .8rem; padding: .85rem 1rem; }
  .ui-nv-row .ui-logo { grid-row: 1 / span 2; }
  .ui-nv-row .ui-nv-new { grid-column: 2; grid-row: 2; }
  .ui-nv-row .ui-btn { grid-column: 3; grid-row: 1 / span 2; }
  .ui-nv-ch { grid-template-columns: minmax(0, 1fr); }
  .ui-nv-c:nth-child(2) { border-top: 1px solid var(--ui-line); }
  .ui-nv-c:nth-child(odd) { border-right: 0; }
  .ui-nv-add { width: 36px; padding: 0; }
  .ui-nv-add span { display: none; }

  /* Area riservata: con quattro pulsanti il saluto si stringeva
     troppo. La riga dei pulsanti va sotto il saluto, larga quanto
     la pagina. Solo con la classe ui-head-row: senza la nuova
     cm_area.php l'area resta com'e'. */
  .ui-head.ui-head-row { flex-wrap: wrap; }
  .ui-head-row .ui-quick {
    width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  }
  .ui-head-row .ui-quick .ui-btn { width: auto; }
}